標籤：選取器 技術 檔案 images com charset body html 通用
CSS基本概念 css文法結構每個css由兩部分組成：選取器和聲明,聲明又包括屬性和屬性值(json格式key:value)
選取器有如下幾種：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css愛之初體驗</title> 6 <style type="text/css"> 7 #show2{color:gold;font-size: 40px} 8 .s1{color: red;font-size: 15px} 9 span{color: #0000cc;font-size: 20px}10 .s2 span{11 color: #05B2D2;font-size: 40px;12 }13 p,h1,a{color: #0000cc;font-size: 5px}14 #show1{color:gold;}15 .show {color:pink;}16 h1 {color:red;}17 * {color:green;} <!--通用選取器-->18 </style>19 </head>20 <body>21 <!--行內樣式-->22 <div style="color: red;font-size: 35px">css第一部分</div>23 <!--標籤選取器-->24 <span>css愛之初體驗1</span>25 <!--id選取器-->26 <div id="show2">css愛之初體驗2</div>27 <!--類別選取器-->28 <div class="s1">css愛之初體驗3</div>29 <!--包含選取器-->30 <div class="s2">31 <span>css愛之初體驗4</span>32 <a>css愛之初體驗5</a>33 </div>34 <!--分組選取器-->35 <p>css愛之初體驗6</p>36 <h1>css愛之初體驗7</h1>37 <a>css愛之初體驗8</a>38 <div>css愛之初體驗9</div>39 <!--行內樣式>id選取器>類別選取器>標籤選取器>通用選取器-->40 <h1 id="show1" class="show" style="color:gray;">這是選取器優先順序測試</h1>41 </body>42 </html>樣式表
內部樣式和行內樣式，上文已寫。
外部樣式:
使用內容樣式容易和html代碼混淆，我們單獨把樣式內容單獨寫入一個檔案，叫外部樣式，使用link標籤引入。如下：
<head> <meta charset="UTF-8"> <title>css愛之初體驗</title> <link href="a.css" type="text/css" rel="stylesheet"></head>
前端css學習_Day15
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
