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

　　CSS網(wǎng)站設(shè)計(jì)改進(jìn)方法

　　1.用css技術(shù)構(gòu)建文件

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

　　2.運(yùn)用css設(shè)計(jì)標(biāo)題標(biāo)簽

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

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

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

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

　　鏈入外部樣式表

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

　　……

　　……

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

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

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

　　hr {color: sienna}

　　p {margin-left: 20px}

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

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

　　內(nèi)部樣式表

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

　　……

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

　　……

　　……

　　導(dǎo)入外部樣式表

　　導(dǎo)入外部樣式表是指在內(nèi)部樣式表的

　　……

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

　　注意：導(dǎo)入外部樣式表必須在樣式表的開始部分，在其他內(nèi)部樣式表上面。

　　內(nèi)嵌樣式

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

　　這是一個(gè)段落

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

　　在style參數(shù)后面的引號(hào)里的內(nèi)容相當(dāng)于在樣式表大括號(hào)里的內(nèi)容。

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

　　多重樣式表的疊加

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

　　h3

　　{

　　color: red;

　　text-align: left;

　　font-size: 8pt

　　}

　　(標(biāo)題3的文字顏色為紅色;向左對(duì)齊;文字尺寸為8號(hào)字)

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

　　h3

　　{

　　text-align: right;

　　font-size: 20pt

　　}

　　(標(biāo)題3文字向右對(duì)齊;尺寸為20號(hào)字)

　　那么這個(gè)頁面疊加后的樣式就是：

　　color: red;

　　text-align: right;

　　font-size: 20pt

　　(文字顏色為紅色;向右對(duì)齊;尺寸為20號(hào)字)

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

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

　　1、簡(jiǎn)介：為何使用表格排版是不明智的?

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

　　2、概覽：這對(duì)我有什么用處?

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

　　使你的頁面載入得更快

　　降低你的流量費(fèi)用

　　讓你在修改設(shè)計(jì)時(shí)更有效率而代價(jià)更低

　　幫助你的整個(gè)站點(diǎn)保持視覺的一致性

　　讓你的站點(diǎn)可以更好地被搜索引擎找到

　　使你的站點(diǎn)對(duì)瀏覽者和瀏覽器更具親和力

　　在世界上越來越多人采用 Web 標(biāo)準(zhǔn)時(shí)，它還能 提高你的職場(chǎng)競(jìng)爭(zhēng)實(shí)力 (事實(shí)上也就是降低失業(yè)的風(fēng)險(xiǎn))。

　　3、表格帶來的問題

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

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

　　帶寬并非免費(fèi)。

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

　　這還使我們保持整個(gè)站點(diǎn)的視覺的一致性極難，花費(fèi)也極高。

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

　　4、過渡性的設(shè)計(jì)

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

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

　　5、結(jié)構(gòu)化標(biāo)記：所寫即所想，所想即所寫

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

　　我們排版時(shí)考慮的不是“這個(gè)東西放在這兒，那個(gè)東西放在那兒”，而是頁面中信息的類別和信息的結(jié)構(gòu)。