第2章CSS选择器与相关特性.ppt

1、CSS网页设计标准教程，第1部分，CSS的核心原则，第2章，CSS选择器和相关特性，通过前一章的学习，我理解了将CSS引入网页设计的意义。引入CSS的核心目的是实现网页结构内容和表达形式的分离，将一些原本由HTML语言承担的与结构无关的功能分离出来，用CSS来完成。本章介绍CSS是如何工作的。本文重点研究了CSS“选择器”的核心概念和两个相关特征，“继承”和“级联”。2.1构建CSS规则。在详细介绍CSS之前，想想生活中的一个问题。张飞身高：185厘米；重量为：105公斤；性别：男；人物：是暴力的；汉族：人；该表实际上由三个元素组成，即名称、属性和属性值。CSS的功能是设置网页中每个组件的表达

2、式。因此，如果上面的表被描述网页上的标题的属性表代替，可以假设它应该大致如下：大小为：15像素；颜色：红色；用：下划线装饰，如果你用英语写上表，就更进一步：H2 font-family : Tahoma；font-size :15 px；颜色：红色；文本修饰：下划线；CSS的思想是首先指定要设置什么“对象”，然后设置“属性”的哪个方面，最后给出设置的“值”。因此，简而言之，CSS由三个基本部分组成：“对象”、“属性”和“值”。2.2基本的CSS选择器，在CSS的三个组件中，“对象”是非常重要的，它指定设置哪些网页元素，所以它有一个特殊的名称选择器。2.2.1标记选择器，h1颜色：红色；font

3、-size : 25px；图2.1 CSS标签选择器，2.2.2类选择器，图2.2类选择器，类选择器。红色；红色。/*红色*/font-size :18 px；/*文本大小*/，绿色；绿色。/*绿色*/font-size:20px。/*文本大小*/，类别选择器1类别选择器2 h3也适用，2.2.3标识选择器，图2.6标识选择器，标识选择器#bold，font-weight : bold；/* bold */# green font-size :30 px。/* font size */color : # 009900；/*颜色*/，标识选择器1标识选择器2标识选择器3标识选择器4，2.3在超文

4、本标记语言中使用CSS的方法，2.3.1内嵌页面标题，正文内容1正文内容2正文内容3，2.3.2嵌入，页面标题p，颜色： # 0000 FF；文本修饰：下划线；font-weight : bold；font-size :25 px；这是正文内容的第一行，这是正文内容的第二行，这是正文内容的第三行，2.3.3链接，页面标题，CSS标题，这是正文内容CSS标题，这是正文内容，h2颜色： # 0000 ff；p color: # FF0000文本修饰：下划线；font-weight : bold；font-size :15 px；2.3.4导入，导入URL(sheet 1 . CSS)；导入URL(

5、sheet 1 . CSS)；导入URL(sheet 1 . CSS)；导入sheet 1 . CSS；导入sheet 1 . CSS；导入sheet 1 . CSS；2.4复合选择器，2.4.1交叉选择器，图2.13标签类选择器，图2.14交叉选择器示意图，选择器。class，p/*标签选择器*/color : blue；P.special/*马克。类别选择器*/color : red；/*红色*/。特殊/*类别选择器*/颜色：绿色；普通段落文本(蓝色)普通标题文本(黑色)段落文本(红色)指定。特殊类别指定。特殊类别标题文本(绿色)，2.4.2联合选择器，图2.16联合选择器图，联合选择器h

6、1、h2、h3、h4、h5、p/*联合选择器/*文本颜色*/font-size :15 px；/* font size */，h2.special，特殊，#one/*集体声明*/text-decoration :下划线；/*下划线*/，示例文本h1示例文本h2示例文本h3示例文本h4示例文本h5示例文本p1示例文本p2示例文本p3，2.4.3后代选择器，这是最外面的文本，这是中间层文本，这是最里面的文本，最外面的层是一个标签，它嵌套在内部，然后它被称为是的子元素。后代选择器psan/*嵌套声明*/color : red；/* color */，span color:blue/*颜色*/嵌套使用CSS(红色)标签的方法。嵌套外的标签(蓝色)没有效果。后代选择器被广泛使用。不仅标签选择器可以这样组合，而且类别选择器和标识选择器也可以嵌套。以下是一些典型的代码：特殊I颜色：红色；/*使用带有特殊属性的标记中包含的*/# one Li padding-left :5 px；/* id为1的标记包含*/TD . out . inside strong font-size :