CSS权威指南 笔记

第一章

1.CSS中，元素通常有两种形式：替换和非替换；

替换元素：如<img src="howdy.gif" />，input元素，类似这种

非替换元素：元素内容由用户代理（通常为浏览器）在元素本身生成的框中显示；HTML中的大多数元素为非替换元素；如span；

2.CSS2.1中另两种基本元素类型：快级（block-level）元素和行内元素（inline-level）

块级元素：块级元素生成一个元素框，（默认的）它会填充其父元素的内容区，旁边不能有其他元素；也就是它在元素框之前和之后生成了“分隔符”。如：p和div；可以理解 为块级元素是在文档中独立成块的

行内元素：在一个文本行内生成元素框，而不会打断这行文本，也就是元素不会再它本身之前或之后生成“分隔符”。如a元素、strong和em元素

注意： 在HTML和XHTML中，块级元素不能继承自行内元素（即不能嵌套在行内元素中），行内元素可以继承块元素，但是在CSS中，对于显示角色如何嵌套不存在任何限制

3. 候选样式表（alternate style sheet）：将rel属性设置为alternate stylesheet，就可定义候选样式表；如果浏览器能使用候选样式表，它会使用link元素的title属性值生成一

个候选样式列表

  <link rel="stylesheet" type="text/css" media="screen" href="styles/11_basic.css" />

<link rel="alternate stylesheet" type="text/css" media="screen" href="bigtext.css" title = "Big Text" />

4. 如果为一个样式表指定了title属性，那么就表示该样式表作为默认样式表，如果一个HTML文档中，存在有多个指定了title属性的样式表，说明这几个样式表都表示要作为默认样式表，但是只会选择其中一个作为默认样式表，具体选择哪个，没有确定的方法

5. 引入CSS样式表的方法有两种，link和import；

6. 内联样式：如果只是想为某个元素指定一些样式，而不需要嵌套或外部样式表，就可以使用HTML的style属性来设置一个内联样式。除了在body外部出现的标记（如：head或 title），style属性可以与任何其他HTML 标记关联

如：<p style="color: gray;">You are a dog</p>

第二章

1.基本规则

1.1 规则结构

每个规则有两个基本部分组成：选择器（selector）和声明块（declaration block）

每个声明块由一个或多个声明组成；每个声明则是一个属性—值对（property-value）；

1.2 声明和关键字

声明的格式：属性:属性值（属性值一般是一个关键字，或关键字列表；如果是多个关键字，则用空格隔开）

如果声明中使用了错误的属性或关键字，则该属性被忽略

2. 分组

1.1 选择器分组：依据选择器的不同来分别设置各选择器的样式；

如:

h1{font:18px; background:white;}
h2{color:silver; background:gray;}

1.2 声明分组：就是将一个选择器所有样式放在一起

如：

h1{font:18px; color:purple; background:aqua;}

3. 类选择器和ID选择器

3.1 类选择器

3.2 多类选择器：

类选择器前面是"."

3.3 ID选择器

类选择器和ID选择器的区别：1. 类选择器前面是"."点符号，ID选择器前面是“#”符号；2. ID选择器不引用class属性的值，它引用的是id属性中的值

3. ID选择器具有唯一性；因为在同一个HTML文档中可以有多个相同的class，但是ID必须是唯一的

3.4 属性选择器（4种）：根据元素的属性及属性值来选择元素

3.4.1 简单属性选择

如：选择具有class属性的h1元素，可以使用： h1[class] {color: silver;}；那么凡是具有class属性的h1元素均使用这个样式

3.4.2 根据具体属性值选择

如： planet[moons="1"] {font-weight: bold;}； 表示为元素为planet，属性值为1的元素标签设置样式

3.4.3 根据部分属性值选择：如果属性能接受词列表（词之间用空格分隔），可以根据其中的任意一个词进行选择。如class属性

如：<p class="urgent warning">abdnnadfas nasdnf a.</p>

p[class~="warning"] {font-weight:bold;} 注意：选择器中出现了一个波浪号（~），这是部分选择的关键，即根据属性值中出现的一个用空格分隔的词来完成选择

3.5 后代选择器

定义：创建一些规则，它们仅在某些结构中起作用，而在另一些结构中不起作用；

如： h1 em{color: gray;} 表示将h1元素 后代中的em元素的文本变为灰色；解释为：作为h1元素 后代的任何em元素

如： blockquote b, p b {color: gray;} 表示将blockquote元素 后代中的b元素以及p元素后代中的b元素的文本变成灰色；

注意：这里都是目标元素的后代中的指定元素，跟目标元素的子元素是不同的，后代表示的是目标元素里面的所有指定元素。

注意：后代选择器中，每个空格符可以解释为“........在..........中找到”， "........作为..........的一部分"，或“........作为.........的后代”

3.6 选择子元素：只选择目标元素的子元素，而不是后代元素

如： h1 > strong {color: red;}    选择只作为一个h1元素子元素（而不是后代元素）的strong元素

3.7 选择相邻兄弟元素

用法：选择紧接在另一个元素后的元素，而且两者有相同的父元素，可以使用相邻兄弟结合符，表示形式为“+”号。

如：h1 + p {margin-top: 0}       表示选择紧接在一个h1元素后出现的所有段落，h1要与p元素有共同的父元素

第四章

颜色

1. WEB安全颜色

指在256色计算机系统上总能避免抖动的颜色；安全颜色指表示为RGB值20%和51（相应的十六进制值为33）的倍数

长度单位

1. 绝对长度单位

5种绝对长度单位，如下：

1. 英寸（in）

2. 厘米（cm）：1英寸 = 2.54厘米； 1厘米= 0.394英寸

3. 毫米（mm）：

4. 点（pt）： 1英寸 = 72点

5. 派卡（pc）：1派卡 = 12点

2. 相对长度单位

3种相对长度单位，如下：
1. em：em-height，在CSS中，1个“em”定义为一种给定字体的font-size值；也就是不同的元素标签对应的em是不同的，例如：h1的font-size可能为24px，p的font- size可能为14px； 在设置字体的大小时，em的值会相对于父元素的字体大小改变

2. ex： x-height，指所用字体中小写字母的高度

3. px：像素；像素是相对度量单位

注意：使用px像素设置字体大小有一个潜在的危险，对于windows平台IE7之前的用户将无法使用其浏览器中的“文本大小”菜单调整文本的大小，如果使用em，则可以 实现调整文本大小；但是对于元素的其他方面，如边框或定位，则可能使用px会更好一些，如果希望达到缩放

URL

1. 在CSS中，相对URL要相对于样式表本身，而不是相对于使用该样式表的HTML文档。例如：在一个CSS样式表A中导入了另一个外部CSS样式表B，然后将样式表A，应用与HTML文档H，那么样式表B中指向的地址应该是相对于样式表A的，而不是HTML文档H的地址

关键字

1.关键字：一个值需要用一个词来表示，就称为关键字

2. 注意：一个属性接受关键字，那么其关键字将只针对于该属性的作用域定义；同一个关键字对于不同的属性可能有不同的含义

3. inherit：CSS2.1中该关键字是 所有属性都共有的，该属性使得一个属性的值与其父元素的值相同

CSS2单位

第五章

字体系列

1. 强烈建议：在所有font-family规则中都提供一个通用字体系列

2. 使用引号：当字体名中有一个或多个空格（如New York），或者如果字体名包括#或$之类的符号，才需要在font-family声明中加引号

如： h2{font-family: Wedgie, 'Karrank%', Klingon, fantasy; }

字体加粗

1.加粗是分等级进行的，一个等级一个等级的往上增加，当往上没有更高等级的加粗字体时，以100为单位自加，当达到900时，不再增加；这是用户代理执行的

字体大小

1. 使用百分数定义字体大小时，百分数总是根据从父元素继承的大小来计算

第七章 基本视觉格式化

1. text-align属性只应用于块级元素的内联内容，所以将元素的text-align设置为center并不能将这个块级元素居中

2. 水平格式化的“7大属性”的总和要等于父元素的width，也就是说这七个值加在一起，必须是元素包含块的宽度

七大属性指的是：margin-left, border-left, padding-left, width, padding-right, border-left, margin-left;

这七个属性中只有width和margin-left、margin-right能够被设置为auto值，其余的为特定值或者为0

3. 与水平格式化的七大属性一样，还有垂直属性

注意：对于块级元素的七大属性，如果将margin-left、margin-right或者margin-top、margin-bottom设置为auto，实际上它们都会被设置为0，也就是没有外边框

height必须设置为auto或者非负值

块级元素

1. 一个元素的默认高度由其内容决定，高度还会受内容宽度的影响，段落越窄，相应的就会越高，以便容纳其中所有的内联内容

2.  负下外边距在表现上就是将与它相邻的下一个块级元素向上拉近负外边距的绝对值

第八章 内边距、边框和外边距

外边距和内边距

1. 如果元素有背景，那么背景会延伸到内边距中，但不会延伸到外边距中

外边距

1. 在支持CSS的浏览器中，外边距会在每个段落元素的上面和下面生成空行，如果没有为p元素声明外边距，浏览器可能会自己应用某个外边距。除非做了声明覆盖默认样 式