CSS样式编写规范.doc

网页文件的结构：其中在网页中显示的部分都放在body中，不在网页中显示的部分都放在head中。其中常放在head中的标签有：title、link、meta、baseCSS类型：内联式：就是直接在html标签后面写样式代码，如： 啊啊啊啊 嵌入式：就是对本文件内所有的该类型的标签名运用这样的样式，但该样式的标签要放在head中，如： Pfont-size:50px;color:red;text-deceration:line这样的话，该文件中的所有P标签都将应用该style样式，而不需要在没一个html标签中写。注：1、通常都要在样式的style标签下一层放一对html的注释标签，这是为了防止不支持CSS样式的浏览器不执行，或不显示其中的代码；而对于支持样式的浏览器，则可以正确识别style标签，而使得注释标签不起作用。 2、在syle标签内还可以写style本身的一些属性，如type=”text/css”等。 外部样式表：虽然嵌入式样式表解决了同一个文件内使用同样样式的多个标签的代码重用，但在一个网站内往往是有很多个文件组成的，如果这些独立的网页文件要使用统一的风格，显然嵌入式样式表仍然不能很好地实现代码的重用。这时就需要使用外部样式表了。一般使用外部样式表时都是在网站的根目录下建一个单独的样式文件夹，命名为style，然后再在style文件夹内建立后缀名为css的文本文件。在使用时，在引用该样式表的网页文件内的head标签中使用link标签来引入，如：Rel：指明连接的是什么文件；Type：指明引入的文件的格式类型；Href：指明文件的路径，以引入文件为基准的相对路径。注：引入文件内的样式的具体运用仍然和嵌入式的应用原理一样，即：根据样式内容的标签名来运用，如嵌入式的p。 输入式样式表：指样式，CSS文件之间的代码共享的一种代码重用方式。即使用import把一个css文件的代码引入到另一个css样式文件内。如：其中url是用来指明被引入的文件的位置，这里是在同一个文件夹内。注：输入式样式表可以进一步细分样式模块，每个模块单独成文件，当需要对某个网页文件应用样式时，通过使用输入代码把需要的模块代码引入到一个样式文件中，再把这个集成的样式文件使用link标签引入到引用文件中。真正实现了word中的文本样式的组织形式。同时，输入式样式表还可以输入到嵌入式样式表中的style标签内的内。 标签选择器:标签选择器就是嵌入式样式表中的样式代码前的字符，即：用于进行判断具体使用哪段样式代码的基准字符。共有以下几类: HTML selector：就是直接使用html标签做选择器；注：HTML标签选择器严格对应网页文件中的html标签，就是应用且只应用对应的html标签。这样就有一个缺陷，就是相同的标签要想实现不同的样式就很麻烦，于是可以在html标签后面加赠一个扩展名，在引用时只需在相同的html表前后加上：class=html标签选择器的扩展名，（class本来就是html标签的一个属性）从而实现了相同标签的个性化。同时还有另一个问题，就是不同的标签要想使用同样的样式也不能实现。这个解决办法就是，去掉选择器的标签名，只保留扩展名，这样一来，不管是相同的标签要实现个性化，还是不同的标签要使用同样的样式，只需要在自己后面加一个class属性就可以了，这就是以“.”开头的类选择器。 Class（类）selector：以点号开头的选择器，可以看作是省略了标签名的html选择器。 ID selector：在同一个网页文件内，同样的标签或不同的标签的ID值是不能相同的，ID对应一个特定的html标签元素。根据这一特点，可以利用html标签的ID来用作样式的选择基准。在编写ID selector的样式时，只需把类选择器中的点号改成井号#就可以了，即凡是以#开头的选择器命名的样式文件都会根据HTML标签的ID值进行对应。注：不难看出，ID选择器只能为该网页文件内的一个标签所用。而类选择器则可以被多次使用。可据此选用不同的选择器类型。 关联选择器：是专门针对html标签可以嵌套的规则制定的样式规则。也就是说，构成样式选择器的标签字符是从左到右的多个html标签，标签之间用空格隔开。这时，样式的代码将应用于与此嵌套绝对符合的html标签中的内容。如:Center div p . 只能应用于但样式选择器的规则显然不仅仅局限于html的规则，在样式选择器的嵌套规则中，html标签、类选择器标签、ID选择器标签可以混杂嵌套，当然他们的应用也是要绝对对应于这样的嵌套顺序的内容。 组合选择器：如果说关联选择器是严格对应嵌套的话，那么组合选择器则是恰恰相反，他是把多个标签选择器字符（html的、ID的、累的等）并列放在一起做选择器字符，各个字符之间用逗号隔开，则样式规则代码可以应用于包含在组合选择器标签字符内的任何单个标签元素。如：Center, div, p . 可应用于. 伪元素选择器： 是指应用于同一个标签的不同状态的选择器字符。如连接的a标签，p标签等。其写法是：标签名:状态名。如：a:linka:hovera:visited当然，伪元素选择器不是每个html标签都能用的，只能应用于有多种状态的标签上。当然也可以与组合选择器和类选择器连用。如：a.one:linka.two:hovercenter div a:visited 网页布局：网页中的点、线、面都可以使用di