DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 深入學習DIV標簽概念及其用法
深入學習DIV標簽概念及其用法
編輯:CSS詳解     

你對DIV標簽的概念和使用你是否了解,DIV標簽稱為區隔標記,DIV的起始標簽和結束標簽之間的所有內容都是用來構成這個塊的。

DIV標簽簡介

DIV元素是用來為Html文檔內大塊(block-level)的內容提供結構和背景的元素。DIV的起始標簽和結束標簽之間的所有內容都是用來構成這個塊的,其中所包含元素的特性由DIV標簽的屬性來控制,或者是通過使用樣式表格式化這個塊來進行控制。

DIV標簽稱為區隔標記。作用:設定字、畫、表格等的擺放位置。當你把文字,圖象,或其他的放在DIV中,它可稱作為“DIVblock”,或“DIVelement”或“CSS-layer”,或干脆叫“layer”。而中文我們把它稱作“層次”。所以當你以後看到這些名詞的時候,你就知道它們是指一段在DIV中的Html。

DIV標簽應用於StyleSheet(式樣表)方面會更顯威力,它最終目的是給設計者另一種組織能力,有Class;Style;title;ID等屬性,將會於【StyleSheet】一節才作詳述,這處只介紹一個屬性設定。

范例

以以下內容為例:

align="center"
可選值:center;left;right。決定字、畫、表格等居中、靠左或靠右的作用和居中標記<CENTER>一樣,前者是由Html3.0開始的標准,後者是通用己久的標示法。

◆CSS單元的位置和層次-div標簽

我們都知道,在網頁上利用Html定位文字和圖象是一件“令人心痛”的事情。我們必須使用表格標簽和隱式GIF圖象,即使這樣也不能保證定位的精確,因為浏覽器和操作平台不同會使顯示的結果發生變化。

而CSS能使你看到希望的曙光。利用今天我們即將學到的CSS屬性,你可以精確地設定要素的位置,還能將定位的要素疊放在彼此之上,還有...還有......你自己慢慢看吧!
CascadingStyleSheets(CSS)是DHtml的基礎。CSS用來設定你網頁上的元素是如何展示的。CascadingStyleSheetsPositioning(CSS-P)是CSS的一個擴展,它可用來控制任何東西在網頁上或是說在窗口中的位置。請你記住這兩個名詞:CSS和CSS-P。下面四個英文網址提供了詳細的關於CSS和CSS-P的文件和解釋。

使用DIV標簽(div)

當我們使用CSS-P的時候,我們主要把它用在DIV(division)tag上。當你把文字,圖象,或其他的放在DIV中,它可稱作為“DIVblock”,或“DIVelement”或“CSS-layer”,或干脆叫“layer”。而中文我們把它稱作“層次”。所以當你以後看到這些名詞的時候,你就知道它們是指一段在DIV中Html。
使用DIV的方法跟使用其他tag的方法一樣:

◆ThisisaDIVtag.

如果單獨使用DIV而不加任何CSS-P,那麼它在網頁中的效果和使用是一樣的。
但當我們把CSS-P用到DIV標簽中去以後,我麼就可以嚴格設定它的位置。首先我們需要給這個可以被CSS-P控制的DIV一個ID或說是它的名字。比如說我們給下面這個DIV的名字是truck。給名字的目的是我們以後可用JavaScript來控制它,比如說移動它或改變它的一些性質等等。

◆Thisisatruck

給層次取什麼名字是隨意的,名字可以是任何英文字母和數字,但第一個必須是字母。有兩種把CSS-P應用到DIV的方法。

InlineCSS:Inline是最常用的方法。

Thisisatruck.
ExternalSTYLEtag:使用External方法的結果是一樣的。我們會在以後的課程裡再詳細解釋這種方法。現在我們主要討論Inline方法。請注意在External方法裡,在STYLE裡的ID和DIV裡的關系。 

  1.  <STYLETYPESTYLETYPE="text/CSS">
  2. <!-- #truck{stylesgohere} -->
  3. </STYLE>

Thisisatruck.

◆Cross-BrowserCSS性質:
我們這個課程的主要目的是讓你寫出的網頁在NS4和IE4上都能工作,所以我們主要討論那些對倆者都通用的性質。下面這些性質符合由W3C給出的標准。
position 決定DIVtag是如何放置的。“relative”意思是DIV的位置是相對於其他tag的,而“absolute”是說DIVtag的位置是相對於它所在的窗口。
left 相對於窗口左邊的位置
top 相對於窗口上邊的位置
width DIVtag的寬度。所有在DIV裡的文字或Html都在裡面。
height DIVtag的高度。這個性質很少用除非你想Clip層次。

◆clip 給出layer的clipping(可看的見的)部分。Clip可使得DIV顯示為一個可以定義的很准確的方塊。你可以用以下的四個值來給出這個方塊的在DIV位置和大小。
clip:rect(top,right,bottom,left);
visibility 隱蔽或展現DIV根據它的值“visible”,“hidden”,“inherit”。
z-index DIVtag的立體位置。值越大DIV的位置越高。
background-color DIV背景的顏色。
layer-background-color Netscape的DIV背景顏色。
background-image DIV的背景圖象。
layer-background-image Netscape的DIV的背景圖象。

【編輯推薦】

  1. 利用img和div標簽實現圖像下拉列表的模擬
  2. IE6.0對padding的解讀分析
  3. 揭露CSS中margins折疊現象內幕
  4. DIV+CSS開發XHtml網頁對SEO優化的影響
  5. DIV CSS網頁布局中對段落進行排版的方法
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved