七章使用样式修饰页面.pptVIP

第七章 使用样式修饰页面 本章学习目标 熟悉CSS样式面板 掌握创建和使用一些常用的CSS样式的方法 掌握通过CSS样式管理和修饰页面的方法 1. CSS样式的创建 CSS的全称是Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表。 CSS可以扩展HTML的功能，美化页面 最基本的功能就是为了将样式的定义与HTML文件分离开来。 在CSS里面可以使用四种方法，将样式表添加到网页里面。分别为： 直接定义标记的STYLE属性（不建议） 定义内部样式表 嵌入外部样式表 连接外部样式表 （1）直接定义标记的STYLE属性 body p style=color:redaaa/p h1 style=color:redbbb/h1 p ccc /p h1 ddd/h1 /body 实例1css_zhijiedingyicss.htm （2）定义内部样式表 在style元素中定义，其语法为： style type=“text/css” !-- 样式名称1{样式属性：属性值；样式属性：属性值；……} …… -- /style 实例201css_zidingyineibuyangshi.htm 其中的样式名称可以放在一起，表示相同的样式属性。 如样式名称1，样式名称2{样式属性：属性值；样式属性：属性值；……} 实例：202css_zidingyineibuyangshi.htm 可以使用CLASS与ID选择符，在CSS里定义样式 Clsss类选择符的使用语法： style type=“text/css” !- - 标记1.A1{样式属性：属性值；样式属性2：属性值；……} …… -- /style 实例211css_zidingyineibuyangshi.htm 利用ID指定选择符定义样式 用class时 “标记名称.样式名称” 用id定义时 “标记名称#样式名称” style type=“text/css” !- - 标记名称1#A1{样式属性：属性值；样式属性2：属性值；……} …… -- /style （3）嵌入外部样式表 将样式定义在独立的CSS文件中，当浏览器在进行HTML文件的读取时，将以嵌入的方式，复制一份样式表到这个HTML文件中。 嵌入外部样式表的语法： style type=“text/css” !- - @import url(“外部样式表的文件名称”); -- /style 实例213css_qianruwaibucss.css 213css_qianruwaibucss.htm (4) 连接外部样式表 当浏览器读取到HTML文件内设置格式的标记时，将会向所连接的外部样式表索取样式。 连接外部样式表的语法： link type=“text/css”rel=stylesheet href=“外部样式表的文件名称” 四种方法同时出现时的使用顺序 直接定义标记的style属性最为优先。 其他三种如果同时出现，且各方法定义的样式又不相同时，浏览器会选择较后定义的样式显示。 展开“设计”面板，并选中“CSS样式”标签，出现 “CSS样式”面板 单击面板右下角的“新建CSS样式”按钮 ，创建CSS样式，弹出“新建CSS样式”对话框。 2. CSS样式对话框的设置 类 型 背 景 区 块 方 框 边 框 列 表 定 位 扩 展 类型：主要用于定义文字的属性。 背景：主要用于设置CSS样式的背景，包括背景颜色、背景图像、背景图像的控制等 。 区块：主要用于设置文本的文字间距、对齐方式、排列方式、文字缩进等。 方框：主要用于设置元素在页面中的位置。包括元素的边界、宽度、高度和浮动方式等。 边框：主要用于设置边框的样式。 列表：主要用于设置文本列表的类型、列表项图片等。 定位：主要设置对象在网页中的具体位置。 扩展：主要用于制作鼠标样式、图片特殊效果 3. CSS样式的管理 新建样式 应用样式 编辑样式 删除样式 附加样式 套用：选择希望应用所选样式的对象，右键点击样式名称，在菜单中选择”套用” 编辑 ：修改、添加样式的具体内容 删除 ：删除选择的样式 附加 ：链接外部样式表 实例1：重定义特定标签 定义“source/7”目录下的文件夹“7-2-1” 为站点目录。打开7-2-1.htm页面。 新建CSS样式，保存样式在text1.css样式文件中 应用样式 实例2：使用CSS选择器 定义文件夹“7-2-2” 为站点目录。打开7-2-2.htm页面。 新建CSS样式，选择“高级（ID、上下文选择器等）” 类型。 选中文本“