CSS代码规范.docxVIP

CSS代码规范目录CSS代码规范11w3c规范12编码13调用方法14CSS样式规则选择器25CSS样式表36CSS文件名定义37CSS命名48字号59表格510空格511缩进512行距513字体设置614浏览器兼容615示例61 w3c规范网页必须调用w3c规范(解释: DTD是词汇表, CSS是数据的表现形式)2 编码目前网页主要使用charset=gb2312 和charset=utf-8 ; 解释: 如果网页格式是utf-8 ,最简单的方法就是在写样式表之前将这个css文件用记事本打开,然后另存为utf-8格式。当格式是utf-8格式时，在css文件内容顶部加上“charset utf-8;”标识3 调用方法3.1 方法1 每个页面调用全局css和这个页面用单独用到的css 3.1.1 说明： rel=stylesheet和 rev=stylesheet 为设置或获取对象和链接目的的关系。用来告诉浏览器你link进来的是个样式表文件，（只写一个就可以了,由于目前的CSS还不能抓取rel与rev的属性值，所以没有办法给不同关系的链接提供不同的样式，所以现在rel与rev只是用来使得网页的语义性更为完善。） media=all 所有媒体类型的样式;media=screen设置显示器的样式;media= print设置打印的样式。3.2 方法23.2.1 将整个项目的css 都先用common.css引用,这样每个页面只需调用common.css即可 (解释: common.css 写法 : import url(style.css); import url(header.css); 依次排列。注:import引用的CSS会等到页面全部被下载完再被加载,速度相对会较慢。)4 CSS样式规则选择器4.1 HTML selector以html 的标签为选择器，只对某一个标签起作用，如：p color:red 本网页的所有 内的字体都默认层红色。4.2 Class selector4.2.1 以html 的标签开头，只能在这个标签内调用才会起作用如：p.stop color:red 这样只有在p标签内调用stop才会有用， 内容为红色4.2.2 所有html 的标签调用都有效的样式如：.stop color:red这样内容为红色或内容也为红色4.3 ID selectorID属性是用来定义某一特定的HTML元素，一个网页文件中只能有一个元素能使用某一ID属性值。#stop color:red调用方法内容也为红色(注释: 由于ID 只能为单个 HTML 标签元素定义样式规则，因此具有一定的局限性，在css中应该尽量少用。Javascript可以根据这个ID值来操纵和定位这个特定的HTML标签，所以 ID 属性在Javascript会被广泛应用。)4.4 关联选择器关联选择器是用空格隔开的两个或者更多的单一选择器所组成的字符串。如：例子：P em background:red 其中”p em”就是关联选择器，他它表示段落中的强调文本（标签中的内容）背景为红色。而其它地方的强调文本不受影响。注释:：关联选择器中定义的样式的优先权比单一选择器中定义的样式的优先权要高。 即使在：P em background:red 的后面又定义一个em background:yellow ,但是在标签内的强调文本背景依然是红色4.5 组合选择器例子：ul,li,tr,td,p,input color:red 4.6 伪元素选择器常用举例：A:link 超链接时的状态A:visited 访问过的超链接状态A:hover 光标移动到超链接时的状态A:active 鼠标点击时一刹那的状态P:first-line 段落第一行的文本P:first-letter段落第一个字母5 CSS样式表5.1 id和class命名采用小写字母，遇到英文单词或组合命名时，用底线符号“_”，如:new_release（最新产品/new+Release) 联结；5.2 尽量使用真对定义区域有意义的英文命名原则 如：定义一个区域文字颜色为红色的样式 .car-color color:#f00最好不要定义成 .car-red color:#f00，应为前者维护较为方便；5.3 尽量不缩写，除非一看就明白或特别长的单词 ；5.4 样式名由字母、数字、下滑线。（不能以数字开头）；5.5 在页面顶端加如文档注释, 在样式区域对各模块加上注释说明.charset “utf-8”;/*-说明：作者：-*/6 CSS文件名定义6.1 全局样式对应的是整个网站的样式表，内涵网站的整体风格。全局样式对应的文件名应style.css。6.2 功能样式对应为网站上的某个具体功能，比如所有频道页首页采用的焦点图样式和选项卡等，功能样式对应的文件名应css.css。6.3 局部样式应放置在和页面名称相同的css文件中，比如index.htm页面的样式应放置在index.css、news.css、carinfo.css、header.css 、footer.css文件中。6.3.1 页面css分为三个主区 header.css main.css footer.css(顶部、中部、底部) (解释：网站一般情况下header和footer为固定,这样main.css按实际情况替换成相应的页面名，如 news_main.css carinfo_mian.css )6.3.2 建议：Css的样试命名的前缀与其文件名相同(解释：news.css文件中定义的样试名称应该已news开头，如：news_left、.newsleft_content、.news_nav。这样可以避免样式名称的重名。）7 CSS命名 (未注明不可用ID定义 , 如遇特殊情况可自定义)CSS名称说明.header (可用ID定义)页头部分.main (可用ID定义)页面主体 .footer (可用ID定义)页脚部分.container容器.menu 菜单 .submenu 子菜单 .column栏目.title标题.content 内容部分 .nav 导航 .subNav二级导航.icon小图标.tag 标签 .tab选项卡.list文章列表.note注释.hot热点.download下载.msg或 .message 提示信息 .tips 小技巧 .vote 投票 .friendlink 友情连接 .summary 摘要 .search 搜索 .btn按钮.copyright 版权信息 .branding 商标 .brandingLogo LOGO .banner广告.siteinfo 网站信息 .siteinfoLegal 法律声明 .joinus 加入我们 .partner 合作伙伴 .service 服务 .regsiter 注册 .login登陆.status 状态 8 字号为保证不同浏览器上字号保持一致，字号用点数pt和像素px来定义。（注：中文宋体的9pt和11pt和中文宋体12px 和14.7px 这是经过优化的字号建议考虑，另外黑体字或者宋体字加粗时，建议选用11pt和14.7px 的字号比较合适。）9 表格建议：用百分比控制表格，并利用css的从属关系控制表格解释：这里定义一个样式为div ，控制这个区域的表格为 .div tablewidth:100%; border-collapse:collapse;.div td height:20px; text-align:center; border:solid #000000 1px;10 空格10.1 不要在网页中连续出现多于一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码）。10.2 转意符号 ，也要尽量少使用，火狐和IE效果不一样（解决：空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。）11 缩进排版中遇到需要进行首行缩进的时候，处理做法是在样式表中定义 p text-indent: 2em; 然后给每一段加上 标记。注意，不要省略 结束标记 。12 行距行距建议用百分比来定义，通常为120%或150%。13 字体设置禁止在页面中出现 标记，需要对字体设计时可使用标签的style属性或直接在样式表中实现。14 浏览器兼容制作的代码应对以下浏览器兼容：IE6 IE7 firefox2.0在不同的浏览器中界面显示一致，不能出现错位及效果不一的结果。15 示例* margin:0; padding:0;body font-family:宋体,arial; font-size:12px; background:#fff; color:#000; img,a img border:0px;a img vertical-align:middle;div,form,img,ul,li,dl,dt,ddpadding:0px; margin:0px; td,p,div,li,select,input,textareafont-family:宋体;font-size:12px;td,p,div,li,input,textarea word-break:break-all; /*强行换行*/select,inputvertical-align:middle;table,tr,td,th font-size:12px;ol,lilist-style-type:none;ul,lilist-style-type:none; /*ul,liLIST-STYLE: none;*/h1,h2,h3,h4,h5,h6 padding:0px; margin:0px;/*火狐 IE的单独识别定义方法举例*/.css2007 color: #333; /* Moz */* html .css2007 color: #00ffff; /* IE6 */*+html .css2007 color: #999; /* IE7 */*链接颜色*/a:link color:#000000; text-decoration: none; /* 未访问的链接 */a:visitedcolor:#000000; text-decoration: none; /* 已访问的链接 */a:hovercolor:#ff0000; text-decoration: underline; /* 鼠标放上去的链接 */a:active color:#999999; text-decoration: n