以下是本人學(xué)習(xí)w3c css總結(jié)的筆記
選擇器
h {
color:red;
}
派生選擇器
根據(jù)上下文關(guān)系確定某個標(biāo)簽的樣式
p strong {
color:red;
}
<p ><strong>我是紅色的字</p></strong>
(標(biāo)簽名可以不只是兩個,可以是一個或者多個杆麸，只要html中能確定它的存在的募疮，目的少寫class走哺，id，提升代碼簡潔性)
后代選擇器
h1 em {
color:red;
}
任何h1元素內(nèi)的任何em元素
多個h1內(nèi)將被作用
子元素選擇器
比后代選擇器的范圍更小
選擇某元素的子元素
h1 > strong {
color:red;
}
僅一個h1被作用
相鄰兄弟選擇器
h1 + p {
color:red;
}
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
選擇器作用在p元素上
id選擇器
#name{
color:red;
}
<p id='name'>我是紅色的</p>
id具有唯一性偿乖，且區(qū)分大小寫
id選擇器創(chuàng)建派生選擇器
# name p {
color:red;
}
類選擇器
.name{
color:red;
}
<p class='name'>我是紅色的</p>
類選擇器創(chuàng)建派生選擇器
. 類名 標(biāo)簽名 {
color:red;
}
該樣式會作用于類名為 類名 元素內(nèi)的< 標(biāo)簽名 >標(biāo)簽
屬性選擇器
[屬性]{ color:red; } [title]{ color:red; } <h2 title="Hello world">Hello world</h2> 屬性和值選擇器 [屬性=值]{ color:red; } [title=Hello world]{ color:red; } 相當(dāng)于是模糊匹配值 [屬性~=值]{ color:red; } [title~=Hello world]{ color:red; }標(biāo)簽名[屬性名]{ color:red } a[href] { color:red } 標(biāo)簽名[屬性名][屬性名]{ color:red } a[href][title] { color:red }
偽類
p: first-child 第一個p元素
a: active 被激活的元素添加樣式
a: focus 擁有鍵盤焦點
a: hover 鼠標(biāo)懸在元素上方
a: link 未被訪問的鏈接添加樣式
a: visited 已被訪問的鏈接添加樣式
偽元素
p:first-line 文本首行樣式
p:first-letter 文本首字母樣式
h1:before 在元素內(nèi)容前面插入
h1:after 在元素內(nèi)容后面插入
樣式表
外部樣式表狐史，即XXX.css文件
內(nèi)部樣式表
內(nèi)聯(lián)樣式，即把樣式寫在標(biāo)簽里面
多重樣式峡懈，若某些屬性值在以上三種表中定義璃饱，那么會使用近的值，即有內(nèi)聯(lián)用內(nèi)聯(lián)肪康，之后有內(nèi)部用內(nèi)部荚恶，之后有外部用外部
背景
| 說明 | 屬性名 | 值 |
|---|---|---|
| 背景顏色 | background-color | red rgb(255,255,255) |
| 背景圖像 | background-image | url(/image/icon.png) |
| 背景重復(fù) | background-repeat | repeat-y 垂直 repeat-x 水平 把背景圖重復(fù)平鋪 |
| 背景定位 | background-position | top bottom left right center (30%,30%) (30px,30px) |
| 背景關(guān)聯(lián) | background-attachment | fixed 背景不可滾動 |
有關(guān)背景不可繼承
文本
| 說明 | 屬性名 | 值 |
|---|---|---|
| 縮進(jìn)文本 | text-indent | 5em 百分比值 |
| 水平對齊 | text-align | top bottom left right center justify 兩端文本對齊 |
| 字間隔 字（單詞）之間的間隔 |
word-spacing | 30px 5em normal |
| 字母間隔 字符或字母之間的間的間隔 |
letter-spacing | 30px 5em normal |
| 字符轉(zhuǎn)換 文本大小寫 |
text-transform | none uppercase lowercase capitalize |
| 文本裝飾 | text-decoration | none underline 下劃線 overline 上劃線 line-through 貫穿線，類似刪除線 blink 文本閃爍 |
| 空白符處理 | white-space | normal 丟掉多余空白格,并忽略換行符 pre 不允許自動換行 nowrap 丟掉多余空白格,忽略換行符,不允許自動換行 pre-wrap pre-line 丟掉多余空白格 |
字體
字體系列
Serif字體
Sans-serif字體
Monospace字體
Cursicve字體
Fantasy字體
| 說明 | 屬性名 | 值 |
|---|---|---|
| 字體系列 | font-famliy | 字體系列或者是具體字體 |
| 字體風(fēng)格 | font-style | normal italic 斜體 oblique 傾斜 |
| 字體變形 | font-variant | small-caps 小型大寫字母 字母大寫變小寫磷支，小寫變大寫谒撼，整體字變小 |
| 字體加粗 | font-weight | bold 粗體 900 數(shù)值表示加粗程度 |
| 字體大小 | font-size | 60px 1em 瀏覽器默認(rèn)文本大小為16px 所以一般1em=16px |
鏈接
a:link - 普通的、未被訪問的鏈接
a:visited - 用戶已訪問的鏈接
a:hover - 鼠標(biāo)指針位于鏈接的上方
a:active - 鏈接被點擊的時刻
a:link {text-decoration:none;background-color:#B2FF99;}
a:visited {text-decoration:none;background-color:#FFFF85;}
a:hover {text-decoration:underline;background-color:#FF704D;}
a:active {text-decoration:underline;background-color:#FF704D;}
定位
position屬性值
static
relative
absolute
fixed
