發布時間：2019-12-30 所屬分類：網站建設瀏覽：1649

網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)一

百度信息流操作手冊:信息流數據/報告信息流資產網站DIV+CSS教程培訓教程X(HTMLCSS基礎知識)二

XHTML CSS基礎知識

1）文檔類型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3。org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

一定要保留這句話，刪除它后可能引起某些樣式表失效或其它意想不到的問題

2）語言編碼

它標示文檔的語言編碼。就像我們平時所說的漢語、英語一樣。這里的gb2312告訴瀏覽器，本文檔采用簡體中文編碼；還有一種常用的編碼是UTF-8編碼，它是國際通用的編碼。不管我們采用哪種編碼，有一點就是包含的css樣式表和其它文件也必須和本文檔的編碼一樣，要不就會出現亂碼。

3）html標簽

html標簽在頁面中都必須結束。成對的標簽以“/標簽名”結束，有些單一的標簽在本身的結尾打上/來結束，這是xhtml代碼編寫的規范。

成對的標簽：<div>{...}</div> <span>{...}</span><p>{...}</p> ......

單一的標簽：<img src="" /><br />.......

4）css樣式

■外部樣式

這種形式是把css單獨寫到一個css文件內，然后在源代碼中以link方式鏈接。它的好處是不但本頁可以調用，其它頁面也可以調用，是最常用的一種形式。

■內部樣式

<style>

h2 { color:#f00;}

</style>

這種形式是內部樣式表，它是以<style>和</style>結尾，寫在源代碼的head標簽內。這樣的樣式表只能針對本頁有效。不能作用于其它頁面。

■行內樣式

這種在標簽內以style標記的為行內樣式，行內樣式只針對標簽內的元素有效，因其沒有和內容相分離，所以不建議使用。

■導入樣式

@import url("/css/global.css");

鏈接樣式是以@import url標記所鏈接的外部樣式表，它一般常用在另一個樣式表內部。如layout.css為主頁所用樣式，那么我們可以把全局都需要用的公共樣式放到一個global.css的文件中，然后在layout.css中以@import url("/css/global.css")的形式鏈接全局樣式，這樣就使代碼達到很好的重用性。

5）css優先級

■id優先級高于class

■后面的樣式覆蓋前面的

■指定的高于繼承

■行內樣式高于內部或外部樣式

■總結：單一的(id)高于共用的(class)，有指定的用指定的，無指定則繼承離它最近的

6）css盒模型組成

屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。

整個盒模型在頁面中所占的寬度是由：左邊界+左邊框+左填充+內容+右填充+右邊框+右邊界組成，而css樣式中width所定義的寬度僅僅是內容部分的寬度

■一列固定寬度

■一列固定寬度居中

■一列自適應寬度

■一列自適應寬度居中

■一列二至多塊布局

一列固定寬度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3。org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

#layout { height: 300px; width: 400px; background: #99FFcc; }

</style>

</head>

<body>

<div id="layout">此處顯示 id "layout" 的內容</div>

</body>

</html>

一列固定寬度居中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3。org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

#layout { height: 300px; width: 400px; background: #99FFcc; margin:auto; }

</style>

</head>

<body>

<div id="layout">此處顯示 id "layout" 的內容</div>

</body>

</html>

一列自適應寬度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w。org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

body { margin:0;}

#layout { height: 300px; width: 80%; background: #99FFcc; }

</style>

</head>

<body>

<div id="layout">此處顯示 id "layout" 的內容</div>

</body>

</html>

一列自適應寬度居中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3。rg/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

body { margin:0;}

#layout { height: 300px; width: 80%; background: #99FFcc; margin:auto;}

</style>

</head>

<body>

<div id="layout">此處顯示 id "layout" 的內容</div>

</body>

</html>

一列二至多塊布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3。rg/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

body { margin:0; padding:0;}

#header { margin:5px auto; width:500px; height:80px; background:#9F9;}

#main { margin:5px auto; width:500px; height:400px; background:#9FF;}

#footer { margin:5px auto; width:500px; height:80px; background:#9f9;}

</style>

</head>

<body>

<div id="header">此處顯示 id "header" 的內容</div>

<div id="footer">此處顯示 id "footer" 的內容</div>

</body>

</html>

3、CSS語法

CSS語法由如下三部分構成，選擇器：可以是ID、CLASS或標簽；屬性和值是用來定義這個物件的某一個特性。如一張桌子的長120cm，寬60cm，套用css的格式為，桌子{長:120cm;寬:60cm;}，

4、ID和CLASS選擇器

id的優先級高于class，比如說今天三班的學生上體育課，小明留下來打掃衛生。那么三班的學生上體育課這是一個類，而小明打掃衛生這是個id，雖然小明也是三班的學生，但id高于class，所以小明執行打掃衛生的任務。

■二列自適應寬度

■二列固定寬度

■二列固定寬度居中

■xhtml的塊級元素(div)和內聯元素(span)

■float屬性

■三列自適應寬度

■三列固定寬度

■三列固定寬度居中

■IE6的3像素bug

一、兩列自適應寬度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3。rg/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<style>

#side { background: #99FF99; height: 300px; width: 120px; float: left; }

#main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }

</style>

</head>

<body>

</body>

</html>

二、兩列固定寬度居中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3。rg/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<style>

#content { width:470px; margin:0 auto;}

#side { background: #99FF99; height: 300px; width: 120px; float: left; }

#main { background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; }

</style>

</head>

<body>

</div>

</body>

</html>

三、xhtml的塊級元素(div)和內聯元素(span)

塊級元素：就是一個方塊，像段落一樣，默認占據一行出現；

內聯元素：又叫行內元素，顧名思義，只能放在行內，就像一個單詞，不會造成前后換行，起輔助作用。

一般的塊級元素諸如段落<p>、標題<h1><h2>...、列表,<ul><ol><li> 、表格<table>、表單<form>、DIV<div>和BODY<body>等元素。而內聯元素則如: 表單元素<input>、超級鏈接<a>、圖像<img>、<span> ........ 塊級無素的顯著特點是：每個塊級元素都是從一個新行開始顯示，而且其后的無素也需另起一行進行顯示。

四、float屬性

<div id="main"> 教程適合初學者循序漸進學習!</div>

body { font-size:18px; line-height:200%; }

#side { float:left; width:202px;}

五、三列自適應寬度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3。rg/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<style>

body { margin:0;}

#side { background: #99FF99; height: 300px; width: 120px; float: left; }

#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }

#main { background: #99FFFF; height: 300px; margin:0 120px; }