<CSS设计指南> 学习总结 -- 第一二章

来源：互联网发布：windows程序设计第5版编辑：程序博客网时间：2024/06/01 09:36

非文本内容是通过自闭和标签显示的。闭合标签与自闭和标签的区别在于，闭合标签包含的是会显示的实际内容，而自闭合标签只是给浏览器提供一个对要显示内容的引用。浏览器会在HTML页面加载的时候，额外向服务器发起请求，以取得自闭合标签引用的内容。在XHTML标准中，严格规定所有的标签都必须闭合，但HTML5标准在这方面则要宽松的多。换句话说，在HTML5网页里，某些闭标签是可以省略不写的。
<li>是一个列表项，它只在<ol> (ordered list, 有序列表)和<ul> (unordered list, 无序列表) 这两种标签中才有效，在<dl>(definition list，定义列表)中则无效。使用<em>标签来强调段落中的文字，在<p>标签内。
<!DOCTYPE html> 这个为了声明“以下是一个HTML文档”，注意，这个标签不用关闭。
使用HTML注释标签，可以为你自己或者其他将来可能修改这个页面的人写一些备注。HTML注释以结尾，注释内容就写在他们中间。浏览器在加载页面时，会忽略注释，不会显示其中的内容。
帮助浏览器理解页面的信息都包含在<head>标签中，其中，<meta>标签有一个charset属性，表示页面的编码；<title>标签表示标题，搜索引擎会给<title>标签中的文字内容赋予很高的权重，而且这些文字会出现在搜索结果列表中。
块级元素和行内元素：几乎所有的HTML元素display属性值要么为block，要么为inline，最明显的一个例外是table元素，它有自己特殊的disply属性值。块级元素会相互堆叠在一起沿页面向下排列，每个元素分别占一行。行内元素则会相互并列，只有在空间不足以并列的情况下才会折到下一行显示。
文档对象模型(DOM)，DOM是从浏览器的视角观察页面中的元素以及每个元素的属性，由此得出这些元素的一个家族树。通过DOM，可以确定元素之间的关系。

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

行内样式：行内样式是写在特定HTML标签的style属性里的，行内样式的作用范围非常有限，行内样式只能影响它所在的标签，而且总会覆盖嵌入样式和链接样式。
嵌入样式：嵌入的CSS样式是放在HTML文档的head元素中的，嵌入样式的应用范围仅限于当前页面。页面样式会覆盖外部样式表中的样式，但会被行内样式所覆盖。
链接样式：在创建包含多个页面的网站时，需要把样式集中在一个单独的文件里，这个文件就叫样式表。在样式表其实就是一个扩展名为.css的文本文件。可以在任意多个HTML页面中链接同一个样式表文件。
除了上面三种，还有一种在样式表中链接其他样式表的方法，使用@import指令(是一种at规则)

CSS规则命名惯例

CSS规则由选择符和声明两部分组成，其中选择符用于指出规则所要选择的元素，声明则又由两部分组成：属性和值。属性指出要影响元素哪些方面的样式，值就是属性的一个新状态。基本结构如下图：

有三种方法对基本的CSS结构进行扩展：

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

第二个方法：多个选择符组合在一起，比如 h1, h2, h3 {color:blue; font-weight:bold;}，这里千万要注意每个选择符之间要使用逗号进行分割；

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

选择符分类

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

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

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

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

一. 上下文选择符：

标签1 标签2 {声明}

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

上下文选择符，严格来讲(CSS规范)，叫后代组合式选择符，就是一组以空格分隔的标签名。用于选择作为指定祖先元素后代的标签。

万万牢记，上下文选择符以空格作为分隔符，而分组选择符则以逗号作为分隔符，不要弄混

特殊的上下文选择符：

1. 子选择符 > : 标签1 > 标签2，标签2必须是标签1的子元素

2. 紧邻同胞选择符 + ：标签1 + 标签2，标签2必须紧跟在其同胞标签1的后面

3. 一般同胞选择符 ~ ：标签1 ~ 标签2，标签2必须跟(不一定紧跟)在其同胞标签1后面

4. 通用选择符* ：通用选择符* (常被称为星号选择符)是一个通配符，它匹配任何元素

二. ID和类选择符

ID和类为我们选择元素提供了另一种手段，利用它们可以不用考虑文档的层次结构。只要你在HTML标记中为元素添加了id和class属性，就可以在CSS选择符中使用ID和类名，直接选中文档中特定的区域。可以给id和class属性设定任何值，但不能以数字或特殊符号开头。

类选择符

1. 类选择符：(.类名)，类选择符前面是点(.)，紧跟着类名，两者之间没有空格。

2. 标签带类选择符：比如如果只想瞄准带有这某个类的段落，可以把标签名和类选择符写在一起

