選擇器權重及字型屬性

2021-10-11 16:32:25 字數 3423 閱讀 2252

權重屬性

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

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

後代元素能夠繼承來自祖先元素的文字樣式。這些屬性包括:

color,text-開頭,line-開頭的,font-開頭的。

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

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

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

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

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

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

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

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

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

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

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

翻譯:重要的。

格式:k:v !important;

【注】1.!important 提公升的是乙個屬性,而不是選擇器的權重。

2.!important無法提公升繼承的屬性,權重仍然是0。

作用:將該屬性的權重提為最高。

慎用!使用不當的話,容易造成該關鍵字成倍增加,很有可能將網頁這個css樣式搞崩,

最後不得不重構css樣式。

line-hight:行高

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

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

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

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

em。字型的倍數。

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

特殊用法:

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

字型大小 字型大小

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

字型大小預設為16px。

xx-small----- xx-largr

用的極少。

px 【推薦使用】

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

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

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

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

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

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

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

宋體:simsun;

黑體:simhei;

微軟雅黑:microsoft yahei;

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

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

font-size font-family

font是乙個復合屬性。

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

font

: 24px/40px "simhei"

;

屬性值:數字,單詞。

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

單詞:normal(正常)

bold(加粗)

bolder(更粗)

lighter(細)

normal 正常 預設值

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

oblique 【不推薦使用】

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

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

/* 禁止文字換行 */

white-space: nowrap;

/* 溢位內容隱藏 */

overflow: hidden;

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

text-overflow: ellipsis;

1

visible: 對溢位內容不做處理,內容可能會超出容器。

hidden: 隱藏溢位容器的內容且不出現滾動條。

scroll: 隱藏溢位容器的內容,溢位的內容可以通過滾動呈現。

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

clip:溢位部分裁切掉

規定文字在塊元素中的對齊方式

left 左對齊 預設值

center 居中對齊

right 右對齊。

與文字的行數沒有關係。

單位:px em 百分比。

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

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

(這裡的em是相對父元素說的,如果父元素字型大小不相同,即使都縮排了2em,他們也不會對齊,解決方法:用px值統一)

有四個常見的樣式

none 正常

下劃線 underline

上劃線 overline

中劃線line-through

單詞間距,單位是px 對於中文無效。(原因是英文單詞間都有空格,而中文一句話是連在一起的)

word-spacing

: 24px;

字母間距,單位是px 中英文都會生效

letter-spacing: 24px;

uppercase 大寫

lowercase 小寫

text-transform

: lowercase;

相當於四線格中的第三條線。 預設的對齊方式為基線對齊。

一般用於與文字的對齊。

vertical-align

:middle;

top 頂部對齊

middle 中間對齊

sub 底部對齊

它也可以是乙個具體的數字值 為px(正值負值都可除錯)

CSS選擇器和其他選擇器及權重

作用 css選擇器主要用來對網頁中的元素進行設定樣式 css選擇器的規範寫法 標籤名作用 根據元素的class值進行選取元素 語法 classname作用 根據元素的id屬性值選取元素 語法 id作用 可以同時使用多個選擇器,這樣可以選擇同時滿足多個選擇器的元素。語法 選擇器1選擇器2作用 可以同時...

CSS的字型屬性 選擇器

css的樣式規則 1.選擇器用於指定css樣式作用的html物件 2.屬性和屬性值以 鍵值對 的形式出現 3.屬性是對指定物件設定的樣式屬性 如字型大小 顏色 css字型屬性 font size 字型大小大小 px最常用 font family 字型 font weight 字型粗細 normal ...

選擇器的權重

樣式的衝突 當我們通過不同的選擇器,選中相同的元素,並且為相同的樣式設定不同的值時,此時就發生了樣式的衝突。發生樣式衝突時,應用哪個樣式由選擇器的權重 優先順序 決定 選擇器的權重 內聯樣式 1,0,0,0 id選擇器 0,1,0,0 類和偽類選擇器 0,0,1,0 元素選擇器 0,0,0,1 通配...