1. 首页
  2. 成都seo技巧

网站制作的时候css引用如何命名鲁大师seo

刚接触网站制作前端的时候,自己书写html和css过程中很不规范,很大一部分都是使用拼音来代替,有时候拼音使用的太多整体都会有很多冗余代码,那样是很不可取的,在此为大家提供一些技巧,针对个人的爱好来选择一种命名规则是很有必要的。

class引用使用”-“来链接
这种方法很简单,网页是有块组合而成,每一个块的命名为模块拼音的首字母或者说英文翻译,(建议使用英文翻译),而每一子模块,可以使用父模块的引用,然后加上后缀”_l”,”_c”,”_r”等等这样来简写,如下图所示:

网站制作的时候css引用如何命名

这样写的好处是,css中不用使用前缀,大大的降低了css代码的体积,而且管理容易,举例如下
.box{}             盒子
.box-l{}           盒子左边子模块
.box-l-l{}         盒子左边子模块的左边模块
.box-l-c{}           ….
.box-l-r{}           ….
.box-r{}           ….
.box-r-l{}           ….
.box-r-c{}           ….
.box-r-r{}           ….

class引用使用分层
网页布局基本上都是使用分层的,比如商城网站建设中,使用1f和2f等分层,其实css也是可以这样命名,c1或者c2,也可以f1和f2等,内部再结合第一种方法,也可以结合层内部的英文命名规则等。这种方法css需要使用指定在哪个层下,这样才能避免重复命名,引起兼容。

另外两种方法一般都会使用base.css,但是我不建议使用,下面给出我所用的前缀,供大家参考

@charset “utf-8″;
*{ margin:0px; padding:0px;}
img{ border:none;}
a{ text-decoration:none; color: #333333;}
a:hover{ text-decoration:none; color: #a43130;}
li{ list-style: none;}
.clear{ clear:both;}

.fl{ float: left;}
.fr{ float: right;}
.fr.fl{display:inline;}
.mauto{ margin: 0 auto; width: 1200px;}
.txt_c{ text-align: center;}
.f12,.f14,.f16,.f18,.f20,.f24{ font-weight: normal; color: #333333; font-family: “Microsoft YaHei”,”微软雅黑”;}
.f12{ font-size: 12px; font-family: “Microsoft YaHei”,”微软雅黑”;}
.f14{ font-size: 14px;}
.f16{ font-size: 16px;}
.f18{ font-size: 18px;}
.f20{ font-size: 20px;}
.f24{ font-size: 24px;}
郑州网站建设,郑州网站制作

转载请注明:成都SEO0)

成都seo优化

原创文章,作者:鲁 大师seo,如若转载,请注明出处:http://www.luseo.cn/archives/4461.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

15284716688

在线咨询:点击这里给我发消息

邮件:524595840@qq.com

工作时间:周一至周日,9:30-18:30