html:(26):类选择器和id选择器
生活随笔
收集整理的這篇文章主要介紹了
html:(26):类选择器和id选择器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
類選擇器
類選擇器在css樣式編碼中是最常用到的，如右側代碼編輯器中的代碼:可以實現為“膽小如鼠”、“勇氣”字體設置為紅色。
語法：
.類選器名稱{css樣式代碼;}注意：
1、英文圓點開頭
2、其中類選器名稱可以任意起名（但不要起中文噢）
使用方法：
第一步：使用合適的標簽把要修飾的內容標記起來，如下：
<span>膽小如鼠</span>第二步：使用class="類選擇器名稱"為標簽設置一個類，如下：
<span class="stress">膽小如鼠</span>第三步：設置類選器css樣式，如下：
.stress{color:red;}/*類前面要加入一個英文圓點*/ <!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><span class="setGreen">公開課</span><p>到了三年級下學期時，我們班上了一節公開課，老師提出了一個很簡單的問題，班里很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。</p><img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" > </body> </html>運行結果
ID選擇器
在很多方面，ID選擇器都類似于類選擇符，但也有一些重要的區別：
1、為標簽設置id="ID名稱"，而不是class="類名稱"。
2、ID選擇符的前面是井號（#）號，而不是英文圓點（.）。
右側代碼編輯器中就是一個ID選擇符的完整實例。
<!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 id="stress">膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p><span id="setGreen">公開課</span><p>到了三年級下學期時，我們班上了一節公開課，老師提出了一個很簡單的問題，班里很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。</p></body> </html>運行結果
總結
以上是生活随笔為你收集整理的html:(26):类选择器和id选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 美国计算机生物学要求,美国大学CS专业分
- 下一篇： 65 modol1用户登录