建議學習時長： 45分鐘
學習方式：深入
學習目標
- 知道 CSS 怎么寫。
- 知道在頁面中引入 CSS。
詳細介紹
CSS 的組成部分
CSS 由選擇器和聲明兩部分組成。聲明由屬性和值組成。
選擇器用來指定設置外觀的HTML元素。聲明用來設置選擇器指定元素的外觀的具體內容。
看下面的代碼：
.intro{
width: 100px;
height: 200px;
color: red;
background-color:green;
}
其中
-
.intro為選擇器。 -
{}中的內容為聲明。 -
width,color為聲明的屬性 -
100px,#f00為聲明的值
上面的代碼，將所有類名中有 intro 的元素設置這樣的外觀：寬 100像素，高 200像素，字體顏色是紅色，背景色是綠色。
樣式寫在哪里
頁面中寫樣式有3種方式。
方式1: 寫在一個單獨的文件里
寫在一個文件里的樣式叫做外部樣式表。
這樣的文件的后綴名為css。
例如,mystle.css文件中的內容
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
頁面中用外部樣式表要用link標簽，例如
<link rel="stylesheet" type="text/css" href="path/to/mystyle.css" />
href。
link標簽要放在head標簽中。否則頁面可能會閃爍。
方式2:寫在style標簽內
寫在style標簽內的樣式稱為內部樣式表。例如
<style>
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
方式3:寫在標簽的style屬性里
寫在標簽的style屬性里的樣式稱為，稱為內聯樣式。例如
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
內聯樣式是針對的當前元素，所有也不用寫選擇器。
外部樣式表，內部樣式表，內聯樣式 哪種方式好
外部樣式表，內部樣式表，內聯樣式各自各的使用場景。
在通常情況下，推薦使用外部樣式表。不建議使用內部樣式表和內聯樣式。
原因：
外部樣式表
- 能被復用
- 能被緩存
