第8章_样式表演示文稿.PPTVIP

颜色和背景属性综合示例 样式表属性——字体属性 字体属性是css样式控制中最常用的设置之一。 常用的字体属性： 字体属性综合示例 样式表属性——容器模型 容器模型是CSS一个非常重要的属性，可以用来创建容器样式。它可以为不同的文本设置不同的容器级别，可以调整容器中的边距、填充和边框等。 边距属性 边距属性用来定义所选容器的侧面距离边框外部的距离。这些属性包括：margin-top、margin-right、margin-bottom、margin-left margin属性 该属性可以用来一次性设置容器各个边的边距，而不必分别定义不同的部分。 样式表属性——容器模型 填充属性 填充是指容器内容距离边框的距离，填充属性包括：padding-top、padding-right、padding-bottom、padding-left padding属性 该属性是用来一次性设置四边填充宽度的快捷属性，与margin属性类似 边框属性 可用来指定容器的四面边框宽度，边框属性包括：border-top-width、border-right-width、border-bottom-width和border-left-width 样式表属性——容器模型 border-width属性 该属性是一次性指定所有边框宽度的快捷属性 边框颜色属性 可用来指定容器上下左右边框的颜色，边框颜色属性主要包括：border-top-color、border-right-color、border-bottom-color、border-left-color border-color属性 该属性是一次性指定所有边框颜色的快捷属性 样式表属性——容器模型 边框样式属性 可用来指定所选容器的边框样式，边框样式属性包括：border-top-style、border-right-style、border-bottom-style、border-left-style border-style属性 该属性是一次性指定所有边框样式的快捷属性。 容器模型综合示例 样式表属性——容器模型 边框快捷属性 边框快捷属性包括border-top、border-right、border-bottom、border-left。这些是可以一次性指定所选容器边框的宽度、颜色和样式的快捷属性。如果某个属性没有设置，则使用其默认值。 样式表属性——列表 可以使用CSS属性来控制列表的位置以及项目符号的样式，甚至可以用图片来代表列表的项目符号。 list-style-type属性 list-style-type属性用来设置列表的符号或者编号，通常搭配ol或ul标记一起使用 list-style-image属性 使用图片来替代列表符号 list-style-position属性 用来控制列表符号的缩进 列表属性综合示例 样式表属性——列表 list-style属性 一次性定义所有的列表属性。定义的顺序如下：type、position、image。 如果某一属性空缺，则自动用其默认值取代。 样式表属性——混合属性 容器标记位置、显示等混合在一起设置的属性 display属性 可以设置标记在页面中的显示方式 position属性 提供不同的定位方法 top、bottom、right和left属性 和position属性一起使用，用来指定标记的位置 height和width属性： 用来指定容器标记的大小 样式表属性——混合属性 float属性 指定了标记的位置在左边还是右边 line-height属性 用来指定容器标记中文本的行间距 visibility属性 用来指定标记的可见性 混合属性综合示例 外部和内联样式表示例 外部样式表 内联样式表 本章小结 CSS样式表提供了一种进行网站文件格式化的方法，它可以实现一次指定，随处使用。 样式表的使用方法一般有四种: 内联样式表 嵌入式样式表 输入外部样式 链接外部样式表 样式表有一些特定的规则和样式定义。通过id规则和class规则，可以精确指定标记使用的样式规则。通过继承和情景选择，可以实现Web页面标记样式的嵌套定义，从而保持良好的结构。 样式表是通过定义标记的属性来修饰标记，常用到的样式表属性有文本属性、颜色和背景属性、字体、容器模型、列表属性以及一些混合属性。网页设计者通过指定这些属性的属性值实现自己的设计意图。 思考题 什么是CSS？ 如何将CSS和HTML相结合？ id规则和class规则的区别是什么？ 样式表的文本属性有几种？ CSS如何通过容器模型来定义边距？怎样设定边框属性？ Copyright ?2010-2012 Hdwnt Inc. All Rights Reserved. 1.* 2.* Copyright ?2010-2