DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 新手上路 DIV入門指南
新手上路 DIV入門指南
編輯:CSS詳解     

你對DIV的概念是否了解, 這裡和大家分享一下DIV入門知識,DIV的起始標簽和結束標簽之間的所有內容都是用來構成這個塊的,其中所包含元素的特性由DIV標簽的屬性來控制,或者是通過使用樣式表格式化這個塊來進行控制。

DIV入門簡介

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

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

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

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

使用 DIV 標簽

這裡看一下DIV入門之DIV標簽的使用,當我們使用 CSS-P 的時候, 我們主要把它用在 DIV(division)tag 上。當你把文字,圖像,或其他的放在 DIV 中,它可稱作為“DIV block”,或“DIV element”或“CSS-layer”,或干脆叫“layer”。而中文我們把它稱作“層次”。所以當你以後看到這些名詞的時候,你就知道它們是指一段在 DIV 中的 Html。

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

◆This is a truck

給層次取什麼名字是隨意的,名字可以是任何英文字母和數字,但第一個必須是字母。有兩種把 CSS-P 應用到 DIV 的方法。
Inline CSS:Inline 是最常用的方法。This is a truck .
External STYLE tag:使用 External 方法的結果是一樣的。我們會在以後的課程裡再詳細解釋這種方法。現在我們主要討論Inline 方法。請注意在 External 方法裡,在 STYLE 裡的 ID 和 DIV 裡的關系。

  1. <STYLE TYPE="text/CSS">
  2. STYLE>

This is a truck .

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

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved