企业官网建设 营销型网站 微信分销系统 微信小程序 企业邮局

了解css技术基础之css代码的编写规范

一般网站都包含大量的源代码,运用div+css的页面排版方式,制作出语义明确、结构清晰的网页还需要遵循编写css代码的规范。

css代码的编写规范
INTRODUCTION导 语

一个大型网站的每个网页都包含大量的源代码。以往设计师使用表格来进行页面布局,使网站的源代码更加繁琐,此时要对一个使用表格排版的大型网站进行修改是非常困难的。自从出现了div+css的页面排版方式后,网页的源代码量就大大减少了。但是要制作出语义明确、结构清晰的网页还需要遵循编写css代码的规范。Css代码的规范并不是一些明文细则,而是网页设计者在制作和修改网页代码时总结的经验。

css代码的编写规范

01
使用语义,明确的标记

传统的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页面才能达到形式与表现的合理化。

02
使用有意义的css命名

尽管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。

03
css代码的缩写

之前有介绍过如何缩写一些css属性代码。以下列出了可以缩写的css属性及其缩写的方式。

可缩写属性

缩写前的形式

缩写后的形式

说明

颜色

#000000
     #224499

#000
     #249

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


04
合理的css注释

在制作标准网页的过程中合理使用注释能给文档创建者和修改者提供很大的帮助,文档创建者在编写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文件过大,影响载入速度。

相关专题

了解css技术基础之用css控制样式

CSS有助于实现负责任的Web设计,CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

01

了解css技术基础之css设置背景

CSS提供了控制背景颜色和背景图片的多个属性,用于产生表现丰富的网页背景。这样能使单调的页面变得丰富多彩。

02

了解css技术基础之css设置图片的样式

图片在网页设计中占据相当重要的位置。使用css样式可以设置图片的大小和边框等属性。恰当的使用css其他属性和配合页面排布也能创造出很精美的图片效果。

03

了解css技术基础之css控制文本样式

在网页中包含大量的文字信息,统称为文本。文本的样式由文字样式和段落样式构成。css提供了丰富的属性来控制文字样式和段落样式。

04



新闻资讯


关于我们


浙江网盛生意宝股份有限公司(股票代码:002095,以下简称生意宝)是一家专业从事互联网信息服务、电子商务、专业搜索引擎和企业应用软件开发的高新企业。公司总部位于“电子商务之都”杭州,从化工行业B2B起家,目前已发展成为国内领先的行业电子商务运营商和综合B2B运营商。
联系人:王经理
电话:024-83959235
邮箱:wy@netsun.com


浙江网盛生意宝股份有限公司 版权所有 浙ICP证 浙B2-20080131