1. 程式人生 > >CSS層疊樣式表1

CSS層疊樣式表1

css 層疊樣 式表

一使用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