6.CSS样式.pptVIP

6. 使用CSS CSS的全称是Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表。 CSS可以扩展HTML的功能，美化页面 可以通过菜单“修改”|“页面属性”命令进行单个页面样式的设置，如果同一个页面有不同的设置，或者不同的页面有相同的设置，则应该使用CSS样式面板进行设计。 1. CSS样式面板 （1）选择“窗口”|“CSS样式”，出现 “CSS样式”面板，选中“CSS样式”标签。 （1）单击面板右下角的“新建CSS样式”按钮 ，创建CSS样式，弹出“新建CSS样式”对话框。或执行【文本】|【CSS样式】|【新建】命令。 加载css样式有以下四种 外部样式 内部样式 行内样式 导入样式 外部形式 link href=layout.css rel=stylesheet type=text/css / 这种形式是把css单独写到一个css文件内，然后在源代码中以link方式链接。 它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。 内部样式 style h2 { color:#f00;} /style 这种形式是内部样式表，它是以style和/style结尾，写在源代码的head标签内。 这样的样式表只能针对本页有效。不能作用于其它页面。 行内样式 p style=font-size:18px;内部样式/p 这种在标签内以style标记的为行内样式，行内样式只针对标签内的元素有效， 因其没有和内容相分离，所以不建议使用。 导入样式 @import url(/css/global.css) 链接样式是以@import url标记所链接的外部样式表，它一般常用在另一个样式表内部。 如layout.css为主页所用样式，那么我们可以把全局都需要用的公共样式放到一个global.css的文件中，然后在layout.css中以@import url(“/css/global.css”)的形式链接全局样式，这样就使代码达到很好的重用性。 （2）CSS样式对话框的设置 类 型 背 景 区 块 方 框 边 框 列 表 定 位 扩 展 类型：主要用于定义文字的属性。 背景：主要用于设置CSS样式的背景，包括背景颜色、背景图像、背景图像的控制等 。 区块：主要用于设置文本的文字间距、对齐方式、排列方式、文字缩进等。 方框：主要用于设置元素在页面中的位置。包括元素（例如图像）的边界、宽度、高度和浮动方式等。把对象作为一个整体看待，装在一盒子里 边框：主要用于设置边框的样式。 列表：主要用于设置文本列表的类型、列表项图片等。 定位：主要设置对象在网页中的具体位置。 扩展：主要用于制作鼠标样式、图片特殊效果 3. CSS样式的管理 应用样式 编辑样式 删除样式 附加样式 套用：选择希望应用所选样式的对象，右键点击样式面板中的样式名称，在菜单中选择”套用” 编辑 ：修改、添加样式的具体内容 删除 ：删除选择的样式 附加 ：链接外部样式表 实例1：创建CSS样式 打开css.htm页面。 2.新建css样式 4.设置规则 6.新建CSS样式，保存样式在csstext.css样式文件中 8.应用样式 9.附加样式表：打开另外一个文件01.htm，点击附加样式表按钮 实例2：使用CSS选择器 1.新建CSS样式，选择“高级（ID、上下文选择器等）” 类型。 CSS选择器 准确而简洁的运用CSS选择器会达到非常好的效果，也就是说我们不必通篇给每一个元素定义类（class）或ID，通过合适的组织，可以用最简单的方法实现同样的效果。 在实际设计中，最常用的选择器有以下五类。 1、标签选择器 标签选择器是直接将HTML标签作为CSS选择器，可以是p、h1、dl、strong等HTML标签。如： p{font:12px;} ? em{color:blue;} ? dl{float:left;margin-top:10px;} 2、类（class）选择器 在CSS里用一个点开头表示类别选择器定义，例如： .da1{ ? color:#f60; ? font-size:14px; ? } ? 在页面中，用class=“类别名”的方法调用，如 ＜span class=da114px大小的字体＜/span 这个方法比较简单灵活，可以随时根据页面需要新建和删除。但需要避免class定义太多。 ? 3、id选择器 通常先给页面元素定义id。例如定义一个层 ＜div id=menubar＜/div 然后在样式表里这样定义： #menubar{ ? margin:0auto; ? backg