極客書

CSS - Syntax

CSS由樣式規則組成，這些規則由瀏覽器解釋，然後應用於文檔中的相應元素。樣式規則由三部分組成&減號;

  • 選擇器是將應用樣式的HTML標記。這可以是任何標記，如<h1>或<table>等。

  • 屬性是HTML標記的一種屬性。簡單地說，所有的HTML屬性都轉換爲CSS屬性。它們可以是顏色，邊框等。

  • 值−值被分配給屬性。例如，color屬性可以具有值red或#F1F1F1等。

您可以將CSS樣式的規則語法設置如下−

selector { property: value }

Syntax

Example − You can define a table border as follows −

table{ border :1px solid #C00; }

Here table is a selector and border is a property and given value 1px solid #C00 is the value of that property.

You can define selectors in various simple ways based on your comfort. Let me put these selectors one by one.

The Type Selectors

This is the same selector we have seen above. Again, one more example to give a color to all level 1 headings −

h1 {
   color: #36CFFF; 
}

The Universal Selectors

通用選擇器沒有選擇特定類型的元素，而是非常簡單地匹配任何元素類型的名稱−

* { 
   color: #000000; 
}

此規則將文檔中每個元素的內容呈現爲黑色。

The Descendant Selectors

假設您只想將樣式規則應用於位於特定元素內的特定元素。如下例所示，樣式規則僅在元素位於標記中時才應用於元素。

ul em {
   color: #000000; 
}

The Class Selectors

可以基於元素的類屬性定義樣式規則。具有該類的所有元素都將根據定義的規則進行格式化。

.black {
   color: #000000; 
}

此規則爲文檔中class屬性設置爲black的每個元素以黑色呈現內容。你可以讓它更特別一點。例如−

h1.black {
   color: #000000; 
}

此規則僅爲類屬性設置爲黑色的<h1>元素以黑色呈現內容。

可以對給定元素應用多個類選擇器。考慮下面的例子−

<p class = "center bold">
   This para will be styled by the classes center and bold.
</p>

The ID Selectors

可以基於元素的id屬性定義樣式規則。所有具有id的元素都將根據定義的規則格式化。

#black {
   color: #000000; 
}

此規則將文檔中屬性設置爲id的每個元素的內容呈現爲黑色。你可以讓它更特別一點。例如−

h1#black {
   color: #000000; 
}

此規則僅爲id屬性設置爲black的<h1>元素以黑色呈現內容。

< I> ID> I/>選擇器的真正功率是當它們用作後代選擇器的基礎時，例如減去;

#black h2 {
   color: #000000; 
}

在本例中，當這些標題位於id屬性設置爲black的標記中時，所有2級標題將顯示爲黑色。

The Child Selectors

您已經看到了後代選擇器。還有一種選擇器類型，它與子體非常相似，但具有不同的功能。考慮下面的例子−

body > p {
   color: #000000; 
}

如果所有段落都是<body>元素的直接子級，則此規則會將它們呈現爲黑色。放在其他元素中的其他段落，如<div>或<td>，將不受此規則的任何影響。

The Attribute Selectors

您還可以將樣式應用於具有特定屬性的HTML元素。下面的樣式規則將匹配所有具有type屬性的輸入元素，其值爲text−

input[type = "text"] {
   color: #000000; 
}

此方法的優點是，<input type=「submit」/>元素不受影響，並且顏色僅應用於所需的文本欄位。

有以下規則應用於屬性選擇器。

  • p[lang]−選擇具有lang屬性的所有段落元素。

  • p[lang=「fr」]−選擇其lang屬性值正好爲「fr」的所有段落元素。

  • p[lang~=「fr」]−選擇其lang屬性包含單詞「fr」的所有段落元素。

  • p[lang |=「en」]−選擇其lang屬性包含完全爲「en」或以「en-」開頭的值的所有段落元素。

Multiple Style Rules

可能需要爲單個元素定義多個樣式規則。您可以定義這些規則，以便將多個特性和相應的值組合到一個塊中，如以下示例中所定義的−

h1 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

這裡所有的屬性和值對都用分號（;）分隔。您可以將它們放在一行或多行中。爲了更好的可讀性，我們將它們放在單獨的行中。

暫時不要爲上面提到的屬性操心。這些屬性將在接下來的章節中解釋，您可以在CSS引用中找到有關屬性的完整詳細信息<！--css引用。

-->

Grouping Selectors

如果願意，可以將樣式應用於多個選擇器。只需用逗號分隔選擇器，如下例所示−

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

此定義樣式規則也適用於h1、h2和h3元素。名單的順序無關緊要。選擇器中的所有元素都將應用相應的聲明。

您可以將各種id選擇器組合在一起，如下所示−