文档库 最新最全的文档下载
当前位置:文档库 › CSS样式文件编写规范

CSS样式文件编写规范

CSS样式文件编写规范
CSS样式文件编写规范

网页文件的结构:

其中在网页中显示的部分都放在body中,不在网页中显示的部分都放在head中。

其中常放在head中的标签有:title、link、meta、base

CSS类型:

内联式:就是直接在html标签后面写样式代码,如:

啊啊啊啊

嵌入式:就是对本文件内所有的该类型的标签名运用这样的样式,但该样式的标签要放在head中,如:

这样的话,该文件中的所有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:link{}

a:hover{}

a:visited{}

当然,伪元素选择器不是每个html标签都能用的,只能应用于有多种状态的标签上。当然也可以与组合选择器和类选择器连用。如:

a.one:link{}

a.two:hover{}

center div a:visited{}

网页布局:

网页中的点、线、面都可以使用div标签做出来。

网站的菜单来使用列表做出来的,即列表不是只能竖排列的。

浮动的清楚属性可能会冲突而导致页面布局紊乱。

页面内的各模块的尺寸不对也会导致页面布局紊乱。

选项卡的制作:

就是用一个包含if语句的循环来配置各个选项卡的css显示样式。

常用CSS样式属性CSS样式表

常用CSS样式属性|CSS 样式表 【长度单位】 【颜色表示】 CSS可用颜色表示方式 表示方式表示方式说明范例 #rrggbb 可以用Windows色彩选择工具找到color:#feefc7 rgb( #,#,#) 用数字来表示红色蓝色以及绿色的混合色 彩选择工具找...也可以用Windows color:rgb(135,255,1 24) rgb(%,%,%) 用百分比来代表红色蓝色以及绿色的强度来混合颜色color:rgb(70%,35%,4 1%) 颜色名称用颜色的名称来指定颜色color:brown

【属性可用值】 CSS 可用属性值 名称 说明 可能值 范例 visibility 显示或是隐藏 inherit ( 父组件决定) hidden (隐藏) visible ( 显示) visibili ty:hidde n width 宽度 auto (自动决定) 数字 width:13 5 height 高度 auto (自动决定) 数字 height:1 00 z-index Z 轴高度(立体,是否在 另一个组件之上) auto (自动决定) 数字 z-index: 135 position 定位方式 absolute (绝对寻址-依窗口坐标,原点为父窗口左上角 ) relative (相对定位-以一般网页排列[后再根据坐标定位, 原点为定位后的位置) static (静态定位-以一般网页排列) position :absolut e top (对象的position 属 性须为absolute 或 relative ) 对象的Y 坐标(原点根 据postion 属性有所不 同) 数字 left (对象的 position 属性须为absolute 或 relative ) 对象的X 坐标(原点根 据postion 属性有所不 同) 数字

css样式表基础

层叠样式表(CSS) “层叠样式表”(Cascading Style Sheets,缩写为CSS)是由W3C协会所制定,主要的用途是定义网页数据的编排、显示、格式化及特殊效果,因为HTML提供的

等控制标记虽然可以将数据格式化,但能做到的格式化有限,而CSS正好弥补了这个不足。 CSS属于较新技术,故IE3.0版本以上支持,Netscapt Navigator 4.0版以上支持。此外,不同浏览器显示的结果可能有不同。 一、如何链接HTML文件与层叠样式表 它有4种方法: ●在HTML文件的区块嵌入层叠样式表的定义。 ●将层叠样式表定义在单独的文本文件,然后将之导入或链接至 HTML文件。 ●在HTML文件的标签属性style中加入样式定义 ●在HTML文件中套用样式类别。 1.在HTML文件的区块嵌入层叠样式表的定义 无标题文档 2.将层叠样式表导入或链接至HTML文件 只有IE浏览器支持。先看下面导入样式表: 样式表2 将样式表定义在独立的文本文件body.css中,然后嵌入HTML文件。这个样式表所定义的字体为宋体、大小为30点、颜色为Blue。 其BODY.CSS文件内容: BODY { font-family: "宋体"; font-size=30; color:blue } 再看链接样式表: 样式表3 将样式表定义在独立的文本文件body.css中,然后链接至HTML 文件。这个样式表所定义的字体为宋体、大小为30点、颜色为Blue。 3.在HTML文件中套用样式类别 您也可以在样式表文件中定义不同的样式类别(Style Class),然后在HTML文件中套用不同的样式类别。 样式表4 … * *最好加注释标记于样式表前后。 3、导入CSS样式表 * *比外部链接优先,总是读取。 4、行内CSS样式 <…style=”…”> *Head部分最好加 5、脚本引用 CSS属性名称删掉连字符,并将其后第一个字母大写,例如font-family fontFamily 以上可混合使用。 6、SPAN与DIV标记 SPAN无结构意义,纯粹为样式服务 DIV是块元素,会引入行分隔。 7、可以使用Style属性的HTML选择器