css樣式表按其所在位置分三種:
1.內嵌樣式表
2.內部樣式表
3.外部樣式表
下面詳細解釋一下:
1.內嵌樣式表是寫在使用它的標簽(Tag)內的,例如要在<p>標簽中使用,
其語法為:<p style font-size:20pt>這段文字使用了內嵌樣式表,更改了字體大小為20</p>
2.內部樣式表不同於內嵌樣式表,其是寫在html網頁的<head></head>標簽之間的,所以它對本網頁全部有效。應注意的是,因為它不是寫在某一個標簽內的,所以在寫的時候要注意,自己想在那個標簽內使用這個樣式表,再定義的時候也要寫清楚,否則會造成整個頁面的混亂。例如:
<html><head>
p.mylayout <style type="text/css">{font-size:22pt; color:blue; border-width:1px; border:double; text-align:center; }</style></head>
<body>
<!--這個樣式表只用了一部分屬性,定義是在<style>前面的p.mylayout,這里面的p意思是在<p>這個標簽里才可以使用這個樣式表,而mylayout是這個樣式表的名字,也可以理解為這個樣式表的變量名(把一個樣式表當成一個變量),便於以后在<p>標簽中調用。注意下面的調用。--->
<p class="mylayout">這段文字使用了樣式表</p>
<p>這段文字沒有使用樣式表</p>
</body></html>
可以看到,在定義內部樣式表的時候,<style>前面聲明的時候應該首先聲明在哪個標簽里使用這個樣式表,如果並不想在該網頁所有的此標簽中都使用這個樣式表則在聲明的標簽后面加上自己定義的一個樣式表名稱,例如上面的p.mylayout,意為只能在該網頁的<p>標簽中使用此樣式表,在要使用這個樣式表的<p>標簽中聲明,聲明方式為<標簽 自定義樣式表名稱>
利用樣式表選擇,你可以用同樣的HTML標簽構成不同的樣式。比如說,你希望段落<p>有兩種樣式,一種是居中對齊,一種是居右對齊。你就可以寫如下樣式:
p.right {text-align:right}
p.center {text-align:center}
其中right和center就是兩個樣式表。然后你就可以引用這兩個樣式表,示例代碼如下:
<p class="center">這一段居中顯示。</p>
<p class="right">這一段是居右顯示。</p>
也可以不用HTML 標簽,直接用“.”加上樣式表名稱。示例代碼如下:
.center {text-align: center}
這種通用的樣式表名稱就沒有標簽的局限性,可以用於不同的標簽。比如:
<h1 class = "center">這個標題居中顯示。</h1>
<p class = "center">這個段落居中顯示。</p>
3.外部樣式表
外部樣式表就是將樣式表的內容單獨寫到一個notepad中,並保存為后綴為.css的文件,在你寫的想要調用的網頁中加上如下的代碼(當然還是加到<head></head>之間):
<link href="你css文件所在的文件夾" rel="stylesheet" type="text/css">
例如:
先寫一段代碼並存為p.css
p.mylayout {font-size:20pt; border-width:1px; color:blue; }
然后在你寫的網頁中調用這個樣式表:
<HTML>
<HEAD>
<link href="p.css所在的相對路徑" rel="stylesheet" type="text/css">
</HEAD >
<BODY>
<p class="mylayout"> 這個標題使用了Style 。</p>
歡迎光臨學網,收藏本篇文章 [1] [2]
$False$
<p>這個標題沒有使用Style。</p>
</BODY>
</HTML>
所以一個外部樣式表可以被很多網頁調用,這就是外部樣式表的好處。
樣式表也可以串聯,即一個網頁用多個css,其串聯的順序是:內嵌>內部>外部>瀏覽器自身的
也就是說當一個網頁有內部css時,它在的調用外部css就被覆蓋了(即外部css不起作用)
css樣式表定義時的嵌套說明:
p b {color:blue;}
使用時:<p>這段文字在b標簽中的為<b>藍色</b></p>
cursor:hand 這個屬性是將鼠標變成手的形狀。
