一 什麼是CSS
CSS全稱Cascading Style Sheet層疊樣式表，是專用用來為HTML标簽添加樣式的。
樣式指的是HTML标簽的顯示效果，比如換行、寬高、顔色等等
層疊屬于CSS的三大特性之一，我們将在後續内容中介紹
表指的是我們可以将樣式統一收集起來寫在一個地方或者一個CSS檔案裡
二 為何要用CSS
在沒有CSS之前，我們想要修改HTML标簽的樣式則需要為每個HTML标簽單獨定義樣式屬性，如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</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> View Code
這麼做的缺點是
#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注釋
/*這是注釋*/ 原創作者：馬一特
文章出處：http://www.cnblogs.com/mayite/
版權聲明：自由轉載-非商用-非衍生-保持署名
（創意共享4.0許可證）