html添加css——樣式選擇器

如何給html添加樣式。兩種方法：

1、新創建一個css樣式表，與原html同目錄，而後經過link標籤連接。如：<link type="text/css" rel="stylesheet" href="lounge.css">（link標籤是一個void元素，無結束標籤。）

2、直接在html源碼中使用style標籤。如：<style>樣式</style>，style標籤嵌入head中。

html中插入style，則會涉及到五種樣式選擇器。

一、元素選擇器,給某一元素添加樣式

以下:p元素與h1元素內的文本應用大括號內的樣式

<style>

p,h1{color:grey;

background-color:red;

font-family:sans-serif;}

</style>

 

二、類選擇器，class屬性

在 <style> 標籤中建立一個名爲 blue-text 的CSS類,而後將類應用於HTML元素。

如：

<style>

.blue-text{color:black;}

</style>

<p class="blue-text">

注意，在CSS樣式元素中，類選擇器應該添加.爲前綴。而在HTML元素的類聲明中，類屬性不能添加.爲前綴。

類選擇器不必定只針對某一標籤，只要元素應用了class標籤，則就使用此css類。

 

三、id屬性設置樣式

與class相似，爲元素定義一個id，給id建立一個聲明。例：

<p id="important"></p>

<style>

#important{color:black;}

</style>

注意：與class不一樣的是，在css樣式元素中，應添加#爲前綴，html中沒有前綴。一個id對應一個css屬性。

 

四、屬性選擇器，選擇某個元素應用樣式

如：*[title]{color:red;}

全部包含title屬性的元素均可應用以上樣式。

 

五、後代選擇器又稱爲包含選擇器。後代選擇器能夠選擇做爲某元素後代的元素。

根據上下文選擇元素

能夠定義後代選擇器來建立一些規則，使這些規則在某些文檔結構中起做用，而在另一些結構中不起做用。

舉例來講，若是但願只對 h1 元素中的 em 元素應用樣式，能夠這樣寫：

h1 em {color:red;}

上面這個規則會把做爲 h1 元素後代的 em 元素的文本變爲 紅色。其餘 em 文本（如段落或塊引用中的 em）則不會被這個規則選中：

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

再好比說：一個div元素中 要對其中一個元素進行樣式改變，好比h2，由於在前面有一個類已經定義了全部h1.h2的樣式，而h2又有一部分留在div中，
因此不容許直接對上面的class類中的h1和h2進行樣式改變。於是能夠使用後代選擇器：div h2{}

附：p>em{color；red；}表示緊挨着p的em元素使用此樣式。p+em{}與p元素緊鄰的em元素使用此樣式。h1+p{}h1後面緊鄰的p應用此樣式。