css工作原理

Author Avatar
FanShen 9月 16, 2017

这两天的时间在学习css的基础内容,主要是看《css设计指南》再结合一些视频,自己敲敲代码。这种学习方式还不错,能让我更好地理解css的基本原理。我打算分三部分来学习总结css这部分的内容。这是第一部分,主要复习css规则,选择器,以及继承和层叠。

添加样式的三种方法

  1. 行内样式 => 写在特定HTML标签的style属性
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

  1. 嵌入样式 => 放在HTML文档的head元素中
<head>
  <style type="text/css">
    body {
      background-color:yellow;
    }
    p {
      color:blue;
    }
  </style>
</head>

  1. 链接样式 => 把样式放在一个单独的文件里(样式表),可以在任意多个HTML页面中链接同一个样式表
<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

优先级 行内样式 > 嵌入样式 > 链接样式(就近原则)[1]


命名惯例

选择器 (组) + 声明(属性+值)

简单选择器

type selector

<h2>类型选择器</h2>
h2{border: 1px solid red;}
  • 为h2加上红色边框

id selectors

语法 #id名

写法与类选择器相似,但在页面中只能唯一标识一个元素(每个id名在页面中只能用一次)

  1. 用于页内导航
<a herf="#third">article<a>
<h3 id="third">article</h3>
  • #表示链接的目标在当前页面,导航到同一页的h3元素位置

  1. 返回顶部的链接
<a herf="#">返回顶部</a>

class selectors

用于描述一组元素的样式,class可以在多个元素中使用

语法 .类名

.center {text-align:center;}

标签带类选择器

p.center {text-align:center;}

多类选择器

.center.small {font-size:20px;}

什么时候用ID,什么时候用类

  • ID表示的是页面中的一个唯一的HTML元素,利用唯一ID,可以方便地定位到一个元素以及它的子元素。[2]
  • 类的目的是为了标识一组具有相同特征的元素,类可以让不同标签名的元素应用相同的样式。

属性选择器

语法 E[foo] an E element with a foo attribute

 <lable>
 <input type="text" disabled />
 </lable>
 input[disabled]{cursor : not-allowed;}
  • 选中属性值为disabled的文本框,鼠标滑过时添加禁用样式

语法 E[foo^=“bar”] an E element whose foo attribute value begins exactly with the string “bar”

a[href^="#"] {
  background-color: blue;
}
<a href="#" >top</a>
<a href="#test" >test</a>
  • 选中属性值以#号开头的a元素,为其添加背景为蓝色的样式

更多语法


上下文选择器

  1. e1 e2
  2. e1 > e2 子选择器
  3. e1 + e2 紧邻同胞选择器 e2必须紧跟在e1后
  4. e1 ~ e2 一般同胞选择器
  5. * 通用选择器 可以用它构成非子选择器

伪类选择器

结构化伪类选择器

  1. e:first-child e:last-child
<ol  class="results">
   <li> chird1 </li>
   <li> child2 </li>
   <li> child3 </li>
</ol> 
ol.results li:first-child{color: blue;}
  • 选中child1,为其添加字体为蓝色样式
ol.results li:last-child{color: red;} 
  • 选中child3,为其添加字体为红色样式
  1. e:nth-child(n)
<tr>
  <td>一班</td>
  <td>30</td>
  <td>89</td>
</tr>
<tr>
  <td>二班</td>
  <td>35</td>
  <td>85</td>
</tr>
<tr>
  <td>三班</td>
  <td>32</td>
  <td>80</td>
</tr> 

table tbody tr:nth-child(2n+1){background-color: yellow;}
  • 选中表格的奇数行,添加背景为黄色的样式,提高了表格的可读性

UI伪类选择器

  1. 链接伪类
  • Link 等着用户点击
  • Visited 用户此前点击过这个链接
  • Hover 鼠标指针正悬停在链接上
  • Active 链接正在被点击(鼠标在元素上按下,还没有被释放)
  1. :focus伪类
  • 用户点击表单中的文本字段时会获得焦点
  1. :target伪类
 <a href="#more_info">更多</a>
 <h2 id="more_info">指向这里</h2>
 h2:target {background: yellow;}
  • 点击链接时,位置跳转到h2,并为其添加背景为黄色的样式
  1. :checked伪类
  • 单选框或多选框被选中时,元素就会被选中

伪元素选择器

  1. e::first-letter 选中e元素的第一个字母
  2. e::first-line 选中e元素的第一行
  3. e::before和::after 可以在e元素前面或后面添加特殊的内容
<p class="age">22</p>
p.age::before{content:"Age: ";}
P.age::after{content:" years.";}
  • 输出结果为 Age: 22 years.

继承

body{font-size:18px;}
  • 全站的主字体大小只要在某个上层元素上指定即可,无需在每一个标签上分别指定。

层叠

样式来源

浏览器层叠各个来源样式的顺序

  • 浏览器默认样式表
  • 用户样式表
  • 链接样式表
  • 嵌入样式
  • 行内样式

层叠规则

  1. ID>Class>Type
  2. 行内>嵌入>链接[3]
  3. 设定的样式胜过继承的样式

计算特指度

I-C-T

  • 选择符有一个ID,就在I的位置加1
  • 选择符有一个类,就在C的位置加1
  • 选择符有一个元素(标签)名,就在T位置加1

p 0-0-1=1
p.largetext 0-1-1=11
p#largetext 1-0-1=101
body p#largetext 1-0-2=102
body p#largetext ur.mylist 1-1-3=113


  1. 相同权值情况下

  2. tips: 在页面的每个顶级区域添加一个ID,能得到明确的上下文,便于在编写CSS时只选择嵌套在相应区域内的标签

  3. 为同一个标签的同一个属性定义的样式