清华大学版（2012） 八年级下册信息技术 课件 - 3.11 最佳搭档——应用CSS样式与层美化网页 (共27张PPT)

最佳搭档——应用CSS样式与层美化网页 1 CSS的基本概念 CSS（Cascading Style Sheets），层叠样式表单。 2 可以将网页的显示控制与显示内容分离； 能更有效地控制页面的布局； 可以制作出体积更小、下载更快的网页； 可以更快、更方便地维护及更新大量的网页。 新建CSS样式 1. 外部样式 <link href="layout.css" rel="stylesheet" type="text/css" /> 指将样式表作为一个独立的文件保存在计算机上，这个文件以“.css”作为文件的扩展名。然后在源代码中以link方式链接。它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。 内部样式 <style> h2 { color:#f00;} </style> 这种形式是内部样式表，它是以<style>和</style>结尾，写在源代码的head标签内。这样的样式表只能针对本页有效。不能作用于其它页面。 3 新建CSS样式 2. 4 类 ID 标签 复合内容 Class，一个页面内可多次调用 ID，一个页面内只能调用一次 修改<p>,<br>等已定义的标签样式 超链接，link,hover,active,visited 多样式叠加 以“.”开头，可用英文字母、数字、“-”； 以“#”开头，可用英文字母、数字、“-”； CSS样式基本语法 CSS的基本语法由三部分构成：选择器（Selector）、属性（Property）和属性值（Value）三个部分。 定义样式： .title01 { font-size: 18px; text-decoration: underline; } 调用样式： <p class="title01"> 5 6.设置CSS样式 6 文本样式 背景样式 区块样式 方框样式 边框样式 列表样式 定位样式 扩展样式 过渡样式 7.将CSS应用到网页 7 调用类 调用ID 自动应用标签 调用/自动应用复合内容 设置CSS样式规则 全部以“类”为例； 注意知识点。 8 文本样式 背景样式 区块样式 方框样式 边框样式 列表样式 定位样式 扩展样式 (1)设置文本样式 在【CSS规则定义】对话框的【分类】区域，选择【类型】选项，可以对文本的样式进行设置。 字体 字号 字体粗细 字体样式 行高 大小写调整* 首