精通CSS高级WEB标准解决方案（第三版）笔记
1 CSS选择符1.1 类型选择符1.2 ID选择符1.3 类选择符1.4 后代选择符1.5 子选择符1.6 相邻同辈选择符1.6 一般同辈选择符1.7 通用选择符1.7 属性选择符 2 伪元素和伪类2.1 伪元素2.2 伪类 3 层叠4 特殊性（CSS生效的优先级）5 应用CSS样式5.1 性能 6 格式化模型6.1 盒模型6.2 最大值和最小值6.3 匿名盒子6.4 外边距折叠6.5 相对定位6.6 绝对定位6.7 固定定位6.8 浮动 7 网页排版7.1 文本颜色7.2 字体族7.3 字体大小7.4 行高7.5 垂直对齐7.6 文本粗细7.7 字体样式7.8 大小写变化和小型大写变体7.9 字与字的间距7.10 段落首行缩进7.11 对齐7.12 连字符7.13 多栏文本7.14 @font-face规则7.15 字距选项7.16 文本阴影1 CSS选择符
选择符之间可以相互搭配使用
1.1 类型选择符
<style type="text/css">p {color: red;}</style><div>此段落不受样式的影响。</div><p>此段落通过类型选择器修改为红色。</p>
1.2 ID选择符
<style type="text/css">#demo{color: red;}</style><p>此段落不受样式的影响。</p><p id="demo">此段落通过ID选择器修改为红色。</p>
1.3 类选择符
<style type="text/css">.demo{color: red;}</style><p>此段落不受样式的影响。</p><p class="demo">此段落通过类选择器修改为红色。</p>
1.4 后代选择符
<style type="text/css">#demo p {color: red;}</style><p>此段落不受样式的影响。</p><div id="demo"><p>此段落通过类选择器修改为红色。</p><div><p>此段落通过类选择器修改为红色。</p></div></div>
注意此处demo下的所有< p >标签变成红色
1.5 子选择符
<style type="text/css">#demo > p {color: red;}</style><p>此段落不受样式的影响。</p><div id="demo"><p>此段落通过类选择器修改为红色。</p><div><p>此段落不受样式的影响。</p></div></div>
注意此处只有demo下的子标签< p >变成了红色
1.6 相邻同辈选择符
<style type="text/css">#demo + p {color: red;}</style><p>此段落不受样式的影响。</p><div id="demo"></div><p>此段落通过类选择器修改为红色。</p><p>此段落不受样式的影响。</p>
1.6 一般同辈选择符
<style type="text/css">#demo ~ p {color: red;}</style><p>此段落不受样式的影响。</p><div id="demo"></div><p>此段落通过类选择器修改为红色。</p><p>此段落通过类选择器修改为红色。</p>
1.7 通用选择符
<style type="text/css">* {color: red;}</style><div>此段落通过类选择器修改为红色。</div><p>此段落通过类选择器修改为红色。</p><span>此段落通过类选择器修改为红色。</span>
1.7 属性选择符
<style type="text/css">input[type="button"] {color: red;}</style><input type="button" value="此按钮为红色"/><input type="submit" value="此按钮为黑色"/>
拓展：
以下是实例：
<style type="text/css">a[href^="http://"] {color: red;}img {width: 20px; height: 20px; background-color: red;}img[src$=".jpg"] {background-color: blue;}input[name*="button"] {color: red;}p[name~="demo"] {color: red;}a[lang|="en"] {color: red;}</style><a href="">此超链接为红色</a><a href="">此超链接为默认颜色</a><br><div><img src="demo.jpg"/>此图片为蓝色</div><div><img src="demo.png"/>此图片为红色</div><br><input type="button" name= "demo-button-name" value="此按钮为红色"/><input type="button" name="demo" value="此按钮为黑色"/><br><p name="p demo name">此段落通过类选择器修改为红色。</p><p name="p demoname">此段落通过类选择器修改为黑色。</p><br><a lang="en">此超链接为红色</a><a lang="en-us">此超链接为红色</a><a lang="us">此超链接为默认颜色</a>
2 伪元素和伪类
2.1 伪元素
实例内容请参照w3school
2.2 伪类
伪类的语法是以冒号开头，用于选择元素的特定状态或关系
以上出现的以n作为参数的，可以使用数值表达式作为参数。
例如:nth-child(3n+1)，其中n前面的数字和n都可以修改，比如改为nth-child(-n+3)为只选择前三个。
以下是例子：
<style type="text/css">tr:nth-child(3n+1){background:red;}</style><table><tr><td>这是第1行(红)</td></tr><tr><td>这是第2行</td></tr><tr><td>这是第3行</td></tr><tr><td>这是第4行(红)</td></tr><tr><td>这是第5行</td></tr><tr><td>这是第6行</td></tr><tr><td>这是第7行(红)</td></tr></table>
3 层叠
层叠机制的重要性级别从高到低如下：
标注为!important的用户样式标注为!important的作者样式作者样式用户样式浏览器的默认样式
4 特殊性（CSS生效的优先级）
优先级从高到低如下：
6. style=“”
7. ID选择器（#id）
8. class选择器（.class）
9. 类型选择器（div p）
注意：两条规则的特殊性相等时则优先运用后定义的规则
例如链接伪类的正确定义次序为——:link、:visited、:hover、:focus、:active
5 应用CSS样式
应用CSS样式主要有以下方式
10. 将样式放入<style></style>中
11. 使用link元素：<link href=“demo.css” rel=“stylesheet”>
12. 使用@import指令：@import url(“demo.css”);
注意：一般推荐第二种方式来引入css
5.1 性能
不要把CSS放到<body></body>标签中或者放到页面底部为了减少HTTP请求，尽量不要使用@import，且尽量减少引入的CSS文件的数量压缩和缓存内容不让浏览器渲染阻塞javaScript，给<script>标签添加async和defer属性或者将<script>放到HTML页面底部</body>标签前加载javaScript6 格式化模型
6.1 盒模型
一个元素盒子由内容区、内边距（padding），边框（border），外边距（margin）四部分组成，可以使用轮廓线(outline)清洗的看出盒子的布局。
注意：将box-sizing的值修改为border-box，此时盒模型的width和height属性的值将会包含内边距和边框。
6.2 最大值和最小值
给一个元素应用min-width和max-width值可以默认自动填充父元素的宽度，但是不会收缩到比min-width更小或者扩展到比max-width更大的值。
6.3 匿名盒子
在section块级元素的开头加入“some text”。此时，“some text”就算没有定义为块级元素，也会被当成块级元素。
<section>some text<p>Some more text</p></section>
这种情况下，这个盒子被称为匿名块盒子。因为这个盒子并不与任何特定的元素相关。
6.4 外边距折叠
常规块盒子有一种机制叫作外边距折叠。垂直方向上的两个外边距相遇时，会折叠成一个外边距。折叠后外边距的高度等于两者中较大的那一个高度。
注意：行内盒子、浮动盒子、绝对定位盒子的外边距不会折叠
6.5 相对定位
元素的position属性设置为relative。
可以通过设置top、right、bottom和left属性，使该元素相对于初始位置平移一定距离。
注意：无论是否位移，相对定位的元素仍然会在文档流中占用初始的空间。因此，这样平移元素会导致它遮挡其他元素。
6.6 绝对定位
元素的position属性设置为absolute。
可以通过设置top、right、bottom和left属性，使该元素相对于祖先元素位置平移一定距离。
绝对定位元素的包含块是距离它最近的定位祖先，也就是position属性设置为static之外任意值的祖先元素。如果没有这么一个定位祖先，那么它就相对于文档的根元素即html元素定位。
注意：绝对定位则会把元素拿出文档流，因此也就不会再占用原来的空间。可能遮挡其他的元素，可以通过设置z-index的属性来控制盒子层叠的次序。z-index属性值越大，盒子在层叠中就靠近上层
6.7 固定定位
将position属性设置为fixed就可以将元素设置为固定定位，固定定位是由绝对定位衍生出来的。固定定位可用来创建始终停留在窗口相同位置的浮动元素。可以用来做固定侧栏或者固定顶栏
6.8 浮动
另一种可见格式化模型是浮动模型。给元素添加float属性，可以使盒子向左或向右移动，直到其外边沿接触包含块的外边沿，或接触另一个浮动盒子的外边沿。
浮动盒子也会脱离常规文档流，如果包含元素太窄，无法容纳所有浮动元素水平排列，则后面的浮动元素会向下移动。如果浮动元素高度不同，则后面的浮动元素在向下移动时可能会“卡”在前面的浮动元素右侧。
要阻止行盒子环绕在浮动盒子外面，需要给包含行盒子的元素应用clear属性。clear属性的值有left、right、both和none，用于规定元素的哪一侧不允许其他浮动元素
7 网页排版
7.1 文本颜色
color属性设置颜色
<style type="text/css">#demo{color: red;}</style>
7.2 字体族
字体族( font-family )属性的值是一个备选字体的列表，按优先级从左到右排列：
<style type="text/css">body {font-family: 'Georgia Pro', Georgia, Times, 'Times New Roman', serif;}</style>
字体列表最后的serif叫做通用字体族，在这里充当没有选择的选择。
7.3 字体大小
使用font-size属性设置，几乎所有浏览器的默认大小都是16px。
<style type="text/css">p {font-size: 21px;}</style>
7.4 行高
使用line-height属性设置，如果该属性的设置了没有单位的值，则是当前font-size的倍数。
例如：
<style type="text/css">p {font-size: 20px;line-height: 2;}</style>
表示的意思是line-height的值是font-size的2倍，也就是40px。
7.5 垂直对齐
使用vertical-align属性设置，默认值是baseline，表示子元素的基线与父元素的基线对齐。
7.6 文本粗细
使用font-weight属性设置，默认值是normal，对应400。
7.7 字体样式
使用font-style属性设置，默认是normal。
7.8 大小写变化和小型大写变体
使用text-transform属性设置，默认值是none。
7.9 字与字的间距
使用word-spacing属性增加或减少字与字之间的空白，默认值是normal 。
7.10 段落首行缩进
使用text-indent属性设置。
7.11 对齐
使用text-align属性设置，默认是左对齐。
如果给父元素设置dir="rtl"属性，即从右向左显示。
text-justify属性指定文本对齐设置为"justify"的理据。
此属性指定应怎样对齐文本以及对齐间距。
7.12 连字符
使用hyphens属性来链接。hyphens属性的默认值为manual。
<html lang="en">
7.13 多栏文本
为了在不支持多栏属性的浏览器中确保行长不会超过限度，可以在段落元素上应用max-width属性。
7.14 @font-face规则
@font-face 规则中，您必须首先定义字体名称，然后通过 font-family 属性引用字体的名称指向字体文件。
@font-face {font-family: DamoFontFamily;src: url(damo1.woff);src: url(damo2.woff);}p {font-family: DamoFontFamily;}
注意：字体的 URL 使用小写字母。大写字母可能会在 IE 中产生意外结果！
7.15 字距选项
font-kerning属性控制字体中存储的字距信息的使用。
7.16 文本阴影
text-shadow属性用于给文本设置阴影。
text-shadow: h-shadow v-shadow blur color;
可以通过逗号分隔来给文本添加多组阴影，会按先定义的在上，后定义的在下的先后次序堆叠。
