CSS代碼長什麼樣？

CSS的代碼是類似 json 數據的鍵值對，也就是key : value，當然，每一句都必須以分號（；）結束，切記，沒有分號會出問題的。

其實類似 json 數據在我們生活中很常見，比如以下例子：

姓名：小明
性別：男
班別：19計機預師班

在以上例子中，「姓名」可以稱為欄位或者屬性，姑且叫它「屬性」吧，而後面的「小明」則是屬性值，這樣子就形成了一種明確的數據組，同樣道理，先看一下CSS代碼：

 background-color：red;
 color:green;
 font-size:2em; 
......

發現沒有？其實這兩種方式是差不多一樣的，「background-color」是屬性（property），而它的值（value）則是「red」，用這種方式，就設定了背景顏色為紅色。只不過CSS代碼後面必須要加分號（;）結束，在這裡再次提醒。

當然，還有一點要提醒初學者，在計算機程序設計中，所有的標點符號的輸入必須切換到英文輸入的狀態，不然，也會出現一些莫名其妙錯誤出來。

CSS三種選擇器以及它們的優先順序

好了，上面介紹了CSS代碼長啥樣，那麼接下來就要明確一個問題：代碼寫出來後，我們怎麼應用到HTML中去？也就是說，怎麼用CSS控制HTML的顯示效果。

在具體的應用中，我們引入「選擇器（selector）」這個概念。

什麼是選擇器（selector）？其實按照我們的理解，你寫好了CSS代碼以後，那你要把這些寫好的代碼應用到某個地方去對吧，而這些受體就是選擇器。

CSS有三種選擇器，分別是標籤（tag）、類（class）和ID.

標籤（tag）

標籤，指的是HTML標籤，也就是說，所有的HTML標籤都是標籤選擇器。要注意的是，如果要用標籤選擇器，必須是HTML標籤，不允許自定義。先看以下例子(大家可以把以下代碼保存為html文件，然後用瀏覽器打開看效果）：

 <html> 
				<head> 
								<style> 
												p{ 
                          background-color:red; 
                          color:green; font-size:2em;
                        } 
								</style> 
				</head>
 				<body> 
								<p>注意這裡顯示的顏色</p> 
								<p>再留意顯示這裡的顏色</p> 
								<b>好吧，再次留意這裡的顏色</b> 
				</body>
 </html>

以上代碼中，第4~8行是標籤選擇器的應用方式，格式很簡單，就是直接寫HTML標籤（上面的例子中用了p標籤），然後後面跟著一對大括弧（{}），大括弧裡面寫具體的CSS代碼，以上案例的功能就是，給HTML中所有的p標籤內容（第12~13行）應用上「紅色背景、綠色字和2em的字體大小」的效果，而第14行中是b標籤，沒有該效果。

類（class）和ID

我們有這麼一個場景：在以下代碼中，我們給p標籤加上了綠色的字體顏色，也就是說第12~13行的文字是綠色的，那如果我需要給「注意這裡顯示的顏色」和「再留意顯示這裡的顏色」這兩行文本添加不同的顏色，怎麼辦呢？

<html> 
    <head> 
        <style> 
        			p{ 
            				background-color:red; 
            				color:green; 
            				font-size:2em; 
            			} 
        </style> 
    </head> 
    <body> 
        			<p>注意這裡顯示的顏色</p> 
        			<p>再留意顯示這裡的顏色</p> 
        			<b>好吧，再次留意這裡的顏色</b> 
    </body> 
</html>

有兩種方法，分別是類和ID可以解決。

先用類的方法：我們可以手動地在兩個p標籤中都加上類，或者為其中一個加上即可。具體做法如下。

 <html>
 				<head>
 								<style>
 												p{ 
														background-color:red; 
														color:green; 
														font-size:2em; 
													} 
												.yellow{ 
														color:yellow; 
													} 
								</style> 
				</head> 
				<body> 
								<p class="yellow">注意這裡顯示的顏色</p>
 								<p>再留意顯示這裡的顏色</p> 
								<b>好吧，再次留意這裡的顏色</b> 
				</body> 
</html>

在以上代碼中，我在第15行的p標籤內加了一個class屬性，屬性值為「yellow」，然後第9~11行則是對yellow類的具體實現，像這樣就可以給「注意這裡顯示的顏色」這行文本加了黃色（yellow）的效果了。

總結一下類的語法：.<類名>{<具體的CSS代碼>}。

注意：類名是自定義的，你喜歡用什麼類名就什麼類名，但是，你所起的類名也要符合一些規則：一是必須以字母或者下劃線（_）作為開頭，後面可以加數字，不能加其他符號；二是類名是對大小寫敏感的，也就是說一個字母的大寫和小寫狀態是兩個不一樣的類名。

好了，接下來是另外一種實現方法，用ID.

ID方法的實現在形式上跟類（class）差不多，在CSS選擇器中，類的語法是，在類名前面加一個點（.），而ID的不一樣的地方在於，它在ID名前面加的是一個#號，具體做法如下：

 <html>
 				<head> 
   								<style>
   												p{
     													background-color:red; 
     													color:green;
    													font-size:2em; 
   												} 
													#yellow{ 
  														color:yellow; 
													} 
								</style> 
				</head> 
				<body>
 								 <p id="yellow">注意這裡顯示的顏色</p> 
								<p>再留意顯示這裡的顏色</p> 
								<b>好吧，再次留意這裡的顏色</b> 
				</body>
