1.選擇器
1) 元素 p div
2) 類選擇器
html
<p class="box"></p>
css
.box{樣式}
3) id選擇器
html
<p id="box"></p>
css
#box{樣式}
4)后代
ul li
5)子代
ul>li
6)相鄰兄弟
.list+li
7)通用兄弟
.list~li
8)結(jié)構(gòu)偽類
ul
li
li
li
li
ul>li:first-child 選取父元素下的第一個孩子
ul>li:last-child 選取父元素下的最后一個孩子
ul>li:nth-child(n) 選取父元素下的第n個孩子
2.css
1)字體相關(guān)樣式：
font-family:"黑體"; 設(shè)置字體類型
font-size:16px; 設(shè)置字體大小
font-weight:bold/100/200/300/400/500/600/700/800/900;
font-style:italic(傾斜) normal(正常);
2)display:改變元素的類型
行內(nèi)元素
轉(zhuǎn)換成行內(nèi)塊： display:inline-block;
轉(zhuǎn)換成塊元素： display:block;
塊元素
轉(zhuǎn)換成行內(nèi)元素：display:inline;
轉(zhuǎn)換成行內(nèi)塊： display:inline-block;
行內(nèi)塊元素
轉(zhuǎn)換成行內(nèi)元素 display:inline;
轉(zhuǎn)換成塊元素 display:block;
3)文本相關(guān)樣式
color:"red";設(shè)置文本的顏色
text-align:center(居中) left(左) right(右) 文本對齊方式
text-indent:12px; 首行縮進(jìn)
line-height:30px; 設(shè)置行高
text-decoration:none(默認(rèn)值) undeline(下劃線)
4)邊框與尺寸
css單位：
px 像素 屏幕上的一個點(diǎn)
% 相對單位 根據(jù)父元素的大小來變化
in 英寸 1 in=2.54cm
cm 厘米
mm 毫米
em/rem
顏色單位：
red blue #F0F0F0
紅 （0-255）
綠 （0-255）
藍(lán) （0-255）
rgb
r:red
g:green
b:blue
rgb(0,0,0) 黑色
rgb(255,255,255); 白色
rgb(255,0,0); 紅色
rgb(0,255,0) 綠色
rgb(0,0,255) 藍(lán)色
rgba()
a:alpha 透明度
范圍：0-1
0:完全透明
1：完全不透明
opacity:.5;透明度
opacity與rgba()的區(qū)別：
opacity:能把所包含的所有內(nèi)容都變成透明
rgba()只改變當(dāng)前元素的透明度
5)邊框
border:1px solid #000;
border-top:上邊框
border-bottom: 下邊框
border-left:左邊框
border-right:右邊框
border-width:2px; 邊框的寬度
border-style:solid(實(shí)線) dotted(虛線)
border-color:red; 邊框的顏色
特殊：transparent（透明邊框）