前端入門教程(五)CSS樣式初見
阿新 • • 發佈：2018-06-10
閃爍 set key 缺陷 cad -c 入門教程 clas 需要 
一 什麽是CSS
CSS全稱Cascading Style Sheet層疊樣式表，是專用用來為HTML標簽添加樣式的。
樣式指的是HTML標簽的顯示效果，比如換行、寬高、顏色等等
層疊屬於CSS的三大特性之一，我們將在後續內容中介紹
表指的是我們可以將樣式統一收集起來寫在一個地方或者一個CSS文件裏
二 為何要用CSS
在沒有CSS之前，我們想要修改HTML標簽的樣式則需要為每個HTML標簽單獨定義樣式屬性，如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8">View Code</head> <body> <h1 align="center"> <font color="pink" size="5">天凈沙·秋思</font> </h1> <p align="center"> <font color="pink" size="5">錦瑟無端五十弦，一弦一柱思華年。</font> </p> <p align="center"> <font color="pink" size="5">莊生曉夢迷蝴蝶，望帝春心托杜鵑。</font> </p> <p align="center"> <font color="pink" size="5">滄海月明珠有淚，藍田日暖玉生煙。</font> </p> <p align="center"> <font color="pink" size="5">此情可待成追憶，只是當時已惘然。</font> </p> </body> </html>
這麽做的缺點是
#1、記憶困難：需要記憶每個標簽的所有樣式相關屬性，如果標簽沒有某個樣式相關的屬性，那麽設置了也沒有效果 #2、代碼耦合度高：HTML語義與樣式耦合到一起 #3、擴展性差：當某一類樣式需要修改時，我們需要找到所有設置了該樣式標簽進行修改
於是CSS應運而生，很好地解決了以上三個問題
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> h1,p { color: pink; font-size: 24px; text-align: center; } </style> </head> <body> <h1>天凈沙·秋思</h1> <p>錦瑟無端五十弦，一弦一柱思華年。</p> <p>莊生曉夢迷蝴蝶，望帝春心托杜鵑。</p> <p>滄海月明珠有淚，藍田日暖玉生煙。</p> <p>此情可待成追憶，只是當時已惘然。</p> </body> </html>
三 如何使用CSS
1、如何使用CSS之CSS的語法
CSS語法可以分為兩部分： #1、選擇器 #2、聲明 聲明由屬性和值組成，多個聲明之間用分號分隔，如下圖
2、如何使用CSS之CSS的四種引入方式
#1、行內式 <p style="color: red;font-size: 50px;text-align: center">Egon是一個非常了不起的人</p> #2、嵌入式 <head> <style> p { color: red; font-size: 50px; text-align: center } </style> </head> #3、外部樣式表之導入式 <head> <style> /*形式一：*/ /*@import "css/mystyle.css";*/ /*形式二：*/ @import url("css/mystyle.css"); </style> </head> #4、外部樣式表之鏈接式（企業開發中使用這種方式） <head> <link rel="stylesheet" href="css/mystyle.css"> </head>
#1、行內式 行內式是在標簽的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢，不推薦使用。 <p style="color: red;font-size: 50px;text-align: center">Egon是一個非常了不起的人</p> #2、嵌入式 嵌入式是將CSS樣式集中寫在網頁<head></head>標簽內的的<style></style>標簽對中。格式如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> p { color: red; font-size: 50px; text-align: center } </style> </head> <body> <p>Egon是一個非常了不起的人</p> </body> </html> #新建外部樣式表，然後使用導入式和鏈接式引入 首先在與html文件同級目錄下有一個css文件夾，該文件夾下新建一個外部樣式表mystyle.css,內容為 p { color: red; font-size: 50px; text-align: center } #3、導入式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> /*形式一：*/ /*@import "css/mystyle.css";*/ /*形式二：*/ @import url("css/mystyle.css"); </style> </head> <body> <p>Egon是一個非常了不起的人</p> </body> </html> #4、鏈接式（推薦使用） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/mystyle.css"> </head> <body> <p>Egon是一個非常了不起的人</p> </body> </html> #導入式與鏈接式的區別: 1、<link/>標簽屬於XHTML,@import是屬於CSS2.1特有的，對於不兼容CSS2.1的瀏覽器來說就是無效的 2、導入式的缺點： 導入式會在整個網頁裝載完後再裝載CSS文件，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之後，再出現網頁的樣式。這是導入式固有的一個缺陷，用戶體驗差。 3、鏈接式的優點： 使用鏈接式時與導入式不同的是它會在網頁文件主體裝載前裝載CSS文件，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，然後再顯示有樣式的網頁，這是鏈接式的優點。 #！！！註意點！！！ 1、style標簽必須放到head內 ,type="text/css"代表文本類型的css 2、type屬性其實可以不用寫，默認就是type="text/css" 3、設置樣式時必須按照固定的格式來設置，key:value; 其中;不能省略，最後一個屬性其實可以省略，但我們可以簡單地統一記成不 能省略就行了 詳細解釋詳細了解
3、css註釋
/*這是註釋*/
前端入門教程(五)CSS樣式初見