網站的視覺風格和佈局由CSS或層疊樣式表規定。 這些是形成網頁HTML標記的文檔,為Web瀏覽器提供有關如何顯示由該標記產生的頁面的說明。 CSS處理頁面的佈局,以及顏色,背景圖片, 排版等等。
如果你看一個CSS文件,你會看到像任何標記或編碼語言一樣,這些文件對它們有特定的語法。 每個樣式表都由許多CSS規則組成。 這些規則在全部採用時是該網站的風格。
CSS規則的各個部分
CSS規則由兩個不同的部分組成 - 選擇器和聲明。 選擇器確定頁面上的樣式,聲明是如何樣式化的。 例如:
p {
顏色:#000;
}
這是一個CSS規則。 選擇器部分是“p”,它是“段落”的元素選擇器。 因此,它會選擇網站中的所有段落,並為它們提供這種樣式(除非在CSS文檔的其他地方有更多特定樣式的段落)。
規則中說“顏色:#000;”的部分 就是所謂的聲明。 該聲明由兩部分組成 - 屬性和價值。
該屬性是該聲明的“顏色”部分。 它規定了選擇器的哪一方面將在視覺上改變。
該值是所選CSS屬性將更改為的值。 在我們的例子中,我們使用#000的十六進制值,這是“黑色”的CSS縮寫。
因此,使用這個CSS規則,我們的頁面將以黑色的字體顏色顯示段落。
CSS屬性基礎
當你編寫CSS屬性時,你不能簡單地將它們設置為你認為合適的。 例如,“color”是一個實際的CSS屬性,所以你可以使用它。 該屬性決定了元素的文本顏色。 如果您嘗試使用“text-color”或“font-color”作為CSS屬性,則這些將失敗,因為它們不是CSS語言的實際部分。
另一個例子是屬性“背景圖像”。 該屬性設置可用於背景的圖像,如下所示:
。商標 {
background-image:url(/images/company-logo.png);
}
如果您嘗試將“background-picture”或“background-graphic”用作屬性,則它們將失敗,因為這些不再是實際的CSS屬性。
一些CSS屬性
您可以使用多種CSS屬性來設置網站的樣式。 一些例子是:
- 邊框(包括邊框樣式,邊框顏色和邊框寬度)
- 填充(包括填充頂部,填充右側,填充底部和填充左側)
- 頁邊距(包括頁邊距,頁邊距,頁邊距和頁邊距)
- 字體系列
- 字體大小
- 背景顏色
- 寬度
- 高度
這些CSS屬性是很好的例子,因為它們都非常簡單,即使你不知道CSS,也可以根據它們的名字猜出它們的作用。
還有其他的CSS屬性也會遇到,它們可能並不那麼明顯,它們是如何根據名稱工作的:
- 浮動
- 明確
- 溢出
- 文本轉換
- Z-指數
當你深入網頁設計時,你會遇到(並使用)所有這些屬性和更多!
屬性需要值
每次使用財產時,都必須給它一個價值 - 而某些財產只能接受某些價值。
在我們的第一個“顏色”屬性的例子中,我們需要使用一個顏色值。 這可能是一個十六進制值 ,RGBA值,甚至是顏色關鍵字 。 然而,如果你對這個屬性使用了“陰沉”這個詞,那麼任何這些值都可以工作,但它不會做任何事情,因為如同該詞所描述的那樣,它不是CSS中的公認值。
我們的第二個“背景圖像”示例需要使用圖像路徑從網站文件中提取實際圖像 。 這是所需的值/語法。
所有的CSS屬性都有他們期望的值。 例如:
- 邊框顏色需要一個顏色值
- 邊框尺寸需要一個尺寸值,如像素或百分比
- 邊框樣式需要用於此屬性的保留樣式之一,如“實心”
如果您瀏覽一下CSS屬性列表,您會發現它們中的每一個都具有特定的值,這些值將用於創建它們的樣式。
由Jeremy Girard編輯