以下是本人學習w3c css總結的筆記

選擇器

h {
    color:red;
}

派生選擇器

根據上下文關系確定某個標簽的樣式

p strong {
    color:red;
}

<p ><strong>我是紅色的字</p></strong>

(標簽名可以不只是兩個,可以是一個或者多個，只要html中能確定它的存在的，目的少寫class，id，提升代碼簡潔性)

后代選擇器

h1 em {
    color:red;
}

任何h1元素內的任何em元素
多個h1內將被作用

子元素選擇器

比后代選擇器的范圍更小
選擇某元素的子元素

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具有唯一性，且區分大小寫

id選擇器創建派生選擇器

# name p {
    color:red;
}

類選擇器

.name{
    color:red;
}
<p class='name'>我是紅色的</p>

類選擇器創建派生選擇器

. 類名 標簽名 {
    color:red;
}
 該樣式會作用于類名為 類名 元素內的< 標簽名 >標簽

屬性選擇器

1.  [屬性]{
       color:red;
   }
   
   [title]{
       color:red;
   }
   
   <h2 title="Hello world">Hello world</h2>
   
   
   屬性和值選擇器
   
   [屬性=值]{
       color:red;
   }
   
   [title=Hello world]{
       color:red;
   }
   
   相當于是模糊匹配值
   [屬性~=值]{
       color:red;
   }
   
   [title~=Hello world]{
       color:red;
   }
   

2. 標簽名[屬性名]{
       color:red
   } 
   
   a[href] {
        color:red 
   }
   
   標簽名[屬性名][屬性名]{
       color:red
   } 
   
   a[href][title] {
        color:red 
   }
   

偽類

p: first-child 第一個p元素
a: active 被激活的元素添加樣式
a: focus 擁有鍵盤焦點
a: hover 鼠標懸在元素上方
a: link 未被訪問的鏈接添加樣式
a: visited 已被訪問的鏈接添加樣式

偽元素

p:first-line 文本首行樣式
p:first-letter 文本首字母樣式
h1:before 在元素內容前面插入
h1:after 在元素內容后面插入

樣式表

外部樣式表，即XXX.css文件
內部樣式表
內聯樣式，即把樣式寫在標簽里面
多重樣式，若某些屬性值在以上三種表中定義，那么會使用近的值，即有內聯用內聯，之后有內部用內部，之后有外部用外部

背景

有關背景不可繼承

文本

字體

字體系列
Serif字體
Sans-serif字體
Monospace字體
Cursicve字體
Fantasy字體

鏈接

a:link - 普通的、未被訪問的鏈接
a:visited - 用戶已訪問的鏈接
a:hover - 鼠標指針位于鏈接的上方
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