第一章 HTML标记与文档结构

1.1 HTML标记基础

用HTML标记内容的目的是为了赋予网页语义(semantic),又牵扯到语义化的问题。

目前，HTML一共有114个标签，但按照80/20原则，使用其中25个左右的标签就可以满足80%的标记需要

自闭合标签只是给浏览器提供一个对要显示内容的引用

视障用户使用的屏幕阅读器会大声读出alt属性的内容，因此一定要给<img>标签的这个alt属性添加让人一听或一看就能明白的内容。

1.2 HTML文档剖析

几乎所有HTML元素的display属性值要么为block，要么为inline。最明显的一个例外是table元素，它有自己特殊的display属性值。

行内元素盒子会“收缩包裹”其内容，并且会尽可能包紧。

HTML实体常用于生成那些键盘上没有的印刷字符。以一个和号(&)开头，一个分号(;)结尾，二者之间表示实体的字符串。

1.3 文档对象模型

DOM是从浏览器的角度来观察页面中的元素以及每个元素的属性，由此得出这些元素的一个家族树。

结构化的标签

1.4 小结

第二章 CSS工作原理

2.1 剖析CSS规则

为文档添加样式的三种方法：行内样式，嵌入样式，链接样式 除了这三种，还有一种在样式表中链接其他样式表的方法，那就应用@important @import url(css/styles2.css) 要注意的是，@import指令必须出现在样式表中其他样式之前，否则引用的样式表不会被加载

层叠机制

2.2 上下文选择符

与分组选择符的区别

2.3 特殊的上下文选择符

子选择符>

紧邻同胞选择符+

一般同胞选择符~

通用选择符*

2.4 ID和类选择符

因为href属性值为空的链接的行为跟正常链接不一样。所以不能把该属性留空

2.5 属性选择符

属性名选择符

属性值选择符

2.6 伪类

伪类分两种：

2.7 伪元素

顾名思义，伪元素就是你的文档中若有实无的元素

  1. ::first-letter 伪元素
  2. ::first-line 伪元素
  3. ::before和::after伪元素

搜索引擎不会取得伪元素的信息，因为它在标记中并不存在

为解决样式冲突，确定哪条规则“胜出”并最终被应用，CSS提供了三种机制：继承，层叠和特指。

2.8 继承

继承有点要注意的地方就是比如某个标签的字体大小被设置为80%，而它的一个后代的字体大小也被设置为80%，那么该后代中文本最终的字体大小将是64%。

2.9 层叠

层叠，就是层叠样式表中的层叠。

规则一：包含ID的选择符胜过包含类的选择符，包含类的选择符胜过包含标签名的选择符。

规则二：如果几个不同来源都为同一个标签的同一个属性定义了样式，行内样式胜过嵌入样式，嵌入样式胜过链接样式。在链接的样式表中，具有相同特指度的样式，后声明的胜过先声明的。 规则一胜过规则二。换句话说，如果选择符更明确(特指度更高)，无论它在哪里，都会胜出。

规则三：设定的样式胜过继承的样式，此时不用考虑特指度(即显示设定优先)。

2.10 规则说明

CSS属性值主要分为以下三类：

第三章 定位元素

position属性控制页面上元素间的位置关系，display属性控制元素时堆叠，并排还是跟本不在页面上出现，float属性提供控制的方式。

3.1 理解盒模型

每个盒子的属性也分为三种粒度

边框border相关属性：宽度，颜色，样式 border-radius

叠加外边距：垂直方向上的外边距会叠加；水平外边距不叠加

以em为单位可以让段间距随字号变化而相应增大或缩小

3.2 盒子有多大

添加边框会进一步减小内容区的宽度

CSS3新增的box-sizing属性，通过它可以将有宽度的盒子也设定成具有默认的auto状态下的行为。 使用CSS3的box-sizing属性切换盒子缩放方式，比如section{box-sizing:border-box;}。应用box-sizing属性后，给section添加边框和内边距都不会增大盒子，相反会导致内容变窄。

