### 1.常用字体样式 ``` font:font-style font-variant font-weight font-size/line-height font-family font-style:italic/oblique (斜体)/normal; font-variant:small-caps; (小型大写字母) font-weight:bold/bolder/normal/100~900/lighter font-size:10px; font-family: Times, TimesNR, 'New Century Schoolbook',Georgia, 'New York', serif; ``` ***** ### 2.常用列表样式 ``` //list-style 的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。 list-style : url (example.gif) square inside； list-style-type:disc (默认)/none/circle (空心圆)/square (实心方块)/decimal (数字); //把无序列表中的列表项标志设置为方块 list-style-image:url ('xxxx'); list-style-position:outside (默认)/inside ``` ***** ### 3.常用表格样式 由于 table、th 以及 td 元素都有独立的边框，所以如下的设置会让表格具有双线条边框。 ``` table, th, td{ border: 1px solid blue; } ``` 如果需要把表格显示为单线条边框，请使用 `border-collapse` 属性，如下： ``` table{ //边框折叠 border-collapse:collapse; } table,th, td{ border: 1px solid black; } ``` 通过`width`和`height`设置高宽。 **表格文本对齐** text-align 和 vertical-align 属性设置表格中文本的对齐方式。 text-align 属性设置水平对齐方式，比如左对齐、右对齐或者居中。 vertical-align 属性设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐。 ``` td{ height:50px; text-align:center; //根据测试表格自动垂直居中，故只需要设置水平居中 vertical-align:center;/line-height:50px; } ``` **跨行跨列表格** ``` colspan：value//跨越列； rowspan：value//跨越行； ```   ***** ### 4.文本常用格式 **颜色** ``` color:red; ``` **文本对齐** ``` text-align:left/center/right; ``` **首行缩进** ``` //仅用于块级元素 text-indent:5em/60%; ``` 百分数要相对于缩进元素父元素的宽度。 换句话说，如果将缩进值设置为 20%，所影响元素的第一行会缩进其父元素宽度的 20%。 **文本修饰** ``` text-decoration:underline/overline/line-through/none; ``` **字符转换** ``` text-transform:none/uppercase/lowercase/capitalize (首字母大写); ``` ### 5.链接常用样式 ~~~ a:link {color:#FF0000;} /* 未被访问的链接 */ a:visited {color:#00FF00;} /* 已被访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */ a:active {color:#0000FF;} /* 正在被点击的链接 */ background:red; text-decoration:none; ~~~ ### 6.iconfont