1、CSS基本单位 px、%、em、rem了解
px 像素：物理单位，像素，就是屏幕上的一个点，是屏幕的最小单位。
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
%：基于父容器的相对单位
%（基于父容器的相对单位。height的%是基于父容器的高度，width、margin-top等是基于父容器的宽度，文字是基于父容器的文字大小。）
em：当前文字大小
rem：基于html的文字大小
2、文本样式
2.1 字体样式
font-family（family：家庭，可以存在多个字体）
为了方便阅读，电子设备上的字体都尽量是非衬线体。
sans-serif：无衬线字体
sans 的意思是无，sans-serif 也就是无衬线的意思。专指西文中没有衬线的字体，与汉字字体中的黑体相对应。与衬线字体相反，该类字体通常是机械的和统一线条的，它们往往拥有相同的曲率，笔直的线条，锐利的转角。
大名鼎鼎的微软雅黑相信都不陌生，从 windows Vista 开始，微软提供了这款新的字体，一款无衬线的黑体类字体，显著提高了字体的显示效果。现在这款字体已经成为 windows 浏览器最值得使用的中文字体。
被广泛用于全世界使用拉丁字母和西里尔字母的国家。Helvetica 是苹果电脑的默认字体，微软常用的Arial 字体也来自于它。
注：
1）字体名称可以是英文也可以是中文。
2）英文字体如果出来多个单词需要用双引号包括。
3）可以写多个字体，浏览器根据用户电脑上的字体从左到右选择。多个字体用逗号（半角逗号）分隔。
font-size：谷歌浏览器默认最小字号是12px，正常字号是16px
color：文字的颜色都是无彩色，从黑到白。
CSS中颜色的三种表现方式：
1）英文名称
红色：red； 绿色：green； 蓝色：blue； 黄色：yellow ...
2）16进制颜色值
（#RRGGBB） 0-9 （A（10）-F（15）或a-f）
红色：#ff0000； 绿色：#00ff00； 蓝色：#0000ff； 黄色：#ffff00 ...
这种模式可以简写，简写原则为： RGB三段分别相同时可以简写成3位。
**正确的： #ff0000 => #f00； #00ff00 => #0f0； #228833 => #283**
**错误的： #f10000 => #f100； #00ab11 => #0ab1； #228e36 => #28e36**
3）rgb或 rgba
红色： Rgb(255,0,0)； 绿色：Rgb(0,255,0)； 蓝色：Rgb(0,0,255)； 黄色：Rgb(255,255,0)
Rgba(255,0,0,1) 最后一位是透明通道。
font-weight：
中文网页不适合用具体的磅值（100—900），比如400表示normal，700表示bold。中文用英文单词的值即可。
英文只有26个字母，可以有不同的粗细胖瘦，中文字体一个字库好几万的字，一种字体有两三个不同的粗细已经不容易了，所以中文的设置不能照搬英文的设置。
在制定标准的时候，都是外国公司，中国只能按照国外的标准走。
font-style
normal
italic 中文天生没有斜体，这都是国外制定的标准，符合的是英文的习惯。
text-decoration 修饰线
**text-decoration :none**| **underline**| **blink**| **overline**| **line-through**
通常用于清除A标签的默认下划线
除A标签以外，一般不给其它标签加下划线效果，以免让用户产生误解
2.2 文本排版样式
text-align 文本水平对齐
left
right
center
justify
text-indent 首行缩进
可以为正值和负值
line-height 行高
normal 默认。设置合理的行间距。
number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length 设置固定的行间距。
% 基于当前字体尺寸的百分比行间距。
vertical-align 垂直对齐
vertical-align:baseline**|**sub**|**super**|**top**|**text-top**|**middle**|**bottom**|**text-bottom**|*length*
参数：
baseline : 将支持valign特性的对象的内容与基线对齐
sub : 垂直对齐文本的下标
super : 垂直对齐文本的上标
top : 将支持valign特性的对象的内容与对象顶端对齐
text-top : 将支持valign特性的对象的文本与对象顶端对齐
middle : 将支持valign特性的对象的内容与对象中部对齐
bottom : 将支持valign特性的对象的文本与对象底端对齐
text-bottom : 将支持valign特性的对象的文本与对象顶端对齐
length : 由浮点数字和单位标识符组成的长度值或者百分数。可为负数。定义由基线算起的偏移量。基线对于数值来说为0，对于百分数来说就是 0%.
扩展理解：
该属性首先只对inline-level的元素和table-cell的元素有效，对block-level的元素无效。
该属性最初的目的是为了对齐文本和紧邻文本的元素。 所以和text-align的对齐原理不一样。
针对inline-level的元素， 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
这种方式是直接对inline-level元素设置vertical-align。
在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。 这种方式是直接为td设置vertical-align
1、图片和文字在行内默认都是基线baseline对齐。在line box中，x字母的最下面就是默认基线的位置。
2、当为图片设置vertical-align：top的时候，图片的顶部和line box 的顶部对齐，这个时候，line box的基线会发生变化，上移。
3、当为图片设置vertical-align：middle的时候，图片的中心点和x的中心点对齐。
4、当为图片设置vertical-align：bottom的时候，图片的底部和line box的底部对齐。
所以，并不是文字相对于图片发生了上中下的对齐，而是改变了图片的对齐方式，line box的基线发生了变化，而文字默认是和line box的基线对齐的。
middle
baseline 默认。将元素的基线对齐到line-box的基线上 。
top 将元素的上边沿和line-box的上边沿对齐；
bottom 将元素的下边沿和line-box的下边沿对齐；
2.3 英文排版样式
text-transform
uppercase
lowercase
capitalize 将每个英文单词的首字母转换成大写，其余的无变化
letter-spacing 字母间距
对中文有效，中文的每一个字就是一个字符letter
word-spacing
单词间距，以空格为基准进行调节，如果汉字有空格分隔，则有效。
2.4 Font 字体复合属性
作用：设置或检索对象中的文本特性。该属性是**复合属性**。
语法：
**font :**
**font-style**
**font-weight**
**font-size/line-height**
**font-family**
示例：
/*完整写法*/ p { font:italic bold 12px/30px arial,sans-serif,"microsoft Yahei";} /*常用简写形式*/ p {font: 12px/24px "microsoft Yahei"; } p { font: bold 12px/24px "microsoft Yahei"; }
注：
复合属性的每一个属性值之间通常用空格隔开，特殊要求除外。
font最精简的形式也必须是font: 12px/24px "microsoft Yahei"; 否则不会生效。
3、背景样式
3.1 background-color
颜色值
transparent 透明
3.2 background-image
设置背景图片的容器必须有宽高，否则看不到图片
url 图片地址
none
3.3 background-repeat
no-repeat 背景图像不平铺
repeat-x 背景图像在横向上平铺
repeat-y 背景图像在纵向平铺
repeat 背景图像在纵向和横向上平铺
3.4 background-position
left
right
center
top
bottom
length
%
注：
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值是纵坐标。**值可以写英文，也可以写数字，甚至可以是负数。常用于 CSS sprites（CSS精灵）**
该属性定位不受对象的补丁属性padding设置影响。
3.5 background-attachment
scroll 默认。背景图像会随着页面其余部分的滚动而移动。 （绑定到body上）
fixed 当页面的其余部分滚动时，背景图像不会移动。（绑定到HTML标签上）
3.6 background简写
background-color, background-image, background-repeat, background-attachment, background-position
4、课堂总结
4.1 重点
文本的样式
背景样式
4.2 难点
line-height
vertical-align
background-position
4.3 学习方法
把不熟练的单词抄写3遍以上。
多敲代码，多思考。
4.4 排错技巧
利用chrome浏览器的开发者调试工具
3279916262