3.3 浮动与清除

浮动的内容已经脱离了文档流，因而无论原先在标记中包含它还是跟随它的元素其布局都会受到它的影响

浮动非图片元素时，必须给它设定宽度，否则后果难以预料。图片无所谓，因为它本身有默认的宽度

浮动元素脱离了文档流，其父元素也看不到它了，因而也不会包围它。这种情况有时候并非我们想要的，本节向大家传授三种围住浮动子元素的方法。

围住浮动元素的几种方法：

  1. 为父元素添加overflow:hidden
  2. 同时浮动父元素
  3. 在父元素内容的末尾添加非浮动元素，可以直接在标记中加，也可以通过给父元素添加clearfix类来加(当然，样式表汇总得需要相应的clearfix规则) 如下：
clearfix:after {
    content:".";
    display:block;
    height:0;
    visibility:hidden;
    clear:both;
}

这几种方法的使用要因地制宜。比如上面的添加一个类的方法可以在没有父元素但是要清除浮动的时候使用。

3.4 定位

对HTML中的文本应该使用恰当的语义标签来标记，也就是所谓的标签语义化

3.5 显示属性

把元素的visibility设定为hidden，元素会隐藏，但它占据的页面控件仍然是“虚位以待”。

3.6 背景

在使用border设定边框的样式和宽度，而没有设定边框颜色的情况下，边框会使用color属性设定的字体颜色。

关于背景重复，CSS3还规定了另外两个值：

background-repeat:round:为确保图片不被剪切，通过调整图片大小来适应背景区域。

background-repeat:space:为确保图片不被剪切，通过在图片间添加空白来适应背景区域

背景位置： 设定背景位置可以使用三种值：关键字，百分比，绝对或相对单位的数值。

背景尺寸： background-size是CSS3规定的属性，用来控制背景图片的尺寸，可以给它设定的值及含义如下

使用这个属性要注意，不要把本来很小的图片拉得太大，那样会导致图片质量失真。

背景粘附：

	background-attachment:scroll;
	background-attachment:fixed;

其它CSS3背景属性

	background-clip
	background-origin
	background-break

多背景图片 代码中先列出的图片显示在上方，或者说，更接近前景

背景渐变 渐变分两种，一种线性渐变，一种放射性渐变

第四章 字体和文本

如果说图片只是蛋糕上的糖衣，那么排版才是卓越设计的根本。

4.1 字体

网页中的字体有三个来源：

  1. 用户机器中安装的字体
  2. 保存在第三方网站上的字体
  3. 保存在你的Web服务器上的字体

字体和文本不是一回事

字体栈

“X高度”指英文字母不包括(字母d和p都有的)上伸部分和下伸部分的主要区域，恰好X没有这些部分，所以就用它的高度来衡量。

字体大小

相对大小会逐层复合

rem这个单位可谓集相对大小和绝对大小的优点于一身，通过它可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。除IE8以外，所有浏览器均已支持。

字体粗细

这些数字值没有什么用，对浏览器来说，它只显示font-weight属性的两个值：bold和normal。

font-variant属性除了normal，就只有一个值,即small-caps，小写英文字母编程小型大写字母

简写字体属性要遵守两条规则，否则浏览器无法正确解释声明的值。

4.2 文本属性

关于缩进：实际上你缩进的是这个文本盒子的起点位置。后续的行是不会缩进的，因为在CSS看来，它们就是一个整体。

文本属性只应用于这个长长的，细细的，内部的文本盒子，而不是包含元素的盒子。

字符间距：设定字符间距一定要用相对单位；letter-spacing的值是在浏览器默认基础上增加或减少的值。

垂直对齐：vertical-align以基线为参照上下移动文本，但这个属性值影响行内元素。

4.3 Web字体大揭秘

目前，使用@font-face规则在网页中嵌入可下载字体的CSS功能，已经得到了浏览器的广泛支持。

4.4 文字版式

HMTL实体引用

必须在font简写属性中同时设定字体大小，而且要使用相对单位em。