CSS層疊樣式表1
一使用CSS樣式的方式
1 HTML <!DOCTYPE>聲明標簽
1.1 定義和用法:
<!DOCTYPE>聲明必須是HTML文檔的第一行,位於<html>標簽之前。
<!DOCTYPE>聲明不是HTML標簽,它是指示web瀏覽器關於頁面使用哪個HTML版本進行編寫的指令。
在HTML4.01中,<!DOCTYPE>聲明引用DTD,因為HTML4.01基於SGML。
DTD規定了標記語言的規則,這樣瀏覽器才能正確地呈現內容。
HTML5不基於SGML,所以不需要引用DTD.
1.2 各版本的聲明
1.2.1 HTML5
<!DOCTYPE html>
<meta charset="utf-8">
1.2.2 HTML4.01
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
該DTD包含所有HTML元素和屬性,包括展示性的和棄用的元素(比如font),不允許框架集(Framesets)。
<meta http-equiv=Content-Typw content="text/html;charset=utf-8">
1.3 註意的規則
單標即必須閉合,比如<br>必須寫為<br/> <input/>
單屬性必須添加屬性值 <input type="radio" checked>必須寫為<input type="radio" checked="checked"/>
標記和屬性必須使用小寫 <Body><BODY>是錯的必須寫為<body>
屬性的屬性值必須使用 在HTML4.01之前可以使用<body bgcolor=red>,HTML4.01必須寫為<body bgcolor="red">
2 內鏈樣式表
<body style="background-color:green;margin:0;padding;"></body>
3 嵌入樣式表
<style type="text/css"></style>
需要將樣式放在<head></head>中
4 引入式樣式表
<link rel=StyleSheet"type="text/css"href="style.css">
二定義樣式表
2.1 HTML標記定義
<p>...</p>
p{屬性:屬性值;屬性1:屬性值1}
p可以叫做選擇器,定義那個標記中的內容執行其中的樣式
一個選擇器可以控制若幹個樣式屬性,他們之間需要用英語";"隔開,最後一個可以不應加
2.2 Class定義
<p class="p">...</p>
class定義是以"."開始
.p{屬性:屬性值;屬性1:屬性值1}
2.3 ID 定義
<p id="p">...</p>
ID定義是"#"開始的
#p{屬性:屬性值;屬性1:屬性值1}
2.4 優先級問題
ID>Class>HTML
同級時選擇離元素最近的一個的,比如: #p{color:red} #p{color:#f60} 執行顏色為#f60
2.5 組合選擇器(同時控制多個元素)
h1,h2,h3{font-size:14px;color:red;}
選擇其組合可以使用","隔開
2.6 偽元素選擇器
a:link 正常連接的樣式
a:hover 鼠標放上去的樣式
a:active 選擇鏈接時的樣式
a:visited 已經訪問過的鏈接的樣式
CSS層疊樣式表1