CSS每日學習筆記（0）

7.29.2019

1. css 指層疊樣式表 (cascading style sheets)

樣式定義如何顯示 html 元素

樣式通常儲存在樣式表中

把樣式新增到 html 4.0 中，是為了解決內容與表現分離的問題

外部樣式表可以極大提高工作效率

外部樣式表通常儲存在 css 檔案中

多個樣式定義可層疊為一

2. 一般而言，所有的樣式會根據下面的規則層疊於乙個新的虛擬樣式表中，按優先順序公升序排列：

瀏覽器預設設定

外部樣式表

內部樣式表（位於

hr p

body

11.2內部樣式表

當單個文件需要特殊的樣式時，使用內部樣式表。使用標籤在文件頭部定義內部樣式表：

11.3內聯樣式

使用內聯樣式，需要在相關的標籤內使用樣式（style）屬性。style 屬性可以包含任何 css 屬性。

由於要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法，例如當樣式僅需要在乙個元素上應用一次時。

this is a paragraph

12. background-color 不能繼承（所有背景屬性都不能繼承），其預設值是 transparent。transparent 有「透明」之意。也就是說，如果乙個元素沒有指定背景色，那麼背景就是透明的，這樣其祖先元素的背景才能可見。

13. 要把影象放入背景，需要使用 background-image 屬性。background-image 屬性的預設值是 none，表示背景上沒有放置任何影象。大多數背景都應用到 body 元素，不過並不僅限於此。

下面例子為乙個段落應用了乙個背景，而不會對文件的其他部分應用背景：

p.flower

a.radio

14. 如果需要在頁面上對背景影象進行平鋪，可以使用 background-repeat 屬性。

屬性值 repeat 導致影象在水平垂直方向上都平鋪，就像以往背景影象的通常做法一樣。repeat-x 和 repeat-y 分別導致影象只在水平或垂直方向上重複，no-repeat 則不允許影象在任何方向上平鋪。預設地，背景影象將從乙個元素的左上角開始。

15. 可以利用 background-position 屬性改變影象在背景中的位置。關鍵字：top、bottom、left、right 和 center。還可以使用長度值，如 100px 或 5cm，最後也可以使用百分數值。

百分數值同時應用於元素和影象。也就是說，影象中描述為 50% 50% 的點（中心點）與元素中描述為 50% 50% 的點（中心點）對齊。如果有兩個值則分別為水平方向和垂直方向。如果只提供乙個百分數值，所提供的這個值將用作水平值，垂直值將假設為 50%。

長度值解釋的是元素內邊距區左上角的偏移。偏移點是影象的左上角。注意，這一點與百分數值不同，因為偏移只是從乙個左上角到另乙個左上角。也就是說，影象的左上角與 background-position 宣告中的指定的點對齊。

16. 如果文件比較長，那麼當文件向下滾動時，背景影象也會隨之滾動。當文件滾動到超過影象的位置時，影象就會消失。

可以通過 background-attachment 屬性防止這種滾動。通過這個屬性，可以宣告影象相對於可視區是固定的（fixed），因此不會受到滾動的影響。