合理的設計好一個網(wǎng)頁，可以使讀者快速閱讀網(wǎng)站的文章，并且會饒有興趣的閱讀其他的內容。下面由學習啦小編為大家整理的CSS改進網(wǎng)站設計，希望大家喜歡!

　　CSS網(wǎng)站設計改進方法

　　1.用css技術構建文件

　　首先考慮一下搜索引擎運行的實事。搜索引擎機器人進入網(wǎng)站后，瀏覽網(wǎng)站上的內容，因為這些工具不會浪費過多的時間去尋找，所以網(wǎng)站的內容是越容易被搜索到越好?？紤]到這個問題，有些網(wǎng)頁的表述結構是不必要的，這時要去掉。在一個單獨的css文件中這些結構會更容易儲存。這就意味著，要用少量的HTML標簽代替那些沒有任何關系的表格標簽，因為運用css規(guī)則可以更好地安排HTML標簽。把大量的多余的標記去除以后，只剩下了安排合理的內容。這樣搜索引擎就更容易發(fā)現(xiàn)網(wǎng)站并對網(wǎng)站做索引。

　　2.運用css設計標題標簽

　　我們知道，搜索引擎會重點去搜索網(wǎng)站中可以找到標題，例如，標題1，標題2，標題3等等。設計標題標簽的時候，令很多沒有經(jīng)驗的設計者頭疼的是，瀏覽器用大量很難看的黑色信息去呈現(xiàn)。這時候就要用css了，它能使標題設計格局更合理，文本內容更能吸引搜索引擎來搜索。并且這樣完美的文章更能吸引瀏覽者的眼球。

　　3.利用css創(chuàng)建圖像

　　使用圖片相互切換的方式來實現(xiàn)鏈接效果的傳統(tǒng)做法是運用一些相對復雜的JS中的切換功能來實現(xiàn)的。JS編碼不是網(wǎng)頁要呈現(xiàn)的真正內容，只是一些無關緊要的語言，它對搜索引擎非常不友好，所以如果在網(wǎng)頁中過多地運用這種技術來處理內容，會影響到網(wǎng)站在搜索引擎中的排名。利用css來設計網(wǎng)頁是一種更好的辦法。利用2種圖形在網(wǎng)頁中建立文本鏈接，運用css來設計布局。在HTML中，把鏈接內容展現(xiàn)出來，設計出長度和寬度，然后把2種圖像定義為兩種不同的背景，一張圖片是在鼠標離開時呈現(xiàn)，另一張圖片在鼠標點擊時出現(xiàn)。

　　網(wǎng)頁中插入CSS的方法

　　鏈入外部樣式表

　　鏈入外部樣式表是把樣式表保存為一個樣式表文件，然后在頁面中用標記鏈接到這個樣式表文件，這個標記必須放到頁面的區(qū)內，如下：

　　……

　　……

　　上面這個例子表示瀏覽器從mystyle.css文件中以文檔格式讀出定義的樣式表。rel=”stylesheet”是指在頁面中使用這個外部的樣式表。type=”text/css”是指文件的類型是樣式表文本。href=”mystyle.css”是文件所在的位置。

　　一個外部樣式表文件可以應用于多個頁面。當你改變這個樣式表文件時，所有頁面的樣式都隨之而改變。在制作大量相同樣式頁面的網(wǎng)站時，非常有用，不僅減少了重復的工作量，而且有利于以后的修改、編輯，瀏覽時也減少了重復下載代碼。

　　樣式表文件可以用任何文本編輯器(例如：記事本)打開并編輯，一般樣式表文件擴展名為.css。內容是定義的樣式表，不包含HTML標記，mystyle.css這個文件的內容如下：

　　hr {color: sienna}

　　p {margin-left: 20px}

　　body {background-image: url("images/back40.gif")}

　　(定義水平線的顏色為土黃;段落左邊的空白邊距為20象素;頁面的背景圖片為images目錄下的back40.gif文件)

　　內部樣式表

　　內部樣式表是把樣式表放到頁面的區(qū)里，這些定義的樣式就應用到頁面中了，樣式表是用

　　……

　　注意：有些低版本的瀏覽器不能識別style標記，這意味著低版本的瀏覽器會忽略style標記里的內容，并把style標記里的內容以文本直接顯示到頁面上。為了避免這樣的情況發(fā)生，我們用加HTML注釋的方式()隱藏內容而不讓它顯示：

　　……

　　……

　　導入外部樣式表

