1. 程式人生 > >第四課 《背景邊框列表連結和更復雜的選擇器》

第四課 《背景邊框列表連結和更復雜的選擇器》

用時:3.5h
1、學習了background相關樣式屬性:background-color、background-image、background-repeat、background-position、background-attachment、background、background-size、多重背景的設定方法
2、學習了border相關樣式屬性:border、border-width、border-style、border-color、border-radius、border-clip、border-image
3、學習了list相關樣式屬性:list-style、list-style-type、list-style-image、list-style-position、start、reversed、value、如何處理列表間距
4、學習了連結相關樣式:
4.1、連結的五種狀態:link、visited、hover、focus、active以及他們分別對應的偽類 :link、:visited、:hover、:focus、:active
4.2、預設的連結樣式以及cursor和outline屬性
4.3、連結樣式順序:love fears hate
4.4、給連結新增圖示的方式
4.5、將連結建立為選項選單的方式
5、選擇器的分組:使用“,”來對選擇器進行分組,以便讓很多的元素共享同樣的樣式
6、派生選擇器:又稱“上下文選擇器”,依據所選元素在dom中的上下文關係進行匹配
6.1、後代選擇器,使用空格連線,匹配某元素的所有後代元素
6.2、子元素選擇器,使用>連線,匹配某元素的所有子元素
6.3、相鄰元素選擇器,使用+連線,匹配其後出現的所有某兄弟元素
7、偽類選擇器:
7.1、偽類選擇器:以“:”為字首新增到一個選擇器的末尾做關鍵字,表示在特定狀態下才被應用到指定元素上
7.2、 偽元素選擇器:以“::”為字首新增到一個選擇器的末尾做關鍵字去選擇某個元素的某個部分
8、學習瞭如何組合使用選擇器
9、層疊的優先順序判斷
9.1、重要性:
9.1.1、將!important加在某條聲明後可以使該宣告總是優先於其他規則
9.1.2、宣告的重要性取決於他來自什麼樣的樣式表內,相互衝突的宣告將按以下順序適用,後一種將覆蓋先前的宣告:
9.1.2.1、在使用者代理樣式表的宣告 (例如:瀏覽器在沒有其他宣告的預設樣式).
9.1.2.2、使用者樣式表中的普通宣告(由使用者設定的自定義樣式)
9.1.2.3、作者樣式表中的普通宣告(這是我們設定的樣式,Web開發人員)
9.1.2.4、作者樣式表中的重要宣告
9.1.2.5、使用者樣式表中的重要宣告
9.2、專用性:一個選擇器具有的專用性的量是用四種不同的值(或元件)來衡量的,它們可以被認為是千位,百位,十位和個位:
9.2.1、千位:如果宣告是在style屬性中該列加1分(這樣的宣告沒有選擇器,所以它們的專用性總是1000。)否則為0
9.2.2、百位:在整個選擇器中每包含一個ID選擇器就在該列中加1分
9.2.3、十位:在整個選擇器中每包含一個類選擇器、屬性選擇器、或者偽類就在該列中加1分
9.2.4、個位:在整個選擇器中每包含一個元素選擇器或偽元素就在該列中加1分
9.3、原始碼次序:後出現的規則將戰勝先出現的規則
10、繼承:CSS為處理繼承提供了四種特殊的通用屬性值:
10.1、inherit: 該值將應用到選定元素的屬性值設定為與其父元素一樣
10.2、initial:該值將應用到選定元素的屬性值設定為與瀏覽器預設樣式表中該元素設定的值一樣。如果瀏覽器預設樣式表中沒有設定值,並且該屬性是自然繼承的,那麼該屬性值就被設定為inherit
10.3、unset:該值將屬性重置為其自然值,即如果屬性是自然繼承的,那麼它就表現得像inherit,否則就是表現得像initial
10.4、revert:如果當前的節點沒有應用任何樣式,則將該屬性恢復到它所擁有的值。換句話說,屬性值被設定成自定義樣式所定義的屬性(如果被設定), 否則屬性值被設定成使用者代理的預設樣式。

ps:明天再做整理