CSS的繼承性和層疊性以及文字樣式

2021-10-11 16:36:34 字數 2188 閱讀 1001

有一些屬性給父類或祖先元素設定後,其後代元素也會繼承該樣式,這就叫做繼承性。

​ 繼承性是當前元素開始,一直到最小的元素。

​ 後代元素能夠繼承來自祖先元素的文字樣式。這些屬性包括:color,text-開頭,line-開頭的,font-開頭的。

​ 關於盒子、定位、布局的屬性,不能被繼承。

樣式表:行內式》內嵌式與外鏈式 (就近原則)

​ 選擇器:id選擇器》類選擇器》標籤選擇器

​ 複雜選擇器權重的計算比較數基礎選擇器的數量:

​ id選擇器的數量 類選擇器的數量 標籤選擇器的數量

​ id選擇器的權重記為100,類選擇器記為10,標籤選擇器記為1.

​ ps:不進製,255個標籤等於乙個類名。沒有任何實戰的意義。

​ 權重相同時,比較書寫順序,在後面的會覆蓋前面的。

​ 【注】

​ 1.並集選擇器計算權重時,要分開計算。

​ 2.如果不能直接選中元素,通過繼承性影響的話,權重為0。

​ 3.同乙個標籤,攜帶了多個類名,且樣式有衝突時,跟類名的順序無關,和樣式的先後順序有關。

​ 總結:對於相同的選擇器:樣式表的排序:行內》內嵌與外鏈(就近原則)

​ 對於非行內樣式表,選擇器排序:id>類》標籤。

line-hight:行高

一行文字實際占有的高度。

表示方式:px,百分比,em。

1920*1080 橫向有1920個畫素,px 縱向有1080個畫素。

百分比:參照字型大小。、

em。字型的倍數。

設定行高,字型大小時,一般設定為偶數。這樣可以保證,他們的差一定是偶數,方便計算與居中。

特殊用法:

要讓一行文字在盒子中垂直居中,可以讓行高等於盒子高。【只適用於單行文字。】

font-size

字型大小 字型大小

設定方式:單詞,px,em,百分比。

字型大小預設為16px。

xx-small-----xx-largr

用的極少。

px 【推薦使用】

em 相對于父元素的font-size屬性計算的。

1em=父元素的font-size的值。

百分比 相對于父元素的font-size屬性計算的。

font-family 字型

1.字型分為英文本型和中文字型。有些英文本型不會作用到中文字型上,而中文字型會作用到英文上。

2.字型屬性值可以為多個,後面的字型為備選字型,當前面的字型,電腦上沒有載入時,會去載入後面的字型,如果都沒有,會使用預設字型(微軟雅黑)

3.書寫順序:英文本型寫在前面,中文字型寫在後面。

4.中文字型也有英文名稱

宋體:simsun;

黑體:simhei;

微軟雅黑:microsoft yahei;

1.使用英文別名可以提高網頁的載入速度。

2.防止原始碼中的中文亂碼。

font-size font-fanily

font是乙個復合屬性。

font:字型大小/行高 字型;

font-weight

屬性值:數字,單詞。

數字:100-900.越往上越粗。

單詞:normal(正常) bold(加粗) bolder(更粗)lighter(細)

一般使用單詞形式的正常與加粗。

fwb = font-weight: bold;

font-style 字型樣式

normal 正常 預設值

italic 斜體 【使用斜體的話,推薦使用】

oblique 【不推薦使用】

1.italic 帶有傾斜屬性的字型才可以設定。

2.oblique 沒有傾斜屬性的字型也可以設定。

文字溢位

禁止文字換行

white-space: nowrap;

溢位內容隱藏

overflow: hidden;

使用省略號來代替被修剪的文字

text-overflow: ellipsis;

text-align: 設定段落的對齊方式。

left 左對齊 預設值

center 居中對齊

right 右對齊。

與文字的行數沒有關係。

text-indent 文字縮排

單位:px em 百分比。

百分比是按照盒子的寬度。

可以是負數,負數向前(左)縮排,正數為向後(右)縮排。

CSS 繼承性和層疊性

繼承性 有一些屬性,當給自己設定的時候,自己的後代都繼承上了,如color text 開頭的 line 開頭的 font 開頭的。type text css divstyle head 我是段落p 我是段落p 我是段落p div body 不是所有屬性都能夠繼承,如上圖,color屬性會被繼承,但b...

css 繼承性和層疊性

css有兩大特性 繼承性和層疊性 物件導向語言都會存在繼承的概念,在物件導向語言中,繼承的特點 繼承了父類的屬性和方法。那麼我們現在主要研究css,css就是在設定屬性的。不會牽扯到方法的層面。繼承 給父級設定一些屬性,子級繼承了父級的該屬性,這就是我們的css中的繼承。記住 有一些屬性是可以繼承下...

CSS的繼承性和層疊性

css有兩大特性 繼承性和層疊性 物件導向語言都會存在繼承的概念,在物件導向語言中,繼承的特點 繼承了父類的屬性和方法。那麼我們現在主要研究css,css就是在設定屬性的。不會牽扯到方法的層面。繼承 給父級設定一些屬性,子級繼承了父級的該屬性,這就是我們的css中的繼承。記住 有一些屬性是可以繼承下...