CSS的特性｜ 青训营笔记

辜负寒彻骨
81 阅读7分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第2天

聊一聊CSS

CSS是什么？

image.png 层叠样式表(Cascading Style Sheets，CSS)的功能非常强大，可以影响一个或一组文档的表现，用于页面样式的修饰。

CSS的诞生

在Web早期（1990~1993），HTML是一种很有限的语言。其原本是要作为一种结构化标记语言，用于描述文档的各个部分；而对于这些部分应当如何显示则很少谈及。然而，程序员们希望读者看到的页面正如他们设计到那样——丰富多彩；于是陷入了尴尬的境地：使用结构化HTML标记意味着要放弃对页面外观的很多控制，结构化HTML标记显然不支持那些流行的页面设计。

当然，HTML中充斥着的表现标记的问题并没有被W3C(万维网联盟)忽视，他们开始寻找一种速效的解决方法。1995年，W3C开始发布一种正在进行的计划(work-in-progress)，称为CSS。到了1996年，这已经成为一个成熟的推荐草案(Recommendation),其地位与HTML同样举足轻重。

  • 丰富的样式
  • 易于使用
  • 在多个页面上使用
  • 层叠
  • 为未来做准备

CSS的工作原理

image.png

CSS的特性

选择器

所有用于选择特定元素的选择器又分三种

  • 上下文选择器。基于祖先或同胞元素选择一个元素。
  • ID 和类选择器。基于id 和class 属性的值（你自己设定）选择元素。
  • 属性选择器。基于属性的有无和特征选择元素。

（基本的选择器不在赘述，这里主要说一下伪类选择器） image.png

伪类选择器

伪类分两种：

  • 状态伪类，会在HTML 元素处于某个状态时（比如鼠标 指针位于链接上），为该元素应用CSS 样式。
  • 结构伪类，会在标记中存在某种结构上的关系时（如某个元素是一组元素中的第一个或最后一个），为相应元素应用CSS 样式。

一个冒号（:）表示伪类，两个冒号（::）表示CSS3 新增的伪元素。www.w3.org/TR/2005/WD-…

状态伪类：

  1. 链接的4种状态
  • Link。此时，链接就在那儿等着用户点击。
  • Visited。用户此前点击过这个链接。
  • Hover。鼠标指针正悬停在链接上。
  • Active。链接正在被点击（鼠标在元素上按下，还没有释放）。 以下就是这些状态对应的4 个伪类选择符（使用了a 选择符和一些示例声明）：
a:link {color:black;}
a:visited {color:gray;}
a:hover {text-decoration:none;}
a:active {color:red;}
  1. focus伪类

表单中的文本字段在用户单击它时会获得焦点，然后用户才能在其中输入字符。下 面的代码会在光标位于input 字段中时，为该字段添加一个蓝色边框。这样可以让用户明确地知道输入的字符会出现在哪里。

input:focus {border:1px solid blue;}
  1. target伪类

如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标（target），可以用:target 伪类选中它。

对于下面这个链接

<a href="#more_info">More Information</a>

位于页面其他地方、ID 为more_info 的那个元素就是目标。该元素可能是这样的：

<h2 id="more_info">This is the information you are looking for.</h2>

那么，如下CSS 规则会在用户单击链接转向ID 为more_info 的元素时，为该元素添加浅灰色背景。

#more_info:target {background:#eee;}

结构伪类：

结构化伪类可以根据标记的结构应用样式，比如根据某元素的父元素或前面的同胞 元素是什么。

  1. :first-child 和:last-child
  • :first-child 代表一组同胞元素中的第一个元素
  • :last-child 则代表最后一个。
  1. :nth-child
e:nth-child(n)

e 表示元素名，n 表示一个数值（也可以使用odd 或even）。

还有其他一些结构化伪类，完整请参考：www.stylinwithcss.com。

伪元素（选择器）

