一.為什么使用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);

轉載于:https://www.cnblogs.com/1314Justin/p/9196990.html

總結

以上是生活随笔為你收集整理的CSS中的盒子模型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。