一、認識CSS樣式 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>認識CSS樣式</title> 6 <style ...
一、認識CSS樣式
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>認識CSS樣式</title> 6 <style type="text/css"> 7 p{ 8 font-size:12px;/*設置文字字型大小*/ 9 color:red;/*設置文字顏色*/ 10 font-weight:bold;/*設置字體加粗*/ 11 } 12 </style> 13 </head> 14 <body> 15 <p>慕課網，超酷的互聯網、IT技術免費學習平臺，創新的網路一站式學習、實踐體驗；服務及時貼心，內容專業、有趣易學。專註服務互聯網工程師快速成為技術高手！</p> 16 </body> 17 </html>認識CSS樣式
CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，
它主要是用於定義HTML內容在瀏覽器內的顯示樣式，如文字大小、顏色、字體加粗等。
如下列代碼：
p{
font-size:12px;
color:red;
font-weight:bold;
}
使用CSS樣式的一個好處是通過定義某個樣式，可以讓不同網頁位置的文字有著統一的字體、字型大小或者顏色等。
試一試：用css樣式代碼修改字體大小
在編輯器中的第8行修改
“font-size:12px;”為“font-size:20px;”
觀察結果視窗的變化。
font-size:20px;後面的分號;不能忘記。
二、CSS樣式的優勢
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>CSS樣式的優勢</title> 6 <style type="text/css"> 7 span{ 8 color:red; 9 } 10 </style> 11 </head> 12 <body> 13 <p>慕課網，<span>超酷的互聯網</span>、IT技術免費學習平臺，創新的網路一站式學習、實踐體驗；<span>服務及時貼心</span>，內容專業、<span>有趣易學</span>。專註服務互聯網工程師快速成為技術高手！</p> 14 </body> 15 </html>CSS樣式的優勢
為什麼使用css樣式來設置網頁的外觀樣式呢？編輯器中是一段文字，我們想把“超酷的互聯網”、“服務及時貼心”、
“有趣易學”這三個短語的文本顏色設置為紅色，這時就可以通過設置樣式來設置，而且只需要編寫一條css樣式語句。
第一步：把這三個短語用<span></span>括起來。（見代碼編輯器13行）
第二步：寫入下列代碼：（見代碼編輯器7-8行）
span{
color:red;
}
觀察結果視窗文字的顏色是否變為紅色了。
試一試：我們現在想把“超酷的互聯網”、“服務及時貼心”、“有趣易學”這三個短語的文本顏色改為藍色
在編輯器第8行，修改代碼color:red;為color:blue;
- 不要忘記 color:blue;語句後的分號
; - 解釋：
- span{
color:blue; <!--我是顏色-->
font-size:20px;<!--我是字體大小-->
font-weight: bolder;<!--我可以加粗字體-->
} - span 不是固定的，可以換成任意的字母，只要能匹配統一就行
- aqua 淺綠色
black 黑色
blue 藍色
fuchsia 紫紅色
gray 灰色
green 綠色
lime 綠黃色
maroon 慄色
navy 深藍色
olive 橄欖色
purple 紫色
red 紅色
silver 銀白色
teal 藍綠色
white 白色
yellow 黃色
三、CSS代碼語法
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>CSS代碼語法</title> 6 <style type="text/css"> 7 p{ 8 font-size:12px 9 color:red 10 font-weight:bold 11 } 12 </style> 13 </head> 14 <body> 15 <p>慕課網，超酷的互聯網、IT技術免費學習平臺，創新的網路一站式學習、實踐體驗；服務及時貼心，內容專業、有趣易學。專註服務互聯網工程師快速成為技術高手！</p> 16 </body> 17 </html>CSS代碼語法
css 樣式由選擇符和聲明組成，而聲明又由屬性和值組成，如下圖所示：
選擇符：又稱選擇器，指明網頁中要應用樣式規則的元素，如本例中是網頁中所有的段（p）的文字將變成藍色，而其他的元素（如ol）不會受到影響。
聲明：在英文大括弧“｛｝”中的的就是聲明，屬性和值之間用英文冒號“：”分隔。當有多條聲明時，中間可以英文分號“;”分隔，如下所示：
p{font-size:12px;color:red;}
註意：
1、最後一條聲明可以沒有分號，但是為了以後修改方便，一般也加上分號。
2、為了使用樣式更加容易閱讀，可以將每條代碼寫在一個新行內，如下所示：
p{
font-size:12px;
color:red;
}
來試一試：補充css代碼，使代碼有效
觀察代碼編輯器中8-10行，css代碼是不完整的，所以三條css代碼都沒有起到作用，請把代碼補充完整。
代碼是否把分號;丟掉了。
四、CSS註釋代碼
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>CSS註釋代碼</title> 6 <style type="text/css"> 7 p{ 8 font-size:12px; 9 color:red; 10 } 11 </style> 12 </head> 13 <body> 14 <p>慕課網，超酷的互聯網、IT技術免費學習平臺，創新的網路一站式學習、實踐體驗；服務及時貼心，內容專業、有趣易學。專註服務互聯網工程師快速成為技術高手！</p> 15 </body> 16 </html>CSS註釋代碼
就像在Html的註釋一樣，在CSS中也有註釋語句：用/*註釋語句*/來標明（Html中使用<!--註釋語句-->)。就像下麵代碼：
來試一試：為CSS樣式代碼添加註釋語句，來標明代碼作用
1、在編輯器中的第8行的font-size:12px;語句後面添加“設置文字字型大小為12px”註釋。
2、在編輯器中的第9行的color:red;語句後面添加“設置文字顏色為紅色”註釋。
你寫入的代碼是否像下麵的代碼：
註釋快捷鍵：Ctrl+/ : 快速註釋當前行
shift + ctrl + / : 在當前位置快速添加 /**/ 符號
註釋是編程好習慣，要成為優秀的軟體工程師就必須養成良好的編程習慣；