</html>

以上案例中，通過ID的方法，也可以把「注意這裡顯示的顏色」文本修改成黃色（yellow）顯示效果。

大家可以對比類和ID的實現方法，兩者只是在符號和引用方式上存在不一樣，那真的只是在形式上不一樣嗎？

並不是這樣的，之所以存在這兩種方式，因為這兩者它們有各自的特性。

類的特性：類的最大特徵是可復用，可以在多個不同的標籤中應用同一個類。比如以下這個案例：

 <html> 
 				<head>
 								<style> 
 												p{ 
   														background-color:red; 
   														color:green; 
   														font-size:2em; 
												 } 
											.yellow{ 
  														color:yellow; 
												} 
								</style> 
				</head> 
				<body> 
								<p class="yellow">注意這裡顯示的顏色</p> 
								<p>再留意顯示這裡的顏色</p> 
								<b class="yellow">好吧，再次留意這裡的顏色</b> 
				</body>
</html>

在以上代碼中，我定義了一個yellow類（第9~11行），然後分別應用到「注意這裡顯示的顏色」（第15行）和「好吧，再次留意這裡的顏色」（第17行）文本上。

ID的特性：ID，顧名思義，就是身份標識，身份標識具有唯一性，而ID的作用，就是標識唯一性，也就是說，只要在某個標籤上應用一個ID，那就不能再在其他標籤上使用該ID了。

至於這三種選擇器的優先順序，這裡直接說結論，ID優先順序最高，類其次，標籤優先順序最低。大家可以運行以下代碼看結果：

 <html>
 				<head>         
 								<style>             
 												p{                  
 															color: brown;             
 												}            
												.cl{                 
  														color: black;             
													}             
												#ii{                 
  														color: green;             
													}         
								</style>     
				</head>     
				<body>         
  								<p class="cl">注意這裡顯示的顏色</p>   <!-- 顯示顏色為black -->         
									<p class="cl" id="ii">再留意這裡顯示的顏色</p>    <!-- 顯示顏色為green -->     
				</body> 
</html>

符號選擇器

符號選擇器，嚴格來講，不能稱之為「選擇器」，它指的是在使用選擇器的時候，用上一些符號，使得選擇器的功能更加豐富。在這裡介紹三個。

星號（*）
空格（）
逗號（,）

1.星號（*）：星號代表「包含所有」的意思，比如：

2.空格：空格在這裡有限定作用。

比如以下例子，我現在有這麼一個需求，我需要把基礎科目中的三個科目（語文、數學、英語）設置為藍色顯示，並加粗；而專業科目中兩個科目（計算機和幼兒教育）文本設置成綠色，並加粗，那怎麼處理呢？

 <html>     
 				<head>        
 								<style>                      
 								</style>     
				</head>     
				<body>         
								<ul>             
												<p>基礎科目：</p>             
												<li>語文</li>             
                        <li>數學</li>             
                        <li>英語</li>         
                </ul>         
                <ul>             
                        <p>專業科目</p>             
                        <li>計算機</li>             
                        <li>幼兒教育</li>         
								</ul>     
				</body> 
</html>

假如我對「li」標籤設置CSS，那所有的「li」標籤都是同一個樣式，那就沒有基礎科目和專業科目的區別了。在這裡，我可以這樣解決：

給各自的「ul」添加類，用這個「li」的父元素來限定各自的子元素（如第15行和第21行所示）。
用「空格」限定（如第4~11行所示）。

解決方法如下代碼：

 <html>     
 				<head>         
 								<style>             
 												.ul1 li{                 
															color: blue;                
															font-weight: bold;              
 													}             
                         .ul2 li{                 
                          			color: green;                 
                          			font-weight: bold;             
                          }         
                  </style>     
              </head>     
				<body>         
                <ul class="ul1">             
                        <p>基礎科目：</p>             
                        <li>語文</li>             
                        <li>數學</li>             
                        <li>英語</li>         
                </ul>         
                <ul class="ul2">             
                         <p>專業科目</p>             
                        <li>計算機</li>             
                        <li>幼兒教育</li>         
                </ul>     
				</body> 
</html>

特別說明：在HTML標籤中，每個標籤都稱為「節點（node）」，每個節點隨著HTML標籤的包含關係，存在著相對的父子節點之分，包含元素的稱為父節點，被包含元素被稱為子節點。在以上代碼中，ul和li的關係，ul是父節點，li是子節點。

3.逗號：對多個選擇器應用同樣的CSS樣式。

在對多個選擇器，無論是標籤選擇器、類選擇器還是ID選擇器，如果把這些選擇器冠以同樣的CSS樣式，則可以用逗號分隔，把多個選擇器寫在一起，代碼如下：

 <html>     
				 <head>         
 								<style>             
 											p,b,.cl,#ii{                  
 														color: brown;                  
													 font-weight: bold;              
 												}         
								 </style>     
				</head>     
				<body>         
  								<p>注意這裡顯示的顏色</p>         
									<p>再留意顯示這裡的顏色</p>         
									<b>好吧，再次留意這裡的顏色</b>         
									<div class="cl">用類的方式標識選擇器</div>         
									<p id="ii">用ID的方式標識選擇器</p>     
				</body> 
</html>

在以上代碼的第4~7行中，用逗號把p、b、.cl以及#ii這四個選擇器都應用上了同樣的CSS樣式。

VS Code一些常用快捷鍵