CSS属性汇总
一：CSS選擇器
標(biāo)簽選擇器：
標(biāo)簽 {
}
類選擇器：
class=" 類名 "
.類名? ? ? {
}
id選擇器：
id="id名"
#id名? ? ? ? {
}
通配符選擇器：
*? ?{
}
后代選擇器：
父標(biāo)簽? ? (子標(biāo)簽?)? ?子標(biāo)簽的子標(biāo)簽? ?{
}
子元素選擇器：
父標(biāo)簽>子標(biāo)簽 >子標(biāo)簽的子標(biāo)簽? {
}
并集選擇器：
標(biāo)簽1，標(biāo)簽2??????{
}
鏈接偽類選擇器：
a：link(選擇所有未被訪問(wèn)過(guò)的鏈接)? ? {
}
a:visited(選擇所有已被訪問(wèn)過(guò)的鏈接)? {
}
a:hover(選擇鼠標(biāo)指針位于其上的鏈接)? {
}
a:active(選擇鼠標(biāo)按下未彈起的鏈接)? {
}
focus偽類選擇器：
input:focus(選擇獲得光標(biāo)的表單)? {
background-color:red;
color:blue;
...............
}
二：CSS各屬性
1：字體屬性（font）
font-family:設(shè)置字體系列
font-family: 'Microsoft Yahei'( '微軟雅黑'),'Arial','Helvetica';
font-size:設(shè)置字體大小
font-size: .....px;
font-weight:設(shè)置字體粗細(xì)
font-weight：normal(正常值，也是默認(rèn)值)/bold(加粗)/bolder(特粗)/lighter(細(xì)體);
font-weight:400(正常)/700(加粗);(具體數(shù)值100~900）
font-style:設(shè)置文字樣式
font-style: normal(正常)/italic(斜體);
font設(shè)置字體復(fù)合屬性
font：font-style????????font-weight? ? ? ? font-size/line-height? ? ? ? font-family;
必須保留font-size和font-family屬性，其他屬性可以省略（即設(shè)置為默認(rèn)值）
2：文本屬性（text）
color設(shè)置文本顏色
color:blue;
color:#ff0000;
color:rgb(200,0,0);
text-align設(shè)置文本的水平對(duì)齊方式
text-align:left/center/right;
text-decoration設(shè)置文本修飾
text-decoration:none(無(wú)修飾，默認(rèn)值)/underline(下劃線)/overline(上劃線)/line-through(刪除線);
text-indent設(shè)置文本縮進(jìn)
text-indent:20px;
text-indent:2em;
line-height設(shè)置行間距
line-height:20px;
3:背景屬性（background）
background-color設(shè)置背景顏色
background-color:顏色值(默認(rèn)為transparent，透明色)；
background-image設(shè)置背景圖片
background-image:? url(圖片地址);
backcground-repeat設(shè)置背景平鋪
background-repeat:repeat(平鋪)/no-repeat(不平鋪)/repeat-x(沿X軸平鋪)/repeat-y(沿Y軸平鋪);
background-position設(shè)置背景位置
background-position:x? ? y;
(top/bottom/left/right/center;)/(20px;)
background-attachment設(shè)置背景固定
background-attachment:scroll(滾動(dòng)，默認(rèn)值)/fixed(固定);
background設(shè)置背景復(fù)合寫法
background:背景顏色? ?背景圖片地址? ? 背景平鋪? ?背景固定? ? ? 背景位置；
background:rgba()設(shè)置背景顏色半透明
background:rgba(0,0,0,0.3);? ?
三：盒子模型
1：邊框(border)
border-width(邊框粗細(xì)):20px;
border-style(邊框樣式):solid(實(shí)線)/dashed(虛線)/dotted(點(diǎn)線);
border-color(邊框顏色):red;
復(fù)合寫法：
border:border-width? ?border-style? ? ?border-color;
border-collapse細(xì)線邊框
border-collapse:collapse;表示相鄰邊框合并在一起(多用于表格)；
2：內(nèi)邊距（padding）
padding:所有內(nèi)邊距；
padding:上下內(nèi)邊距，左右內(nèi)邊距；
padding:上內(nèi)邊距，左右內(nèi)邊距，下內(nèi)邊距；
padding:上內(nèi)邊距，右內(nèi)邊距，下內(nèi)邊距，左內(nèi)邊距；
3：外邊距（margin）
margin: 0 auto;（把盒子水平居中）
4：清除網(wǎng)頁(yè)元素的內(nèi)外邊距
* {
padding:0;
margin:0;
}
5:圓角邊框：（border-radius）
border-radius:length;
6:盒子陰影（box-shadow）
box-shadow:h-shadow（必需） v-shadow（必需）? blur??? spread? ?color?? inset;
7:文字陰影（text-shadow）
text-shadow:h-shadow（必需） v-shadow（必需）blur? color;
總結(jié)
- 上一篇： 优秀项目解析：区块链上的房地产交易
- 下一篇： CSS a标签样式