6-2CSS樣式的優勢 · 初識HTML+CSS

為什么使用css樣式來設置網頁的外觀樣式呢？右邊編輯器是一段文字，我們想把“`超酷的互聯網`”、“`服務及時貼心`”、“`有趣易學`”這三個短語的文本顏色設置為紅色，這時就可以通過設置樣式來設置，而且只需要編寫一條css樣式語句。第一步：把這三個短語用括起來。（見右邊代碼編輯器`13`行）第二步：寫入下列代碼：（見右邊代碼編輯器`7-8`行） ~~~ span{ color:red; } ~~~ 觀察結果窗口文字的顏色是否變為紅色了。 ### 任務我來試一試：我們現在想把“超酷的互聯網”、“服務及時貼心”、“有趣易學”這三個短語的文本顏色改為藍色在右邊編輯器第`8`行，修改代碼`color:red;`為`color:blue;` ``` <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS樣式的優勢</title> <style type="text/css"> span{ color:blue; } </style> </head> <body> <p>慕課網，<span>超酷的互聯網</span>、IT技術免費學習平臺，創新的網絡一站式學習、實踐體驗；<span>服務及時貼心</span>，內容專業、<span>有趣易學</span>。專注服務互聯網工程師快速成為技術高手！</p> </body> </html> ```