前端基礎(3) 選擇符的權重和CSS核心屬性

2021-10-23 16:40:43 字數 3055 閱讀 8072

css中用四位數字表示權重,權重的表達方式如:0,0,0,0

型別選擇符的權重為0001

class選擇符的權重為0010

id選擇符的權重為0100

子選擇符的權重為0000

屬性選擇符的權重為0010

偽類選擇符的權重為0000

偽元素選擇符的權重為0010

包含選擇符的權重:為包含選擇符的權中之和

內聯樣式的權重為1000

繼承樣式的權重為0000

作用於同乙個元素上的多個樣式會出現衝突,當多個樣式發生重疊,優先順序高的樣式會生效*屬性:指定選擇符所具有的屬性 屬性值:法定屬性值和常見的數值加單位

選擇符
1)文字大小:`
`
16px/ppi為標準字型大小預設值,即1em,預設情況下1em=16px;

2)文字顏色:`

`
用顏色單詞或16進製制值表示顏色,當用十六進製制表示顏色值時,需要在顏色值前加「#」,例:#fa 00 00;

3)文字字型:

``
當字型是中文字型時,需加雙引號;

當英文本型中有空格時,需加雙引號如(「times new roman」)

當英文本型只有乙個單詞組成是不加雙引號;如:(arial);

4)文字加粗

font-weight:bold(加粗);
用數值表示:100-400 一般;500 常規字型;600-900 加粗字型;

5)文字傾斜

font-style:italic/oblique/normal(取消傾斜);
italic和oblique都是向右傾斜的文字, 但區別在於italic是指斜體字,而oblique是傾斜的文字,對於沒有斜體的字型應該使用oblique屬性值來實現傾斜的文字效果.

6)水平對齊方式

text-align:left/right/center/justify(兩端對齊);
7)垂直對齊方式

vertical-align:top/bottom/middle/baseline;
8)文字行高

line-height:normal/value;
9)文字修飾

text-decoration:none/underline/overline/line-through;
無/下劃線/上劃線/刪除線

10)首行縮排

11)大小寫字母切換

text-transform:none/capitalize/uppercase/lowercase;
無/首字母大寫/全大寫/全小寫

12)字間距與詞間距

letter-spacing文字漢字或英文本母間距
word-spacing控制英文單詞詞間距

13)小型大寫字母

font-variant:normal/small-caps
瀏覽器上顯示小型大寫字母字型

1)列表符號樣式

list-style-type:disc/circle/square/none;
實心圓,空心圓,實心方塊,無

2)用做列表符號

list-style-image:url()
3)列表符號位置

list-style-position:outside/inside;
`list-style:none;`無列表符號
1)背景顏色
選擇符:
2)背景設定

`background-image:url()`
3)背景平鋪屬性

選擇符
不平鋪/平鋪/橫向平鋪/縱向平鋪

4)背景圖固定

選擇符
滾動/固定

5)背景位置

選擇符
水平:left/right/center/值

垂直:top/bottom/center/值

background-position:值1(水平) 值2(垂直)

當兩個值都是center的時候寫乙個值就可以代表的是水平位置和垂直位置

背景屬性縮寫:

background:屬性值1 屬性值2 屬性值3;

例:background:url() no-repeat center top #fff1f1;

語法:

float:none/left/right;
left 往左邊浮動

right 往右邊浮動

none 不浮動

作用:浮動物件會向左或者右移動直到遇到邊緣或者另乙個塊元素元素為止。

清除浮動:

clear:none/left/right/both;
可以理解為打破橫向排列。

語法:none : 預設值。允許兩邊都可以有浮動物件

left : 不允許左邊有浮動物件

right : 不允許右邊有浮動物件

both : 不允許有浮動物件

CSS選擇符權重

css選擇符有個權重,我們習慣於這樣書寫進行判斷 比如a,b,c,d。style標籤的內聯樣式a 1,id選擇符b 1,class選擇符c 1,標籤 包括偽元素 選擇符d 1。舉個例子 body link 0,0,1,1 body content.link hover 0,0,2,2 body li...

CSS常用選擇符和權重

1.css語法 css語法由兩部分組成 選擇符 宣告 語法 選擇符 說明 1 每個css樣式由兩部分組成,即選擇符和宣告,宣告又分為屬性和屬性值 2 屬性必須放在花括號中,屬性與屬性值用冒號鏈結 3 每條宣告用分號結束 4 當乙個屬性有多個屬性值得時候,屬性值與屬性值不分先後順序 5 在書寫樣式過程...

css選擇符種類和權重行

常用的css選擇符有 型別選擇符 標籤選擇符 id選擇符 類選擇符 class選擇符 群組選擇符 包含選擇符 子代選擇器 後代選擇器 偽類選擇器以及萬用字元,共7種 括號裡是表示不同型別的叫法 1 萬用字元主要是用來清除整個頁面的內間距和外間距,具體用在margin 0 padding 0 2 偽類...