使用样式修饰页面.ppt

第七章 使用样式修饰页面,熟悉CSS样式面板 掌握创建和使用一些常用的CSS样式的方法 掌握通过CSS样式管理和修饰页面的方法,1. CSS样式的创建,CSS的全称是Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表。 CSS可以扩展HTML的功能，美化页面 最基本的功能就是为了将样式的定义与HTML文件分离开来。,我们定义一个CSS文件，并让所有HTML文件都调用这个CSS文件所定义的样式，以后要更改HTML中某段落的样式时，只要到CSS文件中，更改样式的定义即可。,在CSS里面可以使用四种方法，将样式表添加到网页里面。分别为： 直接定义标记的STYLE属性（不建议） 定义内部样式表 嵌入外部样式表 连接外部样式表,（1）直接定义标记的STYLE属性, aaa bbb ccc ddd 实例1css_zhijiedingyicss.htm,（2）定义内部样式表,在元素中定义，其语法为： 实例201css_zidingyineibuyangshi.htm 其中的样式名称可以放在一起，表示相同的样式属性。 如样式名称1，样式名称2样式属性：属性值；样式属性：属性值； 实例：202css_zidingyineibuyangshi.htm,可以使用CLASS与ID选择符， 在CSS里定义样式,Clsss类选择符的使用语法： 实例211css_zidingyineibuyangshi.htm,利用ID指定选择符定义样式 用class时 “标记名称.样式名称” 用id定义时 “标记名称#样式名称” ,（3）嵌入外部样式表,将样式定义在独立的CSS文件中，当浏览器在进行HTML文件的读取时，将以嵌入的方式，复制一份样式表到这个HTML文件中。 嵌入外部样式表的语法： 实例213css_qianruwaibucss.css 213css_qianruwaibucss.htm,(4) 连接外部样式表,当浏览器读取到HTML文件内设置格式的标记时，将会向所连接的外部样式表索取样式。 连接外部样式表的语法： ,四种方法同时出现时的使用顺序,直接定义标记的style属性最为优先。 其他三种如果同时出现，且各方法定义的样式又不相同时，浏览器会选择较后定义的样式显示。,展开“设计”面板，并选中“CSS样式”标签，出现 “CSS样式”面板,新建特定类型的样式 “确定”，完成创建,单击面板右下角的“新建CSS样式”按钮 ，创建CSS样式，弹出“新建CSS样式”对话框。,名称：CSS样式的命名 类型：自定义或HTML标签属性、超链接属性更改 定义在：CSS样式的作用范围和保存位置,2. CSS样式对话框的设置,类 型 背 景 区 块 方 框 边 框 列 表 定 位 扩 展,类型：主要用于定义文字的属性。,返回该节,背景：主要用于设置CSS样式的背景，包括背景颜色、背景图像、背景图像的控制等 。,返回该节,重复：设置图像作为背景时是否需要重复显示。 附件：设置背景图像是否跟随内容滚动。,区块：主要用于设置文本的文字间距、对齐方式、排列方式、文字缩进等。,返回该节,垂直对齐：应用于图像，可以设置图文的对齐方式,方框：主要用于设置元素在页面中的位置。包括元素的边界、宽度、高度和浮动方式等。,返回该节,注： 方框（盒子）属性把对象作为一个整体看待，装在一盒子里,边框：主要用于设置边框的样式。,返回该节,列表：主要用于设置文本列表的类型、列表项图片等。,返回该节,定位：主要设置对象在网页中的具体位置。,返回该节,扩展：主要用于制作鼠标样式、图片特殊效果,返回该节,3. CSS样式的管理,新建样式 应用样式 编辑样式 删除样式 附加样式,套用：选择希望应用所选样式的对象，右键点击样式名称，在菜单中选择”套用” 编辑 ：修改、添加样式的具体内容 删除 ：删除选择的样式 附加 ：链接外部样式表,实例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 无下划线，颜色为#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，仅对该文档生效。,选择“背景”类别，设置颜色为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-