【前端】CSS : 入門

時間 2019-11-08

標籤前端 css 入門欄目 CSS 简体版

原文原文鏈接

介紹

CSS (Cascading Style Sheets) 用於渲染HTML元素標籤的樣式。css

CSS 能夠經過如下方式添加到HTML中：內聯樣式、內部樣式、外部引用。這三種方式下面會一一介紹html

語法

CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明：瀏覽器

（ 圖片來自www.runoob.com/css/css-syn…）

如：post

p {
    color: #FFFFFF;
    background: #27ad9a;
}
複製代碼

上面就是一個對<p>標籤訂義的樣式，樣式中申明瞭顏色和背景。spa

樣式

CSS 能夠經過如下方式添加到HTML中3d

內聯樣式 - 在HTML元素中使用"style" 屬性
內部樣式 - 在HTML文檔頭部 <head>區域使用<style> 元素來包含CSS
外部引用 - 使用外部 CSS 文件

內聯樣式

寫在標籤的style中，當特殊的樣式須要應用到個別元素時，就能夠使用內聯樣式。例code

<p style="color: #FFFFFF; background: #27ad9a;">震驚</p>
複製代碼

效果： cdn

內部樣式

當單個文件須要特別樣式時，就能夠使用內部樣式表。你能夠在<head> 部分經過 <style>標籤訂義內部樣式表。例htm

<head>
    <style type="text/css"> p { color: #FFFFFF; background: #27ad9a; } </style>
</head>
<p>我什麼都沒寫</p>
複製代碼

效果： blog

外部樣式

當樣式須要被應用到不少頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就能夠經過更改一個文件來改變整個站點的外觀。（經常使用的寫法） 例：在css文件夾下建立mystyle.css，並使用<link>引用

<head>
    <link rel="stylesheet" type="text/css" href="css/mystyle.css">
</head>
<p>外部樣式表</p>
複製代碼

效果：

接下來有個疑問，若是這幾種樣式同時使用會怎麼樣？ 寫個例子，定義好：外部樣式：black；內部樣式：green；內聯樣式：red；

p {
    color: black;
}
複製代碼

<head>
    <style> p { color: green; } </style>
</head>
複製代碼

<p style="color: red;">
複製代碼

場景1：外部樣式 + 內部樣式

結果：之內部樣式爲準

場景2：外部樣式 + 內聯樣式

結果：之內聯樣式爲準

場景3：內部樣式 + 內聯樣式

結果：之內聯樣式爲準

場景4：外部樣式 + 內部樣式 + 內聯樣式

結果：之內聯樣式爲準

能夠下個結論： 優先級：內聯樣式>內部樣式>外部樣式

選擇器

在 CSS 中，選擇器是一種模式，用於選擇須要添加樣式的元素。

基本選擇器

id選擇器

id 選擇器能夠爲標有特定 id 的 HTML 元素指定特定的樣式。用**#**定義選擇器的id，標籤中的id與其對應便可

例：

#p1 {
    color: #27ad9a;
}
複製代碼

<p id="p1">id選擇器</p>
複製代碼

效果：

注：ID屬性不要以數字開頭，數字開頭的ID在 Mozilla/Firefox 瀏覽器中不起做用。

class選擇器

class 選擇器用於描述一組元素的樣式，class 選擇器有別於id選擇器，class能夠在多個元素中使用。用**.（點）表示類選擇器，標籤中的class**與其對應便可

例：

.class1 {
    color: #27ad9a;
}
複製代碼

<p class="class1">class選擇器-p</p>
<a class="class1">class選擇器-a</a>
複製代碼

效果：

固然，class選擇器能夠選擇多個

例：

.class1 {
    color: #27ad9a;
}
.class2 {
    background: #000000;
}
複製代碼

<a class="class1 class2">class選擇器-a</a>
複製代碼

效果

會發現，兩個選擇器的屬性 都會表現出來

疑問：若是兩個選擇器中有相同的屬性會怎麼樣？試一下 例： class2中也定義了color屬性，兩個相同的屬性結果？

.class1 {
    color: #27ad9a;
}
.class2 {
    color: #FFFFFF;
    background: #000000;
}
複製代碼

<a class="class1 class2">class選擇器-a</a>
複製代碼

效果

猜測：後引用的選擇器屬性會覆蓋前面引用的 爲了驗證這個猜測，把使用順序調換一下

<a class="class2 class1">class選擇器-a</a>
複製代碼

效果：

