标题: CSS基础
作者: admin
日期: 2006-07-25 09:55 AM
分类: HTML/CSS
内容: 一、什么是CSS?(CSS简介)
Cascading Style Sheet (层叠样式表),是W3C(The World Wide Web Consortium)组织新近批准的一个辅助HTML设计的新特性,能够保持整个HTML的外观.
二、使用CSS的优点
(1) 保持视觉的一致性
(2) 缩短更新和维护时间
(3) 节省带宽加速网页加载
(4) 增强交互性
(5) 减少服务器和带宽的费用,以节约资源
(6) 更好地被搜索引擎找到
(7) 避免表格的多层布局,精简代码,提高访问能力
(8) 对残疾人(读屏器的访问者)和使用手机或 PDA 的 Web 浏览者更具亲和力
三、CSS类型
(1)class:(类)可应用于任何标签,选择符以.开头
例如: .aaa{font-size:9pt}
使用: <span class="aaa">木子屋</span>
(2)Tag:(标签)重新定义特定标签的外观,选择符为HTML标签
例如: p{font-size:9pt}
使用: <p>木子屋</p>
(3)Advanced:(高级)ID、上下文选择器,选择符以#开头
例如: #aaa{font-size:9pt}
使用: <span id="aaa">木子屋</span>
注意：此类型局限性很大,只能单独定义某个元素的样式,一般只在特殊情况下使用.
四、基本语法
语法：选择符 {属性：值} | selector {property: value}
注释：/* */
1.选择符类型
(1)类选择符:以.开头
(2)标签选择符:不以.或#开头,为HTML标签
(3)ID选择符:以#开头
2.选择符组：
可以把相同属性和值的选择符组合起来书写,用逗号将选择符分开,这样可以减少样式重复定义：
选择符1,选择符2,选择符3 {属性1:值1;属性2:值2;属性3:值3}
h1,h2,h3,h4,h5,h6 {color:green}
p,table{font-size:9pt}
3.包含选择符
元素1里包含元素2,这种方式只对在元素1里的元素2定义,对单独的元素1或元素2无定义,例如:
table a
{
font-size: 12px
}
说明:在表格内的链接改变了样式,文字大小为12象素,而表格外的链接的文字仍为默认大小.
4.多个属性
当有多个属性的时候,必须在两个属性之间用";"来分隔:
p { color:red; text-align: center;font-family:arial}
便于阅读,通常采用分行的书写格式,最后一个也要加上":"
body {
margin: 0px;
padding: 0px;
border: 0px;
}
5.样式表的层叠性
所有在元素中嵌套的元素都会继承外层元素指定的属性值,当样式表继承遇到冲突时,总是以最后定义的样式为准.(如：在body里定义的font-family与td里定义的font-family)
五、伪类
伪类可以看做是一种特殊的类选择符,是能被支持CSS的浏览器自动所识别的特殊选择符.它的最大的用处就是可以对链接在不同状态下定义不同的样式效果.
1.语法
伪类的语法是在原有的语法里加上一个伪类(pseudo-class)：
选择符:伪类 {属性: 值} | selector:pseudo-class {property: value}
类选择符及其他选择符也同样可以和伪类混用：
选择符.类:伪类 {属性: 值} | selector.class:pseudo-class {property: value}
伪类和类不同,是CSS已经定义好的,不能象类选择符一样随意用别的名字,根据上面的语法可以解释为对象(选择符)在某个特殊状态下(伪类)的样式.
2. 锚的伪类
我们最常用的是4种a(锚)元素的伪类,它表示动态链接在4种不同的状态：link、visited、active、hover(未访问的链接、已访问的链接、激活链接和鼠标停留在链接上).我们把它们分别定义不同的效果：
a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */
(上面这个例子中,这个链接未访问时的颜色是红色并无下划线,访问后是绿色并无下划线,激活链接时为蓝色并有下划线,鼠标在链接上时为紫色并有下划线)
注意：有时这个链接访问前鼠标指向链接时有效果,而链接访问后鼠标再次指向链接时却无效果了.这是因为你把a:hover放在了a:visited的前面,这样的话由于后面的优先级高,当访问链接后就忽略了a:hover的效果.所以根据叠层顺序,我们在定义这些链接样式时,一定要按照a:link, a:visited, a:hover, a:actived的顺序书写.
3. 伪类和类选择符
将伪类和类组合起来用,就可以在同一个页面中做几组不同的链接效果了,例如,我们定义一组链接为红色,访问后为蓝色；另一组为绿色,访问后为黄色：
a.red:link {color: #FF0000}
a.red:visited {color: #0000FF}
a.blue:link {color: #00FF00}
a.blue:visited {color: #FF00FF}
现在应用在不同的链接上：
<a class="red" href="...">这是第一组链接</a>
<a class="blue" href="...">这是第二组链接</a>
4. 其他伪类
此外CSS2还定义了首字和首行(first-letter和first-line)的伪类,可以对元素的首字或首行设定不同的样式.
下面看这个例子,我们在段落标记里定义文本首字尺寸为默认大小的3倍：
<style type=”text/css”>
p:first-letter {font-size: 300%}
</style>
……
<p>
这是一个段落,这个段落的首字被放大了.
</p>
我们再定义一个首行样式的例子：
<style type=”text/css”>
div:first-line {color: red}
</style>
……
<div>
<p>
这是段落的第一行
这是段落的第二行
这是段落的第三行
</p>
</div>
(上例中段落的第一行为红色,第二、三行为默认颜色)
注意：首字和首行的伪类需要IE5.5以上的版本支持.
六、使用方式
1.链接外部样式表
页面的<head>区内链接到样式表文件:
<link href="mystyle.css" rel="stylesheet" type="text/css">
可以应用于多个页面, 当你改变这个样式表文件时,所有页面的样式都随之而改变.而且有利于以后的修改、编辑,浏览时也减少了重复下载代码.
2.内部样式表
<head>区里使用<style>标记插入
<head>
……
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
……
</head>
3.导入外部样式表
实质上它相当于存在内部样式表中的
<head>
……
<style type="text/css">
<!--
@import "mystyle.css"
其他样式表的声明
-->
</style>
……
</head>
注意：导入外部样式表必须在样式表的开始部分,在其他内部样式表上面.
4.内嵌样式
直接将在HTML标记里加入style参数.而style参数的内容就是CSS的属性和值,如下例：
<p style="color: sienna; margin-left: 20px">
注意：style参数可以应用于任意BODY内的元素(包括BODY本身),除了basefont、param和script.
七、Web标准、CSS布局
W3C标准,用CSS代替表格布局 http://www.w3cn.org
八、CSS资源
CSS教程：http://www.lnnu.edu.cn/dandu/hqcy/internet/jiaocheng/css/css.htm
网页设计师：http://www.w3cn.org
+ 查看当前日志评论 (1)
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.629 ms
标题: CSS基础
你没有权限发表评论
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.629 ms
暂无评论
────────────
PJBlog3 v3.2.9.518 Inside.
Processed In 0.629 ms