CSS规范

今天药忘吃喽~ 2022-08-07 03:39 130阅读 0赞

CSS编码规范是指比较通用的CSS书写方法。书写方法堆样式本身并没有影响。按照CSS编码规范来书写CSS，会使代码更加便于阅读。使用基本相同的CSS编码规范书写CSS，可以方便其他人的使用。

## **一、CSS基本书写规范** ##

CSS基本书写规范包括3个方面：基本书写顺序和序号、书写方式和注解。

**基本书写顺序**

在使用CSS的时候，首先，建议使用调用的CSS，而不是把CSS写在HTML或XHTML文档里面。其次，建议先书写类型选择符和重复使用的样式，然后是伪类，最后是自定义的选择符。除了重复使用的选择符，其他选择符按照使用的先后书写，这样便于修改时寻找。

**书写方式**

在不违反语法的前提下，使用任何的书写方式都能正确执行。这里只是建议使用一种书写方法。就是在书写每一个属性的时候，使用换行并使用相同的缩进。一个CSS的书写示例如下：

body\{width:120px;  
　　height:120px;  
　　background-color:\#777777;  
　　color:\#000000;\}

另外，在书写的时候要注意：

*  CSS中所有的长度值都要注明单位，当值是0时除外。
 *    
    
 *  所有使用十六进制的颜色单位都要在颜色值前加“\#”号。
 *    
    
 *  body元素要设置background-color属性（保持浏览器的兼容）。

**注释**

注释的语法如下：

在CSS中，合理的使用注释，可以使代码更加清晰易懂，便于自己修改和其他人的使用。

## **二、CSS命名参考** ##

在制作一个网页时，要使用大量自定义的类选择符和ID选择符。如果没有很好的命名规则，可能导致命名的重复。而且当某个效果不能正常显示时，寻找相应的CSS代码，会变得相当麻烦。下面从几个方面来讲解CSS命名参考。

**结构化的命名方法**

通常的想法是，用表现效果进行自定义命名。例如，一个元素处于页面的左侧时，就用left来为其命名。这样的命名看起来非常的直观、简便，但这 不是推荐的命名方法。其原因在于，标准布局的本质就是实现结构和表现分离，这样的命名方法并不能达到这种效果。采用结构化的命名方法，不论内容放在什么位 置，其命名同样有意义。同时，方便页面中的相同结构，重复使用样式。

**部分内容的习惯命名方法**

<table style="margin:0px; padding:0px; color:rgb(73,73,73); font-family:simsun; font-size:14px"> 
 <tbody> 
 <tr> 
 <td colspan="2" align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> CSS命名方法</td> 
 </tr> 
 <tr> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 结构</td> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 名称</td> 
 </tr> 
 <tr> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 主导航</td> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> mainnav</td> 
 </tr> 
 <tr> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 子导航</td> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> subnav</td> 
 </tr> 
 <tr> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 页脚</td> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> footet</td> 
 </tr> 
 <tr> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 内容</td> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> content</td> 
 </tr> 
 <tr> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 头部</td> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> header</td> 
 </tr> 
 <tr> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 底部</td> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> footer</td> 
 </tr> 
 <tr> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 商标</td> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> label</td> 
 </tr> 
 <tr> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 标题</td> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> title</td> 
 </tr> 
 <tr> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 顶导航</td> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> topnav</td> 
 </tr> 
 <tr> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 侧栏</td> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> sidebar</td> 
 </tr> 
 <tr> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 左侧栏</td> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> leftsidebar</td> 
 </tr> 
 <tr> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 右侧栏</td> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> rightsidebar</td> 
 </tr> 
 <tr> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 标志</td> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> logo</td> 
 </tr> 
 <tr> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 标语</td> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> banner</td> 
 </tr> 
 <tr> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 子菜单</td> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> submenu</td> 
 </tr> 
 <tr> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> 注释</td> 
 <td align="center" style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> note</td> 
 </tr> 
 </tbody> 
</table>

因为页面中的细节内容不同，所以没有合适所有页面的详细命名规范。总之命名只要合乎Web标准种结构和表现分离的思想，做到合理易用就可以。

## **三、CSS样式表书写顺序** ##

CSS样式表书写顺序如下：

*  显示属性：display、list-style、position、float、clear
 *    
    
 *  自身属性：width、height、margin、padding、border、background
 *    
    
 *  文本属性：color、font、text-decoration、text-align、vertical-align、white-space、other text、content

以上是比较常用的推荐写法。