WEB笔记-2 剖析CSS规则

2.1 剖析CSS规则

 

规则即指令，其声明了需要修改的元素及要应用给元素的样式。

 

 

2.2 为文档添加样式的三种方法

 

行内样式：直接写在HTML文档标签中的style属性当中，行内元素只影响它所在的标签，总会覆盖嵌入样式和链接样式

例：<p style="width=300px;height=120px;color=red;"></p>

 

嵌入样式：写在<style>标签中，会覆盖外部样式

例：<style>......</style>

 

链接样式：写在单独的css文件中

 

除了以上三种为页面添加样式的方式，还有一种在样式表中链接其他样式表的方法，使用@import指令

例：@import url（css/style.css）

值得注意的是，@import指令必须出现在样式表中其他样式之前，否则@import引用的样式不会被加载

 

浏览器解析到<style>会尽心css的解析，解析完后会继续解析html，但是当用户将<style>加入到外部css文件中后浏览器就会不解析外部样式了

 

 

2.3 CSS命名规则惯例

CSS规则由选择符和声明两部分组成，其中选择符用于指定选择的DOM元素，其中声明由两部分组成属性和值

属性指定要影响元素哪方面的样式。

 

三种规则，1、多个声明在一个规则里；2、多个选择符组合；3、多条规则应用给一个选择符

 

2.4 上下文选择符

 

father children {property:style;}

此类选择符在CSS规范中严格来讲叫：后代组合式选择符(descendant conbinator selector)

 

上下文选择符以空格作为分隔符，分组选择符以逗号作为分隔符。

 

 

2.4.1 自选择符  >

标签1 > 标签2

规定标签1不能是标签2父元素外的其他祖先元素

 

2.4.2 紧邻同胞选择符  +

标签1 + 标签2

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

 

2.4.3 一般同胞选择符  ~

标签1 ~ 标签2

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

 

2.4.4 通用选择符  *

匹配任意元素

 

 

2.5 ID和类选择符

 

ID和类为我们提供了选择元素的另一套手段，利用他们可以不用考虑文档的层次结构。

 

2.5.1 类

1、类选择符

（.）紧跟类名

 

2、标签带类选择符

<标签名>.<类名>

 

3、多类选择符

.<类名>.<类名> 

这里注意两个类名之间没有空格，表示我们选择同时具备这两个类名的元素，否则就变成了“祖先/后代”关系的上下文选择符了。

 

2.5.2 ID

例:

#container{样式声明}或p#specialtext{样式声明}

 

用于页内导航的ID

<a href="#bio">Biography</a>

该标签可跳转到页内指定ID标签所在位置

 

2.6 属性选择符

 

2.6.1 属性名选择符

标签名[属性名]

 

2.6.2 属性值选择符

标签名[属性名=“属性值”]

 

 

2.7 伪类

 

2.7.1 UI伪类

 

UI伪类基于特定的HTML元素的状态应用样式。

 

1、连接伪类

 

Link：此时，链接就在那儿等着用户点击；

Visited：用户此前点击过这个链接；

Hover：鼠标指针正悬停在链接上；

Active：链接正在被点击（鼠标按下，没有释放）。

 

一个冒号（：）表示伪类，两个冒号（：：）表示CSS3新增的伪元素。

 

2、:focus 伪类

 

表单中的文本字段在用户单机它时会获得焦点，然后用户才能在其中输入字符。

 

input:focus {border:1px solid blue;}

会在光标位于input字段中时，为该字段添加一个蓝色的边框。这样可以让用户明确的知道输入的字符该出现在哪里。

 

3、:target 伪类

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

 

#more_info:target{background:#eee}

会在用户单击链接转向ID为more_info的元素时，为该元素添加浅灰色背景

 

2.7.2 结构化伪类

 

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

 

1、:first-child 和 :last-child 

第一个元素，最后一个元素

 

2、:nth-child(n)

n表示一个数值，可以使用odd或even

 

……

 

2.8 伪元素

 

1、::first-letter伪元素

p::first-letter{font-size:300%}

实现首字母放大效果

 

2、::first-line伪元素

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

 

 

3::before,::after

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

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

 

添加样式

--每个content属性值总都包含了空格，以便输出结果中有适当的空距

p.age::before{content:"Age: "}

p.age::after{content:"years. "}

 

结果

Age: 25 years.

 

搜索引擎不会取得伪元素的信息，不要通过伪元素添加你想让搜索引擎知道的重要内容

 

 

2.9 层叠

 

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

 

1. 浏览器默认样式表
2. 用户样式表
3. 作者链接样式表
4. 作者嵌入样式
5. 作者行内样式

 

层叠规则

一、找到应用给每个元素和属性的所有声明

二、按顺序和权重排序

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

!important 用于给样式添加特权

三、按特指度排序

更明确的选择符将会采用

p.large > p

 

计算特指度 ：

按照 I-C-E 的规则计算

 

1、如果选择符中有个ID 就在I的位置上+ 1

2、选择符中有类，就在C的位置+1

3、选择符中有元素，就在E的位置+1

4、得到一个”三位数“，

 

 

这里每个选择符都比前一个选择符特指度更高

 

四、顺序决定权重

如果两条规则都影响某元素的同一个属性，而且他们的特指度也相同，则位置最靠下（最后声明）的胜出。