加入收藏RSS訂閱SEO教程 SEO優化 SEO自學 網站優化
你的位置:首頁 ? SEO教程 ? 正文

代碼優化方法之CSS優化!

選擇字號: 超大 標準 發布時間:2014-10-25 23:36:24 | 作者:Searcheo | 0個評論 | 人瀏覽

本文地址:http://www.ndsprh.live/post/603.html 轉載請注明出處!

    對于網站排名優化來說,css的幾乎沒有任何影響,但往大的方向如網站優化來說,樣式表css的優化就至關重要了,其主要作用即是提高網頁的響應速度。

外鏈CSS

    css的使用有多種方式,一是嵌入式,即在html標簽中直接定義樣式表,如下所示:<p style="font-family:arial;font-size:16px;font-weight:bold;">Outside now its raining,and tears are falling from my eyes…</p>

    還有一種是直接定義在頁面頭部的如下:<styletype="text/css">p{ background:#f1f1f1; color:#333; line-height:20px;} </style>

    這兩種方式都是把css寫在當前html中,這樣會造成hml文檔變大,降低網頁的響應速度,所以我們需要外鏈css,將所有與本頁面相關的樣式寫入到該樣式表中:<link href="style/common.css"rel="stylesheet"type="text/css"/>

精簡CSS

    對于這一點需要一定的css能力才可以做到了。所謂精簡,指的是用盡可能少的樣式代碼實現整個網頁的樣式效果,需要充分利用css的繼承和綜合使用,舉一個簡單的例子來說明。如頁面中的鏈接,全部不需要下劃線、大部分為12像素,但鏈接的顏色并不相同,個別的字體效果也不相同,我們就可以這樣來寫:

    a{ text-decoration:none; font-size:12px;}/*定義通用a樣式*/

    a.a_red{ color:#e00;}

    a.a_blue{ color:#009;}

    a.a_menu{ color:#fff; font-size:14px; font-weight:bold;}/*針對特殊a標簽只指定特殊樣式*/

    因為css的繼承作用,a_red和a_blue都具備沒有下劃線、12像素這一樣式,而a_menu同樣具備沒有下劃線,但因指定了大小,就不再繼承12像素的指定而使用14像素。

整合CSS

    一般情況下,前端制作人員喜歡把通用樣式寫成一個文件,把專用樣式寫成另一個文件以便各個頁面調用。如筆者,就喜歡把頁面通用樣式(包括通用的布局樣式、文字樣式等)寫在common.css中,而把專用的寫在另一個樣式表中。如首頁,我們就需要調用common.css和index.css兩個樣式表文件。這樣做,對于前端來說是正確的。但對于優化,卻不太好。多一個文件調用就需要多一次請求,當然也會多耗費一點時間。所以,在網站制作完成后,我們需要把頁面的所有樣式合并大一起以提高網頁的響應速度!但需注意,合并css不利于網站后期整改,權衡利弊各取所需吧,具體是否合并還需根據你的實際情況而定。

壓縮CSS

    壓縮css其實很簡單,就是去掉多余的空格和換行。實現起來也非常的簡單,網上有很多工具,請自行搜索“css壓縮”即可找到很多在線壓縮工具。同上面一點,壓縮后的css不便于后期整改,需要自己權衡取舍。

標簽:    

SEO教程網

猜你喜歡

發表評論

必填

選填

選填

必填,不填不讓過哦,嘻嘻。

記住我,下次回復時不用重新輸入個人信息

◎歡迎參與討論,請在這里發表您的看法、交流您的觀點。

站長推薦的文章
瀏覽最多的文章
無覓相關文章插件,快速提升流量 半全场胜负什么意思