《css权威指南》笔记

图床不可用, 图片已经都丢失了, 非常心痛…

第一章：CSS和文档

Web的衰落

在web的早期，人们对于文档的表现形式有着越来越多的要求，如粗体，斜体，颜色等等。面对人们多种多样的需求，HTML独自面对，但是终究力不从心。

CSS作救星

1995年css被发布，与html相比，它能够拥有更丰富的表现方式；它的一条规则可以代替传统的html中几十条规则，这也意味着它拥有更小的体积；它的一个规则可以在在多个网站上同时使用。这也就意味着，它也更加实用。

元素

元素是文档结构的基础。

元素又分为替换元素和非替换元素。
大部分元素都是非替换元素。但是比如img这样的元素<img src="example.jpg">，它最后在文档中会被替换成一个图片。这就是替换元素的含义。

除了替换和非替换元素，元素还可以被分为行内元素与块级元素。
行内元素在一个文本行内，而不会打断这行文本，如em。
块级元素会生成一个元素框，旁边不能有其他元素，所以也会导致分行，如h1。

结合CSS和XHTML

link标记

<link rel="stylesheet" type="text/css" href="sheet1.css" media="all">

• link必须放在head中
• rel代表关系(relation)
• type代表类型，总是设置成text/css
• href代表样式表的URL（统一资源定位符），分为绝对URL与相对URL。
• media代表用于表现的媒体的形式，media有许多属性值，这里使用的是all，代表应用于所有的媒体。详见

候选样式表

我们可以让用户选择他们想要应用于html的css文档。只需要将rel改为rel="alternate stylesheet"即可，这样用户就可以从浏览器里选择使用什么样的视图来查看我们的html文档。

@import指令

这个指令和link很像，都是指示web浏览器加载一个外部样式表。并在表现html文档时使用其样式。需要注意的是它必须放在style容器中，否则将不起作用。以下都是有效的import指令。

@import url(sheet1.css);
@import url(sheet1.css) print;

css注释

css注释用/*和*/中的内容来表示，如/* This is a comment */

内联样式

有的时候我们只是想为某一个元素指定一个样式，那么此时我们就可以使用内联样式表。
<p style="color:blue;"> This is a paragraph</p>
这样我们就可以很方便且灵活地设置一个元素的样式而不需要再单独写一个css表了。

---

第二章：选择器

基本规则

对于这个规则
h1{color:blue;background:yellow;}
h1叫做选择器
**{color:blue;background:yellow;}**叫做声明块
**color:blue;**叫做声明
color叫做属性
blue叫做值

可以看出，每条规则由选择器和声明块构成。声明块又由声明构成。每一个声明都是属性和值的对。

选择器

1. 属性选择器,如h1{color:blue;}

2. 类选择器,如.white{color:white;}或者p.white{color:white}

3. ID选择器,如#white{color:white;}

4. 属性选择器

   • 简单属性选择：如h1[class],img[alt]等，分别代表选择带有class属性的h1和有alt属性的img元素。
   • 根据具体属性值选择：如a[href="http://if-true.com"]
   • 根据部分属性值选择：如img[title~="Figure"]{border:1px solid gray;}代表选择title属性中含有Figure这个子串的所有img元素。同时还有^=和$=这种前后子串匹配属性选择器可供使用。
   • 特定属性选择类型：如[lang|="en"]选择lang属性等于en或者以en-开头的所有元素。

5. 分组选择器：选择器可以分组，用来减轻编程人员的压力，如h1,h2{color:blue;}

6. 多类选择器：要想选择同时包含class1和class2的两个类的元素,则需要多类选择器.class1.class2{color:blue;}

7. 通配选择器：这个选择器可以与任何元素匹配，如* {color:blue;},*这个符号可以被人为之所有的元素的一个分组器。

8. 后代选择器：我们可以选择特定的后代来进行操作。比如我们要选择一个p元素中的ul元素中的em元素进行操作，那么就是p ul em{color:gray;}

9. 相邻兄弟选择：选择紧接在x元素后的y元素x+y{color:gray;}

伪类和伪元素

利用伪类选择器和伪元素选择器可以为文档中不一定具体存在的结构指定样式，或者为某些元素的状态所指示的幻象类指定样式。

