一个大型网站的每个网页都包含大量的源代码。以往设计师使用表格来进行页面布局,使网站的源代码更加繁琐,此时要对一个使用表格排版的大型网站进行修改是非常困难的。自从出现了div+css的页面排版方式后,网页的源代码量就大大减少了。但是要制作出语义明确、结构清晰的网页还需要遵循编写css代码的规范。Css代码的规范并不是一些明文细则,而是网页设计者在制作和修改网页代码时总结的经验。
css代码的编写规范
传统的HTML代码本身也是一种容易理解的标记语言。如p标签代表paragraph,就是段落的意思。b标签代表bold,就是粗体的意思。在编写XHTML文档时,使用有意义的标签能让网页源代码易懂易改,并且能防止代码累赘。XHTML中常用的有语义的标签:
标签 |
语义 |
H1-h6 |
标题h1-h6根据重要性依次递减,h1为最重要的标题 |
Ul、ol、dl |
无序列表、有序列表和定义列表 |
Captain、summary |
表格的标题和描述,有利于概括表格的内容 |
Tbody、thead、tfoot |
表格的头部中部和尾部 |
Blockquote、cite |
引用 |
Strong、em |
粗体和斜体 |
Fieldset、legend |
用于嵌套表单 |
使用有语义的标签是符合web标准的首要条件。这样构架XHTML页面才能达到形式与表现的合理化。
尽管XHTML提供了很多有语义的标签,仍然不能满足实际运用的需求。所以需要为不同功能的标签增加类选择器或者ID选择器。在进行页面排版时要为不同功能的标签设置相应的css选择器名称。例如:网页的头部若用一个div标签来嵌套,那么这个div标签的类选择器就应该命名为header。
内容 |
命名 |
内容 |
命名 |
网页头部 |
header |
标志 |
logo |
网页内容 |
Content/containe |
广告 |
banner |
网页尾部 |
footer |
网页主体 |
main |
导航 |
Nav/navigation |
热点 |
hot |
侧栏 |
sidebar |
新闻 |
news |
栏目 |
Col/column |
下载 |
download |
页面外围控制整体布局宽度 |
wrapper |
子导航 |
subnav |
左右中 |
Left right center |
搜索 |
search |
登录框 |
loginbox |
滚动 |
scroll |
友情链接 |
links |
标签页 |
tab |
菜单 |
menu |
子菜单 |
submenu |
提示信息 |
message |
技巧 |
tips |
栏目标题 |
title |
服务 |
service |
注册 |
regsiter |
指南 |
guild |
版权 |
copyright |
列表 |
list |
以上的css命名只是一般常用的命名,在网页制作中会遇到更复杂的元素。例如:文章标题的子标题,命名为subtitle,为了使命名结构更为清晰,常使用驼峰式的命名法,将subtitle写为subTitle.驼峰式的命名方法就是把命名中的第一个单词首字母记为小写,其余单词首字母记为大写。例如:leftcolumnbar用驼峰式命名就是leftColumnBar。
之前有介绍过如何缩写一些css属性代码。以下列出了可以缩写的css属性及其缩写的方式。
可缩写属性 |
缩写前的形式 |
缩写后的形式 |
说明 |
颜色 |
#000000 |
#000 |
16进制的色彩值,如果每两位的值相同,可以缩写一半。 |
字体(font) |
font-style:italic; font-variant:small-caps; font-weight:normal; font-size:14px; line-height:28px; font-family:'宋体'; |
font:italic small-caps normal 14px/28px '宋体' |
缩写字体定义,至少要定义font-size和font-family两个值。 |
列表(list-style) |
list-style-type:square; list-style-position:outside; list-style-image:url(picture.jpg); |
list-style:square outside url(picture.jpg) |
取消默认的圆点和序号的方法:list-style:none |
背景(background) |
background-color:#FFF; background-image:url(picture.jpg); background-repeat:no-repeat; background-attachment:fixed; background-position:center left; |
background:#FFF url(picture.jpg) no-repeat fixed center left; |
语法是background:color image repeat attachment position; |
盒模型 |
margin:5px 5px 5px 5px margin:10px 5px 10px 5px margin:10px 5px 30px 5px margin:1px 2px 3px 4px |
margin:5px; margin:10px 5px; margin:10px 5px 30px; 不能缩写 |
方便的记忆方法是顺时针,上右下左。Property:valueA;表示所有边都是一个值valueA;Property:valueA valueB 表示top和bottom的值是valueA;left和right的值是valueB;Property:valueA valueB valueC;表示top的值是valueA,right和left的值是valueB;bottom的值是valueC;Property:valueA valueB valueC valueD;四个值依次表示top,right,bottom,left |
边框(border) |
border-width:2px; border-style:solid; border-color:#F00 |
border:2px solid #F00 |
Border:width style color |
在制作标准网页的过程中合理使用注释能给文档创建者和修改者提供很大的帮助,文档创建者在编写css文档时可能非常清楚各个代码的意义,但是半年或者一年后再次修改该文档就不会那么清晰了。当别的设计师要修改这个文档,若没有注释的话,修改起来非常困难。常见使用css注释的地方有以下几个:
1、解释某个css样式的作用。这种注释是文档创建者和修改者留下的提示信息,避免后期引起的困惑和麻烦。代码如下:
*{ margin:0px; padding:0px; }/*设置整个网页的边距和补白都为0*/
没有必要为每一个css样式都加上注释,只需要为某些重要的css样式标明注释即可。如用用于布局的css样式就应该添加注释。
2、文档的作者和创建文档的时间。一般在css文件的头部会添加该文件的作者、时间等信息。这些信息对于日后查找文件和修改文件有很大帮助。 /*文档创建者:张明 文档创建时间:2018-7-25 文档关联XHTML页面:index.html*/
3、使用div+css的布局方式制作XHTML页面常会用到不同的区块。在css文档中,最好是将每个区块所有用到的css代码放在一起,然后注释指明其区块名称。例如:网页头部的区块名称为header,则可以把header中用到的css代码集中到一起,然后用注释指明,代码: /*--header--*/ .header { width:150px;background:#ffffff; } .header h2{font-size:14px;} .header p{ line-height:20px;} /*--header--*/ 在header代码块的开始和结束都加上一行注释,指示注释之间的代码都属于网页头部header区块。
注释不要使用特别多,要合理使用注释才能提高效率。注释过多,会使css文件过大,影响载入速度。
新闻资讯
关于我们
浙江网盛生意宝股份有限公司(股票代码:002095,以下简称生意宝)是一家专业从事互联网信息服务、电子商务、专业搜索引擎和企业应用软件开发的高新企业。公司总部位于“电子商务之都”杭州,从化工行业B2B起家,目前已发展成为国内领先的行业电子商务运营商和综合B2B运营商。
联系人:王经理
电话:024-83959235
邮箱:wy@netsun.com