《CSS层叠样式表》PPT课件.ppt

1、第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层）是很有效的网页布局方式,5.1 CSS基本概念,CSS样式,选择符（selector）,属性（properties）,属性值（value）,选择符 属性 : 值 ,选择

2、符 属性1 : 值1; 属性2 : 值2 ,基本格式：,复合样式：,5.1.1 样式和规则,5.1 CSS基本概念,5.1.1 样式和规则,（1）单个“HTML标签”作为选择符 例如，body、table、p 等 例1：body color: black 效果：页面主体（body）中的文字为黑色 例2：p font-family: 隶书 效果：定义了段落字体为隶书 例3：p text-align: center; color: red ;font-size:50pt 效果：定义了段落居中排列，段落中的文字为红色，字号50 注意：需要对一个选择符指定多个属性时，属性之间使用分号分隔,5.1 CS

3、S基本概念,5.1.1 样式和规则,【案例1】在HTML文档中加入CSS样式 步骤： 复制文件“css_1a.html”，更名为“css_1b.html” 在标记之间输入以下代码： 说明： 1. CSS样式要放在中 2. stype=“text/css”表示使用CSS语法 3. ,5.1 CSS基本概念,5.1.1 样式和规则,（2）选择符组 把具有相同属性和值的选择符组合起来书写，用逗号将选择符分开，以减少重复定义 例：h1, h2, h4, h6color:green 效果：组里所有标题元素的文字都为绿色 例：p, tablefont-size: 9pt 效果：段落和表格的文字大小为9号字

4、,5.1 CSS基本概念,5.1.1 样式和规则,（3）类选择符 把相同元素分类定义为不同的样式（用法一） 定义类选择符时，在自定类的名称前面加一个点号 类名为英文单词或以英文开头与数字的组合 例：为段落定义两个类，一个向右对齐，一个居中对齐 1. 先定义类 p.righttext-align:right p.centertext-align:center 2. 应用时，在HTML标签里加入class类参数 这个段落向右对齐的 这个段落是居中排列的,5.1 CSS基本概念,5.1.1 样式和规则,（3）类选择符 在选择符中不指明HTML标签名，这样可以把几个不同的元素定义成相同的样式（用法二）

5、 例：定义一个right类 ，表示文字靠右对齐 .righttext-align:right 这样定义的类，可以应用到任何元素，如段落、标题等： 这个段落向右对齐 这个标题向右对齐 这个标题向右对齐,5.1 CSS基本概念,5.1.2 层叠和顺序,在Web页面中，CSS有下面3种层叠方式： 外部样式：存储在一个单独的外部CSS文件中的若干组CSS规则。使用link标签链接到外部样式表文件（.css文件），如果修改外部样式表文件，那么所有链接到该样式表文件的网页都将随之变化 内部样式：若干组包括在HTML文档head部分的style标签中的CSS规则，为当前网页设置样式信息。内部样式的内容在“C

6、SS样式”面板中的“所有规则”窗格内列出，此样式仅对当前文档有效 内联样式：通过HTML标签的style属性为单个网页元素嵌套样式信息（内联样式不符合“结构与形式分离”的网页设计原则，故不建议使用） 顺序问题： 当同一个元素（例如段落P的颜色）出现不同的CSS定义时，内层屏蔽外层（内层定义优先）,5.1 CSS基本概念,5.1.2 层叠和顺序,内联样式 在HTML标签内使用style属性定义的，适用于该标签的个别样式 例如： 内联样式举例 ,5.1 CSS基本概念,5.1.2 层叠和顺序,内部样式 在与之间用style标签加入css样式定义 适用于所指定的网页样式 例如：前面的【案例1】在HT

7、ML文档中加入CSS样式,5.1 CSS基本概念,5.1.2 层叠和顺序,外部样式 方法一：链接样式（Linked styles） 在网页文件的head部分用link标签链接外部样式表文件 方法二：导入样式（Imported styles） 在网页文件的head部分import命令引用外部样式表文件。 ,提示：单击属性面板上的“样式”，选择“附加样式表”，如图所示,5.2 在DW中创建CSS,5.2.1 建立CSS规则,建立CSS规则，可以使用方法： 用“页面属性”（“属性面板”上的按钮） 设置后查看代码，例如：body,td,th font-size: 12px ，指定了整个网页，表格单元格

8、和表格标题的3个标签的样式 用“CSS面板” 课堂演示（教材P.148） 用“属性面板” 先选定对象，再通过属性面板，如设置文本的字体、颜色、大小、对齐等，系统将自动创建样式,5.2 在DW中创建CSS,【案例2】 利用CSS为网页设置样式,设置前,设置后,5.2 在DW中创建CSS,【案例2】 利用CSS为网页设置样式 （样例文件为：mysite_ch5exam8_10css-0.html） 单击“页面属性”按钮，设置“页面字体”为幼圆，“大小”12pt，“文本颜色” 为#006600，自动添加如下代码及样式（如图）： ,5.2 在DW中创建CSS,【案例2】 利用CSS为网页设置样式 （样

9、例文件为：mysite_ch5exam8_10css-0.html） 展开“CSS样式”面板，单击“新建CSS规则”按钮，设置标签td的行高为135%，如图所示。 代码如下： td line-height: 135%; ,可以单击“CSS样式”面板上的某条规则，查看其“属性” 或者单击“编辑属性”按钮，修改属性,5.2 在DW中创建CSS,【案例2】 利用CSS为网页设置样式 （样例文件为：mysite_ch5exam8_10css-0.html） 展开“CSS样式”面板，单击“新建CSS规则”按钮，创建类“.title_1”，如图所示。 将样式应用与网页中的两个标题,前面建立的是“标签选择器

10、”，这里是“类选择器”,5.2 在DW中创建CSS,【案例2】 利用CSS为网页设置样式 （样例文件为：mysite_ch5exam8_10css-0.html） 使用“属性”面板，设置当前选定对象的CSS样式属性 例如：选择最后一行文字，设置为蓝色，加粗，如下图,这里自动设置为“类选择器”,全部设置完成后,5.2 在DW中创建CSS,5.2.2 套用CSS,在网页中套用已经建立的CSS样式，可以采用以下方法： 用“属性面板” 方法：选定要套用对象，在属性面板的“样式”下拉列表中选取样式 用“CSS面板” 方法：选定要套用对象，右击 “CSS面板”中的样式，在菜单中选择“套用”,5.3 CSS

11、滤镜,能使网页中的文字或者图片产生丰富多彩的艺术效果 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的坐标,5.3 CSS滤镜,【案例3】 利用CSS滤镜设置文字和图片的显示效果

12、（样例文件1：mysite_ch5filter_1.html） （样例文件2：mysite_ch5filter_2.html） （样例文件3：mysite_ch5filter_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”,本章作业,教材P.16115 先创建一个网页，创建完成后保存文档。然