1. css(又稱層疊樣式表,用來表現HTML的一種計算機語言)
2. css聲明:
{
/* 注釋 */
css聲明1;
css聲明2;
屬性名:屬性值;
color:red;
color:#ffffff;
color:rgb(255,255,255)
color:rgba(0,0,0,0.5)
}
3. 如何在html中應用css
1) style屬性(直接在元素中使用)
2) 内嵌 head> style (在html中使用style标簽内嵌)
3) 外部引用(從外部引用css檔案)
<link rel="stylesheet" href="">
4. 選擇器
1) 基本選擇器
1. 元素 div p
2. id #idname
3. class .classname
4. 組合 selector1,selector2
5. 并且 p.one
6. 普遍 * 一般與其他選擇器配合使用 (以下表示ul标簽下的所有子元素)
ul > *
2) 層次選擇器【多個選擇器共同作用結果】
1. 後代 (空格)
ul li
2. 子代(>)
ul > li
3. 下一個兄弟(+)
#second + *
4. 隻有所有兄弟(~)
#second ~ *
3) 過濾器
1. 屬性過濾器
selector[過濾條件]
1) 屬性名
form > input[name]
input中包含name屬性的元素
2) 屬性值
form > input[name=val]
input中包含name屬性并且屬性值為指定val的元素
div[class~=one]
class屬性值之一為‘one’的元素
div[id^=first_]
id不等于first的
2. 僞類過濾器
selector:xxx
1. 篩選目前元素是獨生子的(ul下隻有一個li的)
ul>li:only-child
2. 篩選目前元素在父元素中出現的位置(ul下的第一個li，最後一個，第n個)
ul>li:first-child
ul>li:last-child
ul>li:nth-child(參數)
參數：
數值 1、2、3
變量 odd even
表達式 n+3、2n+1
ul>li:nth-last-child(參數)（參數同上,但是倒着來的）
3.擴充
:first-of-type
:last-of-type
:nth-of-type(參數)
:nth-last-of-type(參數)
:hover
3. 僞元素過濾器(比如以下的用法為:在選擇器下面添加其他元素,常用于使浮動元素的父元素撐起來)
::after
::before
2. 級聯與繼承
級聯 當多個選擇器應用到同一個元素中
1. 如果css聲明不同，累加
2. 如果css聲明相同，對比選擇器的優先級，優先級勝出的應用其css聲明
.list > li:nth-child(2) {
color: red;
}
#second {
color: #ededed;
background-color: pink;
}
==>
{
color: #ededed;
background-color: pink;
}
選擇器的權重
1000 style屬性
100 id選擇器
10 類，僞類，屬性
1 元素，僞元素
繼承:能夠被子元素所繼承的屬性有:
顔色，文字，字型間距行高對齊方式，和清單的樣式
3.常見的長度機關
px
絕對機關，1像素
em
相對機關，相對于目前元素的字型大小
rem
相對機關，相對于html中設定的字型大小
百分比
80%
4.顔色機關
關鍵字 lightblue pink
十六進制 #333 #333333 #fff #000
函數 rgb(255,255,255)
函數 rgba(255,255,255,0.5)
5.字型樣式
font-size（字型大小）
font-style(字型樣式)
font-weight(字型寬度)
font-family(字型所屬類)
"Microsoft Yahei","宋體",serif
color(字型顔色)
line-height(字型所占行高)
text-align(文本對齊方式)
text-decoration(下劃線)
text-shadow（字型所占陰影）
text-indent(個塊元素首行文本内容之前的縮進量)
速寫形式
font: font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family
font: normal normal normal normal 12px/1.5 "Microsoft Yahei","微軟雅黑", Arial, sans-serif;