html:(22):认识css样式和css的优势
生活随笔
收集整理的這篇文章主要介紹了
html:(22):认识css样式和css的优势
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
認識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; }觀察結果窗口文字的顏色是否變為紅色了。
<!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>運行結果
總結
以上是生活随笔為你收集整理的html:(22):认识css样式和css的优势的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： lunixs 退出mysql_MySQL
- 下一篇： java 异常机制_深入理解Java异常