伪类

1. 链接伪类：:link,:visited
2. 动态伪类：:focus,:hover,:active
3. 选择第一个子元素：:first-child
4. 语言选择：:lang()

伪元素

1. 设置首字母样式：:first-letter
2. 设置第一行样式：:first-line
3. 设置之前元素样式：:before
4. 设置之后元素样式：:after

---

第三章：结构和层叠

确定一个元素究竟使用哪一个样式不仅要考虑继承，还要考虑其特殊性，还要考虑声明的的来源。

特殊性的判断

特殊性值表述为4个部分,行内定义样式,ID,类与属性,元素与伪元素。他们对应一个四位数的千位，百位，十位，个位。对于一个选择器，拥有其中的一个特征就在相应的数位+1。两个选择器谁的值大谁的特殊性就大。

需要注意的几点是：

• 通配选择器对一个选择器的特殊性没有贡献，但与根本没有特殊性是有区别的
• ID比属性选择器更特殊
• 内联样式特殊性最高
• !important并没有特殊值，但是他却比非重要的声明都“特殊”，我们可以认为其他所有的声明都是非重要的，而所有加上!important都是重要的声明。其使用方法是在一个声明的分号前定义如h1{background:black !important;}。

继承

1. 大多数框模型属性（包括外边距、内边距、背景和边框）都不能继承，继承值没有特殊性。
2. 继承的值没有特殊性，甚至连0特殊性都没有,但是0特殊性比没有特殊性要强。
3. 通配选择器有0的特殊性，比继承的无特殊性要更特殊。所以不加区别地使用通配选择器可能存在的问题之一它往往有一种短路继承的效果。更合适的做法是从一开始就避免不加区别地使用通配选择器。

层叠

声明权重考虑5级，权重由大到小顺序依次为

1. 读者的重要声明
2. 创作人员的重要声明
3. 创作人员的正常声明
4. 读者的正常声明
5. 用户代理声明

链接样式顺序：link-visited-hover-active(LVHA)，注意此时active由于在最后，所以它会优先应用。若将伪类链接在一起，能缓解特殊性和顺序带来的问题。

---

第四章：值和单位

Web 安全颜色

Web 安全颜色指在256色计算机上总能避免抖动的颜色。如果使用RGB百分数，要让所有三个分量要么是0%，要么是一个能被20整除的数。如果使用0~255范围的RGB值，则各分量要么是0要么是能被51整除的数。十六进制法中使用00,33,66,99,CC,FF的三元组都认为是颜色安全的。

相对长度单位em、ex、px

em是最灵活的，它随字体大小缩放，元素和元素操作都能更为一致。1em定义为一种给定字体的font-size值。如一个元素的font-size为14px，那么对于该元素，1em就是14个像素。

统一资源定位符url

绝对URL

绝对URL（absolute URL）显示文件的完整路径，这意味着绝对URL本身所在的位置与被引用的实际文件的位置无关，

相对URL

相对URL（relative URL）以包含URL本身的文件夹的位置为参考点，描述目标文件夹的位置。

URL和开始括号之间不能有空格

CSS2单位

• 角度值：读(deg)、梯度(grad)、弧度(rad)
• 时间值：毫秒(ms)、秒(s)
• 频率值：赫兹(Hz)、兆赫（MHz）

---

第五章：字体

字体系列font-family

1. Serif字体
   成比例，有上下短线，如Times
2. Sans-serif字体
   成比例，没有上下短线，如Helvetica
3. Monospace字体
   不成比例，每个字符宽度完全相同，如Courier
4. Cursive字体
   模仿人的手写体，如Author
5. Fantasy字体
   无法用任何特征来定义，如Western

字体加粗 font-weight

值：normal bold bolder lighter 100 200 300 400(normal) 500 600 700(bold) 800 900 inherit
初始值：normal

字体大小 font-size

1. 百分数和大小
2. 相对大小关键字：larger、smaller
3. 7个绝对大小值：xx-small x-small small medium large x-large xx-large
4. 长度单位

风格 font-style

值：italic | oblique | normal inherit
初始值：normal
区分：斜体（italic）是一种单独的字体风格，倾斜（oblique）则是正常竖直文本的一个倾斜版本

