全网整合营销服务商

电脑端+手机端+微信端+网络推广

免费咨询热线:0371-56005002

  • 首页
  • 微信开发
  • 手机商城
  • 小程序
  • 营销型ope体育最新版下载
  • 报价套餐
  • 成功案例
  • SEO优化
  • ope体育最新版下载推广
  • 关于我们
  • 为什么统的CSS文件名称及样式规范更利于SEO优

      坚持使用统的CSS命名规则并养成习惯,可以让你更容易维护、修改以前编写过的CSS代码,进而提高自己的工作效率,而且还能加强搜索引擎的SEO优化,方便记忆,那么,我们如何才能将CSS的命名做得井井有条呢?

      1、CSS文件及样式命名

      首先,先为大家展示些CSS文件及样式的命名样例,因为这些名称能使大家立马明白定义的文件,具体如下所示:

      CSS文件命名规范

      全局样式:global.css

      框架布局:layout.css

      字体样式:font.css

      链接样式:link.css

      打印样式:print.css

      主要的:master.css

      专栏:columns.css

      主题:themes.css

      对于CSS样式的命名规则,建议用字母、_号工、-号、数字组成,必须以字母开头,不能为纯数字,为了开发后样式名管理方便,大家请用有意义的单词或缩写组合来命名,让同事看明白这样式大概是哪块的,这样节省了查找样式的时间。

      例如:头部样式用header,头部左边,可以用header_left或header_l,还有如果是列结构的可以这样——box_1of3 (三列中的第列),box_2of3 (三列中的列)、box_3of3 (三列中的第三列),其它的我不举例了,大家按以上规律去命名好。

      2、CSS的优先级

      行内样式(inline style) > ID选择符 > 样式(class)、伪类(pseudo-class)和属性(attribute)选择符 > 类别(type),伪对象(pseudo-element)。

      博客注解:

      *内联样式(inline style):元素的style属性,比如 <div style="color:red;"></div>,其中的color:red;是行内样式。

      *ID选择符:元素的id属性,比如<div></div>可以用ID选择符#content

      *伪类(pseudo-class):常见的是锚(a)伪类,比如a:link,a:visited.

      *属性选择符(attribute selectors):比如div[class=demo],含有class为demo的div元素。

      *类别选择器(type selector):HTML标签选择,比如div .demo,div元素下含有class为demo的元素。

      *伪对象选择器(pseudo-element selector):比如div:first-letter,div元素下的第个单词。

      3、不要重复定义可继承的值

      CSS中,子元素自动继承父元素的属性值,象颜色、字体等,已经在父元素中定义过的,在子元素中可以直接继承,不需要重复定义。

      除非是为了更变当前元素样式不使用父元素的属性值,但是要注意,浏览器可能用些默认值覆盖你的定义。

      4、CSS代码书写样式

      在写CSS代码的时候,对于缩进、断行、空格,每个人有每个人的书写习惯,在经过不断实践后,我决定采用下面这样的书写样式:

      .classname {

      width:100px;

      }

      当使用联合定义时,我通常将每个选择器单独写行,这样方便在CSS文件中找到它们,在后个选择器和大括号之间加个空格,每个定义也单独写行,分号直接在属性值后,不要加空格。

      我习惯在每个属性值后面都加分号,虽然规则上允许后个属性值后面可以不写分号,但是如果你要加新样式时容易忘记补上分号而产生错误,所以还是都加比较好,后,关闭的大括号单独写行,这样的空格和换行有助与阅读

      5、导入(Import)和隐藏CSS

      因为老版本浏览器不支持CSS,个通常的做法是使用@import技巧来把CSS隐藏起来,例如:

      @import url(main.css);

      然而,这个方法对IE4不起作用,这让我很是头疼了阵子,后来我用这样的写法:

      @import main.css;

      这样可以在IE中也隐藏CSS了,呵呵,还节省了5个字节呢!

      6、层占据的空间

      当调试CSS发生错误,你要像排版工人,逐行分析CSS代码,我通常在出问题的层上定义个背景颜色,这样能很明显看到层占据多大空间?

      有些人建议用border,般情况也是可以的,但问题是,有时候border会增加元素的尺寸,border-top和boeder-bottom破坏纵向margin的值,所以使用background更加安全些。

    您的项目需求

    *请认真填写需求信息,我们会在24小时内与您取得联系。

  • 返回顶部
  • 0371-56005002
  • QQ在线
  • 微信二维码
    关注汉狮网络