《CSS3秘籍》第6、7章
第六章 文本格式化
1、字体
1）serif字体：适用于冗长的文字信息，包括Times、Times New Roman、Georgia
2）sans-serif字体：适用于标题，包括Arial、Helvetica、Verdana
3）monospaced字体：适用于计算机代码，字体中每个字母都是等宽的
2、字体文件类型
1）EOT：只适用于IE
2）True Type和Open Type：后缀为.ttf（True Type）或.otf（Open Type），用于进行文字处理和桌面印刷，以及用于网页，适用于IE9及之后的版本、Firefox、Chrome、Opera、iOS Safari（4.2及其之后的版本）、Android以及Blackberry浏览器
3）WOFF：是True Type和Open Type的压缩版本，Android和IE8不支持
4）SVG：创建矢量图，IE和Firefox不支持，Safari4.1及其之前版本唯一支持的字体
3、@font-face{
font-family:”My Font”; //字体命名
src:url(‘../_fonts/my_font.eot’);//针对IE9的兼容模式
src:url(‘../_fonts/my_font.eot?#iefix’)format(‘embedded-opentype’) ,//针对IE6-IE8
src:url(‘../_fonts/my_font.woff’) format(‘woff’),
src:url(‘../_fonts/my_font.ttf’)format(‘truetype’) ,
src:url(‘../_fonts/my_font.svg’) format(‘svg’);//字体类型的排列顺序：.eot、.wof、.ttf、.svg
font-weight:normal/bold;
font-style:normal/italic;
}
4、颜色
1）颜色关键字：aqua（浅绿色）、black、blue、fuchsia（紫红色）、gray（灰色）、green、lime（青柠色）、maroon（栗色）、navy（藏青色）、olive（橄榄色）、orange、purple、red、silver（银色）、teal（浅灰色）、white、yellow
2）十六进制数
3）RGB：均用百分比（0%~100%），或者0~255之间的数字来表示
4）RGBA：透明度用0~1之间的数字来表示
5）HSL：色相用0~360之间的数字，饱和度用0%~100%之间的百分比，亮度用0%~100%之间的百分比来表示
6）HSLA
5、字号
1）字号关键字：xx-small、x-small、small、medium、large、x-large、xx-large
2）percentage（百分比），默认100%
3）em（行长单位）
4）pixel（像素）
6、格式化词语和字母
1）粗体化：font-weight:normal/bold;
2）斜体化：font-style:normal/italic/oblique
3）大写化：text-transform:uppercase/lowercase/capitalize/none
4）小型大写字母：text-variant:small-caps
5）文本的修饰：text-decoration:underline/overline/line-through/blink/none
6）字母间距：letter-spacing
7）字词间距：word-spacing
8）阴影：text-shadow，包括水平偏移量、垂直偏移量、阴影的模糊度以及阴影的颜色，IE9及其更早的版本不支持
7、格式化段落
1）行间距：line-height，默认120%
2）对齐文本：text-align:left/right/justify/center
3）首行缩进：text-indent:2em
4）控制段落之间的距离：margin-top:0;margin-bottom:0;
5）格式化段落的首字母：:first-letter
6）格式化段落的首行：:first-line
8、定义列表的样式
1）列表的类型：list-style-type:none
项目符号：disc（实心圆形）/circle（空心圆形）/square（实心方块）
数字类型：decimal（十进制）/decimal-leading-zero（十进制-前面置零）/upper-alpha（大写字母）/lower-alpha（小写字母）/upper-roman（大写罗马字母）/lower-roman（小写罗马字母）
2）给项目符号和项目序号定位：list-style-position:outside/inside或者是padding-left或者是margin-left（适用于IE）
3）定制项目符号和项目序号：ul li:before{content:counter(item,disc) “ ”; color:red;}或者是ol li:before{content:counter(item,disc) “.”; color:red;}
4）图形项目符号：list-style-image:url(image/bullet.gif);
第七章 margin、padding和border
1、盒模型
2、边距冲突：采用最大的那个边距
3、边距折叠：在外围元素周围添加一点padding或者添加一条border。水平边距不会和浮动元素之间的边距发生折叠；绝对定位和相对定位的元素也不会发生折叠
4、margin可以是负值，padding不可以是负值
5、块级盒子（块级标签）：标题、<div>标签、<p>标签、表格、列表
6、行内盒子（行内标签）：<img>标签、<a>标签、创建表单域的各种标签。可以用left/right padding或left/right margin在行内元素的左边或右边添加空格，却不可以用top/bottom padding或top/bottom margin来增加行内元素的高度，但<img>标签是个例外
7、边框：border:border-width border-style border-color
8、背景色：background-color
9、圆角或椭圆圆角：如border-radius:20px或20px/40px，IE8及其更早的版本不支持
10、阴影：box-shadow，包括水平偏移量、垂直偏移量、阴影半径、阴影颜色；必须采用px或em为单位，不能使用百分比；IE8及其更早的版本不支持
11、盒子宽度：box-sizing:border-box（包含padding和border宽度）/padding-box（包含padding宽度）/content-box
12、控制溢出：overflow:visible/scroll/auto/hidden
13、浮动：float:left/right/none，Web浏览器将浮动的行内元素当作块级元素对待；Web浏览器会包围浮动元素周围的文本，但不会包围边框或背景，设置overflow:hidden;让任何延伸到浮动下方的背景和边框消失
14、停止浮动：clear:left/right/both/none
