### 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