十年专注于品牌网站建设 十年专注于品牌网站建设,低调、有情怀的网络应用服务商!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

详细介绍CSS优化具体操作方法及技巧

百恒网络 2016-12-09 918

 许多初学者认为做SEO是一件很简单的事,不需要什么专业知识就可以做好,道听途说不断地往网站填内容和到处发外链就认为这是做网站优化,其实那仅是最基本的操作,一个网站内部没有优化好,仅靠内容和外链也能优化上去,但往往要付出更高的人力成本,也有可能根本优化不上去。我们需要一个优质的网站架构才能更好的操作SEO,CSS是否足够优化影到搜索引擎的抓取和收录,前面我们通过《在做SEO过程中关键字选择策略》介绍了通过次关键字法、长尾策略等方式来设定关键词,接下来南昌网站建设公司百恒网络SEO专员介绍基本的CSS优化操作方式.
       1. CSS简介
        CSS (Cascading Style Sheet),也称为层叠样式表。采用CSS技术,可以有效地对页面的布局、字体、颜色、背景等进行精准的控制。 
       CSS使得网页中显示描述与文档结构彻底分离,避免了单独使用HTML标签而引起的文档结构与显示格式描述之间的混乱,提高代码的可读性。CSS从整体上对页面布局进行控制,使用相同的样式文件或者相同名称的样式表可以对相同格式的内容进行控制,节省大量的代码。但是,目前搜索引擎并不解析CSS内容。如果页面中每一个样式都使用CSS进行控制,则搜索引擎就识别不了页面中相关内容的样式,也就不能根据这些内容的样式判断页面的相关性。 
       如下所示,方式1及方式2的目的都是为“搜索引擎优化”增加粗体标记。方式1是通过调用CSS中的b样式实现的,而方式2中则直接采用粗体标签<b>。由于搜索引擎并不解析样式表里的内容,所以也就不能识别方式1中的内容是否采用了粗体标记;而对于方式2则可以轻易识别,从而给方式2的页面赋予相应的权重。 
       方式1:<p class=b>搜索引擎优化</p> 
       方式2:<p><b>搜索引擎优化</b></p> 
       样式表内容: <
       style type="text/css">    
        <!--         
       .b {             font-weight: bold;        
        }    
        -->
        </style> 
       2. CSS优化       
       CSS优化主要是改变CSS的调用方式以及避免使用CSS为重要内容定义样式,以达到精简页面代码及提高页面相关性的目的。 
       通过改变CSS的调用方式及使用CSS对相同样式的内容进行控制,可以节省大量的代码。 
       避免使用CSS为重要的内容定义样式。页面中重要内容的样式(尤其是主辅关键字)必须使用HTML标签进行标注,这样才能达到突出页面中的主辅关键字从而提高页面相关性的目的。如粗体<b></b>、斜体<i></i>、下划线<u></u>、标题<h1></h1>、文字颜色、文字大小等。 
       3. CSS调用方式
        CSS调用方式分页面内部调用及外部调用两种,其中内部调用又分为头部调用及主体调用。 
       头部调用 
       页面头部调用就是把需要使用的CSS样式内容直接放置在页面的头部中(即<head></head>区域)。如果样式内容极少则影响不大,否则不但会大大增加页面的体积,还会占用顶部的重要位置,给页面带来极大的负面影响。如下代码所示: 
       <head>   
         <TITLE>南昌网站建设公司|南昌APP开发公司|百恒网络</TITLE>    
        <meta name="description" content="创始于2006年,专业专注于APP开发,南昌网站建设!">   
         <meta name="keywords" content="南昌网站建设公司,南昌APP开发公司,百恒网络-www.jxbh.cn">     
       <meta http-equiv="Content-Type" content="text/html; charset=gb2312">   
         <style type="text/css">      
         <!--         .class1 {         
       font-weight: bold;             
       font-size: 12px;            
        font-style: normal;            
        line-height: 25px;
       font-variant: normal;        
        }         
       .drm {             
       font-family: Tahoma, Arial, Helvetica, sans-serif;            
        font-size: 14px;             
       line-height: 20px;            
        color: #0066CC;         
       }        
        .drm_orange {            
       font-size: 14px;             
       color: #E36200;        
        }        
        .drm_10 {            
        font-size: 11px;            
        color: #666666;            
        padding: 2px;            
        font-family: Verdana, Arial, Helvetica, sans-serif;         
       }             -->    
        </style>
        </head> 
       主体调用 
       页面主体调用就是在页面主体1需要样式控制的内容中添加相应CSS样式。这种CSS调用方式既不能发挥CSS的优势(即对于相同样式的内容使用同一个样式进行控制),又会大大增加页面代码量。如下所示: 
       <body>    
        <p style="font:Arial, Helvetica, sans-serif; font-size:9px; line-height:12pt;>我做的第一个网页</p> 
       </body> 
       外部调用 
       把CSS样式内容放到外部文件中,使得CSS样式与页面彻底分离,这样就可以有效减少页面代码量,而且还不会占用页面顶部的重要位置,让搜索引擎可以优先发现页面中相对重要的内容。但是,同时要避免使用CSS为重要内容定义样式,例如网页中的主辅关键字。 
       在下面的代码中,把所有的样式内容都写在css.css文件里面,只有在需要的时候才进行调用。例如,对于<pclass="background">,就是使用名称为background的样式对段
落<p></p>中的内容进行控制。 
        <TITLE>南昌网站建设公司|南昌APP开发公司|百恒网络</TITLE>    
        <meta name="description" content="创始于2006年,专业专注于APP开发,南昌网站建设!">   
         <meta name="keywords" content="南昌网站建设公司,南昌APP开发公司,百恒网络-www.jxbh.cn">     
       <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
        <LINK href="/baiheng/img/css.css" type=text/css rel=stylesheet> 
       页面主体是指位于<body></body>间的内容。 
       4. DIV+CSS 
       (1).使用DIV+CSS方式制作页面,一方面可以防止垃圾代码的产生,另一方面可以减少重复代码2。 
       (2).使用DIV+CSS的方式制作页面,可以减少50%~80%的HTML代码。 
       使用DIV+CSS方式制作的页面,不管对于搜索引擎还是普通用户都是非常友好的。对于搜索引擎来说,DIV+CSS制作的页面代码简单、清晰,占用存储空间小;而对于普通用户来说,在下载页面的时候,DIV+CSS方式是以<div></div>为单位,其内容远少于表格,页面打开时自然也会更流畅。 
       但是,使用DIV+CSS方式制作页面也有缺点。第一,在制作页面的时候还要调整其他多个浏览器的兼容性,例如IE6、IE7及Firefox等;第二,搜索引擎并不解析CSS文件里的内容,对于那些需要被突出的关键字或者内容,最好采用HTML标签进行标注。例如,对于页面中主、辅关键字的加粗<b>、字体颜色、标题标签<h1>等样式,接下来我们将通过《在SEO过程如何对页面中javascript进行优化》介绍在网页优化过程中如何对页面中的javascript进行优化。
  本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广技人员有所帮助。原创文章出自:南昌网站建设公司-百恒网络http://www.jxbh.cn/如转载请注明出处!

400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×