3. 多类选择符：可以给元素添加多个类，多个类名，放在同一对引号里，用空格分隔。实际上，更准确的说法，应该是HTML的class属性可以有多个空格分隔的值。要选择同时存在这两个类名的元素，比如.specialtext.featured {font-size:120%}。注意，CSS选择符的两个类名之间没有空格，因为我们只想选择同时具有这两个类名的那个元素。如果加了空格，就变成了“祖先/后代”关系的上下文选择符了。

ID属性

ID与类的写法类似，而且表示ID选择符的#(井号)的用法，也跟表示类选择符的.(句号)类似。

ID也可以用在页内导航链接中

什么时候使用ID，什么时候用类

ID的用途是在页面中唯一地标识一个元素，同一个页面中的每一个ID属性，都必须有独一无二的值。

类的目的是为了标识一组具有相同特征的元素。

ID的用途是在页面中标记中唯一地标识一个特定的元素，它能够为我们编写CSS规则提供必要的上下文，排除无关的标记，而只选择该上下文中的标签。

三. 属性选择符

基于HTML标签的属性选择元素。

1. 属性名选择符：标签名[属性名]，选择任何带有属性名的标签名。

2. 属性值选择符：标签名[属性名=“属性值”](在HTML5中，属性值的引号可加可不加，在此为了清楚起见)。选择任何带有值为属性值的属性名的标签名。

基于属性名和属性的其他特征选择元素，为我们提供了另一种区别对待相同标签的机会。

伪类

伪类这个叫法源于它们与类相似，但实际上并没有类会附加到标记中的标签上。伪类分为两类：

1. UI (User Interface,用户界面) 伪类会在HTML元素处于某个状态时(比如鼠标指针位于链接上)，为该元素应用CSS样式。

2. 结构化伪类会在标记中存在某种结构上的关系时 (如某个元素是一组元素中的第一个或最后一个)，为该元素应用CSS样式。

一. UI伪类

UI伪类会基于特定HTML元素的状态应用样式。最常使用UI伪类的元素是链接(a元素)，利用UI伪类，链接可以在用户鼠标悬停时改变文本眼色，或者去掉文本的下划线。

1. 链接伪类

1) Link: 链接等着用户点击

2) Visited: 用户此前点击过这个链接

3) Hover：鼠标指针悬停在链接上

4) Active：链接正在被点击（鼠标在元素上按下，还没有释放）

注意，有些伪类可以用于任何元素，而不仅仅是 a 元素

2. :focus 伪类

如，表单中的文本字段在用户单击它时会获得焦点，然后用户才能在其中输入字符。下面的规则: input:focus {border:1px solid blue;}会在光标位于input字段中，为该字段添加一个蓝色边框

3. :target 伪类

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

二. 结构化伪类

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

1. :first-child 和 :last-child，:first-child代表一组同胞元素中的第一个元素，:last-child代表最后一个，例如li:last-child{color:red}

2. :nth-child，例如：li:nth-child(3)

伪元素

伪元素就是你的参考文档中有若有实无的元素

1. ::first-letter伪元素，首字符

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

3. ::before和::after伪元素，用于再特定的元素前面或后面添加内容，例如p.age::befort {content:”Age: “}

搜索引擎不会取得伪元素的信息(因为它再标记中并不存在)，因此，不要通过伪元素添加你想让搜索引擎索引的内容

继承

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

层叠

层叠，就是层叠样式中的层叠，是一种样式在文档层次中逐层叠加的过程，目的是让浏览器面对某个标签特定属性值的多个来源，确定最终使用那个值。

层叠是CSS机制的核心机制，理解了它才能以最经济的方式写出最容易改动的CSS，让文档外观在达到设计要求的同时，也给用户留下一些空间，让他们能根据需要更改文档的显示效果。

一. 样式来源

浏览器默认样式
用户样式表
作者链接样式表(按照它们链接到页面的先后顺序)
作者嵌入样式
作者行内样式

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

二. 层叠规则

层叠规则一：找到应用给每个元素和属性的所有声明

层叠规则二：按照顺序和权重排序

层叠规则三：按特指度排序

层叠规则四：顺序决定权重

三. 计算特指度

I - C - E值来决定特指度，三个字母间的短横线是分隔符，并非减号，计算方式如下：

1. 选择符中有一个ID，就在I的位置加1

2. 选择符中有一个类，就在C的位置加1

3. 选择符中有一个元素(标签)名，就在E的位置上加1

4. 得到一个三位数

规则声明

每个元素有很多属性，可以通过css来设定，但每个元素具体有哪些属性，也会因元素而异。CSS属性值主要分为以下三类：

文本值

数字值：数字值后面都有一个单位

颜色值：颜色值可以用几种不同的格式来写，包括RGB，HSL，十六进制

0 0