標籤：style color 使用 檔案 for io
一.CSS引入方法：行內式、嵌入式、匯入式、連結式。
1、行內式。
即：在標籤的style屬性中設定CSS樣式。
例子：<div style="行內式</div>
2、嵌入式
即：將頁面各種元素的設定集中寫在<head></head>標籤裡。
例子：
<head>
<style type="text/css">
div{ }
</style>
</head>
3、匯入式
即：將一個外部CSS檔案引入CSS檔案或HTML檔案,注意此方法既能在CSS檔案裡使用也能夠在HTML的<head></head>標籤之間使用。
<head>
<style type="text/css">
@import "main.css";
</style>
</head>
4、連結式
即：將一個外部CSS檔案引入HTML檔案
例子：
<head>
<link href="main.css" rel="stylesheet" tyle="text/css">
</head>
二、選取器
1、ID選取器
根據HTML元素的id屬性選擇元素。
例子：
CSS: #div1{ } /* 選中id為div1的HTML元素 */
HTML: <div id="div1">我是ID為div1的div元素</div>
2、class選取器
根據HTML的class屬性選擇元素。
例子：
CSS: .left{ font-size: 13px; line-height: 19px; orphans: 2; widows: 2;"> HTML <div class="left">我是class="left"的div元素</div>
3、標籤選取器
根據HTML標籤選擇元素
例子：
CSS: div{ }
HTML: <div>我是一個div元素</div>
4、複合選取器
4.1 交集選取器
例子：
CSS: p.special{ color:red; } /* 選中class="special"的p元素 */
HTML:
<p>我是一個p</p> /* 不會被選中 */
<p class="special">我是一個class="special"的元素</p> /* 選中該行 */
4.2 並集選取器
例子：
CSS： .special,div,p { }
HTML:
<span class="special">我是一個class屬性為span的元素</span>
<div>我是一個div元素</div>
<p>我是一個p元素</p>
以上三行HTML代碼都會被選中。
4.3 後代選取器
後代選取器：選中所有後代元素
例子：
CSS: .special p{ }
HTML:
<div class="special">
<p>我是.special裡的p元素</p> /* 會被選中 */
<div>
<p>我是.special裡的p元素</p> /* 會被選中 */
</div>
</div>
<p>我也是一個p</p> /* 不會被選中 */
直接後代選取器
即：選擇直接子後代
CSS: .special>p{ }
<div class="special">
<p>我是.special裡的p元素</p> /* 會被選中 */
<div>
<p>我是.special裡的p元素</p> /* 不會被選中，因為不是直接子項目，是孫子項目了 */
</div>
</div>
<p>我也是一個p</p> /* 不會被選中，非子項目 */
五、屬性選取器
CSS： a[title]{ font-size:30px; } //選中含有title屬性的a元素
<a title="a1" href="/">我是第一個a標籤</a> //會被選中，含有title屬性
<a href="/">我是第二個a標籤</a> //不會被選中，沒有title屬性
a[title="a1"]{ font-size:30px; } //選中title屬性=a1的元素
<a title="a1" href="/">我是第一個a標籤</a> //會被選中，含有title，並且title=a1
<a href="/">我是第二個a標籤</a> //不會被選中，沒有title屬性
<a title="a2" href="/">我是第一個a標籤</a> //不會被選中，title不=a1
其他屬性符號：a[title~=‘a1‘] 選中<a title="a1 important"></a> 選中title屬性中包含a1的元素，注意a與其他值要有空格
a[title^=‘a1‘] 選中<a title="a1bcd"></a> 選中title屬性以a1開頭的元素
a[title$=‘a1‘] 選中<a title="bcda1"></a> 選中title屬性以a1結束的元素
a[title*=‘a1‘] 選中<a title="xxa1xx"> 選中title屬性中包含a1的元素
a[title|=‘a1‘] 選中<a title="a1-bcd"></a>或<a title="a1"></a> 選中title屬性中包含"a1-"開頭或等於"a1"的元素，常用於選擇src="logo-1","logo-2"等屬性。
六、相鄰兄弟選取器"+"
CSS: span + p
HTML:
<div>
<span>我是一個span</span>
<p>我是一個p</p> <!--會被選中-->
<div>
<p>我也是一個P</p> <!--不會被選中。不是span的兄弟-->
</div>
</div>
六、CSS的繼承特性
子項目會繼承父元素中的樣式
CSS: p{ color:red; text-decoration:underline; }
b{ color:blue; }
HTML: <p>我是<b>p</b>元素</p> 顯示結果為：我是p元素
可以看到b繼承了底線樣式，同時改變了顏色。(註：底線仍然是紅色) 這樣就可以實現CSS樣式的共用。
六、CSS層疊特性
各個選取器優先順序排行：
行內樣式>ID選取器>class選取器>標籤選取器
當連個選取器優先順序相同時，寫在前面>寫在後面。如：<p class="p1 p2">此時p1樣式優先</p>
七、偽類
a:link {color: #FF0000} /* 未訪問的連結 */
a:visited {color: #00FF00}/* 已訪問的連結 */
a:hover {color: #FF00FF}/* 滑鼠移動到連結上 */
a:active {color: #0000FF}/* 選定的連結 */
p:first-child {font-weight: bold;}
:active 向被啟用的元素添加樣式。
:focus向擁有鍵盤輸入焦點的元素添加樣式。
:hover當滑鼠懸浮在元素上方時，向元素添加樣式。
:link向未被訪問的連結添加樣式。
:visited向已被訪問的連結添加樣式。
:first-child向元素的第一個子項目添加樣式。
:lang向帶有指定 lang 屬性的元素添加樣式。
八、虛擬元素
:first-letter 向文本的第一個字母添加特殊樣式。
:first-line向文本的首行添加特殊樣式。此偽類只能用於區塊層級元素。
:before在元素之前新增內容。
:after在元素之後新增內容。
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
