博主廢話少說，直接介紹css常用的屬性和屬性值；屬性和值只需過一遍，頁面的結構還是需要佈局，佈局的只是後期會更新的。 提供一些圖標的網站：font-awesome: http://fontawesome.dashgame.com/ | iconfont: http://www.iconfont.cn ...
博主廢話少說，直接介紹css常用的屬性和屬性值；屬性和值只需過一遍，頁面的結構還是需要佈局，佈局的只是後期會更新的。
提供一些圖標的網站：font-awesome: http://fontawesome.dashgame.com/ | iconfont: http://www.iconfont.cn/
文本樣式
1、字體樣式
color 為字體指定顏色 ，取值如下：
顏色的英文單詞：white、RGB值rgb(255,255,255)、RGBA值rgba(255,255,255,0.5)、16進位值#ffffff
font-family 為文字指定特殊的字體，瀏覽器只會使用瀏覽器可以訪問到的字體，取值如下：
通用字體
• serif :有襯線的字體,筆畫結尾有特殊的裝飾線或襯線
• sans-serif :無襯線的字體，筆畫結尾是平滑的字體
• monospace :等寬字體，用於代碼，字體中每個字寬度相同
• cursive :草書，這種字體有的有連筆，有的還有特殊的斜體效果。
• fantasy :裝飾字體 ，具有特殊藝術效果的字體
常用字體
• Microsoft YaHei
• 微軟雅黑
• 宋體
註意：可以連續去多個值，當第一種沒有就使用第二種，以此類推
導入系統外的字體
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>樣式表的引入方式</title> <style> div{ font-family: myFont; /*使用自定義字體*/ } @font-face{ /* 自己定義的字體名字，src找出字體的安裝路徑*/ font-family: "myFont"; src: url("字體的安裝路徑"); } </style> </head> <body> <div> 測試自己定義下載安裝的字體樣式 </div> </body> </html>
font-style 用於打開和關閉斜體文本，取值如下：
normal:正常字體、 italic：斜體、oblique：模擬斜體
font-weight 為字體設置粗細程度，取值如下：
normal,bold:正常，加粗字體、lighter,bolder:比父元素更細，更粗、 100-900：數值類型的粗細程度
font-size 為文字指定大小，取值如下：
類似於16px、20px、30px
text-align 文字排列方式，取值如下：
center:居中對齊、left：靠左對齊、right：靠右對齊
text-transform 設置或者取消字體改變，取值如下：
none :防止任何改變 、uppercase: 將文本轉換為大寫 、lowercase: 將文本轉換為小寫 、capitalize: 將所有單詞第一個字母轉換為大寫 、 full-width: 轉換為類似於一個等寬字體
text-decoration 設置或者取消文本修飾，取值如下：
none : 取消所有文本修飾 、underline : 為文本添加下劃線 、 overline : 為文本添加上劃線 、 line-through : 為文本添加刪除線
text-shadows 設置或者取消文本陰影，語法：text-shadow:h-shadow v-shadow blur color; 取值如下：
none : 取消所有陰影
h-shadow : 必需。水平陰影的位置。允許負值。
v-shadow : 必需。垂直陰影的位置。允許負值。
blur : 可選。模糊的距離。
color : 可選。陰影的顏色。參閱 CSS 顏色值。
2、列表樣式
list-style-type : 設置列表項標誌類型，取值如下：
none：沒有標誌、
無序列表：
disc：預設實心圓、circle：空心圓、square：正方形、
有序列表：
decimal：數字從1開始、lower-roman：小寫的羅馬i ii iii iv、upper-roman：大寫的羅馬I II III IV、lower-alpha：小寫字母
list-style-position : 設置列表項標誌出現的位置，取值如下：
outside : 列表項標誌出現在主塊框的外部 、 inside : 列表項標誌出現在主塊框的內部
list-style-image : 自定義設置列表項標誌，取值如下：
url(“存放地址”)
list-style : 列表樣式的速記寫法，取值如下：
[<type>][<image>][<position>]
line-height 設置列表的行高
3、文本樣式
cursor : 調整游標懸浮到鏈接上的時候游標的形狀，取值如下：
pointer:手勢、wait：等待、。。。。
outline : 調整環繞鏈接的框
text-decoration : 自定義設置列表項標誌
text-align : 文本對齊方式
盒子
HTML5中有兩種盒子模型，但是我們常用的都是預設盒子模型/W3C盒子模型/標準盒子模型；還有一種是邊框盒子模型/IE盒子模型。這兩種盒子模型的轉換有屬性名box-sizing,預設盒子模型的值是content-box,邊框盒子模型的值是border-box。
我們對預設盒子模型設置寬高就是相當於對盒子的內容區域設置寬高；對邊框盒子模型設置寬高就是設置整個盒子的寬高，之後都是針對預設盒子模型展開的。
width & height 用於設置內容區的寬高，該片區域用於顯示內容。盒子高度預設為內容的高度
padding 代表內容盒子的外邊界與外邊框的內邊界之間的距離
border 設定介於padding的外邊緣與 margin的內邊緣之間，預設值為0
margin 代表盒子四周的區域。設值方法 與padding類似。相鄰元素的邊 框會合併（margin collapsing ）
1、盒子背景樣式：
background-color 為元素設置一種顏色，取值如下：
和上面取顏色的值是一樣的
background-image 為元素設置一個背景圖片， 取值如下：
none：不設置圖片、url()： 圖片的存放地址
background-clip 設定背景的覆蓋範圍，指的是將背景圖片一整張放置上面，如果是content-box，就會把content-box之外的圖片裁剪掉，取值如下：
• border-box : 背景位於邊框以內 • padding-box : 背景位於內邊距以內 • content-box : 背景位於內容區
background-origin 設定背景的起始點，指的是從哪裡開始放置圖片，取值如下：
• border-box : 背景圖片從邊框的外邊緣開始繪製 • padding-box : 背景圖片從內邊距的外邊緣開始繪製 • content-box : 背景圖片繪製在內容區
background-position 設置為背景圖像初始位置，相當於background-origin定義的位置，給個坐標就行，類似於 background-position: 200px 100px;
background-repeat 設置背景圖片的重覆方式，取值如下：
• repeat : 為了覆蓋整個背景範圍，背景圖片儘可能多的重覆，在背景 邊緣切割(clipping)最後一個圖片以使用整個背景範圍。
• space : 使用空白分隔開圖片，儘可能使背景圖片占滿整個屏幕而不 使用切割(clipping)
• round : 將圖片壓縮或者是擴展以適應整個背景範圍，不使用切割；如果區域能容納兩種，就會繪製兩張
• no-repeat : 不重覆
background-attachment 設置背景圖片的固定點，取值如下：
• fixed : 背景固定在視口上 • scroll : 背景固定在自身元素上 • local : 背景固定在自身元素的內容上
background-size 設置背景的大小，取值如下：
• cover : 背景寬高等比例鋪滿整個屏幕，（儘量不要使用大圖覆蓋小範圍）
background 背景設置的速記寫法
[<attachment>][<clip>][<color>][<image>][<position>][<repeat>]
2、盒子邊框樣式
border-width 為元素指定邊框的寬度，給個具體的值就行，類似於1px、2px
border-style 為元素指定邊框樣式，取值如下：(1個值--》上下左右；2個值--》上下，左右；3個值--》上，左右，下；4個值--》上，右，下，左
• none : 不設置 • hidden : 隱藏 • dotted : 顯示一系列的點 • dashed : 顯示一系列小線段
• solid : 顯示一條單一的實心直線 • double : 顯示兩條實心直線 • groove : 邊框雕刻效果(與ridge相反)
• ridge : 與groove相反 • inset : 嵌入式邊界框(與outset相反) • outset : 突出的邊界框
border-color 為元素指定邊框顏色，和上面的顏色取值一樣
border-radius 為元素指定圓角邊框的半徑，給個具體的數值就行
border-image 為元素設定邊框背景
border-image-source 用於載入作為邊框的圖片
• url()
border-image-slice 用於切割邊框圖片
• one value : 每邊都是這個值切割
• Two values : 上下邊是一個值，左右邊是一個值
• Three values : 上邊一個值, 左右一個值, 下邊一個值
• Four values : 上右下左都取一個值
border-image-repeat 用於設置邊框圖片重覆方式
• stretch : 拉伸，不推薦；repeat : 重覆切割；
• round : 重覆自適應； space : 重覆自適應；
border 邊框相關屬性的速記寫法
3、表格樣式
table-layout 指定顯示表格的盒子，行，列的演算法，取值如下：
• auto : 【預設值】絕大多數瀏覽器採用的一種佈局表格的方式。table以及 cell的寬度取決於包含在其中的內容
• fixed : table的寬度以及列的寬度取決於表格的第一行各列設定的寬度
border-collapse 指定表格的邊框是合併還是分開，取值如下：
• separate: 【預設值】分開模式，表示相鄰的兩個格子都有獨立邊框
• collapse: 合併模式，表示相鄰的兩個格子共用邊框
caption-side 指定caption坐落在表格的哪個位置上，取值如下：
• top : 標題位於表格的上方
• bottom : 標題位於表格的下方
• left : 標題位於表格的左方
• right : 標題位於表格的右方
