標籤：select 如何 格式化 引入 property ima image 開始 style
CSS 概述
CSS 指層疊樣式表 (Cascading Style Sheets)，樣式定義了如何顯示 HTML檔案中的標籤元素，CSS是一種用來表現HTML（標準通用標記語言 (SGML)的一個應用）或XML（標準通用標記語言 (SGML)的一個子集）等檔案樣式的電腦語言。CSS不僅可以靜態地修飾網頁，還可以配合各種指令碼語言動態地對網頁各元素進行格式化。
CSS文法
CSS 規則由兩個主要的部分構成：選取器，以及一條或多條聲明。
selector1{ property: value; property: value; property: value;}selector2{ property: value; property: value; property: value;}
樣本：
h1{
color:red;
font-size:14px;
}
CSS引入方法
行內式
行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢，不推薦使用。
<div style="color: red;background-color: plum">DIV</div>
嵌入式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中。
<head> <style> div{ color: red; font-size: 30px; font-weight: 800; } p{ color: aqua; background-color: bisque; } </style></head>
連結式
將一個.css檔案引入到HTML檔案中，如定義檔案csstest.css
/*csstest.css，注釋行*//*該檔案內為純粹的CSS樣式代碼，不需要style標籤聲明*/div{ color: red; font-size: 30px; font-weight: 800;}p{ color: aqua; background-color: bisque;}
樣本：
<link rel="stylesheet" href="csstest.css" type="text/css">
匯入式
類似於連結式，都是匯入外部的css檔案
<head> <style> @import "csstest.css"; </style></head>
注意：匯入式會在整個網頁裝載完後再裝載CSS檔案，因此如果網頁比較大或網路不穩定則會兒出現先顯示無樣式的頁面，閃爍一下之後，再出現網頁的樣式。這是匯入式固有的一個缺陷。使用連結式時與匯入式不同的是它會以網頁檔案主體裝載前裝載CSS檔案，因此顯示出來的網頁從一開始就是帶樣式的效果的，這是連結式的優點。
CSS選取器-基本選取器
基本選取器包括：標籤選取器、id選取器、class選取器、通配選取器
標籤選取器
按照標籤名字進行匹配，上述的嵌入式、連結式和匯入式使用的css代碼所使用的選取器就是標籤選取器，會匹配html檔案中所有的div標籤和p標籤進行樣式渲染。
id選取器
按照標籤的id進行匹配，將匹配到的id進行渲染，每個html檔案中的id在根本上就禁止衝突，所以id是唯一的，所以一條css聲明只能匹配一個id
樣本：
<head> <style> /*id選取器*/ p2{ background-color: red; } </style></head><body> <p id="p2">I am P</p></body>
class選取器
同id選取器，只不過是將id名字改成class名字，類不唯一，所以能夠匹配多條
樣本：
<head> /*類別選取器*/ .p_ele{ background-color: bisque; } </style></head><body> <div class="p_ele">我是第一個p_ele類</div> <div class="p_ele">我是第二個p_ele類</div></body>
通配選取器
匹配所有的html檔案中的標籤元素
樣本：
<head> <style> /*通用選取器*/ *{ background-color: green; } </style></head><body> <p id="p2">I am P</p> <div class="p_ele">我是第一個p_ele類</div> <div class="p_ele">我是第二個p_ele類</div> <p>I am P2</p></body>
CSS選取器-基本選取器
包括：多元素選取器、後代選取器、子代選取器、毗鄰選取器、普通兄弟選取器
後代選取器
<!DOCTYPE html><html lang="en"><head> <style> /*後代選取器,指定了一個標籤，匹配它下面的所有元素*/ .outer p{ color: red; } </style></head><body> <div class="outer"> <p>p1</p> <div class="inner"> <p>p2</p> </div> <p class="p3">p3</p> <p>p4</p> </div> <p>p5</p> <div> <p>p6</p> </div></body>
子代選取器
<!DOCTYPE html><html lang="en"><head> <style> /*子代選取器，指定一個標籤，匹配該標籤下面的第一級子標籤進行匹配渲染*/ .outer > p{ color: red; } </style></head><body> <div class="outer"> <p>p1</p> <div class="inner"> <p>p2</p> </div> <p class="p3">p3</p> <p>p4</p> </div> <p>p5</p> <div> <p>p6</p> </div></body>
多元素選取器
<head> <style> /*多元素選取器，匹配包括.inner p（後代）或.p3的元素*/ .inner p, .p3{ color: red; } </style></head><body> <div class="outer"> <p>p1</p> <div class="inner"> <p>p2</p> </div> <p class="p3">p3</p> <p>p4</p> </div> <p>p5</p> <div> <p>p6</p> </div></body>
毗鄰選取器
<head> <style> /*不常用*/ /*毗鄰選取器，匹配同級的下面一個標籤，只會向下找，不會向上找*/ .outer+p{ color: red; } </style></head><body> <div class="outer"> <p>p1</p> <div class="inner"> <p>p2</p> </div> <p class="p3">p3</p> <p>p4</p> </div> <p>p5</p> <div> <p>p6</p> </div></body>
普通兄弟選取器
<head> <style> /*不常用*/ /*普通兄弟選取器，匹配同級的所有元素，只能向下，不能向上匹配*/ .outer~p{ color: red; } </style></head><body> <div class="outer"> <p>p1</p> <div class="inner"> <p>p2</p> </div> <p class="p3">p3</p> <p>p4</p> </div> <p>p5</p> <div> <p>p6</p> </div></body>
補充
<head> <style> /*補充，精確匹配，匹配ul標籤包含.item類的*/ ul.item{ color: red; } </style></head><body> <ul class="item"> <li>111</li> <li>111</li> <li>111</li> <li>111</li> </ul> <ol class="item"> <li>222</li> <li>222</li> <li>222</li> <li>222</li> </ol> <ul> <li>333</li> <li>333</li> <li>333</li> <li>333</li> </ul></body>
CSS基礎-DAY1
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
