CSS3相關知識和例項

2022-08-02 09:36:11 字數 3834 閱讀 1270

css3選擇最新選擇器規範:   

問題:1.css的全稱是什麼?cascading  style sheets

2.樣式表的組成: 規則——選擇器+宣告塊——   宣告—— css合法的屬性名+屬性值

3.瀏覽器讀取編譯css的順序?從右往左 

萬用字元選擇器       *

元素選擇器   body (任何乙個html元素)

類選擇器        .

id選擇器        #

後代選擇器   空格

選擇器分組   h1,h2,h3 此處的逗號我們稱之為結合符

子元素選擇器       > 也可稱為直接後代選擇器,此類選擇器只能匹配到直接後代,不能匹配到深層次的後代元素

相鄰兄弟選擇器 +它只會匹配緊跟著的兄弟元素

通用兄弟選擇器 ~ 它會匹配所有的兄弟元素(不需要緊跟)  

[attr]:該選擇器選擇包含 attr 屬性的所有元素,不論 attr 的值為何。

[attr=val]:該選擇器僅選擇 attr 屬性被賦值為 val 的所有元素。

[attr~=val]:表示帶有以 attr 命名的屬性的元素,並且該屬性是乙個以空格作為分隔的值列表,其中至少乙個值為val。

[attr|=val] : 選擇attr屬性的值是val(包括val)或以val-開頭的元素。

[attr^=val] : 選擇attr屬性的值以val開頭(包括val)的元素。(^拖字元)

[attr$=val] : 選擇attr屬性的值以val結尾(包括val)的元素。

[attr*=val] : 選擇attr屬性的值中包含字串val的元素。

:target    代表乙個特殊的元素,它的id是uri的片段識別符號 ( 面試題:用css實現選項卡)

:hover     表示懸浮到元素上

:active     表示匹配被使用者啟用的元素(點選按住時)

由於a標籤的:link和:visited可以覆蓋了所有a標籤的狀態,所以當:link,:visited,:hover,:active同時出現在a標籤身上時 :link和:visited不能放在最後!!!

:enabled 匹配可編輯的表單

:disable   匹配被禁用的表單

:checked          匹配被選中的表單   (例項:自定義單選按鈕)

:focus                匹配獲焦的表單

index的值從1開始計數!!!!

index可以為變數n(只能是n),index可以為even (奇數)odd(偶數)

#wrap ele:nth-child(index)  表示匹配#wrap中第index的子元素 這個子元素必須是ele

#wrap ele:nth-of-type(index)     表示匹配#wrap中第index的ele子元素

除此之外:nth-child和:nth-of-type有乙個很重要的區別!!nth-of-type以元素為中心!!!

:nth-child(index)系列   :first-child

:last-child

:nth-last-child(index)

:only-child       (相當於:first-child:last-child 或者 :nth-child(1):nth-last-child(1))

:nth-of-type(index)系列:first-of-type

:last-of-type

:nth-last-type(index)

:only-of-type (相對於:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))

:not         

:empty(內容必須是空的,有空格都不行,有attr沒關係)

::after     ::before      ::firstletter         ::firstline         ::selection

選擇器的特殊性由選擇器本身的元件確定,特殊性值表述為4個部分,如    0,0,0,0

乙個選擇器的具體特殊性如下確定:

1.對於選擇器中給定的id屬性值,加 0,1,0,0

2.對於選擇器中給定的各個類屬性,屬性選擇,或偽類,加 0,0,1,0

3.對於選擇器中的給定的各個元素和偽元素,加0,0,0,1

4.萬用字元選擇器的特殊性為0,0,0,0

5.結合符對選擇器特殊性沒有一點貢獻

6.內聯宣告的特殊性都是1,0,0,0

7.繼承沒有特殊性

特殊性 1,0,0,0 大於所有以0開頭的特殊性(不進製),選擇器的特殊性最終都會授予給其對應的宣告,如果多個規則與同乙個元素匹配,而且有些宣告互相衝突時,特殊性越大的越佔優勢

