基本选择器PPT精品课件.pptxVIP

主讲人：黄小飞HTML5网页设计基本选择器 CSS选择器使用CSS对HTML页面中的元素实现一对一，一对多或者多对多的控制，这就需要使用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的，要注意的是，这里所说的元素指的就是html中的标签。CSS选择器 CSS选择器问 题 以这首七律长征的诗为例来看如何通过CSS来设置 诗句的字体颜色？ CSS的语法 css的语法分为两块，第一块是选择器，第二块是css的声明块，通过选择器可以选中页面中的指定元素，声明块的作用就是为选中的元素指定要设置的样式，声明块是由一个一个的声明组成的，声明是一个名值对结构，一个样式名对应一个样式值，名和值之间以冒号连接，以分号结尾。 CSS的语法需求：想要将所有的p标签的字体颜色变为红色，怎么实现？h1标签的字体也变色呢?分析：以内部样式为例，在style标签对中先写一个p，然后设置样式属性color的属性值为red。 标签选择器标签选择器：当需要对页面内某类标签的内容进行修饰时，采用标签选择器style type=text/css 标签名 { 属性1：属性值1; 属性2：属性值2; …… }/style语法 标签选择器需求：只想将万水千山只等闲这句诗设置为红色，其他诗句颜色不变，那又怎么实现呢？分析：从p元素来看，所有的p元素均没有任何区别，但是又想单独选中这个p元素而不选中其他p元素，那么就可以给这个p元素添加一个id属性，然后通过这个id选中这个元素，并设置样式。 id选择器id属性作为HTML元素的唯一标识，id选择器，作用就是根据元素的id属性值选中一个元素，如果只想给页面中的某个元素单独设置一些样式，而不想影响到其他元素时可以使用id选择器，在实际应用中常与div标签配合使用，表示修饰对应ID标识的某个div区块。style type=text/css #ID标识名 { 属性1：属性值1; 属性2：属性值2; …… }/style语法id选择器 id选择器需求：现在又想将金沙水拍云崖暖和大渡桥横铁索寒设置为蓝色?分析：这里就不能使用id选择器了，因为id不能出现同名的，这里可以使用html元素的class属性，它和id类似，不同的是class可以重复使用。 类选择器style type=text/css .类名 { 属性1：属性值1; …… }/style语法每一个html元素都有一个class属性，它和id类似，不同的是class可以重复使用，作用就是根据元素的class属性值选中一组元素。类选择器标签名 class=“类名”标签内容/标签名应用类样式 课程小结元素选择器就是使用标签名作为选择器进行设置。id选择器就是先给标签添加id属性，然后通过#id属性名{}进行设置，且id属性不能出现重名。类选择器就是给对应的标签添加class属性，然后通过.class属性名{}进行设置，class属性可以重复使用。 id选择器和class选择器谁更强大些呢？