顾名思义，伪元素就是你的文档中若有实无的元素。

  1. ::first-letter 伪元素

可以选中文本段落（一般情况下是段落）的第一个字母。

p::first-letter {font-size:300%;}
  1. ::first-line 伪元素

可以选中文本段落（一般情况下是段落）的第一行。

p::first-line {font-variant:small-caps;}

::first-line 伪元素的长度会随浏览器窗口大小的变化而改变。

3.::before 和::after 伪元素

可用于在特定元素前面或后面添加特殊内容。

以下标记和如下样式

<p class="age">25</p>

p.age::before {content:"Age: ";}
p.age::after {content:" years.";}

能得到以下结果： Age: 25 years.

如果标签中的内容是通过数据库查询生成的结果，那么用这种技巧再合适不过了。 因为所有结果都是数字，使用这两个伪元素可以在把数字呈现给用户时，加上说明 性文字。

每个伪元素拥有的属性不同，如first-line无法使用margin属性。

继承 层叠

继承

CSS 中有很多属性是可以继承的，其中相当一部分都跟文本有关，比如颜色、字体、字号。然而，也有很多CSS 属性不能继承，因为继承这些属性没有意义。这些不能继承的属性主要涉及元素盒子的定位和显示方式，比如边框、外边距、内边距等。

由于字体和文本样式是可以继承的，所以在使用相对字体单位（如百分比和em）时 要格外小心。如果某个标签的字体大小被设置为80%，而它的一个后代的字体大小 也被设置为80%，那么该后代中文本最终的字体大小将是64%（80%的80%）。

层叠

以下就是浏览器层叠各个来源样式的顺序：

  1. 浏览器默认样式表
  2. 用户样式表
  3. 作者链接样式表（按照它们链接到页面的先后顺序）
  4. 作者嵌入样式
  5. 作者行内样式

浏览器会按照上述顺序依次检查每个来源的样式，并在有定义的情况下，更新对每 个标签属性值的设定。整个检查更新过程结束后，再将每个标签以最终设定的样式 显示出来。

会按这个顺序读取样式，并更新不同的，即这个顺序中最后面的样式优先级最高。

层叠规则

  • 层叠规则一：找到应用给每个元素和属性的所有声明。浏览器在加载每个页面时， 都会据此查到每一条CSS 规则，标识出所有受到影响的HTML 元素。

  • 层叠规则二：按照顺序和权重排序。浏览器依次检查5 个来源，并设定匹配的属性。如果匹配的属性在下一个来源也有定义，则更新该属性的值，如此循环，直到检查完页面中所有标签受影响属性的全部5 个来源为止。最终某个属性被设定成什么值，就用什么值来显示。

声明也可以有权重。可以像下面这样为单独的声明增加权重：

p {color:green !important; font-size:12pt;}

空格!important 分号（;）用于加重声明的权重。表示最终的样式就是这个，不管其他的样式。

  • 层叠规则三：按特指度排序。除了有点拗口之外，特指度（specificity）其实表示一 条规则有多明确。

这个例子中，会应用类名声明的样式。

p {font-size:12px;}
.largetext {font-size:16px;}

类名选择符比普通的标签选择符具有更高的特指度。

一条规则的特指度，由它的选择符中包含多少个标签、类名和ID 决定。

特指度计算 I - C - E

  1. 选择符中有一个ID，就在I 的位置上加1；
  2. 选择符中有一个类，就在C 的位置上加1；
  3. 选择符中有一个元素（标签）名，就在E 的位置上加1；
  • 层叠规则四：顺序决定权重。如果两条规则都影响某元素的同一个属性，而且它们 的特指度也相同，则位置最靠下（或后声明）的规则胜出。

参考文章： blog.csdn.net/weixin_4079…

CSS: The Definitive Guide,Third Edition,by Eric A.Meyer.Copyright 2007 O·Reilly Media,Inc..978-0-596-52733-4

avatar
文章
阅读
粉丝