詳細(xì)介紹CSS優(yōu)化具體操作方法及技巧

百恒網(wǎng)絡(luò) 2016-12-09 5702

?許多初學(xué)者認(rèn)為做SEO是一件很簡單的事，不需要什么專業(yè)知識就可以做好，道聽途說不斷地往網(wǎng)站填內(nèi)容和到處發(fā)外鏈就認(rèn)為這是做網(wǎng)站優(yōu)化，其實那僅是最基本的操作，一個網(wǎng)站內(nèi)部沒有優(yōu)化好，僅靠內(nèi)容和外鏈也能優(yōu)化上去，但往往要付出更高的人力成本，也有可能根本優(yōu)化不上去。我們需要一個優(yōu)質(zhì)的網(wǎng)站架構(gòu)才能更好的操作SEO，CSS是否足夠優(yōu)化影到搜索引擎的抓取和收錄,前面我們通過《在做SEO過程中關(guān)鍵字選擇策略》介紹了通過次關(guān)鍵字法、長尾策略等方式來設(shè)定關(guān)鍵詞，接下來南昌網(wǎng)站建設(shè)公司百恒網(wǎng)絡(luò)SEO專員介紹基本的CSS優(yōu)化操作方式.
? ? ? ?1. CSS簡介
? ? ? ? CSS （Cascading Style Sheet），也稱為層疊樣式表。采用CSS技術(shù)，可以有效地對頁面的布局、字體、顏色、背景等進(jìn)行精準(zhǔn)的控制。?
? ? ? ?CSS使得網(wǎng)頁中顯示描述與文檔結(jié)構(gòu)徹底分離，避免了單獨使用HTML標(biāo)簽而引起的文檔結(jié)構(gòu)與顯示格式描述之間的混亂，提高代碼的可讀性。CSS從整體上對頁面布局進(jìn)行控制，使用相同的樣式文件或者相同名稱的樣式表可以對相同格式的內(nèi)容進(jìn)行控制，節(jié)省大量的代碼。但是，目前搜索引擎并不解析CSS內(nèi)容。如果頁面中每一個樣式都使用CSS進(jìn)行控制，則搜索引擎就識別不了頁面中相關(guān)內(nèi)容的樣式，也就不能根據(jù)這些內(nèi)容的樣式判斷頁面的相關(guān)性。?
? ? ? ?如下所示，方式1及方式2的目的都是為“搜索引擎優(yōu)化”增加粗體標(biāo)記。方式1是通過調(diào)用CSS中的b樣式實現(xiàn)的，而方式2中則直接采用粗體標(biāo)簽。由于搜索引擎并不解析樣式表里的內(nèi)容，所以也就不能識別方式1中的內(nèi)容是否采用了粗體標(biāo)記；而對于方式2則可以輕易識別，從而給方式2的頁面賦予相應(yīng)的權(quán)重。?
? ? ? ?方式1：

搜索引擎優(yōu)化

