css使用方法.docVIP

CSS使用说明文档 文件类型: 培训文档 编写时间: 2009.7.17 编写人员: 变更记录 变更日期 变更内容 　变更章节 提出人 确认人 变更人 编写目的 介绍css的使用方法，使大家对css样式表有个深入的理解。可做为css部分培训学习的文档试用。 名词解释 css：又叫即层叠样式表 布局与美化网页的 CSS语法及示例 css即层叠样式表 布局与美化网页的 CSS语法非常简单,组成CSS语法的元素只有CSS选择符与CSS属性. 每个CSS选择符由1个或多个CSS属性组成. CSS是大小写不敏感的,在CSS语法中推荐使用小写. head link rel=stylesheet type=text/css href=/style.css / /head head style type=text/css@import url(/style.css);/style /head 2.内部引用CSS 可以使用style标签直接把CSS文件中的内容加载到HTML文档内部. 示例 style type=text/css![CDATA[ /* ----------文字样式开始---------- */ /* 梦之都白色12象素文字 */ .dreamduwhite12px { color:white; font-size:12px; } /* 梦之都黑色16象素文字 */ .dreamdublack16px { color:black; font-size:16px; } /* ----------文字样式结束---------- */ ]]/style 内联引用可以把CSS样式直接作用在HTML标签中. 示例 p style=font-size: 10px; color: #FFFFFF; 使用CSS内联引用表现段落. /p CSS选择符就是CSS样式的名字,当在HTML文档中表现一个CSS样式的时候,就要用到一个CSS.怎么用呢?这时就通过CSS选择符(CSS的名字)来指定此HTML标签使用此CSS样式. 选择符语法 选择符名字 { 声明; } 一个CSS选择符就定义了一个样式 比如下面这三个例子 p { font-size:12px; } .dreamdublue { color:blue; } .dreamdu18px { font-size:18px; } #dreamdured { color:red; } dreamdublue和dreamdured都是CSS的选择符,也就是CSS的名字. 选择符取名规则 CSS选择符可以使用英文字母的大写与小写,数字,连字号,下划线,冒号,句号. 英文字母大写与小写 A-Z a-z 数字 0-9 连字号 - 下划线 _ 冒号 : 句号 . 提示: CSS选择符只能以字母开头. 常用的三种选择符 xhtml标签选择符,比如 p标签选择符(代表所有的段落都使用这个CSS样式),比如 p{font-size:12px;} id选择符,唯一性选择符,比如 #dreamdured{color:red;},就是在名字前增加了一个#,id选择符在一个页面中只能出现一次,在整个网站中也最好出现一次(这样有利于程序员控制此元素,有多个一样名称的元素,就无法分开不好控制了). class选择符,多重选择符,比如.dreamdublue{color:blue;},就是在名字前增加了一个.,class选择符在一个页面中可以出现多次(注意下面的示例中class选择符的用法). 示例 p梦之都xhtml标签选择符/p p id=dreamdured梦之都id选择符/p p class=dreamdublue梦之都class选择符/p p class=dreamdublue dreamdu18px梦之都class选择符2,出现了多次./p 一个p元素使用了两个class选择符,他们之间用空格分开,而且class选择符可以在一个页面出现多次. CSS声明是由属性,冒号(:),属性值和分号(;)组成的. 语法:属性:属性值; 示例 font-size:12px; font-size代表字体大小. 12px字体大小的值. 下面介绍两个常用的技巧 1,选择符的名字一样,声明是可以组合的 例如: 选择符名字 { 声明1; } 选择符名字 { 声明2; } 选择符名字 { 声明3; } 可以组合为: 选择符名字 { 声明1; 声明2; 声明3; } 示例 div { color:black; } div { font-size:12px; } 与下面的是等价