《七章使用样式修饰页面.ppt》由会员分享，可在线阅读，更多相关《七章使用样式修饰页面.ppt（45页珍藏版）》请在三一办公上搜索。
1、第七章 使用样式修饰页面,本章学习目标,熟悉CSS样式面板 掌握创建和使用一些常用的CSS样式的方法 掌握通过CSS样式管理和修饰页面的方法,1.CSS样式的创建,CSS的全称是Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表。CSS可以扩展HTML的功能，美化页面最基本的功能就是为了将样式的定义与HTML文件分离开来。,我们定义一个CSS文件，并让所有HTML文件都调用这个CSS文件所定义的样式，以后要更改HTML中某段落的样式时，只要到CSS文件中，更改样式的定义即可。,在CSS里面可以使用四种方法，将样式表添加到网页里面。分别为：直接定义标记的STYLE
2、属性（不建议）定义内部样式表嵌入外部样式表连接外部样式表,（1）直接定义标记的STYLE属性,aaabbbccc ddd实例1css_zhijiedingyicss.htm,（2）定义内部样式表,在元素中定义，其语法为：实例201css_zidingyineibuyangshi.htm其中的样式名称可以放在一起，表示相同的样式属性。如样式名称1，样式名称2样式属性：属性值；样式属性：属性值；实例：202css_zidingyineibuyangshi.htm,可以使用CLASS与ID选择符，在CSS里定义样式,Clsss类选择符的使用语法：实例211css_zidingyineibuyangs
3、hi.htm,利用ID指定选择符定义样式用class时“标记名称.样式名称”用id定义时“标记名称#样式名称”,（3）嵌入外部样式表,将样式定义在独立的CSS文件中，当浏览器在进行HTML文件的读取时，将以嵌入的方式，复制一份样式表到这个HTML文件中。嵌入外部样式表的语法：实例213css_qianruwaibucss.css213css_qianruwaibucss.htm,(4)连接外部样式表,当浏览器读取到HTML文件内设置格式的标记时，将会向所连接的外部样式表索取样式。连接外部样式表的语法：,四种方法同时出现时的使用顺序,直接定义标记的style属性最为优先。其他三种如果同时出现，且
4、各方法定义的样式又不相同时，浏览器会选择较后定义的样式显示。,展开“设计”面板，并选中“CSS样式”标签，出现“CSS样式”面板,新建特定类型的样式“确定”，完成创建,单击面板右下角的“新建CSS样式”按钮，创建CSS样式，弹出“新建CSS样式”对话框。,名称：CSS样式的命名类型：自定义或HTML标签属性、超链接属性更改定义在：CSS样式的作用范围和保存位置,2.CSS样式对话框的设置,类 型 背 景 区 块 方 框 边 框 列 表 定 位 扩 展,类型：主要用于定义文字的属性。,返回该节,背景：主要用于设置CSS样式的背景，包括背景颜色、背景图像、背景图像的控制等。,返回该节,重复：设置图
5、像作为背景时是否需要重复显示。附件：设置背景图像是否跟随内容滚动。,区块：主要用于设置文本的文字间距、对齐方式、排列方式、文字缩进等。,返回该节,垂直对齐：应用于图像，可以设置图文的对齐方式,方框：主要用于设置元素在页面中的位置。包括元素的边界、宽度、高度和浮动方式等。,返回该节,注：方框（盒子）属性把对象作为一个整体看待，装在一盒子里,边框：主要用于设置边框的样式。,返回该节,列表：主要用于设置文本列表的类型、列表项图片等。,返回该节,定位：主要设置对象在网页中的具体位置。,返回该节,扩展：主要用于制作鼠标样式、图片特殊效果,返回该节,3.CSS样式的管理,新建样式应用样式编辑样式删除样式附
6、加样式,套用：选择希望应用所选样式的对象，右键点击样式名称，在菜单中选择”套用”编辑：修改、添加样式的具体内容删除：删除选择的样式附加：链接外部样式表,实例1：重定义特定标签,定义“source/7”目录下的文件夹“7-2-1”为站点目录。打开7-2-1.htm页面。,新建CSS样式，保存样式在text1.css样式文件中,设置CSS样式内容,应用样式,实例2：使用CSS选择器,定义文件夹“7-2-2”为站点目录。打开7-2-2.htm页面。,新建CSS样式，选择“高级（ID、上下文选择器等）”类型。,设置a:link 无下划线，颜色为#333366 设置a:visited 无下划线，颜色为#
7、009999 设置a:hover 有下划线，颜色为#ff9900,选中文本“我的第一个链接”，然后在属性面板中设置其链接为“#”。新建CSS样式，选择“高级（ID、上下文选择器等）”类型。在选择器栏中直接输入a.link2:link,同样设置其他三种状态：a.link2:visited、a.link2:hover、a.link2:active 的颜色和效果选中文本“我的第二个链接”，然后在属性面板中设置其链接为“#”。,实例3：CSS控制网页背景,定义文件夹“7-2-3”为站点目录。打开7-2-3.htm页面。,新建CSS样式，命名为textback，仅对该文档生效。,选择“背景”类别，设置颜
8、色为CCFF66,单击上面一个单元格，应用该样式新建tdback样式，设置“背景”类别下的背景图像，选择“重复”，并应用到下面一个单元格中。,实例4：CSS区块排列文本,定义文件夹“7-2-4”为站点目录。打开7-2-4.htm页面。,新建CSS样式，命名为block1，保存在font.css样式文件中。,设置“类型”为宋体，大小14px，行高2em区块设置 如图所示,对中文文本应用该样式。新建block2样式，“类型”中设置字体为Verdana，大小为16px。在“区块”中设置文本对齐为两端对齐。对英文文本应用该样式。,实例5：CSS方框对齐对象,定义文件夹“7-2-5”为站点目录。打开7-2-5.htm页面。,新建CSS样式，命名为box1，仅对该文档生效。,设置“方框”属性。,对图片应用该样式。,实例6：CSS边框创建漂亮按钮,定义文件夹“7-2-6”为站点目录。打开7-2-6.htm页面。,新建CSS样式，命名为border1，仅对该文档生效。,设置“边框”属性,以同样的方法设置CSS样式border2、border3 对三个按钮分别应用样式。,谢 谢！接下来的内容：Dreamweaver辅助工具,