?
? ? ? ?方式2：
搜索引擎優(yōu)化
?
? ? ? ?樣式表內(nèi)容： <
? ? ? ?style type="text/css"> ? ?
? ? ? ?
? ? ? ? ?
? ? ? ?2. CSS優(yōu)化 ? ? ??
? ? ? ?CSS優(yōu)化主要是改變CSS的調(diào)用方式以及避免使用CSS為重要內(nèi)容定義樣式，以達(dá)到精簡頁面代碼及提高頁面相關(guān)性的目的。?
? ? ? ?通過改變CSS的調(diào)用方式及使用CSS對相同樣式的內(nèi)容進(jìn)行控制，可以節(jié)省大量的代碼。?
? ? ? ?避免使用CSS為重要的內(nèi)容定義樣式。頁面中重要內(nèi)容的樣式（尤其是主輔關(guān)鍵字）必須使用HTML標(biāo)簽進(jìn)行標(biāo)注，這樣才能達(dá)到突出頁面中的主輔關(guān)鍵字從而提高頁面相關(guān)性的目的。如粗體、斜體、下劃線、標(biāo)題
、文字顏色、文字大小等。?
? ? ? ?3. CSS調(diào)用方式
? ? ? ? CSS調(diào)用方式分頁面內(nèi)部調(diào)用及外部調(diào)用兩種，其中內(nèi)部調(diào)用又分為頭部調(diào)用及主體調(diào)用。?
? ? ? ?頭部調(diào)用?
? ? ? ?頁面頭部調(diào)用就是把需要使用的CSS樣式內(nèi)容直接放置在頁面的頭部中（即區(qū)域）。如果樣式內(nèi)容極少則影響不大，否則不但會大大增加頁面的體積，還會占用頂部的重要位置，給頁面帶來極大的負(fù)面影響。如下代碼所示：?
? ? ? ? ??
? ? ? ? ?南昌網(wǎng)站建設(shè)公司|南昌APP開發(fā)公司|百恒網(wǎng)絡(luò) ? ?
? ? ? ? ??
? ? ? ? ? ? ??
? ? ? ? ??
? ? ? ? ?
? ? ? ? ?
? ? ? ?主體調(diào)用?
? ? ? ?頁面主體調(diào)用就是在頁面主體1需要樣式控制的內(nèi)容中添加相應(yīng)CSS樣式。這種CSS調(diào)用方式既不能發(fā)揮CSS的優(yōu)勢（即對于相同樣式的內(nèi)容使用同一個樣式進(jìn)行控制），又會大大增加頁面代碼量。如下所示：?
? ? ? ? ? ?
? ? ? ?
，就是使用名稱為background的樣式對段
落
中的內(nèi)容進(jìn)行控制。?
? ? ? ? 南昌網(wǎng)站建設(shè)公司|南昌APP開發(fā)公司|百恒網(wǎng)絡(luò) ? ?
? ? ? ? ??
? ? ? ? ? ? ??
? ? ? ?
? ? ? ? ?
? ? ? ?頁面主體是指位于間的內(nèi)容。?
? ? ? ?4. DIV+CSS?
? ? ? ?(1).使用DIV+CSS方式制作頁面，一方面可以防止垃圾代碼的產(chǎn)生，另一方面可以減少重復(fù)代碼2。?
? ? ? ?(2).使用DIV+CSS的方式制作頁面，可以減少50%～80%的HTML代碼。?
? ? ? ?使用DIV+CSS方式制作的頁面，不管對于搜索引擎還是普通用戶都是非常友好的。對于搜索引擎來說，DIV+CSS制作的頁面代碼簡單、清晰，占用存儲空間小；而對于普通用戶來說，在下載頁面的時候，DIV+CSS方式是以
為單位，其內(nèi)容遠(yuǎn)少于表格，頁面打開時自然也會更流暢。?
? ? ? ?但是，使用DIV+CSS方式制作頁面也有缺點。第一，在制作頁面的時候還要調(diào)整其他多個瀏覽器的兼容性，例如IE6、IE7及Firefox等；第二，搜索引擎并不解析CSS文件里的內(nèi)容，對于那些需要被突出的關(guān)鍵字或者內(nèi)容，最好采用HTML標(biāo)簽進(jìn)行標(biāo)注。例如，對于頁面中主、輔關(guān)鍵字的加粗、字體顏色、標(biāo)題標(biāo)簽
等樣式，接下來我們將通過《在SEO過程如何對頁面中javascript進(jìn)行優(yōu)化》介紹在網(wǎng)頁優(yōu)化過程中如何對頁面中的javascript進(jìn)行優(yōu)化。
? 本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.希望此文對廣技人員有所幫助。原創(chuàng)文章出自:南昌網(wǎng)站建設(shè)公司-百恒網(wǎng)絡(luò)http://m.51yjwy.com/如轉(zhuǎn)載請注明出處!

詳細(xì)介紹CSS優(yōu)化具體操作方法及技巧

歡迎您的光顧，我們將竭誠為您服務(wù)×