网站设计与开发技术教程 第6章 CSS样式.ppt

使用样式修饰页面 oCSS的全称是Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表。oCSS可以扩展HTML的功能，美化页面o可以通过菜单“修改”|“页面属性”命令进行单个页面样式的设置，如果同一个页面有不同的设置，或者不同的页面有相同的设置，则应该使用CSS样式面板进行设计。CSS样式：（1）选择“窗口”|“CSS样式”，出现“CSS样式”面板，选中“CSS样式”标签。1.CSS样式面板（2）CSS样式对话框的设置o 类 型o 背 景o 区 块o 方 框o 边 框o 列 表o 定 位o 扩 展o类型：主要用于定义文字的属性。o背景：主要用于设置CSS样式的背景，包括背景颜色、背景图像、背景图像的控制等。重复：设置图像作为背景时是否需要重复显示。附件：设置背景图像是否跟随内容滚动。o区块：主要用于设置文本的文字间距、对齐方式、排列方式、文字缩进等。垂直对齐：只应用于图像，可以设置图文的对齐方式 o方框：主要用于设置元素在页面中的位置。包括元素（例如图像）的边界、宽度、高度和浮动方式等。把对把对象作为一个整体看待，装在一盒子里象作为一个整体看待，装在一盒子里【填充】指定元素内容与元素边框的间距【边界】指定一个元素的边框与另一个元素的间距o边框：主要用于设置边框的样式。例如：图像边框，按钮边框o列表：主要用于设置文本列表的类型、列表项图片等。o定位：主要设置对象在网页中的具体位置。o扩展：主要用于制作鼠标样式、图片特殊效果3.CSS样式的管理o应用样式o编辑样式o删除样式o附加样式o套用：选择希望应用所选样式的对象，右键点击样式面板中的样式名称，在菜单中选择”套用”o编辑 ：修改、添加样式的具体内容o删除 ：删除选择的样式o附加 ：链接外部样式表 实例1：创建CSS样式1.打开css.htm页面。2.新建css样式3.保存css样式文件4.设置规则5.应用样式6.新建CSS样式，保存样式在csstext.css样式文件中7.设置CSS样式内容8.应用样式9.附加样式表：打开另外一个文件01.htm，点击附加样式表按钮10.结果如图实例2：使用CSS选择器1.新建CSS样式，选择“高级（ID、上下文选择器等）”类型。2.设置a:link（未访问过的）设置a:hover（鼠标经过）设置a:visited（访问过的）设置a:active（连接激活的时刻）实例3：CSS控制网页背景1.新建CSS样式，命名为textback，仅对该文档生效。2.选择“背景”类别，设置颜色为CCFF663.单击上面一个单元格，应用该样式4.新建tdback样式，设置“背景”类别下的背景图像，选择“重复”，并应用到下面一个单元格中。实例4：CSS区块排列文本1.打开文件2.新建CSS样式，命名为text，保存在csstest.css样式文件中。3.设置“类型”和“区块”4.对中文文本应用该样式。实例5：CSS方框对齐对象 1.打开文件2.新建CSS样式，命名为box，仅对该文档生效。3.设置 “方框”属性。4.对图片应用该样式。实例6：CSS边框创建漂亮按钮1.打开文件。2.新建CSS样式，命名为border1，仅对该文档生效。3.设置 “边框”属性4.以同样的方法设置CSS样式border2、border3 5.对三个按钮分别应用样式。