CSS代码规范.docxVIP

CSS代码规范目录CSS代码规范11w3c规范12编码13调用方法14CSS样式规则选择器25CSS样式表36CSS文件名定义37CSS命名48字号59表格510空格511缩进512行距513字体设置614浏览器兼容615示例6w3c规范网页必须调用w3c规范!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=/1999/xhtml(解释: DTD是词汇表, CSS是数据的表现形式)编码目前网页主要使用charset=gb2312 和charset=utf-8 ; 解释: 如果网页格式是utf-8 ,最简单的方法就是在写样式表之前将这个css文件用记事本打开,然后另存为utf-8格式。当格式是utf-8格式时，在css文件内容顶部加上“@charset utf-8;”标识调用方法方法1 link rel=stylesheet rev=stylesheet href=css/52css_page.css type=text/css media=all /每个页面调用全局css和这个页面用单独用到的css 说明：rel=stylesheet和 rev=stylesheet 为设置或获取对象和链接目的的关系。用来告诉浏览器你link进来的是个样式表文件，（只写一个就可以了,由于目前的CSS还不能抓取rel与rev的属性值，所以没有办法给不同关系的链接提供不同的样式，所以现在rel与rev只是用来使得网页的语义性更为完善。）media=all 所有媒体类型的样式;media=screen设置显示器的样式;media= print设置打印的样式。方法2link rel=stylesheet rev=stylesheet href=css/common.css type=text/css media=all /将整个项目的css 都先用common.css引用,这样每个页面只需调用common.css即可 (解释: common.css 写法 : @import url(style.css); @import url(header.css); 依次排列。注:@import引用的CSS会等到页面全部被下载完再被加载,速度相对会较慢。)CSS样式规则选择器HTML selector以html 的标签为选择器，只对某一个标签起作用，如：p {color:red} 本网页的所有 p/p内的字体都默认层红色。Class selector以html 的标签开头，只能在这个标签内调用才会起作用如：stylep.stop {color:red}/style 这样只有在p标签内调用stop才会有用， p class=”stop”内容为红色/p所有html 的标签调用都有效的样式如：style.stop {color:red}/style这样p class=”stop”内容为红色/p或h1 class=”stop”内容也为红色/h1ID selectorID属性是用来定义某一特定的HTML元素，一个网页文件中只能有一个元素能使用某一ID属性值。style#stop {color:red}/style调用方法h1 id=”stop”内容也为红色/h1(注释: 由于ID 只能为单个 HTML 标签元素定义样式规则，因此具有一定的局限性，在css中应该尽量少用。Javascript可以根据这个ID值来操纵和定位这个特定的HTML标签，所以 ID 属性在Javascript会被广泛应用。)关联选择器关联选择器是用空格隔开的两个或者更多的单一选择器所组成的字符串。如：例子：P em{ background:red } 其中”p em”就是关联选择器，他它表示段落中的强调文本（标签em/em中的内容）背景为红色。而其它地方的强调文本不受影响。注释:：关联选择器中定义的样式的优先权比单一选择器中定义的样式的优先权要高。 即使在：P em{ background:red } 的后面又定义一个em{ background:yellow },但是在em标签内的强调文本背景依然是红色组合选择器例子：ul,li,tr,td,p,input{ color:red }伪元素选择器常用举例：A:link超链接时的状态A:visited 访问过的超链接状态A:hover光标移动到超链接时的状态A:active 鼠标点击时一刹那的状态P:first-line 段落第一行的文本P:first-letter段落第一个字母CSS样式表id和class命名采用小写字母，遇到英文单词或组合命名时，用底线符号“_”，如:new_r