網(wǎng)頁設計為什么要弄CSS樣式？？

每次進行產(chǎn)品演示，我很快就會極力稱贊 Dreamweaver MX 2004 設計和呈現(xiàn) CSS（或?qū)盈B樣式表）的新功能。 然而最近某位新用戶問了一個問題，說實話，這個問題一下子讓我張口結(jié)舌。這位用戶只是問：“我為什么要使用 CSS?”當時我意識到，盡管我們這些每天與 HTML 和 CSS 打交道的人非常了解 CSS 的優(yōu)點，但仍有很多人并不了解。或者說并不完全了解 CSS 所能提供的所有優(yōu)點。本文是我對上面那位新用戶的書面回答。CSS 起源回顧 CSS 的優(yōu)點之前，我要先介紹一下它的歷史。Web 管理組織 W3C 在 1996 年 11 月推薦使用 CSS，并批準了 CSS 1 級規(guī)范。CSS 1 級規(guī)范說明了用于 HTML 頁面的屬性。這些屬性代替了傳統(tǒng)的字體標簽和其他“樣式”標記，例如顏色和邊距。1998 年 5 月，W3C 批準了 CSS 2 級規(guī)范，將一些附加功能添加到 1 級規(guī)范，并引進了定位屬性。這些屬性代替了表格標簽普遍（但是錯誤）的用法，用來設計頁面元素的表示。CSS 規(guī)范的最新版本是 CSS 2.1，它改進了某些屬性，并刪除了在當前瀏覽器里沒有作用或作用很小的屬性。不幸的是，就像很多新技術(shù)一樣，CSS 經(jīng)歷了漫長的過程才被廣泛采納。其中的重要原因在于瀏覽器，以及為這些瀏覽器建立站點的 Web 設計者們。CSS 批準期間，Netscape Navigator (NN) 仍然是主導瀏覽器，而該瀏覽器基本上不支持 CSS。Microsoft 在其第 3 版瀏覽器中添加了對 CSS 非常有限的支持，但當時大多數(shù)的 Web 設計者（本人在內(nèi)）仍然將 NN 作為首選平臺進行頁面編碼。很多年來，每發(fā)行一個新版本，瀏覽器制作者們都擴展了對 CSS 的支持。今天，Internet Explorer 6、Netscape Navigator 7、Mozilla、Opera 和 Safari 都全面支持 CSS。但這并不意味著我們作為 Web 設計者和開發(fā)者的生涯不存在問題。盡管上述所有瀏覽器都支持 CSS Level 2，它們的兼容程度仍然各不相同。而且在某些情況下，特定屬性仍然會帶給你很多麻煩。也就是說，您仍然需要遵守老的信條“測試再測試”。但如果您堅持使用 CSS 規(guī)范的核心屬性，您將能夠正確地呈現(xiàn)頁面。但是為什么 W3C 認為需要創(chuàng)建 CSS 規(guī)范呢？當我創(chuàng)建基于 HTML 的 Web 站點和應用程序時，這一切對我又意味著什么呢？我認為，我們需要使用 CSS 的理由以及它帶來的優(yōu)勢可以分為以下三個主要方面：靈活性、呈現(xiàn)性和可訪問性靈活性我確定幾乎每個 Web 設計者和開發(fā)者都經(jīng)歷過這樣的痛苦時刻：當您小心地布置好頁面，完成所有嵌套的表格后，客戶要求進行一點“小小的”更改。這小小的更改可能只是“能不能把那個圖形稍稍往左移動一點？”，也可能非常富有戲劇性：“我不喜歡這些標題，能把它們的字體弄大一點嗎？改字體的時候，順便把顏色也改了，怎么樣？”如果只需要處理有限的幾個頁面，您可以深吸一口氣，花上大半個小時做那些讓人惱火的改動。但如果涉及到較大的站點（而這已經(jīng)很常見），一個簡單的更改無論如何也簡單不了。這樣的情形為什么會如此痛苦呢？因為定義頁面外觀的標記本身就是頁面的一部分。要看到實例，您只需到任何站點的任何頁面上去數(shù)一下 font 和 table 標簽的數(shù)量。只要您能夠從實際頁面的流程（或代碼）中刪除這些標記，或者采用更好的辦法，即將其外置，您就可以進行集中更改。而這就是 CSS 所能做的。如果使用一個或多個外部樣式表，通過修改樣式表然后將修改后的版本上載，您就可以將更改應用到站點。想象一下，在傳統(tǒng)的基于表格的布局中，將站點瀏覽從頁面左側(cè)移到頁面右側(cè)將有多么困難。這需要幾個小時重復而乏味的工作。但是，如果您選擇使用 CSS 的定位屬性（通常稱作 CSS-P）來設計頁面，只需更改外部樣式表中的“浮動”或“位置”屬性，即可更新頁面。而且還有以下附加優(yōu)勢：您更新了站點中使用該樣式的所有頁面。呈現(xiàn)性由于寬帶的廣泛使用，很多開發(fā)者已經(jīng)不再考慮在瀏覽器中呈現(xiàn)頁面所花費的時間。但是，你們應該記住，很多目標用戶仍然在使用撥號連接。傳統(tǒng)的基于表格的布局是頁面下載速度慢的主要原因。因為瀏覽器從服務器接收頁面時，必須首先檢查并“理解”一系列復雜的鑲嵌式表格。它必須先找到鑲嵌在最里面的內(nèi)容，然后小心地逐步處理代碼，直至到達最外層的容器，即 body 標簽。完成以上所有過程后，瀏覽器才能開始在屏幕上呈現(xiàn)內(nèi)容。如果使用 CSS，瀏覽器從服務器接收內(nèi)容后，立刻就可以開始呈現(xiàn)過程，因為頁面中沒有或只有很少的顯示標記。使用外部樣式表還有一個潛在的呈現(xiàn)方面的好處。在傳統(tǒng)的基于表格的方法中，瀏覽器必須檢索、分析并單獨呈現(xiàn)每個頁面。也就是說，瀏覽器在您的站點上顯示第 30 頁時耗費的工作和顯示第 1 頁時一樣多。 但是，如果使用外部樣式表進行顯示，站點的第一頁將提示瀏覽器將頁面使用的已鏈接樣式表文件緩存起來。這意味著站點中所有使用上述樣式表的后繼頁面下載速度會更快，因為瀏覽器已經(jīng)緩存了樣式表。最后一個與呈現(xiàn)有關(guān)的優(yōu)點讓我想起電影《莫扎特》。電影中，莫扎特問國王對自己的歌劇有什么看法。國王說很好，但是很沉悶。莫扎特一再追問，國王解釋說，問題就在于“音符太多”。Web 設計也可能有同樣的問題，當然這里的音符指的是實際 HTML 代碼。代碼越多，瀏覽器理解頁面所花的時間就越長。大家也許都聽說過有關(guān)官方應用程序的傳言，它們編寫了非常糟糕的代碼，滿是復雜的信息，然而文檔頁面卻無法呈現(xiàn)。作為 Dreamweaver 的用戶，你們不會遇到這樣的問題，但是如果編寫了太多代碼，你們也會感到內(nèi)疚。典型的基于表格的設計就是一個很好的例子。 在設計中使用 CSS 后，您將減少客戶需要下載的代碼的數(shù)量。僅僅減少某些頁面中的字體標簽就可以大大減少代碼的數(shù)量。在很多情況下，如果完全使用 CSS-P 進行設計，代碼的數(shù)量最多可以減少 50% 甚至更多。代碼減少就意味著頁面下載的速度加快。

