CSS选择器2.pptVIP

CSS选择器二 知识点： 1、回顾id/class/标签选择器 2、学习群组、后代先择器 3、学会参考CSS手册方法 4、CSS选择器使用方法 一、回顾CSS基本选择器 前面我们认识了解了三个基本选择器的应用以及选择器基本格式 思考以下问题 1、CSS选择器有何用 2、id/class/标签选择器各有何优劣 3、选择器基本格式是什么 4、改变文字颜色、大小、背景需要使用哪些CSS属性 二、再谈基本选择器 1、id选择器 格式：#id名{属性:值;} id选择器是html通用属性之一，多用于DOM中对元素进行惟一性标识，以便于进行元素识别。但也可以用来进行CSS样式定义。 2、class选择器 格式：.类名{属性:值;} /*注意类名前的句点*/ class选择符是应用最多的样式,这里要重点学习,class也可以理解为类选择符,是CSS应用最多的选择符形式,他的选择符名由.号和选择符名称构成,如格式所示.类选择符名称和id选择符一样可以自行命名,但要注意的是,选择符名称要符合习惯,尽量做到望名知义,即看到选择符名就可以看出其意义和用途.不要用中文或数字做选择符名称.当然id选择符要求也是一样。 3、类型[标签]选择器 格式：标签名{属性:值;} 类型选择符和其他选择符的不同之处就在于选择符名称是XHTML标签名，利用此选择符可以使页面中相同的标签都会有相同的样式。如p{text-indent:2em;}则页面中所有p标签首行都会缩进2字符。 三、应用CSS 在学习其他CSS选择器之前，这里我们先学习如何在网页中应用CSS样式。 1、行内样式 行内样式指利用style属性指定的样式如:span style=“color:red”红色文字/span,行内样式仅限于对某个标签进行CSS样式定义。如果多个标签元素需要相同的样式，同样的应用就需要定很多相同的代码。 2、页内样式 行内样式应用有很大的局限性，为了简化代码书定，可以采用页内样式实现。页内样式指在head/head中利用style标签来进行定义CSS样式。示例见备注，应用页内样式，可以使样式作用于整个页面。 3、外链样式 一个网站是由许多页面构成的，而多数页面效果基本一致，若用前两种方法实现。就会产生大量代码的冗余。而此方法就是将所有CSS代码置于一个独立的CSS文件中，然后利用link标签来进行引用。从而使所有页面都能使用相同的样式标签。其格式为： link type=“text/css” href=“样式文件.css” rel=“stylesheet” / href指定存放在磁盘中的样式文件，其也只是个普通的文本文件，只是其扩展名通常为.css。我们只需要将放在style/style中的样式代码拷到.css文件中即可。这是我们极力推荐的应用方式。 4、导入样式 在第2、3种样式应用中还可利用@import url(style.css)方法来导入其他的样式。这使得样式应用会更加灵活，可以按需调用不同的页面样式。 四 html公有属性与CSS 在前面课程中提到html标签都具有公共属性 1、style属性 利用此属性可以完成内嵌CSS样式，为每个html标签指定样式。如： p style=“text-align:center”文字居中/p 此属性不常用，会造成页面中太多的重复代码。 2、id属性 在DOM中用id进行页面元素的惟一性识别，此属性也可用来定义对象样式 3、class属性 此属性是应用最多的属性。理解为类(class),即为某一类别的元素进行样式定义，达到样式最大可能的重用。 五 CSS构造规则 当需要描述一个人的时候，可以用以下方式 张飞{ //对象名 身高：185cm; //属性：值 体重：105KG； 性别：男； 性格：暴躁； 民族：汉族； } 而CSS就是设置各元素或各类元素的表现，如： 2级标题{ 字体：黑体； 颜色：红色； 背影：蓝色； 对齐：居中； } 最终用CSS表现结果 h2{font-family:黑体;color:red;background:blue;text-align:center;} 六 CSS基本选择器 选择器是CSS中的重要概念。所有样式都是通过不同的CSS选择器进行控制。而用户只需要利用选择器对不同的html标签进行选择，并给出样式，即可实现各种效果。 基本选择器包括 1、标签选择器 标签{样式} 2、类别选择器 .class{样式} 3、id选择器 #id{样式} 六 CSS基本选择器-id选择器 六 CSS基本选择器-标签选择器 六 CSS基本选择器-类选择器 七 课程总结 本课程主要学习