8-3類選擇器（點） · 初識HTML+CSS

類選擇器在css樣式編碼中是最常用到的，如右側代碼編輯器中的代碼:可以實現為“膽小如鼠”、“勇氣”字體設置為紅色。語法： ~~~ .類選器名稱{css樣式代碼;} ~~~ 注意： 1、**英文圓點開頭** 2、其中**類選器名稱**可以任意起名（但不要起中文噢）使用方法：第一步：使用合適的標簽把要修飾的內容標記起來，如下： ~~~ <span>膽小如鼠</span> ~~~ 第二步：使用class\="類選擇器名稱"為標簽設置一個類，如下： ~~~ <span class="stress">膽小如鼠</span> ~~~ 第三步：設置類選擇器css樣式，如下： ~~~ .stress{color:red;}/*類前面要加入一個英文圓點*/ ~~~ ### 任務 **我也來試試，為第二段文字中的“公開課”三個文字設置為綠色** 1.在右邊編輯器的第16行，輸入: ~~~ <span class="setGreen">公開課</span> ~~~ 2.在右邊編輯器的第10-12行，輸入: ~~~ .setGreen{ color:green; } ~~~ ``` <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>認識html標簽</title> <style type="text/css"> .stress{ color:red; } .setGreen{ color:green; } </style> </head> <body> <h1>勇氣</h1> <p>三年級時，我還是一個<span class="stress">膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個<span class="stress">勇氣</span>來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p> <p>到了三年級下學期時，我們班上了一節<span class="setGreen">公開課</span>，老師提出了一個很簡單的問題，班里很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。</p> <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" > </body> </html> ```