[peggyCSS课件.pptVIP

样式的继承和作用顺序 继承顺序 内联样式中所定义的样式优先级最高 其他样式表按其在HTML文件中出现或被引用的顺序，越在后出现，优先级越高 选择符的作用顺序由高到低为：上下文选择符、类选择符、id选择符 未在任何文件中定义的样式，将遵循浏览器的默认样式。 上节课内容复习 CSS盒子模式(Box Model) 内边距 * 讲解要点： 1)先讲解链接外部样式表的语法 2）然后讲解步骤 3）按上述步骤演示：参考TG6-Source文件夹中的”链接样式表“用例。 * 告诉学员： 1 ) 操作步骤同链接样式表。 2) 导入和链接两种方式功能一样，没什么大的区别，掌握其中一种就行。 * 告诉学员： 对于某个HTML标签： 1）如果有多种样式，如果规定的样式没有冲突，则叠加。 例如，行内样式指定字体，而内嵌样式指定颜色，外部样式指定大小，则三种样式综合即可。 2）如果有冲突（例如都指定字体大小），则最先考虑行内样式表显示，如果没有，再考虑内嵌样式显示， 如果还没有，最后采用外面样式表显示，否则就按HTML的默认样式显示。 3)演示示例：参考TG6-Source文件夹中的”样式混合使用“用例，同时使用了外部样式和行内样式。 * 讲解要点： 1）DIV也称为层标签，表示一层区域。语法为： DIV id=“层编号” style=“postion:…指定层所在的位置…；z-index=n (指定在Z轴方向的编号)” ….包含的内容 /DIV 2）DIV是容器标签，它可以包括（容纳）段落P、标题H1、图片IMG、文字等内容，如图所示。 所以还称为块级容器标签。 3)告诉学员，层的位置了解，因为实际设计页面时需要DreamWeaver插入层(可演示如何插入)，强调z-index的含义 * 讲解要点： 1）SPAN是一个行内元素，它不能包含段落、标题、表格等，显示时也不会引起换行。 最常见的使用方式是嵌入在某个标签中，突出显示某部分文本，甚至某个字符。 例如，文本内容“H2所有韩款童装10元/件起拍H2”中， 我们希望突出显示客户关心的价格数字“10”，就可以H2标签中插入SPAN，单独修饰”10”。 2）告诉学员：关于SPAN的样式只需了解，一般也通过DreamWeaver来辅助设计。 * * * padding 属性 值 描述 padding-top padding-right padding-bottom padding-left 设置内边距。 值可以是： 百分比（基于父元素宽度的百分比） 长度值（固定的padding值） 默认值：未定义。 h1 { background: yellow; padding: 20px 20px 20px 80px; } h1 { background: yellow; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; } Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. 外边距 body { margin-top:100px; margin-right:40px; margin-bottom:10px; margin-left:70px; } body { margin: 100px 40px 10px 70px; } Evaluation only. Created with Aspose.Slides for .NET 3.5 Client Profile . Copyright 2004-2011 Aspose Pty Ltd. CSS 定义了一些规则，允许为外边距指定少于 4 个值。规则如下： 如果缺少左外边距的值，则使用右外边距的值。 如果缺少下外边距的值，则使用上外边距的值。 如果缺少右外边距的值，则使用上外边距的值。 h1 {margin: 0.25em 1em 0.5em;} h2 {margin: 0.5em 1em;} p {margin: 1px;} /* 等价于 0.25em 1em 0.5em 1em */ /* 等价于 0.5em 1em 0.5em 1em */ /* 等价于 1px 1px 1px 1px */ border Evaluation