第5章 CSS层叠样式表
5.1 CSS基本概念
5.2 在DW中创建CSS
5.3 CSS滤镜
5.1 CSS基本概念
• CSS是Cascading Style Sheets（层叠样式表）的缩写 • CSS是HTML的扩展，是网页设计中不可或缺的核心 技术 • 利用CSS可以有效地对页面的布局、字体、颜色、背 景和其他效果实现更精准的控制 • CSS技术最大的优势就是实现了结构与形式的分离， 从而更加有利于网站的开发和维护 • CSS布局（CSS层）是很有效的网页布局方式
用“CSS面板”
• •
用“属性面板”
5.2 在DW中创建CSS
【案例2】 利用CSS为网页设置样式
设 置 后
设 置 前
5.2 在DW中创建CSS
【案例2】 利用CSS为网页设置样式 （样例文件为：mysite_ch5\exam8_10\css-0.html） 单击“页面属性”按钮，设置“页面字体”为幼圆，“大小”12pt， “文本颜色” 为#006600，自动添加如下代码及样式（如图）： <style type="text/css"> <!-body,td,th { font-family: 幼圆; font-size: 12pt; color: #006600; } --> </style>
5.1 CSS基本概念
5.1.1 样式和规则
（3）类选择符 • 在选择符中不指明HTML标签名，这样可以把几个不同的元素定 义成相同的样式（用法二） 例：定义一个right类 ，表示文字靠右对齐 .right{text-align:right} 这样定义的类，可以应用到任何元素，如段落、标题等： <p class="right"> 这个段落向右对齐</p> <h1 class="right">这个标题向右对齐</h1> <h3 class="right">这个标题向右对齐</h3>
前面建立的是“标签选 择器”，这里是“类选择 器”
5.2 在DW中创建CSS
【案例2】 利用CSS为网页设置样式 （样例文件为：mysite_ch5\exam8_10\css-0.html） 使用“属性”面板，设置当前选定对象的CSS样式属性 例如：选择最后一行文字，设置为蓝色，加粗，如下图
这里自动设置为“类选择器”
提示：单击属性面板上的“样式”，选 择“附加样式表”，如图所示
5.2 在DW中创建CSS
5.2.1 建立CSS规则
建立CSS规则，可以使用方法： 用“页面属性”（“属性面板”上的按钮）
• 设置后查看代码，例如：body,td,th { font-size: 12px }，指定了 整个网页，表格单元格和表格标题的3个标签的样式 课堂演示（教材P.148） 先选定对象，再通过属性面板，如设置文本的字体、颜色、大 小、对齐等，系统将自动创建样式
5.1 CSS基本概念
5.1.2 层叠和顺序
内部样式 在<head>与</head>之间用style标签加入css样式定义 适用于所指定的网页样式 例如：前面的【案例1】在HTML文档中加入CSS样式
5.1 CSS基本概念
5.1.2 层叠和顺序
外部样式 方法一：链接样式（Linked styles） 在网页文件的head部分用link标签链接外部样式表文件 <head> <link href=”my.css” rel=”stylesheet” type=”text/css” > </head> 方法二：导入样式（Imported styles） 在网页文件的head部分@import命令引用外部样式表文件。 <style type=”text/css”> <!-@import url“my.css” -- > </style>
本章作业
1. 2. 教材P.161—1~5 先创建一个网页，创建完成后保存文档。然后仿照【案例2 】，复制以上创建的网页为一个新网页，再在新网页中利 用CSS修改标题、文本、列表、表格等对象的格式。 （提示：你需要提交2个网页，原网页和用CSS修改的网页）
要求： 1. 网页整体必须用表格排版，页面宽度800像素 2. 网页中至少包含2级不同的标题，要有正文以及适当的图片 3. 要注意网页所表现的内容，例如【案例2】介绍了某个景点 4. 最后一行要写上你的个人信息（班级、学号、姓名）
5.3 CSS滤镜
【案例3】 利用CSS滤镜设置文字和图片的显示效果 （样例文件1：mysite_ch5\filter_1.html） （样例文件2：mysite_ch5\filter_2.html） （样例文件3：mysite_ch5\filter_3.html）
style=“FILTER: alpha(opacity=50)” （图片为半透明） style=“FILTER: alpha(opacity=0, finishopacity=100, style=2, startx=0, starty=0, finishx=180, finishy=270” （图片为线性渐变） 文字滤镜参见“filter_3.html”
5.1 CSS基本Web页面中，CSS有下面3种层叠方式： 外部样式：存储在一个单独的外部CSS文件中的若干组CSS规则。 使用link标签链接到外部样式表文件（.css文件），如果修改外部样 式表文件，那么所有链接到该样式表文件的网页都将随之变化 内部样式：若干组包括在 HTML 文档head部分的 style 标签中的 CSS规则，为当前网页设置样式信息。内部样式的内容在“CSS样 式”面板中的“所有规则”窗格内列出，此样式仅对当前文档有效 内联样式：通过HTML标签的style属性为单个网页元素嵌套样式信 息（内联样式不符合“结构与形式分离”的网页设计原则，故不建 议使用） 顺序问题： 当同一个元素（例如段落P的颜色）出现不同的CSS定义时，内层 屏蔽外层（内层定义优先）
5.1 CSS基本概念
5.1.1 样式和规则
（3）类选择符 • 把相同元素分类定义为不同的样式（用法一） • 定义类选择符时，在自定类的名称前面加一个点号 • 类名为英文单词或以英文开头与数字的组合 例：为段落定义两个类，一个向右对齐，一个居中对齐 1. 先定义类 p.right{text-align:right} p.center{text-align:center} 2. 应用时，在HTML标签里加入class类参数 <p class="right"> 这个段落向右对齐的</p> <p class="center">这个段落是居中排列的</p>
能使网页中的文字或者图片产生丰富多彩的艺术效果 CSS具有14个滤镜（filter）属性 （参考教材P.158） 例如： Alpha 滤镜 Opacity--透明度，范围从0 到 100（从透明到不透明） Finishopacity--设置渐变透明，用来指定结束时的透明度， 范围也是从0 到 100 Style--指定透明区域的形状特征。其中0代表统一形状、1代 表线形、2代表放射状、3代表长方形 startx和starty--代表渐变透明效果开始的X和Y坐标 finishx和finishy--代表渐变透明效果结束的X和Y的坐标
可以单击“CSS样式”面板上 的某条规则，查看其“属性” 或者单击“编辑属性”按钮， 修改属性
5.2 在DW中创建CSS
【案例2】 利用CSS为网页设置样式 （样例文件为：mysite_ch5\exam8_10\css-0.html） 展开“CSS样式”面板，单击“新建CSS规则”按钮，创建类 “.title_1”，如图所示。 将样式应用与网页中的两个标题
5.1 CSS基本概念
5.1.2 层叠和顺序
内联样式 在HTML标签内使用style属性定义的，适用于该标签的个别样式 例如： <html> <head> </head> <body> <p style=“color:#ff00ff;font-family:„隶书‟;font-size:28“> 内联样式举例 </p> </body> </html>
5.1 CSS基本概念
5.1.1 样式和规则
【案例1】在HTML文档中加入CSS样式 步骤： 1. 复制文件“css_1a.html”，更名为“css_1b.html” 2. 在<head></head>标记之间输入以下代码： <style type="text/css"> <!-p{text-align: left; color:red} ul{color:#00ffff} --> </style> 说明： 1. CSS样式要放在<style></style>中 2. stype=“text/css”表示使用CSS语法 3. <!-- 中间为注释内容 -->
5.2 在DW中创建CSS
【案例2】 利用CSS为网页设置样式 （样例文件为：mysite_ch5\exam8_10\css-0.html） 展开“CSS样式”面板，单击“新建CSS规则”按钮，设置标签td的行 高为135%，如图所示。 代码如下： td { line-height: 135%; }
全部设置完成后
5.2 在DW中创建CSS
5.2.2 套用CSS
在网页中套用已经建立的CSS样式，可以采用以下方法： 用“属性面板” • 方法：选定要套用对象，在属性面板的“样式”下拉列表中选 取样式 用“CSS面板” • 方法：选定要套用对象，右击 “CSS面板”中的样式，在菜单 中选择“套用”