变形 font-variant

值：small-caps | normal | inherit
初始值：normal
small-caps：小型的大写字母

font属性

值：<font-style> | <font-variant> | <font-weight> | <font-size>/[<line-height>] | <font-family>
规则：前三个值可采用任意顺序且可省略，font-size和font-family须严格执行先后顺序且必须声明。可以记为粗细风格可变形，大小系列不随意。

---

第六章：文本属性

缩进文本 text-indent

值：<length> | <percentage> | inherit
应用于：块级元素
继承性：有

水平对齐 text-align

CSS2.1值：left | center | right | justify | inherit
应用于：块级元素
继承性：有

行高 line-height

值: normal | <number> | <percentage> | <length> | inherit
number代表放大倍数，也可以用像素来定义。

垂直对齐 vertical-align

详见

其他

1. 字间隔(word-spacing): 字符串间隔
2. 字母间隔(letter-spacing): 字母间隔
3. 文本转换(text-transform): （首字母）大小写转换
4. 文本装饰(text-decoration): 选择下划线的位置
5. 文本阴影(text-shadow): 选择文本的阴影类型
6. 处理空白符(white-space): 对空格的处理方式
7. 文本方向(direction): 块级元素中文本的书写方向

---

第七章：基本视觉格式化

基本框

1. 内边距不能是负值
2. 外边距可以是负值
3. 边框的宽度绝对不能为负

包含块

每个元素都相对于其包含块摆放。例如

<body>
    <div>
        <p>This is a paragraph</p>
    </div>
</body>

那么div就是p的包含块，body就是div的包含块。

块级元素

1. 水平格式化『7大属性』：margin-left、 border-left、 padding-left、 width、 padding-right、 border-right、 margin-right
2. 只有3个属性可以设置auto：分别为width、 margin-left、 margin-right。若3个属性都设置为非auto的某个值——格式化属性过分受限，此时总会把margin-right强制为auto（对于从左向右读的语言）。若3个属性都设置为auto，两个外边距都会设置为0，width会尽可能宽。若某个外边距及width设置为auto，设置为auto的外边距会减为0。
3. 当外边距为负值时，若设置width:auto;则width会自动调整到7个水平属性的总和等于父元素的width。也就是外边距的负值最终会被抵消。

百分数

混合使用百分数和长度单位，可能会很麻烦。但是只使用百分数又无法创建完全灵活的元素布局。

替换元素

对于替换元素，如果width为auto，元素的宽度则是内容的固有宽度，除非制定特定值覆盖这个规则。在未显示同时指定width、height情况下，宽高比保持不变。

垂直格式化

同样只有上下外边框可以设置为auto。值得注意的是margin-top或者margin-bottom设置为auto，会自动计算为0，使元素没有外边距，而不会垂直居中。但是比如height:50;那么上下外边框设置为25%倒是可以让内容置中。
高度若是设置成auto则会在段落上设置一个边框，并认为没有内边距。

外边距合并

两个外边距中较小的一个会被较大的一个合并。
如果两个外边距都为负，那么取二者绝对值得最大值。
如果一正一负，那么正值减去负值。

缩放行高

设置line-height最好方式是使用一个原始数字值，因为这个数会成为缩放因子，该因子是一个继承值而非计算值，会在元素间逐层传递。

display属性

规定元素应该生成的框的类型。详见

---

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

知识点

1. margin和padding的简写是遵循上右下左的顺序的
2. 百分数值定义相对于父元素的width。这不仅应用于左右外边距，也应用于上下外边距。比如div p{margin-left:10%;margin-top:20%;},如果我们设置<div style="width:500px;">，那么可知，左外边距将有50px，上外边距将有100px
3. margin后面跟几个值就有几个不同的意思
   1. margin:10px 5px 15px 20px;代表上，右，下，左外边框
   2. margin:10px 5px 15px;代表上，右左，下外边框
   3. margin:10px 5px;代表上下，右左外边框
   4. margin:10px;代表上右下左外边框
