CSS屬性的定義

網站的視覺風格和佈局由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屬性也會遇到,它們可能並不那麼明顯,它們是如何根據名稱工作的:

當你深入網頁設計時,你會遇到(並使用)所有這些屬性和更多!

屬性需要值

每次使用財產時,都必須給它一個價值 - 而某些財產只能接受某些價值。

在我們的第一個“顏色”屬性的例子中,我們需要使用一個顏色值。 這可能是一個十六進制值 ,RGBA值,甚至是顏色關鍵字 。 然而,如果你對這個屬性使用了“陰沉”這個詞,那麼任何這些值都可以工作,但它不會做任何事情,因為如同該詞所描述的那樣,它不是CSS中的公認值。

我們的第二個“背景圖像”示例需要使用圖像路徑從網站文件中提取實際圖像 。 這是所需的值/語法。

所有的CSS屬性都有他們期望的值。 例如:

如果您瀏覽一下CSS屬性列表,您會發現它們中的每一個都具有特定的值,這些值將用於創建它們的樣式。

由Jeremy Girard編輯