10年積累的網(wǎng)站建設、做網(wǎng)站經(jīng)驗，可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡服務。我雖然不認識你，你也不認識我。但先網(wǎng)站策劃后付款的網(wǎng)站建設流程，更有宜州免費網(wǎng)站建設讓你可以放心的選擇與我們合作。

求一通俗易懂的操作流程:怎樣使用CSS樣式表

w3cschool你去這個上面看吧，然后模仿百度首頁，完了再模仿一些公司官網(wǎng)學校官網(wǎng)（2個就差不多了），我當初就是這樣學的。誠信回答，請采納

動態(tài)網(wǎng)站開發(fā)用CSS布局的流程是什么？

css布局跟你用asp、jsp或者php沒的啥關(guān)系

你一定要講究整體和局部的問題，我覺得應該是如你所說，是“先整體再局部”吧。

舉個例子，下面是一段asp代碼：

!DOCTYPE htmlhtml

head

meta charset="gbk"/

title標題/title

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

meta http-equiv="X-UA-Compatible" content="IE=7" /

link rel="stylesheet" type="text/css" href="/css/global.css" /

style

.content{margin-top:20px;}

/style

/head

body

%

dim html,i

html="div class=""content""ul"

for i=1 to 20

html=html"li"i"/li"

next

html=html"/ul/div"

response.write html

%

/body

/html

你看這段代碼里面，先定義了css的一個類.content，asp輸出時使用它就行了，你用外聯(lián)樣式表的話在global.css里面定義這個類也是一樣的。

div+css布局的基本流程

解決這個問題的方法如下：

1、新建一個html文件，命名為test.html，用于講解div+css布局的基本流程。

2、在test.html文件內(nèi)，對body進行樣式初始化，設置外邊距margin為0，內(nèi)邊距padding為0，同時使用text-align設置文字居中。

3、在test.html文件內(nèi)，為了講解方便，設置所有的div高度為200px，內(nèi)容的顏色為紅色。

4、在test.html文件內(nèi)，使用div創(chuàng)建網(wǎng)頁的頭部，使用margin:0 auto設置div居中，同時設置其寬度為800px，背景顏色為灰色。

5、在test.html文件內(nèi)，使用div創(chuàng)建網(wǎng)頁的中部，使用margin:0 auto設置div居中，同時設置其寬度為800px。

6、在test.html文件內(nèi)，在網(wǎng)頁的中部，創(chuàng)建兩個div，用于將中部為兩部分，每一個部分寬度為50%，左部分使用float:left設置左浮動，右部分使用float:right設置右浮動。

7、在test.html文件內(nèi)，使用div創(chuàng)建網(wǎng)頁的底部，使用clear:both清除上面div的浮動，避免影響底部的布局。同時，使用margin:0 auto設置div居中，同時設置其寬度為800px，背景顏色為#000fff。

8、在瀏覽器打開test.html文件，查看實現(xiàn)的效果，這樣問題就解決了。

本文名稱：流程樣式css,流程語句格式
轉(zhuǎn)載來源：http://chinadenli.net/article29/dsihhjh.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、關(guān)鍵詞優(yōu)化、企業(yè)網(wǎng)站制作、移動網(wǎng)站建設、響應式網(wǎng)站、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)