《网页设计》课件——8 CSS选择器.pptxVIP

重难点分析APART ONE 重点：1、了解CSS选择器2、了解CSS选择器的类型3、利用CSS选择器制作不同的页面效果难点：1、掌握CSS选择器的不同类型2、在页面中利用多种选择器3、CSS的层叠和特殊性 课程讲解BPART TWO 十进制数0123456789十六进制0123456789ABCDEF 样式中使用的长度单位相对长度单位：px： 像素（Pixel，与屏幕分辨率有关）。 p{font-size:12px;} em： 相对于当前对象尺寸的倍数。 p{font-size:2em;}%： 百分比 p{font-size:80%;}绝对长度单位：pt： 点（Point）。cm： 厘米（Centimeter）。 mm： 毫米（Millimeter）。换算比例：1in(英寸) = 2.54cm = 25.4 mm = 72pt = 6pc CSS选择器什么是选择器？选择器就是找到你要渲染的那个HTML标签选择器类型有哪些？ CSS选择器类型通配选择器(全局)标签选择器（类型选择器）ID选择器类选择器后代选择器伪类群选择器 CSS通配选择器通配选择器：选择所有元素* { property: value; }例：*{color：blue；} 类选择器类选择器：选择 class 属性为指定值的元素。.className { property: value; }使用类选择器需要两个步骤：为网页元素添加 class 属性；定义样式。 类选择器（可在页面中多次使用）p这是第一段段落/pp class=“ty这是第二段段落/p.ty{font-family:黑体; color:red;} 类选择器p class=one two three这是一段段落/p.one{ color:blue;}.two{font-size:24px;}.three{font-family:华文行楷;}应用多个类样式，中间用空格分开。 ID选择器ID选择器：任何一个标签都有ID属性，ID属性值要唯一ID选择器就是对单独元素做单独样式＃ID { property: value; }id 选择器以 “#” 来定义。(id名不能用纯数字、中文来命名)id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 ID选择器p id=myld这是第一段段落/pp这是第二段段落/p#myld{font-family:黑体; color:red;} 实例-1-未加样式 实例-1-未加样式h2、华文行楷p、华文行楷、18pxol、华文宋体、16px页面背景色：#6FF正确答案设置成：#F60 实例-1-已加样式body{background-color:#6FF;}p{font-family:华文行楷; font-size:18px;}h2{font-family:华文行楷;}ol{font-family:华文宋体; font-size:16px;}.answer{color:#F60;}p1、下面（）正确创建包含5个长度字符串的数组。/pol type=Ali… …/lili… …/lili class=“answer”… …/lili… …/li/ol 实例-1-已加样式 span标签span标签：对行内元素进行分组，以便通过样式对它们进行格式化。.common{font-size:24px; color:red;}p今天晴，气温span class=common23/span度/p这是一个段落，如何只让其中的23呈现不同的样式 CSS复合选择器后代选择器交集选择器并集选择器（群选择器）伪类选择器 后代选择器 在CSS选择器中通过嵌套的方式，对特殊位置的HTML标签进行声明外层的标签写在前面，内层的标签写在后面，之间用空格分隔标签嵌套时，内层的标签成为外层标签的后代 应用——后代选择器p在这个段落中嵌套strong一个strong标签/strong/pp strong{ color:red; font-size:36px;} 应用——后代选择器strong class=uname这里应用了类选择器/strongp这是一个段落/pstrong class=unamep这里应用了后代选择器/p/strong.uname p{font-size:24px; color:red;} 应用——后代选择器div class=onediv class=updateem id=uidp这是一段段落/p/em/div/divdiv class=onediv class=updatediv class=twoem id=uidp这是一段段落/p/em/div/div/div.one .update #uid p{color:blue; font-size:24px;}.two{col