注意:id選擇器和屬性選擇器      div[id="test"](0,0,1,1) 和 #test(0,1,0,0)  

有時某個宣告比較重要,超過了所有其他宣告,css2.1就稱之為重要宣告,並允許在這些宣告的結束分號之前插入  !important  來標誌,必須要準確的放置  !important 否則宣告無效。 !important 總是要放在宣告的最後,即分號的前面, 標誌為 !important的宣告並沒有特殊的特殊性值,不過要與非重要宣告分開考慮。 實際上所有的重要宣告會被瀏覽器分為一組,重要宣告的衝突會在其內部解決, 非重要宣告也會被分為一組,非重要宣告的衝突也會在其內部解決, 如果乙個重要宣告與非重要宣告衝突,勝出的總是重要宣告

繼承沒有特殊性,甚至連0特殊性都沒有,0特殊性要比無特殊性來的強

創作人員、讀者、  使用者**  

讀者的重要宣告

創作人員的重要宣告

創作人員的正常宣告

讀者的正常宣告

使用者**的宣告

1.找出所有相關的規則,這些規則都包含乙個選擇器

2.計算宣告的優先順序,先按**排序,在按選擇器的特殊性排序, 最終按順序

font-family  所指定的字型名字將會被用於font或font-family屬性

src  字型資源

注意: 不能在乙個 css 選擇器中定義 @font-face

字型圖示:1.製作一套向量圖

2.將向量圖與字元進行繫結

3.使用工具或者站點生成一套字型

4.最終使用

字型相容處理** 

icomoon字型圖示 

例項:**向量圖示文字

指定了乙個元素的透明度    ,預設值:1.0    ,不可繼承

text-shadow用來為文字新增陰影,而且可以新增多層,陰影值之間用逗號隔開。(多個陰影時,第乙個陰影在最上邊)預設值:none     ,   不可繼承 

可選。可以在偏移量之前或之後指定。如果沒有指定顏色,則使用ua(使用者**)選擇的顏色。

必選。這些長度值指定陰影相對文字的偏移量。

指定水平偏移量,若是負值則陰影位於文字左邊。        

指定垂直偏移量,若是負值則陰影位於文字上面。

如果兩者均為0,則陰影位於文字正後方(如果設定了則會產生模糊效果)。

可選。這是 值。如果沒有指定,則預設為0。值越大,模糊半徑越大,陰影也就越大越淡

例項:用css實現背景透明文字不透明、文字陰影、浮雕文字、文字模糊、模糊背景

direction:控制文字的方向, 一定要配合unicode-bidi:bidi-override;來使用

text-overflow :確定如何向使用者發出未顯示的溢位內容訊號。它可以被剪下, 顯示乙個省略號('...')

例項: 怎麼溢位顯示省略號   (包裹區域必須不能讓子元素撐開)

white-space=no-wrap

overflow=hidden

text-overflow=ellipsis

CSS3相關知識總結

moz代表firefox瀏覽器私有屬性 ms代表ie瀏覽器私有屬性 webkit代表safari chrome私有屬性 o代表歐朋 opera 核心識別碼 參考文章 布局的傳統解決方案,基於盒狀模型,依賴 display屬性 position屬性 float屬性。它對於那些特殊布局非常不方便,比如,...

CSS3相關效果整理

1.過長省略 white space nowrap 為應用text overflow做準備,禁止換行 overflow hidden 為應用text overflow做準備,禁止文字溢位顯示 text overflow ellipsis 相容ie,safari webkit o text overf...

css3相關筆記(三)

1.每乙個方向上的邊框形狀並不是矩形的,其實是三角形或梯形的,配合圓角邊框可以製作美麗花瓣。2.css3 3d變換效果 transform transform rotatex 360deg 表示在x軸3d旋轉360度。transform rotatey 360deg 表示在y軸3d旋轉360度。tr...