第十一讲CSS样式P180-台州学院.PPT

* * 第十一讲 CSS样式 P180 CSS是Casading Style Sheet (层叠样式表单)的简称。层叠样式表 (CSS) 是一系列格式设置规则，它们控制 Web 页面内容的外观。使用 CSS 设置页面格式时，请将内容与表现形式分开。页面内容（即 HTML 代码）驻留在 HTML 文件自身中，而用于定义代码表现形式的 CSS 规则驻留在另一个文件（外部样式表）或 HTML 文档的另一部分（通常为文件头部分）中。使用 CSS 可以非常灵活并更好地控制具体的页面外观，从精确的布局定位到特定的字体和样式。 CSS 允许您控制 HTML 无法独自控制的许多属性。例如，可以为选定的文本指定不同的字体大小和单位（像素、磅值等）。通过使用 CSS 以像素为单位设置字体大小，还可以确保在多个浏览器中以更一致的方式处理页面布局和外观。 除设置文本格式外，还可以使用 CSS 控制 Web 页面中块级别元素的格式和定位。例如，可以设置块级元素的边距和边框、其他文本周围的浮动文本等。 术语 cascading 表示向同一个元素应用多种样式的能力。例如，可以创建一个 CSS 规则来应用颜色，创建另一个 CSS 规则来应用边距，然后将两者应用于页面上的同一个文本。所定义的样式向下“层叠”到您的 Web 页面上的元素，并最终创建您想要的设计。 CSS 的主要优点是它提供了便利的更新功能；更新一处的 CSS 规则时，使用该已定义样式的所有文档的格式都会自动更新为新样式。 实例为基础进行讲解 一、样式面板制作标题样式，设置h1标题1、新建规则 参数如图： 2、设置规则 参数如图：黑体，36PX，红色 区块：文本对齐：居中 3、应用规则 在文档中，选中标题“台州学院”，然后在属性面板上设置，选择标题1 二、对照法制作h2样式 1、同h1的设置方法，设置h2的属性如下： 2、给第二行文字“宣传部”套用h2样式 三、设置段落样式 1、新建规则 参数设置如下： 2、设置规则 参数如下图：宋体、9pt、深灰色（#333333） 区块：文字缩进18pt 方框：左右各缩进50px 3、单击确定，在文本中段落的格式就按照上述样式设置了。 四、设置图片样式 设置图片达到图文混排（环绕）的效果 1、插入图片 直接从文件面板中拖入一张图片。直接用CSS来控制图片的属性。 2、新建规则 3、设置属性 参数设置如下图 环绕 图片与文字之间的距离 4、选择图片，套用样式。 五、复制图片样式 第二张图片设置成右对齐，其它设置一样，直接在样式里，复制imgae1，改名为image2，然后修改规则。 *