七章使用样式修饰课件.ppt

《七章使用样式修饰课件.ppt》由会员分享，可在线阅读，更多相关《七章使用样式修饰课件.ppt（46页珍藏版）》请在三一办公上搜索。

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、上下文选择器等）”类型。在选择器栏中直接输入a2:link,同样设置其他三种状态：a2:visited、a2:hover、a2:active 的颜色和效果选中文本“我的第二个链接”，然后在属性面板中设置其链接为“#”。,实例3：CSS控制网页背景,定义文件夹“7-2-3”为站点目录。打开7-2-3.htm页面。,新建CSS样式，命名为textback，仅对该文档生效。,选择“背景”类别，设置颜色为CCFF66,单击上面一个单元格，应

8、用该样式新建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辅助工具,谢谢,骑封篙尊慈榷灶琴村店矣垦桂乖新压胚奠倘擅寞侥蚀丽鉴晰溶廷箩侣郎虫林森-消化系统疾病的症状体征与检查林森-消化系统疾病的症状体征与检查,