《Dw Ps Flash网页制作三合一案例教程》 第4章 应用CSS设置网页样式.pptx

专业;目录 Contents;CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。使用CSS样式设置页面格式，可将页面内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个独立的样式表文件中或HTML文档的某一部分（通常为文件头部分）。将内容与表现形式分离，不仅可使站点的维护更加容易，还可以使HTML文档代码更加简练，缩短浏览器的加载时间。 CSS样式表的功能一般可以归纳为以下几点。 可以灵活控制网页中文本的字体、颜色、大小、间距、风格及位置。 可以灵活地为网页中的元素设置各种效果的边框。 可以方便地为网页中的元素设置不同的背景颜色、背景图像及平铺方式。 可以控制网页中各元素的位置，使元素在网页中浮动。 可以为网页中的元素设置各种滤镜，从而产生诸如阴影、辉光、模糊和透明等只有在一些图像处理软件中才能实现的效果。 可以与脚本语言相结合，使网页中的元素产生各种动态效果。;HTML与CSS是两种作用不同的语言，要让它们同时对一个网页产生作用，必须在HTML文件中引入CSS，具体方法主要有以下几种。;5;6;7;8;图4-9 设置字体大小;2．行内样式表;步骤2：;步骤4： 按【Ctrl+S】组合键保存文档，后面还会用到该文件。;步骤1：;14;15;16;17;18;19;20;21;22;23;24;文档中的每个元素都可以装在一个矩形框内，通过CSS可以控制包含文档中元素的矩形框的大小、外观和位置。在“CSS设计器”“属性”窗格的“布局”类别中可以设置布局样式。 “布局”类别中包括宽度（width）、高度（height）、外边距（margin）、内边距（padding）、定位方式 （position）、浮动（float）、清除浮动（clear）、溢出（overflow）、块（display）等属性。 width（宽）：设置元素的宽度。 height（高）：设置元素的高度。 min-width（最小宽度）：设置元素的最小宽度，该属性值会对元素的宽度设置一个最小限制。 min-height（最小高度）：设置元素的最小高度，该属性值会对元素的高度设置一个最低限制。 max-width（最大宽度）：设置元素的最大宽度，该属性值会对元素的宽度设置一个最大限制。 max-height（最大高度）：设置元素的最大高度，该属性值会对元素的高度设置一个最高限制。margin（外边距）：用于定义应用样式的元素外边框与其他元素之间的空白大小，又称外边距。 padding（填充）：用于定义应用样式的元素内容和元素边框之间的空白大小，又称内边距。 position（位置）：用于设置浏览器如何放置元素框，包含static、relative、absolute、fixed 4个参数，各参数的属性值及意义如表4-2所示。;表4-2 position属性各参数值及其意义;在“CSS设计器”“属性”窗格的“文本”类别中可以设置文本样式，如图4-24所示。;text-decoration（文字修饰）：用于设置字体的一些修饰格式，包括underline（下划线）、overline（上划线）、line-through （删除线）和blink（闪烁线）等选项。 text-indent（文字缩进）：设置每段第一行的缩进距离。 vertical-align（垂直对齐）：设置页面元素的垂直位置。 提 示 如果在“font-family”下拉列表中没有需要的字体，可以选择最下方的“管理字体”选项，打开“管理字体”对话框，然后单击“自定义字体堆栈”选项卡，在右下方的“可用字体”列表框中选择需要的字体，单击 按钮将其添加到左侧“选择的字体”列表框中，单击 “完成”按钮可以添加字体到下拉列表中，如图4-25所示。 28 图4-25 “管理字体”对话框;使用样式表不仅可以设置整个网页的背景，还可以设置特定区域的背景色或背景图像。设置背景图像时，还可以指定背景图像的位置或重复方式、固定与否等。在“CSS设计器”“属性”窗格的“背景”类别中可以设置背景样式，如图4-26所示。;盒子模型是CSS中较为重要的核心概念之一，它是使用CSS控制页面元素外观和位置的基础。 HTML中的大多数元素（特别是块状元素）都 可以看做是一个盒子，网页元素的定位实际就是这些大大小小的盒子在页面中的定位。;为便于理解，可以把这些属性转移到日常生活中的盒子（箱子）上来考虑，日常生活中所见的盒子也具有这些属性。content就是盒子里装的东西，我们使用width和height属性为盒子设置宽度和高度时，实际 上设置的是content的宽度和高度，不是盒子的实际大小；border是盒子的边框，它具有bo