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

《网站设计与开发技术教程 第6章 CSS样式》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、使用样式修饰页面CSS的全称是CascadingStyleSheets，中文翻译为“层叠样式表”，简称样式表。CSS可以扩展HTML的功能，美化页面可以通过菜单“修改”

2、“页面属性”命令进行单个页面样式的设置，如果同一个页面有不同的设置，或者不同的页面有相同的设置，则应该使用CSS样式面板进行设计。CSS样式：（1）选择“窗口”

3、“CSS样式”，出现“CSS样式”面板，选中“CSS样式”标签。1.CSS样式面板（1）单击面板右下角的“新建CSS样式”按钮，创建CSS样式，弹出“新建CSS样式”对话框。或执

4、行【文本】

5、【CSS样式】

6、【新建】命令。类型：自定义或HTML标签属性、超链接属性更改名称：CSS样式的命名定义在：CSS样式的作用范围和保存位置2.新建特定类型的样式（2）CSS样式对话框的设置类型背景区块方框边框列表定位扩展类型：主要用于定义文字的属性。背景：主要用于设置CSS样式的背景，包括背景颜色、背景图像、背景图像的控制等。重复：设置图像作为背景时是否需要重复显示。附件：设置背景图像是否跟随内容滚动。区块：主要用于设置文本的文字间距、对齐方式、排列方式、文字缩进等。垂直对齐：只应用于图像，可以

7、设置图文的对齐方式方框：主要用于设置元素在页面中的位置。包括元素（例如图像）的边界、宽度、高度和浮动方式等。把对象作为一个整体看待，装在一盒子里【填充】指定元素内容与元素边框的间距【边界】指定一个元素的边框与另一个元素的间距边框：主要用于设置边框的样式。例如：图像边框，按钮边框列表：主要用于设置文本列表的类型、列表项图片等。定位：主要设置对象在网页中的具体位置。扩展：主要用于制作鼠标样式、图片特殊效果3.CSS样式的管理应用样式编辑样式删除样式附加样式套用：选择希望应用所选样式的对象，右键点击样式面板中的

8、样式名称，在菜单中选择”套用”编辑：修改、添加样式的具体内容删除：删除选择的样式附加：链接外部样式表实例1：创建CSS样式打开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

9、:hover（鼠标经过）设置a:visited（访问过的）设置a:active（连接激活的时刻）实例3：CSS控制网页背景1.新建CSS样式，命名为textback，仅对该文档生效。2.选择“背景”类别，设置颜色为＃CCFF663.单击上面一个单元格，应用该样式4.新建tdback样式，设置“背景”类别下的背景图像，选择“重复”，并应用到下面一个单元格中。实例4：CSS区块排列文本1.打开文件新建CSS样式，命名为text，保存在csstest.css样式文件中。设置“类型”和“区块”对中文文本应用该样式

10、。实例5：CSS方框对齐对象打开文件新建CSS样式，命名为box，仅对该文档生效。设置“方框”属性。对图片应用该样式。实例6：CSS边框创建漂亮按钮打开文件。新建CSS样式，命名为border1，仅对该文档生效。设置“边框”属性以同样的方法设置CSS样式border2、border3对三个按钮分别应用样式。