　　導入外部樣式表是指在內部樣式表的

　　……

　　例中@import “mystyle.css”表示導入mystyle.css樣式表，注意使用時外部樣式表的路徑。方法和鏈入樣式表的方法很相似，但導入外部樣式表輸入方式更有優(yōu)勢。實質上它相當于存在內部樣式表中的。

　　注意：導入外部樣式表必須在樣式表的開始部分，在其他內部樣式表上面。

　　內嵌樣式

　　內嵌樣式是混合在HTML標記里使用的，用這種方法，可以很簡單的對某個元素單獨定義樣式。內嵌樣式的使用是直接將在HTML標記里加入style參數(shù)。而style參數(shù)的內容就是CSS的屬性和值，如下例：

　　這是一個段落

　　(這個段落顏色為土黃，左邊距為20象素)

　　在style參數(shù)后面的引號里的內容相當于在樣式表大括號里的內容。

　　注意：style參數(shù)可以應用于任意BODY內的元素(包括BODY本事)，除了BASEFONT、PARAM和SCRIPT。

　　多重樣式表的疊加

　　上一章里我們已經(jīng)提到樣式表的層疊順序，這里我們討論插入樣式表的這幾種方法的疊加，如果在同一個選擇器上使用幾個不同的樣式表時，這個屬性值將會疊加幾個樣式表，遇到?jīng)_突的地方會以最后定義的為準。例如，我們首先鏈入一個外部樣式表，其中定義了h3選擇符的color 、text-alig和font-size屬性：

　　h3

　　{

　　color: red;

　　text-align: left;

　　font-size: 8pt

　　}

　　(標題3的文字顏色為紅色;向左對齊;文字尺寸為8號字)

　　然后在內部樣式表里也定義了h3選擇符的text-align和font-size屬性：

　　h3

　　{

　　text-align: right;

　　font-size: 20pt

　　}

　　(標題3文字向右對齊;尺寸為20號字)

　　那么這個頁面疊加后的樣式就是：

　　color: red;

　　text-align: right;

　　font-size: 20pt

　　(文字顏色為紅色;向右對齊;尺寸為20號字)

　　字體顏色從外部樣式表里保留下來，而對齊方式和字體尺寸都有定義時，按照后定義的優(yōu)先而依照內部樣式表。

　　CSS布局的優(yōu)點方式

　　1、簡介：為何使用表格排版是不明智的?

　　表格之所以存在于 HTML 中，只是為了一個目的：顯示表格狀的數(shù)據(jù)。然而此后的 border="0" 使得設計師可以將圖片和文本放在這無形的網(wǎng)格中。迄今為止，表格仍然主導著視覺豐富的網(wǎng)站的設計方式，但它卻阻礙了一種更好的、更有親和力的、更靈活的，而且功能更強大的網(wǎng)站設計方法。

　　2、概覽：這對我有什么用處?

　　我們將告訴你這樣一種工作方式，它會：

　　使你的頁面載入得更快

　　降低你的流量費用

　　讓你在修改設計時更有效率而代價更低

　　幫助你的整個站點保持視覺的一致性

　　讓你的站點可以更好地被搜索引擎找到

　　使你的站點對瀏覽者和瀏覽器更具親和力

　　在世界上越來越多人采用 Web 標準時，它還能 提高你的職場競爭實力 (事實上也就是降低失業(yè)的風險)。

　　3、表格帶來的問題

　　把格式數(shù)據(jù)混入你的內容中。

　　這使得文件的大小無謂地變大，而用戶訪問每個 頁面時都必須下載一次這樣的格式信息。

　　帶寬并非免費。

　　這使得重新設計現(xiàn)有的站點和內容極為消耗勞力 (且昂貴)。

　　這還使我們保持整個站點的視覺的一致性極難，花費也極高。

　　基于表格的頁面還大大降低了它對殘疾人和用手機或 PDA 瀏覽者的親和力。

　　4、過渡性的設計

　　使用 margin 和 padding 來代替多余的表格單元和間隔 GIF。

　　使用 link 和 @import 來載入樣式。前者用于早期瀏覽器，后者給現(xiàn)在的瀏覽器。

　　5、結構化標記：所寫即所想，所想即所寫

　　即便書寫 CSS 很簡單，使用 CSS 來排版卻真的需要一種和我們以往有些不同的思維方式。

　　我們排版時考慮的不是“這個東西放在這兒，那個東西放在那兒”，而是頁面中信息的類別和信息的結構。