CSS学习记录16

CSS计数器

CSS计数器是由CSS保持的”变量“，其值可以通过CSS规则递增（以跟踪其利用次数）。计数器使您可以根据内容在文档中的位置来调整其表面。

带计数器的自动编号
CSS计数器就像”变量“。变量值可以通过CSS规则递增(将跟踪它们的利用次数）。
如需利用CSS计数器，我们将利用以部属性：

• counter-reset -创建或重置计数器
  
• counter-increment - 递增计数器值
  
• content - 插入生成的内容
  
• counter() 或 counters() 函数 - 将计数器的值添加到元素
  

如需利用CSS计数器，必须首先利用counter-reset 创建它。
下面的例子为页面(在body选择器中) 创建一个计数器，然后为每个<h2>元素增加计数器值，并在每个<h2>元素的开头添加"Section<value of the counter>:":

1. body {
2.   counter-reset: section;
3. }
5. h2::before {
6.   counter-increment: section;
7.   content: "Section " counter(section) ": ";
8. }

复制代码

嵌套计数器
下面的例子为页面（section)创建一个计数器，为每个<h1>元素(subsection)创建一个计数器。
"section"计数器为每个<h1>元素计数，同时写入“Section"以及section计数器的值，”subsection"计数器为每个<h2>元素计数，同时写入section计数器的值以及subsection计数器的值：

1. body {
2.   counter-reset: section;
3. }
5. h1 {
6.   counter-reset: subsection;
7. }
9. h1::before {
10.   counter-increment: section;
11.   content: "Section " counter(section) ". ";
12. }
14. h2::before {
15.   counter-increment: subsection;
16.   content: counter(section) "." counter(subsection) " ";
17. }

复制代码

计数器对于创建概述列表也很有用，因为在子元素中会自动创建一个计数器的新实例。在这里，我们利用counters()函数在不同级别的嵌套计数器之间插入一个字符串：

1. ol {
2.   counter-reset: section;
3.   list-style-type: none;
4. }
6. li::before {
7.   counter-increment: section;
8.   content: counters(section,".") " ";
9. }

复制代码

CSS计数器属性 
属性形貌content与 ::before 和 ::after 伪元素一同利用，来插入生成的内容。counter-increment递增一个或多个计数器值。counter-reset创建或重置一个或多个计数器。
CSS网站布局

网站布局
网站通常分为页眉、菜单、内容和页脚：

页眉
页眉（header）通常位于网站顶部（或顶部导航菜单的正下方）。它通常包罗logo或网站名称：

1. header {
2.   background-color: #F1F1F1;
3.   text-align: center;
4.   padding: 20px;
5. }

复制代码

导航栏
导航栏包罗链接列表，以资助访问者欣赏您的网站：

1. /* navbar 容器 */
2. .topnav {
3.   overflow: hidden;
4.   background-color: #333;
5. }
7. /* Navbar 链接 */
8. .topnav a {
9.   float: left;
10.   display: block;
11.   color: #f2f2f2;
12.   text-align: center;
13.   padding: 14px 16px;
14.   text-decoration: none;
15. }
17. /* 链接 - 悬停时改变颜色 */
18. .topnav a:hover {
19.   background-color: #ddd;
20.   color: black;
21. }

复制代码

内容 
利用哪种布局通常取决于您的目标用户。最常见的布局是以下布局之一（或将它们组合在一起）：

• 1-列布局（通常用于移动欣赏器）
  
• 2-列布局（通常用于平板电脑和条记本电脑）
  
• 3-列布局（仅用于台式机）
  

这里枚举了3-列布局，并在较小的屏幕上更改为1列布局：

1. /* 创建三个相等的列，它们彼此相邻浮动 */
2. .column {
3.   float: left;
4.   width: 33.33%;
5. }
7. /* 在列后清除浮动 */
8. .row:after {
9.   content: "";
10.   display: table;
11.   clear: both;
12. }
14. /* 响应式布局 - 使三列堆叠，而不是在较小的屏幕（宽度为 600 像素或更小）上并排 */
15. @media screen and (max-width: 600px) {
16.   .column {
17.     width: 100%;
18.   }
19. }

复制代码

提示：如需创建2列布局，请将宽度更改为50%。如需创建4列布局，请利用25%。

不相等的栏
主要内容（main content）是您网站上最大、最重要的部分。列宽不相等的情况非常常见，因为大部分空间都为主内容保存。附属内容（如果有）通常用作替代导航或与指定与主要内容有关的信息。您可以随意更改宽度，只要记住它的总和应为100%：

1. .column {
2.   float: left;
3. }
5. /* 左和右列 */
6. .column.side {
7.   width: 25%;
8. }
10. /* Middle column */
11. .column.middle {
12.   width: 50%;
13. }
15. /* 响应式布局 - 使三列堆叠，而不是并排 */
16. @media screen and (max-width: 600px) {
17.   .column.side, .column.middle {
18.     width: 100%;
19.   }
20. }