4. 外边距只影响行内非替换元素的左右边距。因为外边距不会改变一个元素的行高。能改变行高的属性只有line-height,font-size,vertical-align
5. 边框绘制在元素的背景之上。我们可以给四个边框或者单独的某一个边框指定样式，详见。设置边框宽度必须先保证边框存在，即不是border-style:none;的情况。边框还可以设置颜色。
6. 不论为行内元素指定怎样的宽度，元素的行高都不会改变。默认内边距为0
7. border属性几个值的顺序是任意的

---

第九章：颜色和背景

前景色

前景：元素的文本，还包括元素周围的边框。设置元素的前景色，最容易的方法是利用属性color,注意color可以被继承。

同时需要注意到的一件事情就是，默认地前景色会应用到边框。也就是说如果你的文本是红色的，那么你的边框也会是红色的。要覆盖掉这种行最基本的办法就是使用border-color属性

背景

• 元素的背景区包括前景之下直到边框外边界的所有空间；也就是说内容框和内边距都是元素背景的一部分。
• css允许纯色作为背景（background-color），也允许图片作为背景（background-image）。
• 注意背景不能被继承。
• 背景可以选择重复的方式（background-repeat）
• 背景可以选择位置（background-position），其可以由一个关键字指定（其他值是center），也可以由两个关键字或者百分数或者像素指定。两个关键字前面代表左右，后面代表上下。默认左上（0％ 0％和0px0px）。注意px可以为负值。
• 背景图像还可以选择是否随着页面的其余部分滚动（background-attachment)，值有fixed和scroll
• background中所有的值的顺序是随意的。

---

第十章：浮动和定位

浮动（float）

值：left | right | none | inherit
对于浮动元素需要将其看成是浮动在文档上的，但是他又会“占用”正常文档的位置。

浮动元素需要注意以下几点

1. 浮动元素周围的外边距不会合并。
2. 浮动一个非替换元素需显示指定宽度(避免不可预见的情形)。
3. 负外边距可能导致浮动元素移到其父元素的外面
4. 浮动元素之间不会重叠，且浮动元素都有向上的趋势。同时值为left的浮动元素会尽力向左浮动，值为right的浮动元素会尽力向右浮动。
5. 行内框与一个浮动元素重叠时，其边框，背景和内容都在浮动元素之上。
6. 块框与一个浮动元素重叠时，其边框和背景在浮动元素之下，但是文字在浮动元素之上
7. clear属性可以保证该元素的左边或者右边不会出现浮动元素，当然也就不会出现重叠的情况啦。

定位（position)

1. static：元素正常框，块级元素生成一个矩形框，作为文档流一部分，行内元素则会创建一个或多个行框，置于其父元素中
2. relative：元素框相对其正常位置偏移某个距离，原本所占空间仍保留
3. absolute：元素框从文档流完全删除，并相对于其包含块定位
4. fixed：元素框表现类似于将position设置为absolute，不过其相对于浏览器进行定位

后三种定位机制有top,right,bottom,left四种值，这四种值又有length和percentage和auto三种解释方式。
例如我们定义

top:50%; right:50%; bottom:0; right:0; margin:10em;

那就是说定位元素距离包含块上方50%，距离块左边50%。即右下角对齐。

使用这四种偏移属性可以替代在包含块中用%表示的height和width

包含块

• “根元素”的包含块。
• “非根元素”，其position值是relative或static，包含块由最近的块级框、表单元格或行内块祖先框的内容边界构成。
• “非根元素”，其position值是absolute，包含块由最近的position值不是static的祖先元素（可以是任何类型）构成

其他

• 我们可以设置最小/最大的宽度/高度，如min-width等，保证其属性值不为负。
• 我们可以设置内容溢出一个元素的框后发生的情况(overflow)
• 我们可以剪裁一个绝对定位的元素（clip）
• 我们可以控制元素是否可见（visibility）,这个元素的collapse属性可用于删除表格中的行或列。注意其hidden属性与display:none;是不一样的，后者代表这个元素直接在文档中被删除
• 我们还可以控制一个元素在z轴上显示的优先度（z-index），值越大优先级越高

---

第十一章：表布局

表格式化

在css中，内部表元素生成矩形框，这些框有内容，内边距和边框，但是没有外边距。

