第三章 CSS语法Ø CSS语法非常简单,组成CSS语法的元素只有CSS选择符与CSS属性. Ø 每个CSS选择符由1个或多个CSS属性组成. Ø CSS是大小写敏感的,在CSS语法中推荐使用小写. 第一节：外部引用CSSCSS外部引用使用了外接的CSS文件,一般的浏览器都带有缓存功能,所以用户不用每次都下载此CSS文件.外部引用CSS是最好的引入CSS的方式(可以使代码量最小,表现最统一,也是标准网页设计推荐的). 使用 link 标签引用CSS示例 <head> <link rel="stylesheet" type="text/css" href="http://www.csschina.net/style.css" /> </head> Ø href -- 指定需要加载的资源(CSS文件)的地址URI Ø rel -- 指定链接类型 Ø type -- 包含内容的类型,一般使用type="text/css" 使用 @import 引用CSSØ 示例 <head> <style type="text/css">@import url(http://www.csschina.net/style.css);</style> </head> 相对路径与绝对路径 加载文件的时候可以使用相对路径或者绝对路径. 绝对路径:文件的完整路径,主页上的文件或目录在硬盘上真正的路径. http://www.dreamdu.com/html/default.html就是绝对路径,/html/default.html也是绝对路径,C:winntsystem.sys也是绝对路径 相对路径:相对于我们查看文档的路径. ../default.html或者default.html或者../../default.html都是相对路径 Ø 小结 外部引用CSS中 link与@import的区别 差别1：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。 差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。 差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。 差别4：使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。 第二节：内部引用CSSØ 示例 <style type="text/css"> /* ----------文字样式开始---------- */ /* 梦之都白色12象素文字 */ .dreamduwhite12px { color:white; font-size:12px; } /* 梦之都黑色16象素文字 */ .dreamdublack16px { color:black; font-size:16px; } /* ----------文字样式结束---------- */ </style> 注意:style标签应该在head标签内部. 第三节：内联引用CSS内联引用可以把CSS样式直接作用在XHTML标签中. Ø 示例 <p style="font-size: 10px; color: #FFFFFF;"> 使用CSS内联引用表现段落. </p> 第四节：CSS 选择符 -- CSS的名字CSS选择符就是CSS样式的名字,当在XHTML文档中表现一个CSS样式的时候,就要用到一个CSS.怎么用呢?这时就通过CSS选择符(CSS的名字)来指定此XHTML标签使用此CSS样式. 选择符语法选择符名字 { 声明; } 一个CSS选择符就定义了一个样式 比如下面这三个例子 p{font-size:12px;} .dreamdublue{color:blue;} #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 声明CSS声明是由"属性","冒号(:)","属性值"和"分号(;)"组成的. 语法属性:属性值; Ø 示例 font-size:12px; font-size代表字体大小. 12px字体大小的值. 介绍两个常用的技巧Ø 1,选择符的名字一样,声明是可以组合的 例如： 选择符名字{声明1;声明2; } div { color:black; font-size:12px; } Ø 2,明全部一样,选择符的名字也可以组合 例如： 选择符名字1,选择符名字2,选择符名字3{声明1;声明2;} .dreamdudivwhite12px,h1,div { color:white; font-size:12px; } h1, p, div { border:1px solid black; } 第六节：CSS 注释就像HTML教程中描述的一样,在CSS文档中注释也起到很重要的作用,可以帮助我们记起CSS的含义,加载在HTML文档的位置等. CSS注释的开始使用/*,结束使用*/ 语法/* 注释内容 */ 示例/* ----------文字样式开始---------- */ /* 梦之都白色12象素文字 */ .dreamduwhite12px { color:white; font-size:12px; } /* 梦之都黑色16象素文字 */ .dreamdublack16px { color:black; font-size:16px; } /* ----------文字样式结束---------- */ 来源CSS中国 www.csschina.net | |||||||||||||||