<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./css/index.css"> <title>CSS入門第一節</title> <!-- 內建樣式 頁內樣式--> <style> p { color: yellowgreen; } </style></head> <body> <!-- 內斂樣式 --> <div style="color: red; font-size: 24px; border: 1px solid black;"> 我是DIV </div> <p> 我是段落標籤 </p> <h1> 我是大標題 </h1></body> </html>
/*index.css檔案*/ p { /* 設定字型大小為:50像素 */ font-size: 50px; /* 設定p標籤的背景色為銀灰色 */ background-color: silver;} span { font-size: 28px;}
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>css練習</title> <link rel="stylesheet" href="./css/index.css"></head><style> h1 { color: green; }</style><body> <p style="background-color: red;">設定p標籤的背景色為紅色</p> <h1>設定H1標籤的字型顏色為綠色</h1> <span>設定span標籤的文本為14像素</span></body></html>
萬用字元選取器
<!DOCTYPE html><!-- 萬用字元選取器 --><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS選取器</title></head><style> * { color: #3cd; } /* 萬用字元選取器：統統都被匹配上，可以選擇到所有的標籤 */</style><body> <h1>標題</h1> <p> 內容 </p> <ul> <li>北京</li> <li>南京</li> <li>山東</li> </ul> <strong>這是strong標籤</strong><br/> <span>demo</span></body></html>
css選取器
<!DOCTYPE html><!-- 標籤選取器 --><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS選取器</title></head><style> /* 標籤選取器 */ p { color: red; } li { background-color: gold; } span { font-size: 50px; } /* id選取器 */ /* id命名規範:必須以字母開頭(不限制大小寫),然後可以包含數字/字母/底線/串連符- */ #li-beijing { background-color: silver; } #li-shanghai { background-color: aquamarine; }</style><body> <h1>標題</h1> <p> 內容</p> <ul> <li id="li-beijing">北京</li> <li id="li-shanghai">南京</li> <li>山東</li> </ul> <strong>這是strong標籤</strong> <br/> <span>demo</span></body></html>
類別選取器
<!DOCTYPE html><!-- 類別選取器 --><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS的類別選取器</title></head><style> .lf-p { color: green; } .fl{ background-color: #cdf; }</style><body> <h1>標題</h1> <p class="p_1"> 段落一</p> <p class="lf-p fl"> 段落二</p> <p class="lf-p"> 段落三</p></body></html>
選取器綜合練習
<!DOCTYPE html><!-- 標籤選取器 類別選取器 id選取器 --><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>選取器綜合練習</title></head><style> h1 { color: red; font-size: 30px; } span { font-size: 18px; } #comt { color: yellow; /* font-size: 18px; */ } .date { color: purple; /* font-size: 18px; */ } .articleP{ font-size: 18px; color: blue; }</style><body> <h1>標題</h1> <p> <span id="comt">段落</span> <span class="date">時間</span> </p> <p class="articleP">本文</p></body></html>
複合選取器
<!DOCTYPE html><!-- 複合選取器:標籤指定式選取器,後代選取器,並集選取器 --><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>複合選取器</title> <style> /* 1.請把li中的class等於current的標籤的背景設定為高亮(顏色為藍色) 2.請把class為news的ul標籤下面的所有的li標籤中的文字設定為黑色(#333) 3.請把體育新聞和財經新聞的文字設定為銀灰色 */ /* 標籤指定式選取器 */ li.current { background-color: lightblue; } li#home { font-weight: bold; /*字型加粗*/ } /* 後代選取器 */ .news a { /* color:#333; */ color: green; } /* 並集選取器 */ .f-news a, .s-news a { color: silver; } /* 如果兩個優先順序一致的話,後面的則優先生效 */ .othernews a { color: red; } /* 並集選取器 */ html, body, p, dt, dl, dd, ul, p { padding: 0; /* 內邊距 */ margin: 0; /* 外邊距 */ } </style></head><body> <ul> <li id="home"><a href="#">首頁</a></li> <li><a href="#">產品</a></li> <li class="current"><a href="#">新聞</a></li> <li><a href="#">售後</a></li> <li><a href="#">關於</a></li> </ul> <ul class="news"> <li><a href="#">哈哈哈哈哈哈</a></li> <li><a href="#">哈哈哈哈哈哈</a></li> <li><a href="#">哈哈哈哈哈哈</a></li> <li><a href="#">哈哈哈哈哈哈</a></li> </ul> <dl class="f-news othernews"> <dt><a href="#">財經新聞</a></dt> <dd><a href="#">內容</a></dd> <dd><a href="#">內容</a></dd> <dd><a href="#">內容</a></dd> </dl> <dl class="s-news othernews"> <dt><a href="#">體育新聞</a></dt> <dd><a href="#">內容</a></dd> <dd><a href="#">內容</a></dd> <dd><a href="#">內容</a></dd> </dl></body></html>
子項目選取器
<!DOCTYPE html><!-- 子選取器 --><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>子項目選取器</title> <style> /* 子選取器 */ p > strong { color: red; } </style></head><body> <p> <p> <span>段落1</span> <span> <strong>段落2</strong> </span> <span>段落3</span> <strong>強調標籤</strong> </p> </p></body></html>
屬性選取器
<!DOCTYPE html><!-- 屬性選取器 --><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>屬性選取器</title> <style> span[class] { color: green; } /* 擁有id屬性的標籤都被選擇出來 */ [id] { font-size: 50px; } span[id="4"] { color: yellow; } /* 屬性包含選取器 */ span[class~="demo"] { font-size: 100px; } </style></head><body> <p> <span class="cur demo">1</span> <span>2</span> <span id="3">3</span> <span id="4">4</span> <span>5</span> </p></body></html>
偽類別選取器
<!DOCTYPE html><!-- 偽類別選取器 --><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>偽類別選取器</title> <style> a:link { color: red; } /* 當連結被訪問過了之後,就會添加偽類visited */ a:visited { color: lawngreen; } /* 當滑鼠移至上方於元素上面的時候,會自動添加偽類:hover */ a:hover { color: #fff; background-color: aquamarine } /* 當連結被點擊,但是滑鼠不要放開的時候, 會自動給串連添加active偽類*/ a:active { color: gold; } /* 遵循LoVe HAte 原則,否則可能無法正常顯示*/ /* 擷取到焦點的時候,預設給標籤添加focus效果 */ input:focus{ color: red; } </style></head><body> <a href="#">首頁</a> <a href="#">產品</a> <a href="#">新聞</a> <a href="/">娛樂</a> <input type="text" name="" id=""></body></html>
虛擬元素選取器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>虛擬元素選取器</title> <style> /* 第一個必須是span標籤,第二:是第一個孩子 */ span:first-child { color: red; font-size: 50px; } /* 段落的首個字元 */ p:first-letter { font-size: 50px; color: green; } /* 設定一行 */ p::first-line { color: gold; } /* 在標籤前面追加內容 */ #temp::before { content:"================"; } /* 在標籤後面追加內容 */ #temp:after { content:"xxxxxxxxxxxxxxx"; } </style></head><body> <p id="temp"> <span>一</span> <span>二</span> <span>三</span> </p> <p> <span>1</span> <span>2</span> <span>3</span> </p> <p>張宜成</p></body></html>
css的特性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS的特性:層疊性和繼承性</title> <style> p { color: red; font-size: 40px; } p{ color: green; } a{ color:inherit; /*繼承父標籤的屬性*/ } /* 繼承性:父容器設定的樣式,子容器也可以享受同等待遇 */ /* 所有字相關的都可以繼承,比如:color,text-系列/font-系列/line-系列/cursor 並不是所有的CSS屬性都可以繼承,例如,下面的屬性就不具有繼承性:邊框,外邊距,內邊距,背景,定位,元素寬高屬性. a標籤不繼承父標籤的字型顏色 */ </style></head><body> <p> 層疊性和繼承性 <span>我是Span標籤</span> <a href="#">我是a標籤,我特立獨行</a> </p> <span>我是Span標籤2</span></body></html>
css的優先順序
<!DOCTYPE html><!-- 第一原則: CSS優先順序從高到低: 內聯樣式 內建樣式 外部引入樣式 繼承樣式 預設樣式 --><!-- 第二原則: ID選取器 > 類(偽類) > 標籤 > 繼承 > 預設--><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 外部引入樣式優先順序大於繼承樣式 --><!-- 優先順序別可能與內建樣式互換,如果將link放到style下面, 則外部引入樣式優先於內建樣式 --> <link rel="stylesheet" href="./css/t.css"> <title>優先順序</title> <style> /* 繼承樣式大於預設樣式 */ body{ color: blueviolet; } /* 內建樣式大於外部引入 */ p { color: green; font-size: 50px; background-color: sienna; } .fs{ font-style: 400px; } #tp #atc{ font-size: 20px; /* !important是重要的意思,優先順序最高高於內斂樣式 */ color:lightsalmon !important; } </style></head><body id="tp"> <!-- 內聯樣式優先順序大於內建樣式 --> <p id="atc" class="fs" style="color: blue;"> 我是段落 </p></body><!-- 綜述: --><!-- 行內樣式 > 頁內樣式 > 外部參考樣式 > 瀏覽器預設樣式 --><!-- important > 內聯 > ID > 偽類/類/屬性選擇 > 標籤 > 偽對象 > 萬用字元 > 繼承 --></html>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
