网页布局3.ppt

第 2 章 CSS选择器与相关特性 通过上一章的学习，了解了在网页设计中引入CSS的意义。 引入CSS的核心目的就是实现网页结构内容和表现形式的分离，将原来由HTML语言所承担的一些与结构无关的功能剥离出来，改由CSS来完成。 本章介绍CSS是如何工作的。 重点介绍CSS的“选择器”这一核心概念，以及相关的两个特性——“继承”和“层叠”。 2.1 构造CSS规则 在具体介绍CSS之前，先思考一个生活中的问题。 张飞 { 身高:185cm; 体重:105kg; 性别:男; 性格:暴躁; 民族:汉族; } 这个表实际上是由3个要素组成的，即姓名、属性和属性值。 CSS的作用就是设置网页的各个组成部分的表现形式。 因此，如果把上面的表格换成描述网页上一个标题的属性表，可以设想应该大致如下： 2级标题{ 字体:宋体; 大小:15像素; 颜色:红色; 装饰:下划线 } 再进一步，如果把上面的表格用英语写出来： h2{ font-family: 宋体; font-size:15px; color: red; text-decoration: underline; } CSS的思想就是首先指定对什么“对象”进行设置，然后指定对该对象的哪个方面的“属性”进行设置，最后给出该设置的“值”。 因此，概括来说，CSS就是由3个基本部分——“对象”、“属性”和“值”组成的。 2.2 基本CSS选择器 在CSS的3个组成部分中，“对象”是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称——选择器（selector）。 2.2.1 标记选择器 style h1{ color: red; font-size: 25px; } /style 2.2.2 类别选择器 html head titleclass选择器/title style type=text/css .red{ color:red; /* 红色 */ font-size:18px; /* 文字大小 */ } .green{ color:green; /* 绿色 */ font-size:20px; /* 文字大小 */ } /style /head body p class=redclass选择器1/p p class=greenclass选择器2/p h3 class=greenh3同样适用/h3 /body /html 2.2.3 ID选择器 html head titleID选择器/title style type=text/css #bold{ font-weight:bold; /* 粗体 */ } #green{ font-size:30px;/* 字体大小 */ color:#009900; /* 颜色 */ } /style /head body p id=blodID选择器1/p p id=greenID选择器2/p p id=greenID选择器3/p p id=bold greenID选择器4/p /body /html 2.4 复合选择器 2.4.1 交集选择器 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head title选择器.class/title style type=text/css p{ /* 标记选择器 */ color:blue; } p.special{ /* 标记.类别选择器 */ color:red; /* 红色 */ } .speci