什麼是CSS屬性? 要如何設定?

網站的視覺樣式與版面是由階層樣式表(Cascading Style Sheets,縮寫CSS)所規定。

這些檔案塑造網頁的HTML標記語言,為網頁瀏覽器提供指示,關於如何呈現該標記語言所產生的網頁。CSS規範網頁的版面以及顏色、背景影像、排版等等多種設定。

如果你查看一個CSS檔,你會發現這些檔案擁有自己的特定語法,就如同任何標記或程式語言。每個樣式表格都是由各種CSS屬性規則所組成。若完整地來看這些規則,它們就是網站的樣式。

CSS規則的組成部分

CSS規則由兩大部分組成:選擇器(selector)和宣告(declaration)。選擇器決定樣式要套用到網頁上的哪些部分,而宣告則是決定如何呈現樣式。例如:

p {
 color: #000;
}

這是CSS規則。選擇器的部分是”p”,它是「段落」的選擇器元素。因此,它將選擇網站中的所有段落,並提供它們此樣式(除非你在CSS文件中特別針對指定段落更具體的樣式)。

規則部分顯示「color: #000」,也就是所謂的宣告。該宣告是由兩部分組成:屬性值。

屬性是此宣告的顏色部分。它決定哪方面的選擇器將會有視覺上的變更。

是已選擇的CSS屬性將會被改變的結果。以我們的案例而言,我們使用的#000是十六進位值,是CSS「黑色」的簡寫。

因此,使用此CSS規則,我們的頁面將會顯示黑色字體的段落。

 

CSS屬性基礎知識

當你在寫CSS屬性時,你不能簡單地以你認為適合的方式來編寫。例如,「color」是實際的CSS屬性,所以你可以使用它。此屬性是定義文字顏色的元素。

如果你嘗試使用「text-color」或「font-color」作為CSS屬性,這些都會失敗,因為它們並非CSS語言實際的組成部分。

另一個例子是「background-image」屬性。此屬性是用來設定一個可用於背景的圖像,如下:

.logo {
 background-image: url("/images/company-logo.png");
}

如果你嘗試使用「background-picture」或「background-graphic」作為屬性,它們都會失敗,因為這些同樣不是實際的CSS屬性。

 

CSS屬性的例子

你可以用於網頁樣式的CSS屬性有很多種。下列為一些例子:

  • Border (包括border-style、border-color和border-width)
  • Padding (包括padding-top、padding-right、padding-bottom和padding-left)
  • Margins (包括margin-top、margin-right、margin-bottom和margin-left)
  • Font-family
  • Font-size
  • Background-color
  • Width
  • Height

這些CSS屬性都是很常見的例子,因為它們都非常容易理解,即使你不懂CSS,你大概也可以根據它們的名稱猜到它們的作用。

下列是你也會遇到的其他常用CSS屬性,可能比較難根據它們的名稱就理解它們的作用:

  • Float
  • Clear
  • Overflow
  • Text-transform
  • Z-index

隨著你更深入了解網頁設計,你將會遇到(和使用)所有這些屬性,甚至更多!

 

屬性必須要有值

你每次使用屬性時,你都必須給一個值,且特定屬性只能接受特定的值。

在我們第一個「color」屬性的例子中,我們須要使用顏色作為值。這有可能是十六進位的值、RGB值,甚至是顏色關鍵字。

這些值的任何一個都能使用,然而,如果你在此屬性中使用「gloomy」,它將不會進行任何動作,因為儘管它是個描述性的詞,但它並非CSS公認的值。

我們第二個例子「background-image」需要一個影像路徑,以從你的網站檔案中抓取實際的影像。這就是該屬性所需要的語法。

所有CSS屬性都有各自對應的值。例如:

  • Border-color的值是顏色。
  • Border-size的值是尺寸,如像素(pixels)或百分比(percentages)。
  • Border styles此屬性使用保留的樣式之一,像是「solid」。

如果你看過了CSS屬性列表,你將會發現每個屬性都有特定的值,它們會使用值來建立它們所要的樣式。

相關文章

推薦文章