重看css權威指南 part7

2021-07-26 14:18:54 字數 1343 閱讀 2160

這一部分是關於顏色和背景。

屬性名:color

值:| inherit

應用於:所有元素

繼承性:有

color影響文字的顏色,也會影響邊框的顏色(這一點上章講過)。

屬性名:background-color

值:| transparent | inherit

初始值:transparent

應用於:所有元素

繼承性:無

背景色指的是邊框以內的部分的背景色。

屬性名:background-image

值:| none |inherit

初始值:none

應用於:所有元素

繼承性:無

背景圖缺省會沿著水平和垂直方向平鋪,要想改變平鋪規則:

屬性名:background-repeat

值:repeat | repeat-x | repeat-y | no-repeat | inherit

初始值:repeat

繼承性:無

應用於:所有元素

背景圖缺省會從元素的左上角開始平鋪,若要改變開始位置:

屬性名:background-position

值:百分數,長度單位 | left | center | right | top | bottom | inherit

初始值:0% 0%

應用於:塊級元素和替換元素(替換元素怎麼用?)

繼承性:無

百分數參照:相對於元素和原影象上的相應點(這個暫時忽略吧,沒看懂)

指定位置時通常指定兩個值。第乙個為水平方向,第二個為垂直方向,當只設定乙個值時,另乙個將預設為center。

使用百分數和固定長度時,允許是負值,具體計算方式暫時忽略。

當我們把背景定位在元素中間時,可能會有這樣一種情況。元素太寬,出現滾動條。這使得背景圖案剛開始對我們不可見。我們可以讓背景相對於視口定位,而不是元素。為了達到這個效果:

屬性名:background-attachment

值:scroll | fixed | inherit

初始值:scroll

應用於:所有元素

利用該屬性,可以實現一些有趣的效果。當我們為背景圖設定了fixed後,他將相對於視口定位,但他只會在包含他的元素中可見。這意味著,若為父元素和子元素應用同一的不同清晰度版本時,各個背景圖將會完美得融合在一起,看上去就像隔了一層半透明的玻璃一樣。示例

我們不需要乙個乙個去設定這些值:

屬性名:background

值: | inherit

這裡的color是指背景顏色background-color。我們建議當有背景圖時,設定乙個背景色。這樣當背景圖沒有載入時,會顯示背景色,不至於空白一片。

重看css權威指南 part2

1.text indent text indent通常用於縮排文字的第一行,只能用於塊級元素和行內塊元素,但如果把行內元素放到塊級元素中,行內元素會隨著塊級元素的文字一起縮排,使用百分數賦值時,相對于父元素的寬度計算,該屬性可被繼承。2.text align 改變元素中文本行的對其方式,同樣只能用於...

重看css權威指南 part3

接著來說文字屬性 word spacing和letter spacing 這兩個屬性都具有繼承性,不能使用百分數進行賦值。預設值為normal,相當於0。word spacing的值可能受到text align的影響,為了方便對齊。text transform uppercase lowercase...

重看css權威指南 part4

這一部分的名字叫基本視覺格式化,主要講了下元素框,邊距之類的東西,也對前邊的baseline,inline box等知識做了很多補充。這裡提到乙個詞,元素框。先說水平方向上。以下討論的都是塊級元素和行內塊元素,對於行內元素以後再說 元素框水平寬度 左外邊距 左邊框 左內邊距 width 右內邊距 右...