CSS速成教程 1

2022-09-01 13:03:18 字數 907 閱讀 8390

css 指的是層疊樣式表(cascading stylesheet)。在網頁製作時採用層疊樣式表技術,可以有效地對頁面的布局、字型、顏色、背景和其它效果實現更加精確的控制。

學習路徑

css 規則由兩個主要的部分構成:選擇器,以及一條或多條宣告。

1

selector

選擇器通常是您需要改變樣式的 html 元素。 每條宣告由乙個屬性和乙個值組成。每個屬性有乙個值。屬性和值被冒號分開。

selector
例如:

h1
屬性大於 1 個之後,屬性之間用分號隔開。這行**的作用是將 h1 元素內的文字顏色定義為紅色,同時將字型大小設定為 14 畫素。

下面的示意圖為您展示了上面這段**的結構:

注意:如果值大於 1 個單詞,則需要加引號,如下:

p
你可以對選擇器進行分組,這樣被分組的選擇器就可以分享相同的宣告。用逗號將需要分組的選擇器分開。在下面的例子中,我們對所有的標題元素進行了分組。所有的標題元素都是紅色的。

h1,h2,h3,h4,h5,h6
根據 css,子元素從父元素繼承屬性。看看下面這條規則:

body
通過 css 繼承,子元素將繼承最高端元素(在本例中是 body)所擁有的屬性(這些子元素諸如 p, td, ul, ol, ul, li, dl, dt,和 dd)。不需要另外的規則,所有 body 的子元素都應該顯示綠色,子元素的子元素也一樣。並且在大部分的現代瀏覽器中,也確實是這樣的。

CSS速成教程 2

派生選擇器 通過依據元素在其位置的上下文關係來定義樣式,可以使標記更加簡潔。派生選擇器允許你根據文件的上下文關係來確定某個標籤的樣式。通過合理地使用派生選擇器,我們可以使 html 變得更加整潔。比方說,你希望列表中的 strong 元素變為紅色,而不是通常的黑色,可以這樣定義乙個派生選擇器 li ...

CSS速成教程 樣式2 5

在 css 的鏈結屬性設定中,我們能設定 color,font family,background 等等,不同的狀態我們可以設定對應的樣式。下面我們就來看看對應樣式的屬性設定。a link 普通的 未被訪問的鏈結 a visited 使用者已訪問的鏈結 a hover 滑鼠指標位於鏈結的上方 a a...

CSS速成教程 CSS樣式文字 4

css 文字屬性可定義文字的外觀。通過文字屬性,您可以改變文字的顏色 字元間距,對齊文字,裝飾文字,對文字進行縮排,等等。屬性描述 color 文字顏色 direction 文字方向 line height 行高letter spacing 字元間距 text align 對齊元素中的文字 text...