给定表格列中所有单元格宽度相等，给定表格行中所有单元格高度相等。

显示表

css将其表模型定义为“以行为主”，而列是从单元格行的布局中推导出来的。依次类推

css中列和列组只能接受4种样式：border、background、width和visibility

表中内容对齐可以采用text-align和vertical-align

匿名表

CSS定义了一种机制，将遗漏的组件作为匿名对象插入。比如我写了一个table，但是其中只有两个td，那么我们到底应该把这两个元素看成是一列还是一行呢？这里css就会自动插入匿名的对象来保证正确地解释这两个td。

详细插入规则如下：

1. 如果table-cell元素的父元素不是table-row元素，则插入匿名table-row对象
2. 如果table-row元素的父元素不是table、inline-table或table-row-group元素，则插入匿名table元素
3. 如果table-column元素父元素不是table、inline-table或table-row-group元素，则插入匿名table元素
4. 如果table-row-group、table-header-group、table-footer-group、table-column-group或table-caption的父元素不是table元素，则插入匿名table元素
5. 如果table元素或inline-table元素的子元素不是table-row-group、table-header-group、table-footer-group、table-column-group或table-caption，则插入匿名table-row元素
6. 如果table-row-group、table-header-group、table-footer-group元素的子元素不是table-row元素，则插入匿名table-row元素
7. 如果table-row元素的子元素不是table-cell元素，则插入匿名tabel-cell元素

表格层

