CSS基本選擇器（對指定的標簽設定樣式，要把指定的標簽選擇出來）：元素選擇器、類選擇器、id選擇器、組合選擇器、通用選擇器
1. 元素選擇器（型別選擇器或標記選擇器）：宣告哪些元素采用css樣式
2. 類選擇器（class）：應用樣式而不考慮具體設計的元素，為了將類選擇器的樣式與元素進行關聯，必須將元素中的class屬性指定一個適當的值，
class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示，也可以指定特定的HTML元素使用class，
在HTML中，一個class屬性還可能包含多個屬性值，各個值之間用空格分隔，表示將多類應用到同一個標記中，可以使用多次，表示類別，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*class 選擇器用于描述一組元素的樣式*/ /*所有的 p 元素使用 */ p.special{ color: red; } </style> </head> <body> <h1 class="special">應用類屬性</h1> <p class="special"> 應用段落</p> </body> </html>
3. id選擇器（id）：
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式，
HTML元素以id屬性來設定id選擇器,CSS 中 id 選擇器以 "#" 來定義，
不同與類選擇器，id選擇器不能組合使用，不容許有空格分隔的多個值，僅僅使用一次，
#red {color:red;} <p id="red">這個段落是紅色，</p>
4.組合選擇器：
多個選擇器（元素選擇器、類選擇器、id選擇器等）通過逗號連接，
樣式一樣的可以進行組合，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html5語意化</title> <style type="text/css"> header, section, footer, aside, nav, article, figure { display: block; } nav,header,p,article{ width: 1200px; margin:0 auto; }
ul{ height:40px; background-color: #fff; list-style: none; display: inline-block; width: 1200px; padding: 0px; } li{ line-height: 40px; text-align: center; float: left; width: 400px; margin:0 auto; } li:hover{ background: pink; } a{ text-decoration: none; } .post{ border:1px dashed #000; padding: 0 0 20px 20px; margin-bottom: 40px; padding-top: 10px; background-color: #fff; } #content{ border:1px solid #ccc; padding:30px 40px; background-color: rgb(247,244,255); margin-top: 20px; } </style> </head> <body> <!-- 放在body中，這個頁面的相關資訊 --> <aside style="background-color: rgb(244,247,255)"> <h4 style="padding-top: 20px;padding-left: 20px;">頁面導航</h4> <nav> <ul> <li><a href=https://www.cnblogs.com/sjslove/p/"#">查看相關內容</a></li> <li><a href=https://www.cnblogs.com/sjslove/p/"#">回傳首頁</a></li> <li><a href=https://www.cnblogs.com/sjslove/p/"#">回傳本頁</a></li> </ul> </nav> </aside> <!-- <article> 標簽定義獨立的內容部分 --> <article id="content"> <!-- <header>元素主要用于定義內容的介紹展示區域：引導、導航. --> <!-- 帖子的頭部 --> <header> <h1>馬上要去作業了，也不知道會怎么樣</h1> <div>作者，初級碼農</div> <p><time datetime="2020-03-15"></time></p> </header> <p>培訓的，大概培訓了半年，js、jquery、bootstrap、angular、vue、Ajax、資料庫、php、面向物件、Web服務器、移動端</p> <br><br> <!-- <section> 標簽定義檔案中的節（section、區段），比如章節、頁眉、頁腳或檔案中的其他部分， --> <!-- 回復部分 --> <section> <!-- 每個article代表一個回復 --> <!-- <article>定義獨立的內容部分 --> <article class="post"> <!-- 回復的頭部 --> <header> <h4>我覺得還行</h4> <div>作者：Amy</div> <p><time datetime="2020-04-01"></time></p> </header> <p>作業機會還多的，php是輕量級網站開發最好的選擇</p> </article> <!-- 每個article代表一個回復 --> <!-- <article>定義獨立的內容部分 --> <article class="post"> <!-- 回復的頭部 --> <header> <h4>不錯了</h4> <div>作者：鍵盤俠</div> <p><time datetime="2020-04-06"></time></p> </header> <p>學歷本科、資訊專業、會這么多，不會找不到的，對自己有信心一點</p> </article> </section> <br><br> <!-- 描述了檔案的底部區域 --> <!-- 一個頁腳通常包含檔案的作者，著作權資訊，鏈接的使用條款，聯系資訊等 --> <!-- 腳注 附加資訊--> <footer> <p style="color: pink;padding-left: 40px;">我的帖子我做主</p> </footer> <br><br> <!-- <aside> 標簽定義頁面主區域內容之外的內容（比如側邊欄）， --> <!-- 文章的額外的資訊 --> <aside style="padding-left: 40px;"> <h4>關于樓主</h4> <section> <div>用戶組：菜鳥初級</div> <div>閱讀量：20</div> <div>發表時間：2020-03-18</div> </section> </aside> <!-- <figcaption> 標簽定義 <figure> 元素的標題. --> <!-- <figure>標簽規定獨立的流內容（影像、圖表、照片、代碼等等）， --> <figure> <img src=https://www.cnblogs.com/sjslove/p/"https://p0.ssl.qhimg.com/t013feee31537e51f3b.png" height="96px" width="96px" alt="xiangmao" /> <figcaption style="padding-left: 20px">my logo</figcaption> </figure> </article> </body> </html>
5. 通用選擇器： 星號（*）
該選擇器可以與任何元素進行匹配，可以對檔案中的所有元素設定屬性和屬性值，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div布局</title> <style type="text/css"> /*通用選擇器*/ *{margin: 0; padding: 0; border: 0; } /*id選擇器*/ #header{ width: 100%; height: 80px; line-height: 80px; background-color: rgb(255,165,0); } /*id選擇器*/ #main{ height:200px; } /*id選擇器*/ #menu{ float: left; height:200px; width: 10%; background-color: yellow; } /*元素選擇器*/ menu{ height: 200px; } /*元素選擇器*/ b{ display: inline-block; margin-top: 10px; font-size: 18px; margin-left: 5px; } /*元素選擇器*/ ul{ margin-left: 46px; list-style: none; margin-top: 10px; } /*后代選擇器*/ ul li{ line-height: 40px; } /*id選擇器*/ #content{ float: left; height:200px; background-color: pink; width: 90%; } /*后代選擇器*/ #content p{ text-align: center; line-height: 200px; } /*id選擇器*/ #footer{ background-color: gray; height:80px; line-height: 80px; text-align: center; } </style> </head> <body> <div id="container"> <!-- 頭部 --> <div id="header"> <h1>主要頁面標題</h1> </div> <!-- 主體部分--> <div id="main"> <!-- 選單區 --> <div id="menu"> <menu> <b>選單</b> <ul> <li class="">HTML</li> <li class="">CSS</li> <li class="">JavaScript</li> </ul> </menu> </div> <!-- 內容區 --> <div id="content"> <p>內容在這里</p> </div> </div> <!-- 腳部 --> <div id="footer"> <p>著作權© sjs</p> </div> </div> </body> </html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/49953.html
標籤：Html/Css
下一篇：2.reset.css檔案