一.為什么使用CSS
?????1.有效的傳遞頁面信息
?????2.使用CSS美化過的頁面文本,使頁面漂亮、美觀,吸引用戶
?????3.可以很好的突出頁面的主題內容,使用戶第一眼可以看到頁面主要內容
?????4.具有良好的用戶體驗
?
??二.字體樣式屬性
?????1.font-family:英文字體,中文字體??(類型)
??????font-family: Times,"Times New Roman", "楷體";
?????2.font-size:值單位????? (大小)
??????單位
???????px(像素)
???????em、rem、cm、mm、pt、pc
?????3.font-style:normal(正常)、italic(斜體)和oblique(傾斜)??(風格)
??????p span{
??????????????? font-weight: 700;
??????????? }
?????4.font-weight: 700???(字體粗細)
??????normal?默認值,定義標準的字體
??????bold?粗體字體
??????bolder?更粗的字體
??????lighter?更細的字體
??????100、200、300、400、500、600、700、800、900?定義由細到粗的字體
??????400等同于normal,700等同于bold
?????5.font:字體風格→字體粗細→字體大小→字體類型
??????font:oblique bold 12px "楷體";
??三.文本樣式
?????1.color
???????rgb(0,0,0)??取值在0~255之間
???????rgba(0,0,0,0)?最后一位代表透明度,取值在0~1之間
?????2.文本水平對齊方式text-align
???????left?把文本排列到左邊。默認值:由瀏覽器決定
???????right?把文本排列到右邊
???????center?把文本排列到中間
???????justify?實現兩端對齊文本效果
?????3.首行縮進
???????text-indent:20px;
?????4.行高
???????line-height:30px;
?????5.文本裝飾
???????text-decoration
???????none?默認值,定義的標準文本
???????underline?設置文本的下劃線
???????overline?設置文本的上劃線
???????line-through?設置文本的刪除線
?????6.文本垂直對齊
???????vertical-align
???????top:上對齊
???????bottom:下對齊
???????middle:中間對齊
?????7.文本陰影
???????text-shadow:顏色?? x軸移動位置?? y軸移動位置? 模糊半徑(0代表沒有)
??四.超鏈接偽類
?????a:link?未單擊訪問時超鏈接樣式?a:link{color:#9ef5f9;}
?????a:visited?單擊訪問后超鏈接樣式?a:visited {color:#333;}
?????a:hover?鼠標懸浮其上的超鏈接樣式?a:hover{color:#ff7300;}
?????a:active?鼠標單擊未釋放的超鏈接樣式?a:active {color:#999;}
??五.列表樣式
?????list-style-image: url(image/arrow-icon.gif);??列表項前圖像
?????list-style-type??指定列表項前圖標
?????none?無標記符號?list-style-type:none;
?????disc?實心圓,默認類型?list-style-type:disc;
?????circle?空心圓?list-style-type:circle;
?????square?實心正方形?list-style-type:square;
?????decimal?數字?list-style-type:decimal
??六.背景顏色和圖像
????顏色:background-color
????圖像:background-repeat:url(路徑)
?????repeat:沿水平和垂直兩個方向平鋪
?????no-repeat:不平鋪,即只顯示一次
?????repeat-x:只沿水平方向平鋪
?????repeat-y:只沿垂直方向平鋪
??七.漸變
????-瀏覽器內核-linear-gradient(方向,開始顏色,結束顏色)
????background:linear-gradient(to left,red,blue);
??????????? ?background:-webkit-linear-gradient(to left,red,blue);