长沙飞禽走兽遥控器
想自學教程的朋友,就來教程巴巴。
教程巴巴
當前位置: 主頁 > 圖文 > 網頁制作教程 >

十天學會DIV+CSS 第一天XHTML CSS基礎教程

發布時間:2011-03-10 21:17 點擊:
分享到:
【評論本教程】 【挑錯本教程】
------分隔線----------------------------

歡迎大家學習《十天學會web標準》,也就是我們常說的DIV+CSS。不過這里的DIV+CSS是一種錯誤的叫法,建議大家還是稱之為web標準。

學習本系列教程需有一定html和css基礎,也就是指您之前做過網頁,會用表格布局。如果您剛開始學習網頁制作,不知道什么是表格布局及html和css,建議您先去充電,否則學習本教程會非常吃力或者根本就聽不懂。

由于時間關系,本教程只講解一些基礎知識,讓您從原來的表格布局跨入到web標準(div+css)布局,會使用web標準制作出常見的頁面,這也達到了本教程的目的。

本教程多以實例形式循序漸進講解,實例涉及到哪些關鍵點或難點就講解什么,較少講解概念。因為概念這些東西很難說明白,或者說明白你也不一定能聽懂,聽懂了也不一定能理解。所以把概念留給大家以后再深入研究。

由于章節關系,沒有把css和css hack單獨分出,只是在用到的時候穿插入講解了。html基礎和css基礎只在第一節中介紹了幾點重要的。

下面我們開始第一天的學習

一、xhtml css基礎知識
首先說一下我們這節課的知識點

文檔類型
語言編碼
html標簽
css樣式
css優先級
css盒模型組成
1)文檔類型
當我們用dreamweaver新建一下html格式文檔時,查看源代碼,會發現代碼最上部有如下這句話:

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

這句話標明本文檔是過渡類型,另外還有框架和嚴格類型,目前一般都采用過渡類型,因為瀏覽器對XHTML的解析比較寬松,允許使用HTML4.01中的標簽,但必須符合XHTML的語法。許多朋友在制作頁面時,往往喜歡把這句刪除掉,在這里建議大家一定要保留這句話,刪除它后可能引起某些樣式表失效或其它意想不到的問題。

2)語言編碼
接下來我們還會發現這樣一句話:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

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

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

成對的標簽:

<head>{...}</head>
<body>{...}</body>
<div>{...}</div>
<span>{...}</span>
<p>{...}</p>
......

單一的標簽:

<img src="" />
<br />

.......

還需說明一點的是按xhtml規范,標簽必須用小寫。

4)css樣式
加載css樣式有以下四種

外部樣式
內部樣式
行內樣式
導入樣式
<link href="layout.css" rel="stylesheet" type="text/css" />

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

<style>
h2 { color:#f00;}
</style>

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

<p style="font-size:18px;">內部樣式</p>

這種在標簽內以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盒模型組成
css盒模型是本節教程的重點。前面幾個知識點,如果您會用表格布局的話,就非常好理解和掌握了。這里的盒模型是和table布局的一個不同點。學習web標準,首先要弄懂的就是這個盒模型,這就是DIV排版的核心所在。傳統的表格排版是通過大小不一的表格和表格嵌套來定位排版網頁內容,改用CSS排版后,就是通過由CSS定義的大小不一的盒子和盒子嵌套來編排網頁。這種排版方式的網頁代碼簡潔,表現和內容相分離,維護方便,能兼容更多的瀏覽器,比如PDA設備也能正常瀏覽。

那么它為什么叫盒子呢?先說說我們在網頁設計中常聽的屬性名:內容(content)、填充(padding)、邊框(border)、邊界(margin), CSS盒子模式都具備這些屬性。

我們可以把它想像成現實中上方開口的盒子,然后從正上往下俯視,邊框相當于盒子的厚度,內容相對于盒子中所裝物體的空間,而填充呢,相當于為防震而在盒子內填充的泡沫,邊界呢相當于在這個盒子周圍要留出一定的空間,方便取出。是不是這樣就很容易理解盒模型了。

长沙飞禽走兽遥控器