呃~~尷尬，猜測錯誤

繼續猜測：後定義class選擇器屬性會覆蓋前面定義的 帶着這個想法再來驗證一下：

調換class一、class2的順序

.class2 {
    color: #FFFFFF;
    background: #000000;
}

.class1 {
    color: #27ad9a;
}
複製代碼

<a class="class2 class1">class選擇器-a</a>
複製代碼

效果：

結論：若是有相同屬性，後定義的class選擇器會覆蓋以前定義的 （至於緣由，有待指教）

標籤選擇器

class選擇器還能夠能夠指定特定的HTML元素使用class

**例：**指定p元素顏色

p.class1 {
    color: #27ad9a;
}
複製代碼

<p class="class1">class選擇器-p</p>
<a class="class1">class選擇器-a</a>
複製代碼

**效果：**這個選擇器只能在

中生效

注：類名的第一個字符不能使用數字！它沒法在 Mozilla 或 Firefox 中起做用

疑問：id選擇器和class選擇器同時使用，會怎麼樣？

**例：**定義相同的屬性color

#p1 {
    color: #27ad9a;
}
.class2 {
    color: #FFFFFF;
    background: #000000;
}
複製代碼

<p id="p1" class="class2">class選擇器-p</p>
複製代碼

效果：

結論選擇器優先級：id選擇器>類選擇器>標籤選擇器

疑問：外聯樣式和class選擇器同時使用會怎麼樣？ 例：

.class2 {
    color: #FFFFFF;
    background: #000000;
}
p {
    color: yellow;
}
複製代碼

<p class="class2">class選擇器-p</p>
複製代碼

效果： 選擇器覆蓋了外部樣式。

結論
樣式、選擇器優先級：內聯樣式>選擇器>內部樣式>外部樣式

組合選擇器

在 CSS3 中包含了四種組合方式:

後代選擇器(以空格分隔)
子元素選擇器(以大於號分隔）
相鄰兄弟選擇器（以加號分隔）
普通兄弟選擇器（以破折號分隔）

後代選擇器

用於選取某元素的後代元素例：

div p {
    background-color: #27ad9a;
    color: #FFFFFF;
}
複製代碼

<div>
    <p>在div中的p</p>
    <span>
        <p>在更div、span中的p</p>
    </span>
</div>
<p>在外面的p</p>
複製代碼

效果：

子元素選擇器

只能選擇做爲某元素子元素的元素

例：

div>p {
    background-color: #27ad9a;
    color: #FFFFFF;
}
複製代碼

html代碼同上 效果：

只有在div中的p有效果，而span中的p就沒有了

相鄰兄弟選擇器

可選擇緊接在另外一元素後的元素，且兩者有相同父元素。

例：

div+p {
    background-color: #27ad9a;
    color: #FFFFFF;
}
複製代碼

<div>div</div>
<p>跟在div後面的p</p>
<p>跟在div、p後面的p</p>
複製代碼

效果：

後續兄弟選擇器

選取全部指定元素以後的相鄰兄弟元素例：

div~p {
    background-color: #27ad9a;
    color: #FFFFFF;
}
複製代碼

html代碼同上 效果：

屬性選擇器

屬性選擇器是一種特殊類型的選擇器，它根據元素的屬性和屬性值來匹配元素。它們的通用語法由方括號 ([]) 組成，其中包含屬性名稱，後跟可選條件以匹配屬性的值。屬性選擇器能夠根據其匹配屬性值的方式分爲兩類：存在和值屬性選擇器和子串值屬性選擇器。

例：

[food] {
    background-color: #7FD0F3;
}
[food="vegetable"] {
    color: #FFFFFF;
}
複製代碼

<div food="meat">meet</div>
<div food="vegetable">vegetable</div>
複製代碼

效果：

參考

runoob（部份內容來源）

相關閱讀

有錯誤之處，感謝指出，接收批評

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

【前端】CSS : 入門

介紹

語法

樣式

內聯樣式

內部樣式

外部樣式

場景1：外部樣式 + 內部樣式

場景2：外部樣式 + 內聯樣式

場景3：內部樣式 + 內聯樣式

場景4：外部樣式 + 內部樣式 + 內聯樣式

選擇器

基本選擇器

id選擇器

class選擇器

標籤選擇器

更多選擇器用法

多個

嵌套

組合選擇器

後代選擇器

子元素選擇器

相鄰兄弟選擇器

後續兄弟選擇器

屬性選擇器

參考