CSS工作原理

关于CSS规则如何为HTML添加样式，并解释层叠的工作机制——当元素的同一个样式属性有多种样式值的时候，CSS就要靠层叠机制来决定最终应用哪种样式。

剖析CSS规则

添加CSS样式的方法

主要有三种：

  • 行内样式：写在特定HTML标签的style属性里

  • 嵌入样式：将CSS样式放在HTML文档的head元素中

  • 链接样式：用link标签引入外部css文件

另，样式表中链接其他样式的方法：@import url(css/styles2.css)

CSS规则命名惯例

  1. 第一种方法：多个声明包含在一条规则里。

p{color:red; font-size:12px; font-weight:bold;}

  1. 第二种方法：多个选择符组合在一起。

h1,h2,h3{color:red; font-size:12px; font-weight:bold;}

  1. 第三种方法：多条规则应用给一个选择符。

h1,h2,h3{color:red; font-size:12px;}
h3{font-weight: italic;}

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

  • 上下文选择符：基于祖先或同胞元素选择一个元素

  • ID和类选择符：基于id和class属性的值选择元素

  • 属性选择符：基于属性的有无和特征选择元素

上下文选择符

格式：

其中，标签2就是我们想要选择的目标，而且只有在标签1是其祖先元素（不一定是父元素）的情况下才会被选中。

特殊的上下文选择符

子选择符

格式：

注意：标签2必须是标签1的子元素。

紧邻同胞选择符

格式：

标签2必须紧跟在其同胞标签1的后面。

一般同胞选择符

格式：

标签2必须跟（不一定紧跟）在其同胞标签1后面。

通用选择符

通用选择符*是一个通配符，它匹配任何元素。

例如：

会把p包含的所有元素的文本变成绿色。 注：所有子元素文本变成绿色，但p标签的文本不变色。

如果通配符前面没有标签，则表示网页所有元素。

ID和类选择符

类属性

body标签中包含的任何HTML元素都可以添加class属性。

类选择符

格式：

标签带类选择符

格式：

多类选择符

可以给元素添加多个类：class="class1 class2"。

格式：

不要乱用类 不要像使用ID一样，每个类都指定一个不同的类名，然后再为每个类编写规则。实际上，继承和上下文选择符能让不同的标签共享样式，从而降低你需要编写和维护的CSS量。

ID属性

格式：

用于页内导航的ID：（俗称锚点） 例如下面这个链接，其目标是同一页的另一个位置：

若只有“#”，那么点击链接会返回页面顶部。如果没有“#”，浏览器就会尝试加载bio目录下的默认页面了。 另外，如果你暂时不知道某个href应该放什么URL，也可以用#作为占位符，但不能把该属性留空。因为href属性值为空的链接的行为跟正常链接不一样。这样团队中其他人将来可以用中间层（比如PHP）变量替换#，以便动态接收来自数据库的URL。

属性选择符

属性名选择符

格式：

例如：img[title]{border:2px solid blue;}，带有title属性的img标签会被选择。

属性值选择符

格式：

选择任何带有值为属性值的属性名的标签名。

伪类

伪类分为两种：

  • UI伪类，会在HTML元素处于某个状态时（比如鼠标指针位于链接上），为该元素应用CSS样式。

  • 结构和伪类，会在标记中存在某种结构上的关系时（如某个元素是一组元素中的第一个或最后一个），为相应元素应用CSS样式。

使用方法：冒号“:”表示伪类，两个冒号“::”表示CSS3新增的伪元素。

UI伪类

  1. 链接伪类

  • link：默认。

  • visited：用户此前点击过这个链接

  • hover：鼠标指针正悬停在链接上

  • active：链接正在被点击（鼠标在元素上按下，还没有释放） 注意：由于这4个伪类的特指度相同，所以必须按照顺序使用。

  1. :focus伪类 表单中的文本字段在用户单击它时会获得焦点，然后用户才能在其中输入字符。

  2. :target伪类 例如下面例子，CSS规则：#more_info:target{background:#eee;}，会在用户单击链接转向ID为more_info的元素时，为该元素添加浅灰色背景。

结构化伪类

常见的结构化伪类：

  1. :first-child和:last-child

  2. :nth-child 例如：li:nth-child(3)会选择一组列表项中的每个第三项。 注意：是li！！！不是ul！！！

伪元素

常见的伪元素：

  1. ::first-letter伪元素 例如：p::first-letter{font-size: 300%;}，可以得到段落首字符放大的效果。

  2. ::first-line伪元素 可以选中文本段落的第一行。

  3. ::before和::after伪元素 用于在特定定元素前面或后面添加特殊内容。 例如给<p class="age">25</p>添加一下标签会得到：Age：25 years.

继承

CSS中的祖先元素会向后代传递一样东西：CSS属性的值。 例如：

PreviousCSS定位NextCSS控制背景

Last updated