一、樣式表(css)
使用樣式表可以更好的顯示WEB文檔,也可以結合javascript從而實現很好的控制樣式表。
樣式(css)與內容(html):
HTML是處理文檔結構的,HTML可以實現如何把WEB文檔划分為:標題、段落、正文、列表等元素的。HTML沒有辦法很好的表現WEB文檔的外觀。HTML定義了文檔的結構,這樣很好。現在只需要通過CSS控制頁面的外觀就可以了,而且不會改變HTML的內容。
CSS其實,就是實現了對HTML的再次定義,如果某個瀏覽器不支持CSS,那該瀏覽器一樣可以瀏覽頁面,只不過是無法看到CSS定義的外觀而已。
如何定義CSS樣式:
通過<style>標簽在HTML中定義樣式表,下面是一個最簡單樣式表的例子:
<style type=”text/css”>
H1{color:blue;}
</style>
應該把<style>定義寫在<head>與</head>部分。
樣式表的規則:
<style>標簽內的所有元素都被稱為規則,規則是作用於特定的HTML元素之上的。規則中包含控制特定元素外觀的屬性與屬性值。
樣式表規則是由以下部分所組成的:
選擇器:為HTML標簽,描述將有哪個HTML標簽將會受到影響。
屬性名稱:HTML標簽的特定屬性,既對該屬性進行重新設定。
屬性值:每個屬性名稱的值。
這里要注意一點,選擇器可以為多個標簽,也就是一組規則應用於多個HTML標簽。
HTML標簽本身的屬性值,可以覆蓋CSS的設定。
定義指定元素的樣式:
按照以上的方法,可以定義指定類型標簽的樣式,也就是說,該類標簽都會受到影響。其實也可以定義指定標簽的樣式,其他同類標簽將不會受到影響。
可以在HTML標簽內部定義只應用於該標簽的樣式:
<h1 style=”color:red; text-align:center;”>This is Test</h1>
這被成為行內樣式,因為該樣式是定義在HTML標簽內部的。
利用HTML標簽的ID屬性來定義樣式:
可以定義HTML標簽的ID屬性,然后在樣式表定義中把規則應用於ID為該屬性的所有標簽就可以實現這個功能了。CSS使用符號 # 來表明將該規則應用於特定ID的標簽。比如:
<style type=”text/css”>
#intro{color:blue;}
</style>
臨時插上一句:筆者不推薦給多個標簽起同一個ID,ID值應該始終是唯一的。如果需要給多個標簽使用一個樣式表的話,可以使用類,下面會講到的。
HTML標簽的類屬性:
如果希望多個HTML標簽使用同一樣式的話,可以給HTML標簽定義class屬性。例如:
<p class=”smallprint”>This is Test</p>
以上<p>標簽隸屬於smallprint類,在樣式表中給類定義規則的話,必須在類名稱之前加一個句點(.)以表明該規則將用於類標簽。比如:
<style type=”text/css”>
.smallprint{color:blue;}
</style>
以上樣式表定義了應用於smallprint類的樣式。
也可以把一個HTML標簽添加到多個類中,比如:class=”smallprint bold ”。這樣定義在所有類上的樣式都將應用到該標簽。
CSS的屬性:
CSS支持多種屬性,包括:文本對齊、更改顏色、處理字體、設置邊框等。
使用外部樣式表文件:
當然可以在HTML文檔中嵌入<style>標簽以實現對HTML外觀的定義,但是卻使得HTML變地更加的長與復雜,后期維護也變的非常的麻煩。解決該問題的方案就是在HTML文檔中使用來自於外部獨立的CSS文件。更重要的是使用外部CSS文件,可以實現一個樣式表為多個HTML服務,從而節省了大量的代碼。而且可以根據需要臨時打開或關閉樣式表功能。
如何可以使用外部CSS文件?
我們可以通過在HTML文檔的<head>標簽中通過<link>標簽來引用外部CSS文件,語法如下:
<link rel=”stylesheet” type=”text/css” href=”style.css”>
使用獨立的CSS文件,很好的實現了3類文件的分離(HTML、CSS、JAVASCRIPT)。
編寫獨立的CSS文件:
.css文件是簡單的文本文件,用普通的文本編輯器就可以編寫。.css文件保存的實際上就是一些CSS規則列表,當然該文件不能夠包含HTML標簽。其實.css文件的內容與HTML中的<style>與</style>的內容是一樣的,只不過是寫在了一個獨立的文件中而已。比如下面的形式,就是一個.css文件:
Body{color:blue;}
P{text-align:center;
Margin-left:20%;
Margin-right:20%;}
H1,h2,h3{color:red;}
如何利用javascript控制樣式:
利用javascript可以輕松的控制頁面上的樣式,就算沒有樣式表,也可以通過javascript控制頁面聲的任何元素的樣式。
通過修改style對象的屬性,可以修改任何一個對象的樣式。首先我們就是要查找到要修改樣式的對象,可以預先在對象中定義ID屬性,然后由getElementById()方法查找到該對象。比如:
<h1 id=”head1”>This is Text</h1>
Document.getElementById(“head1”).style.color=red;