開始學習CSS,為網頁新增樣式
阿新 • • 發佈:2018-12-23
目錄
認識CSS樣式
CSS全稱為“層疊樣式表 (Cascading Style Sheets)”,它主要是用於定義HTML內容在瀏覽器內的顯示樣式,如文字大小、顏色、字型加粗等。
如下列程式碼:
p{ font-size:12px; color:red; font-weight:bold; }
使用CSS樣式的一個好處是通過定義某個樣式,可以讓不同網頁位置的文字有著統一的字型、字號或者顏色等。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>認識CSS樣式</title> <style type="text/css"> p{ font-size:20px;/*設定文字字號*/ color:red;/*設定文字顏色*/ font-weight:bold;/*設定字型加粗*/ } </style> </head> <body> <p>慕課網,超酷的網際網路、IT技術免費學習平臺,創新的網路一站式學習、實踐體驗;服務及時貼心,內容專業、有趣易學。專注服務網際網路工程師快速成為技術高手!</p> </body> </html>
CSS樣式的優勢
為什麼使用css樣式來設定網頁的外觀樣式呢?右邊編輯器是一段文字,我們想把“超酷的網際網路
”、“服務及時貼心
”、“有趣易學
”這三個短語的文字顏色設定為紅色,這時就 可以通過設定樣式來設定,而且只需要編寫一條css樣式語句。
第一步:把這三個短語用<span></span>括起來。(見右邊程式碼編輯器13
行)
第二步:寫入下列程式碼:(見右邊程式碼編輯器7-8
行)
span{ color:red; }
觀察結果視窗文字的顏色是否變為紅色了。
CSS程式碼語法
css 樣式由選擇符和宣告組成,而宣告又由屬性和值組成,如下圖所示:
選擇符:又稱選擇器,指明網頁中要應用樣式規則的元素,如本例中是網頁中所有的段(p)的文字將變成藍色,而其他的元素(如ol)不會受到影響。
宣告:在英文大括號“{}”中的的就是宣告,屬性和值之間用英文冒號“:”分隔。當有多條宣告時,中間可以英文分號“;”分隔,如下所示:
p{font-size:12px;color:red;}
注意:
1、最後一條宣告可以沒有分號,但是為了以後修改方便,一般也加上分號。
2、為了使用樣式更加容易閱讀,可以將每條程式碼寫在一個新行內,如下所示:
p{ font-size:12px; color:red; }
CSS註釋程式碼
就像在Html的註釋一樣,在CSS中也有註釋語句:用/*註釋語句*/
<!--註釋語句-->
)。就像下面程式碼:
任務
我來試一試:為CSS樣式程式碼添加註釋語句,來標明程式碼作用
1、在右部編輯器中的第8
行的font-size:12px;語句後面新增“設定文字字號為12px
”註釋。
2、在右部編輯器中的第9
行的color:red;語句後面新增“設定文字顏色為紅色
”註釋。