css選擇符權重及css文字屬性

2021-10-04 04:47:31 字數 2848 閱讀 5812

選擇符的權重:

​ id > class > 標籤

四個數字表示權重:

​ 內聯樣式表 -> 1000

​ id -> 100

​ class -> 10

​ 標籤 -> 1

​ 偽類選擇符 -> 10

​ 萬用字元 -> 0

​ 包含選擇符的權重為權重之和

​ eg :

​ #box div{} 100 + 1 == 101

​ .wrap .con p{} 10 + 10 + 1 == 21

​ 群組選擇符的權重是不會發生變化的,保持原來的權重值。

​ !important 權重是最高的

css的層疊性:

​ 產生權重關係,必然體現css的層疊性。

css屬性:width\height\background\color\border…

​ css的屬性值:常規屬性值、法定屬性值。

​ 常規屬性值:100px\200px\300px

​ 法定屬性值:官方指定乙個單詞,具有某種意義。

文字屬性:

1: font-size:; 控制文字大小

​ a:為了消除系統之間顯示差異,規定:16px 為標準字型大小。

​ b:文字大小設定,設定為偶數。

​ c:pc端專案,設定最小盡量別低於12px ;

​ d:從ps中獲取文字大小,漢字量取文字高度。

​ e:文字單位: px \ em \ pt(磅)【常用在印刷領域】

​ 12px == 9pt

​ em

​ ( 相對大小單位,相對于父元素的font-size值而定 )

​ (預設情況下, 1em == 16px)

​ f:(了解)

​ xx-small =9px

​ x-small =11px

​ small =13px

​ medium =16px

​ large =19px

​ x-large =23px

​ xx-large =27px

2:color:; 控制網頁中的文字顏色

​ 顏色值:

​ a:十六進製制表示顏色值:

​ 16進製制數字:0 - 9 a - f

​ 顏色值: #ff0000

​ 6個數字:

​ 前兩位 紅色

​ 中間兩位 綠色

​ 最後兩位 藍色

​ b: rgb(255,0,0) 模式

​ 拓展: rgba(255,0,0,0.5);

3:font-family:;控制的是網頁中字型型別。

​ 預設的字型型別:「微軟雅黑」

​ 系統能支援的字型:web安全字型:微軟雅黑、宋體、楷體…

​ 英文預設的字型:arial

​ 語法:

​ font-family:字型1,字型2,字型3,…

​ 注:

​ a:中文字型必須放在引號裡面

​ b:如果乙個字型多個單詞組成 也要放在引號裡面

​ c:如果字型是乙個單詞 不需要引號。

​ d:先寫英文本型,後寫中文字型。

4:font-weight:;控制文字是否加粗

​ 屬性值:

​ bold 加粗

​ bolder 加粗

​ normal 清除加粗,恢復常規文字

​ 100 - 900

​ 100 - 500:不加粗

​ 600 - 900:加粗的狀態

5: font-style:;控制文字的傾斜

​ 屬性值:

​ italic 傾斜

​ oblique 傾斜(傾斜幅度更大,但是一般不會有明顯變化)

​ normal 恢復常規文字

6: line-height:; 控制文字的行高。

​ a: 從ps設計圖上:怎麼獲取行高:從第一行開始量到第二行開始。

​ b:

​ 單行文字:

​ 如果讓單行文字在容器裡面上下居中,line-height設定容器高度即可

​ 顯示狀態:

​ 小於容器高度的時候:文字往上移動

​ 大於容器高度的時候:文字往下移動

7:text-align:; 控制文字的水平對齊方式

​ 屬性值:

​ center 居中對齊

​ left 左對齊

​ right 右對齊

​ justify 兩端對齊

8:text-decoration:; 文字修飾(下劃線、上劃線、刪除線)

​ 屬性值:

​ none 清除下劃線

​ underline 新增下劃線

​ overline 新增上劃線

​ line-through 新增刪除線

9: text-indent:;

​ text-indent:2em;首行縮排:

​ text-indent能設定負值:文字往左走。(懸掛式縮排)

10:字間距、詞間距

​ letter-spacing:; 字間距

​ word-spacing:; 詞間距

11: text-transform:; 控制文字大小寫。

​ 屬性值:

​ uppercase 大寫

​ lowercase 小寫

​ capitalize 每個單詞的首字母大寫

浮動!​ 屬性:float

屬性值: left

​ right

​ none

特點:​ a:新增浮動之後,元素是不佔據空間。

​ b:如果讓多個元素橫向進行排列,所有的排列的元素,都必須新增浮動。

​ c:如果子元素新增浮動,寬度大於父元素的時候,後面的元素被擠到下一行。

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選擇符)

e 某個元素,如p id 使用id,如 idname class 使用class,如.myclass 萬用字元 包含選擇符 e f e所有的f包含子代,孫代,子子孫孫等等 子選擇符 e相鄰選擇符 e f 和e相鄰的f,相隔乙個都不算 兄弟選擇符 e f 和e同級的f的算 e att e中帶有某個at...