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