CSS选择器与相关特性.ppt

第2章CSS选择器与相关特性 本章简介 通过上一章的学习 了解了在网页设计中引入CSS的意义 引入CSS的核心目的就是实现网页结构内容和表现形式的分离 将原来由HTML语言所承担的一些与结构无关的功能剥离出来 改由CSS来完成 本章介绍CSS是如何工作的 重点介绍CSS的 选择器 这一核心概念 以及相关的两个特性 继承 和 层叠 2 1构造CSS规则 CSS的作用就是设置网页的各个组成部分的表现形式 因此 如果把上面的表格换成描述网页上一个标题的属性表 可以设想应该大致如下 2级标题 h2 字体 宋体 font family 宋体 大小 15像素 font size 15px 颜色 红色 color red 装饰 下划线text decoration underline 2 2基本CSS选择器 基本选择器有标记选择器 类别选择器 ID选择器 属性选择器 结构伪类选择器和UI伪类选择器6种 2 2 1标记选择器 一个HTML页面由很多不同的标记组成 而CSS标记选择器就是声明哪些标记采用哪种CSS样式 因此 每一种HTML标记的名称都可以作为相应的标记选择器的名称 例如 p选择器就是用于声明页面中所有标记的样式风格 同样 可以通过h1选择器来声明页面中所有的标记的CSS风格 CSS标记选择器 2 2 2类别选择器 在上一小节中提到的标记选择器一旦声明 那么页面中所有的相应标记都会相应地产生变化 例如 当声明了标记为红色时 页面中所有的标记都将显示为红色 如果希望其中的某一个标记不是红色 而是绿色 这时仅依靠标记选择器是不够的 还需要引入类别 class 选择器 类别选择器 2 2 3ID选择器 ID选择器的使用方法跟class选择器基本相同 不同之处在于ID选择器只能在HTML页面中使用一次 因此其针对性更强 在HTML的标记中只需要利用id属性 就可以直接调用CSS中的ID选择器 ID选择器 2 2 4属性选择器 在HTML中 通过各种各样的属性 可以给元素增加很多附加信息 例如 通过font family属性 可以指定文字的字体 通过id属性 可以将不同的div元素进行区分 并且通过JavaScript来控制这个div元素的内容和状态 CSS3 0新增加了3个属性选择器 这3个属性选择器与CSS2 1中已经定义的4个属性选择器共同构成了CSS的功能强大的标签属性过滤体系 2 2 5结构伪类选择器 结构伪类选择器也是CSS3新增的选择器之一 结构伪类是利用文档结构树实现元素过滤 也就是说 通过文档结构的相互关系来匹配特定的元素 从而减少文档内对class属性和ID属性的定义 使文档更加简洁 2 2 6UI伪类选择器 UI伪类选择器也是CSS3新增选择器之一 选择器的共同特征是 指定的样式只有当元素处于某种状态时才起作用 在默认状态下不起作用 CSS3共定义了11种UI元素状态伪类选择器 分别是E hover E active E focus E enabled E disabled E read only E read write E checked E default E indeterminate和E selection 这些元素中只有3种比较常用 2 3在HTML中使用CSS的方法 在对CSS有了大致的了解之后 就可以使用CSS对页面进行全方位的控制 本节主要介绍如何在HTML中使用CSS 包括行内式 内嵌式 链接式和导入式等 最后探讨各种方式的优先级 2 3 1行内式 行内式是所有样式方法中最为直接的一种 它直接对HTML的标记使用style属性 然后将CSS代码直接写在其中 行内式 2 3 2内嵌式 内嵌式样式表就是将CSS写在与之间 并且用和标记进行声明 内嵌式 2 3 3链接式 链接式样式表是使用频率最高 也是最为实用的方法 它将HTML页面本身与CSS样式风格分离为两个或者多个文件 实现了页面框架HTML代码与美工CSS代码的完全分离 使得前期制作和后期维护都十分方便 网站后台的技术人员与美工设计者也可以很好地分工合作 同一个CSS文件可以链接到多个HTML文件中 甚至可以链接到整个网站的所有页面中 使网站整体风格统一 协调 并且后期维护的工作量也大大减少 链接式 2 3 4导入式 导入式样式表与链接式样式表的功能基本相同 只是语法和运作方式上略有区别 采用import方式导入的样式表 在HTML文件初始化时 会被导入到HTML文件内 作为文件的一部分 类似内嵌式的效果 而链接式样式表则是在HTML的标记需要格式时才以链接的方式引入 在HTML文件中导入样式表 常用的有如下几种 import语句 可以选择任意一种放在与标记之间 importurl sheet1 css importurl sheet1 css importurl sheet1 css importsheet1 css import sheet1 css import sheet1 css 2 4复合选择器 2 3节介绍了3种基本的选择器 以这3种基本选择器为基础 通过组合 还可以产生更多种类的选择器 实现更强 更方便的选择功能 复合选择器就是由基本选择器通过不同的连接方式构成的 复合选择器就是两个或多个基本选择器 通过不同连接方式而成的选择器 2 4 1交集选择器 交集选择器由两个选择器直接连接构成 其结果是选中二者各自元素范围的交集 其中第1个必须是标记选择器 第2个必须是类别选择器或者是ID选择器 这两个选择器之间不能有空格 必须连续书写 这种方式构成的选择器 将选中同时满足前后二者定义的元素 也就是前者所定义的标记类型 并且指定了后者的类别或者id的元素 因此被称为交集选择器 例如 声明了p special和p special这3种选择器 标记类别选择器 交集选择器示意图 2 4 2并集选择器 与交集选择器相对应 还有一种并集选择器 或者称为 集体声明 它的结果是同时选中各个基本选择器所选择的范围 任何形式的选择器 包括标记选择器 class选择器 ID选择器等 都可以作为并集选择器的一部分 并集选择器是由多个选择器通过逗号连接而成的 在声明各种CSS选择器时 如果某些选择器的风格是完全相同的 或者部分相同 就可以利用并集选择器同时声明风格相同的CSS选择器 并集选择器示意图 2 4 3后代选择器 在CSS选择器中 还可以通过嵌套的方式对特殊位置的HTML标记进行声明 如当与之间包含标记时 就可以使用后代选择器进行相应的控制 后代选择器的写法就是把外层的标记写在前面 内层的标记写在后面 之间用空格分隔 当标记发生嵌套时 内层的标记就称为外层标记的后代 嵌套选择器 2 5CSS的继承特性 本节进一步讲解后代选择器的应用 它将会贯穿在所有的设计中 若之前学过面向对象语言 那么对于继承 Inheritance 的概念一定不会陌生 在CSS中的继承并没有像在C 和Java等语言中那么复杂 简单地说 就是将各个HTML标记看作一个个容器 其中被包含的小容器会继承包含它的大容器的风格样式 本节从页面各个标记的父子关系出发 详细地讲解CSS的继承 2 5 1继承关系 在这个树形关系中 处于最上端的标记称之为 根 root 它是所有标记的源头 往下层层包含 在每一个分支中 称上层标记为其下层标记的 父 标记 相应地 下层标记称为上层标记的 子 标记 例如 标记是标记的子标记 同时它也是的父标记 继承关系树形图 2 5 2CSS继承的运用 CSS继承指的是子标记会继承父标记的所有样式风格 并可以在父标记样式风格的基础上再加以修改 产生新的样式 而子标记的样式风格完全不会影响父标记 父子关系示例 2 6CSS的层叠特性 CSS的层叠特性很重要 并且要注意 不要和前面介绍的 继承 相混淆 二者有着本质的区别 实际上 层叠可以简单地理解为 冲突 的解决方案 层叠特性示意 小结 本章介绍CSS规则的定义方法 即CSS规则是如何由选择器 属性和属性值三者构成的 然后介绍了选择器的含义和作用