ToB企服应用市场:ToB评测及商务社交产业平台

标题: CSS学习记录16 [打印本页]
作者: 九天猎人    时间: 2024-12-22 16:00
标题: CSS学习记录16
CSS计数器

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

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

如需利用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. }
复制代码


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


这里枚举了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>
复制代码

由于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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4