在Css3的學習和實際操作中,我們經常會接觸到一些常用屬性,比如字體、文本、列表和背景等。下面，傳智播客將對常用的Css3九大屬性進行詳解。
1.傳智播客詳解Css3九大常用屬性—字體
l Font-size：字的大小;例如font-size:14px;
l Font-family:字體; font-family:楷體;默認是宋體;
l Font-weight:bold///normal; bold加粗 normal正常
l Font-style:normal//italic; italic傾斜;樣式是一樣的
l font
font: font-style font-weight font-size font-family;
font:是否傾斜是否加粗字的大小字體;
順序只能按照上面的寫
2.傳智播客詳解Css3九大常用屬性—文本
l Color文本的顏色 color:red;錯誤的 font-color:
l Text-decoration：下劃線的設置;
l text-decoration:underline;加下劃線 text-decoration:none;去掉下劃線
l line-height：行高 line-height:24px;
l text-indent: text-indent:2em;
l letter-spacing了解所有的字符
l word-spacing了解
l text-align
l
l
3.傳智播客詳解Css3九大常用屬性—列表
l list-style-type: none;去掉列表前面的符號
l list-style-image：url(小圖片的地址)
l list-style：none;
l list-style:url(小圖片的地址);
第二個
4.傳智播客詳解Css3九大常用屬性—背景
l background-color:顏色值; background-color:#ff0000; background-color:red;
l background-image:url(圖片的地址);
l backgrond-repeat: repeat//repeat-x//repeat-y//no-repeat;
l
l background-position: top/bottom //left//right背景圖片展開的位置
background-position:水平垂直;
background-position:right top;可以顛倒
background-position水平的數值垂直的數值;
水平10px向右負值左垂直正直下負值上
background-position:20px40px;
l
l background-attachment：fixed//scroll;body的標籤
簡寫為
l background：顏色背景圖片是否平鋪附件水平垂直;
5.傳智播客詳解Css3九大常用屬性—尺寸
width:數值; /*標籤的寬度 div p ul li ol h1—h6*/
height：數值; /*標籤的寬度 div p ul li ol h1—h6*/
6.傳智播客詳解Css3九大常用屬性—邊框
擴展(大綱要求)
顏色 border-top-color:顏色值;
線型： border-top-style:solid;
粗細 border-top-width:數值;
l border-top:粗細數值線型顏色;
l border-right:粗細數值線型顏色
l border-bottom:粗細數值線型顏色
l border-left:粗細數值線型顏色
l
簡寫方式：border：粗細數值線型顏色;
練習：
使用div來實現，上邊框
使用div來實現下面的效果
7.傳智播客詳解Css3九大常用屬性—內邊距：內容和邊框之間的距離
l padding-top:數值;內容和上邊框的距離
l padding-right：數值;
l padding-bottom：數值;
l padding-left:數值;
l
l
l
簡寫
padding:上右下左;
padding;10px20px30px40px;
padding:10px20px30px;
padding:10px20px;
padding:20px;
8.傳智播客詳解Css3九大常用屬性—外邊距:邊框以外的距離
l margin-top:數值;上邊框以外的距離
l marging-right：數值;右邊框以外的距離
l margin-bottom：:數值;下邊框以外的距離
l margin-left：:數值;左邊框以外的距離
簡寫
margin：10px20px30px40px;上右下左
margin:10px30px5px;上 (左右)下;
margin:10px20px; /*10px上下20px左右*/
margin:10px;/*上右下左值相同*/
注意：
html
效果
如果是正常的文檔流，沒有改變結構的時候，margin如果多個div都設置了，取得是最大的那個，不是相加
9.傳智播客詳解Css3九大常用屬性—布局
content內容
padding內容和邊框的距離內邊距
border邊框
margin：邊框以外的距離外邊距
盒子模型
容器 html標籤是雙標籤
<b></b> <em>內容 </em> <p>內容</p> <div>內容</div>
只要是容器，就是符合盒子模型