(X)HTML與CSS介紹|蘿卜系統下載站

網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。

一、(X)HTML與CSS

為了解決HTML結構標記與表現標記混雜在一起的問題，引入了 CSS這個新的來專門負責頁面的表現形式。XHTML用于結構化內容；CSS用于決定頁面的表現形式。

二、CSS標準

CSS(Cascading Style Sheet,層疊樣式表）是一種制作網頁的新技術，現在已經為大多數瀏覽器所支持，成為網頁設計必不可少的工具之一。

網頁最初是用HTML標記來定義頁面文檔及格式，如標題<hl>、段落<p>、表格<table>等。但這標記不能滿足更多的文檔樣式需求，為了解決這個問題，在1997年W3C頒布HTML4標準的同時也公布了有關樣式表的第一個標準CSSl。自CSSl的版本之后，又在1998年5月發布了CSS2版本，樣式表得到了更多的充實。使用CSS能夠簡化網頁的格式代碼，加快下載顯示的速度，也減少了需要上傳的代碼數量，大大減少了重復勞動的工作量。

樣式表首要目的是為網頁上的元素精確定位。其次，它把網頁上的內容結構和格式控制相分離。瀏覽者想要看的是網頁上的內容結構，而為了讓瀏覽者更好地看到這些信息，就要通過使用格式來控制。內容結構和格式控制相分離，使得網頁可以僅由內容構成，而將所有網頁的格式通過CSS樣式表文件來控制。

CSS主要有以下優點。

· 利用CSS制作和管理網頁都非常方便，這只是CSS的其中一個優點，它還有其他的優點。
· CSS可以更加精細地控制網頁的內容形式，如前面學過的<font>標記中的size屬性，它
用來控制文字的大小，但它控制的字體大小只有7級，要是出現需要使用10像素或100像素大的字體的情況，HTM巴標記就無能為力了。利用CSS可以辦到，它可以隨意設置字體的大小。
· CSS樣式是豐富多彩的，如滾動條的樣式定義、鼠標光標的樣式定義等。
· CSS的定義樣式靈活多樣，可以根據不同的情況，選用不同的定義方法，如可以在HTML文件內部定義，可以分標記定義、分段定義，也可以在HTML文件外部定義，基本上能滿足使用。

三、傳統HTML的缺點

在CSS還沒有被引入頁面設計之前，傳統的HTML語言要實現頁面美工設計是十分麻煩的。例如，在一個網頁中有一個<h2>標記定義的標題，如果要把它設置為藍色，并對字體進行相應的設置，則需要引入<font>標記，代碼如下所示。

<h2><font color="#000oFF" face="黑體">css標記1</font></h2>

看上去這樣的修改并不是很麻煩，但是當頁面的內容不僅僅只有一段，而是整個頁面時，情況就變得復雜了。首先看如下HTMI。代碼，這段代碼顯示效果如圖所示。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>傳統HTML的缺點</title>
</head>
<body>
<h2><font color="#0000FF" face="幼圓">這是標題文本</font></h2>
<p>這里是正文內容</p>
<h2><font color="#0000FF" face="幼圓">這是標題文本</font></h2>
<p>這里是正文內容</p>
<h2><font color="#0000FF" face="幼圓">這是標題文本</font></h2>
<p>這里是正文內容</p>
</body>
</html>
HTML標題代碼運行效果

這段代碼在瀏覽器中的顯示效果如圖10．1所示，3個標題都是藍色幼圓體字。這時如果要將這3個標題改成紅色，在這種傳統的HTML語言中就需要對每個標題的<font>標記進行修改如果是一個規模很大的網站，而且需要對整個網站進行修改，那么工作量就會非常大，甚至無法實現。

其實傳統HTML的缺陷遠不止上例中所反映的這一個方面，相比CSS為基礎的頁面設計方法，其所體現出的劣勢主要有以下幾點。

(1)維護困難。為了修改某個特殊標記(例如上例中的<h2>標記)的格式，需要花費很多的時間，尤其對于整個網站而言，后期修改和維護的成本很高。
(2)標記不足。HTML本身的標記很少，很多標記都是為網頁內容服務的，而關于美工樣式的標記，如文字間距、段落縮進等標記在HTML中很難找到。
(3)網頁過“胖”。由于沒有統一對各種風格樣式進行控制，因此HTML的頁面往往體積過大，占用了很多寶貴的帶寬。
(4)定位困難。在整體布局頁面時，HTML對于各個模塊的位置調整顯得捉襟見肘，過多的其他標記同樣也導致頁面的復雜和后期維護的困難。

四、如何編輯CSS

CSS的語句是內嵌在HTML文檔中的。所以，編寫css的方法和編寫HTML文檔的方法是一樣的。可以用任何一種文本編輯工具來編寫。比如Windows下的記事本和寫字板、專門的HTML文本編輯工具(FrontPage、Dreamweaver等)，都可以用來編輯CSS文檔。

要在Dreamweaver中添加CSS，先在Dreamweaver的主界面中，將編輯界面切換成“拆分視圖，使用“拆分”視圖能同時查看代碼和設計效果。編輯語法在“代碼”視圖中進行。

在Dreamweaver中，我們不需要熟悉CSS的語法，就可以很輕松地設計出很美妙的網頁效果。Dreamweaver代碼模式對CSS代碼有著非常好的語法著色和提示功能，對CSS的學習很有幫助。

網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。

溫馨提示：喜歡本站的話，請收藏一下本站！

當前位置:蘿卜系統下載站 > 網頁設計教程 > 詳細頁面

(X)HTML與CSS介紹

本類教程下載

系統下載排行