如果我们定义第一行为蓝色，定义第一列为红色，那么第一行的第一列是什么颜色呢？css定义了6个层，很好地解决了这个问题。表各个方面的样式都在其各自的层上绘制。默认地，所有元素背景都是透明的。最后谁的层在上面就显示谁的样式。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t2fEhXU3-1574646084881)(http://orqka55ze.bkt.clouddn.com/QQ20170730-111459.jpg)]

这篇博文里有个演示模块我觉得很不错，推荐给大家链接

表标题（caption-side）

可以指定表格标题的位置

表边框（border-collapse）

选择边框是否被合并

表边框距离（border-spacing）

设置相邻单元格的边框间的距离（仅用于"边框分离"模式）。

表空单元处理（empty-cells）

是否显示表格中的空单元格（仅用于"分离边框"模式）。

表边框合并

如果两个或者或者多个边框相邻，他们会相互合并，总有一个边框会胜出。他们合并有如下规则

1. 如果某个边框的border-style:hidden，那么它最优先被隐藏。
2. border-style的默认值是none，它代表最不容易被隐藏
3. 若果至少有一个边框的border-style不是none，并且不是所有的边框都是hidden的话，则越窄的边框约容易被隐藏。并按照double > solid > dashed > dotted > ridge > outset > groove > inset这样的优先级来隐藏。
4. 若果样式和宽度都一样，按照颜色cell > row > row group > column > column group > table这样的优先级来隐藏

表大小（table-layout）

设置表的大小是由内容决定还是表格宽度和列宽度决定

第十二章：列表与生成内容

列表

列表属性

1. list-style-type:定义列表的标志类型
2. list-style-image:可以使用图像作为标志类型。有继承，子级列表会继承该图像。
3. list-style-position:inside|outside|inherit， inside:列表符号在内容开始的地方，outside：列表符号单独列在列表内容的外面。
4. list-style:有继承性,三个属性没有顺序要求

列表标志位置

标志相对于内容绝对定位，css2用display:marker和marker-offset属性来调整标志的相对于内容的距离，css2.1觉笨拙，淘汰，css3草案定义使用::maker伪元素来控制标志与列表项之间的距离，比如：li::marker{margin-right:20px;} 浏览器现在并没有实现。

生成内容

插入生成内容： 伪元素：before 和：after ；content 属性值为插入的内容。

生成内容放在元素框的内部。css2及css2.1明确地禁止浮动或定位：before和：after内容，且禁止使用列表样式属性和表属性。

另外有2个限制：

1. 若这两个选择器的主体是块级元素，则display属性只接受值None、inline、block、和marker 其他值处理为block。
2. 若这个两个选择器的主体是行内元素，属性display只能接受none和inline。其他值处理为inline.

给出一个普通的例子

h1:before{
    content: "New Section";
    display: block;
    color: gray;
    border-bottom: 1px dotted black;
    margin-bottom: 0.5em;

那么就会在正常的h1段落之前生成一个块级元素，里面显示“New Section”，并且在下面还会有一系列黑色小点。

生成内容由与之关联的元素继承值（只应用于可继承的属性）。如：关联主体是绿色，生成内容也是绿色

计数器

有序列表中的列表项标志就是计数器

创建计数器的基础包括两个方面，一个是设置计数器的起点，一个是设置其递增的量。这分别与counter-reset和counter-increment有关。

注意counter-reset后跟的是一个自定义的计数器名，初始值默认为0，可以通过在变量名后声明一个数来重置其初始值。

注意counter-increment后跟的是计数器的名字，默认加1，可以改变其后的数字来控制增量。

比如一个典型的例子。

<!DOCTYPE html>
<html>
<head>
<style>
body {counter-reset:section;}/*重置section计数器为0*/
h1 {counter-reset:subsection;}/*重置subsection计数器为0*/
h1:before
{
	counter-increment:section;/*在h1显示前让section计数器加1*/
	content:"Section " counter(section) ". ";/*在h1前显示section值*/
}
h2:before 
{
	counter-increment:subsection;/*在h2显示前让subsection计数器加1*/
	content:counter(section) "." counter(subsection) " ";/*在h2前显示"section.subsection"*/
}
</style>
</head>

<body>


<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>

<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

</body>
</html>

其显示为
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gOaMJMu1-1574646084882)(http://orqka55ze.bkt.clouddn.com/QQ20170730-131322.jpg)]

---

第13章：用户界面样式

系统字体和颜色

系统字体

我们可以直接使某个元素采用系统中某些控件的风格。比如a.widget{fong:caption;}就使得所有class为widget的元素字体像按钮和下拉部件一样。详见书401页

系统颜色

我们也可以通过声明
使得一个元素的背景与系统中的某些背景有关。详见书403页。

光标（cursor）

我们可以控制屏幕上光标的形状。甚至设置成自定义图像。设置的例子详见

轮廓（outline）

轮廓顾名思义就是某个东西的外部线条。会抠图的朋友都知道要“抠”一个人下来就是在它的身体周围画一圈线把他的轮廓勾勒出来，然后再抠。所以轮廓也就是某元素的外部线条。

轮廓有点类似边框，但是他们又不一样。首先，轮廓不会参与到正常的文档流中来。所以他就有可能覆盖其他轮廓。其次。轮廓能够合并。比如下面的例子

p{
	border:1px solid red;
}
b
{
	outline:green dotted thick;
}

<p>这是我随便打的这是我随便打<b>的这是我随便打的这是我随便打的这是我随便打的这是我随便打的这是我随便打的这是我随便打的</b></p>

按照上面的代码就会显示出下面的结果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RqXPttWy-1574646084884)(http://orqka55ze.bkt.clouddn.com/QQ20170730-160526.jpg)]

其中绿色部分就是轮廓，可见元素的轮廓在外部显示，而不会在元素内部显示。

轮廓的样式，颜色，宽度等等可以可以通过outline及其他与outline相关的属性设置。

---

第十四章：非屏幕媒体

设计特定媒体的样式表

使用media属性可以选择应用于不同媒体上的样式表。

@import规则同样也可以在规则上限制媒体

@import url{xx.css} screen, projection;
@import url{xxx.css} print;

如果我们没有为样式表增加媒体信息，那么它会应用于所有的媒体

同时我们定义了@media查询，可以在同一个样式表中为多个媒体定义样式，比如

@media screen{
    body{font-family: sans-serif;}
    h1{margin-top: 1em;}
}
@media print{
    body{font-family: serif;
    h1{margin-top: 2em;}
}

需要注意到的是，适合于设计和显示的字体是sans-serif字体，但是打印的话sans比sans-serif更加在行一些。

分页符

我们可以通过page-break-inside,page-break-before,page-break-after来选择是否在一个元素的内部，之前或者之后添加分页符。

语音

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j6CQm3VN-1574646084887)(http://orqka55ze.bkt.clouddn.com/QQ20170730-165258.jpg)]