复制代码

页脚
页脚位于页面底部。它通常包罗版权和联系方式之类的信息：

1. .footer {
2.   background-color: #F1F1F1;
3.   text-align: center;
4.   padding: 10px;
5. }

复制代码

CSS单元

CSS有几种表示长度的不同单元。许多CSS属性担当“长度”值，例如width、margin、padding、font-size等。长度是一个后面跟着长度单元的数字，例如10px、2em等。
利用px（像素）可以设置不同的长度值：
数字和单元之间不能出现空格，但是，如果值为0，则可以省略单元。对于某些CSS属性，答应利用负的长度。长度单元有两种范例：绝对单元和相对单元。

1. h1 {
2.   font-size: 60px;
3. }
5. p {
6.   font-size: 25px;
7.   line-height: 50px;
8. }

复制代码

绝对长度
绝对长度单元是固定的，用任何一个绝对长度表示的长度都恰恰表现为这个尺寸。
单元形貌cm厘米mm毫米in英寸 (1in = 96px = 2.54cm)px *像素 (1px = 1/96th of 1in)pt点 (1pt = 1/72 of 1in)pc派卡 (1pc = 12 pt)  *像素（px）是相对于观看装备的。对于低dpi的装备，1px是表现器的一个装备像素（点）。对于打印机和高分辨率屏幕，1px表示多个装备像素。

相对长度
相对长度单元规定相对于另一个长度属性的长度。相对长度单元在不同渲染介质之间缩放表现得更好。
单元形貌em相对于元素的字体巨细（font-size）（2em 表示当前字体巨细的 2 倍）ex相对于当前字体的 x-height(极少利用)ch相对于 "0"（零）的宽度rem相对于根元素的字体巨细（font-size）vw相对于视口*宽度的 1%vh相对于视口*高度的 1%vmin相对于视口*较小尺寸的 1％vmax相对于视口*较大尺寸的 1％%相对于父元素  提示：em和rem单元可用于创建完美得可扩展布局！
*视口（Viewport）= 欣赏器窗口得尺寸。如果视口宽度为50厘米宽，则1vw = 0.5厘米。

CSS特异性

特异性指的是如果有两条或两条以上指向同一个元素得辩论CSS规则，则欣赏器将依照一些原则来确定哪一条是最详细的，并因今生效该规则。        将特异性视为得分/品级，可以或许确定终极将哪些样式声明于元素。
特异性层次
每个选择器在特异性层次布局钢中都有其位置。以下四种种别定义了选择器的特异性级别：
行内样式 - 行内（内联）样式直接附加到要设置样式的元素。 例如：<h1 style="color: #ffffff;">。
ID- ID是页面元素的唯一标识符。 例如：#navbar。
类、属性和伪类 - 此种别包括.classes、[attribute]和伪类。例如：:hover、:focus等。
元素和伪元素 - 此种别包括元素名称和伪元素，例如：h1、div、:before 和 :after。

特异性的计算
从0开始，为style属性添加1000，为每个ID添加100，为每个属性、类或伪类添加10，为每个元素名称或伪元素添加1.

1. A: h1
2. B: #content h1
3. C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>

复制代码

• A的特异性为1（一个元素）
  
• B的特异性为101（一个ID引用以及一个元素）
  
• C的特异性1000（行内样式）
  

由于1<101<1000，因此第三条规则（C）具有更高的特异性，以是将被应用。

特异性规则1：
在特异性雷同的情况下，最新的规则很重要。如果将同一规则两次写入外部样式表，那么样式表中后面的规则将更靠近要设置样式的元素。因此会被应用。

1. h1 {background-color: yellow;}
2. h1 {background-color: red;}

复制代码

后一条规则始终适用。

特异性规则2：
ID选择器比属性选择器拥有更高的特异性。

1. div#a {background-color: green;}
2. #a {background-color: yellow;}
3. div[id=a] {background-color: blue;}

复制代码

第一条规则比其他两条更详细，因此将被应用。

特异性规则3：
上下文选择器比单一元素选择器更详细，嵌入样式表更靠近要设置样式的元素。以是在以下情况下：
来自外部 CSS 文件：

1. #content h1 {background-color: red;}

复制代码

在HTML文件中：

1. <style>
2. #content h1 {
3.   background-color: yellow;
4. }
5. </style>

复制代码

将适用于后一条规则。

特异性规则4：
类选择器会击败恣意数量的元素选择器 - 类选择器（例如： .intro会击败 h1、p、div等）：

1. .intro {background-color: yellow;}
2. h1 {background-color: red;}

复制代码

 别的，通用选择器以及被继续的值拥有0的特异性，body * 及雷同拥有0的特异性。被继续的值的特异性也为0。


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。