《用ccs美化网页》由会员分享，可在线阅读，更多相关《用ccs美化网页（20页珍藏版）》请在金锄头文库上搜索。
1、第6章 用CCS美化网页,层叠样式表（Cascading Style Sheets，CSS）是W3C定义和维护的标准，是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言。,6.1CSS基础,CSS的基本概念在于可将网页要展示的内容与样式设定分开，也就是将网页的外观设定信息从网页内容独立出来，并集中管理。这样，当要改变网页外观时，只需更改样式设定的部分，HTML文件本身并不需要更改。,6.1.1认识“CSS样式”面板,选择“窗口”|“CSS样式”命令可以打开或者关闭“CSS样式”面板。,6.1.2新建CSS规则,（1）在“新建CSS规则”对话框中首先设
2、置“选择器类型”选项。 （2）在“名称”文本框中选择或者输入一个CSS规则名称。 （3）设置CSS规则定义在本文档内还是定义在外部样式表文件中。 （4）在“.mycss1的CSS规则定义”对话框中可以分类设置CSS规则的属性。 （5）设置以后单击“确定”按钮即可完成一个CSS规则的定义，在“CSS样式”面板中就可以看到定义好的CSS规则。 （6）切换到“代码”视图，可以看到在HTML代码中新增了一段CSS样式代码。,6.1.3在网页中应用CSS样式,1在“属性”面板选择应用特定的样式 2利用【标签选择器】选择样式 3使用右键快捷菜单 4清除样式 5查看正在应用的样式属性列表,6.2 创建CSS
3、,创建CSS样式时，在“新建CSS规则”对话框中，设置不同的“选择器类型”可以创建不同类型的CSS样式。一般情况下，经常创建的CSS样式类型包括类选择符、标识选择符、重定义HTML标签、超级链接的CSS样式等。,6.2.1类选择符,1建立类选择符CSS样式 2. CSS样式应用于文本 3. CSS样式应用于图片 4. 理解类标识符的CSS代码 运行效果,6.2.2标识选择符,1建立标识选择符样式 2在单元格中应用样式 运行效果,6.2.3用CSS重新定义HTML标签,1修改HTML标签 2设置p标签的属性 运行效果,6.2.4超链接的CSS样式,1创建超级链接 （ 运行效果 ） 2用CSS样式
4、重新定义超级链接的外观,6.3CSS基本应用,本节将分门别类地对CSS样式提供的各类属性进行讨论，并通过一些实例讲解CSS在网页制作中的基本应用。,6.3.1用CSS格式化文本,1创建内部CSS规则 2应用CSS规则 运行效果,6.3.2 用CSS控制表格,1控制表格边框 2左上角的单元 格边框 3右下角的单元 格边框 运行效果,6.3.3 用CSS控制列表,1建立段落列表 2用CSS自定义段落列表 注意：书中的标签应该为 运行效果1 运行效果2,6.3.4 用CSS控制背景,1建立标识选择符 2设置背景图片 3使用标识选择符 运行效果,6.3.5 用CSS控制区块,1创建CSS规则 2应用C
5、SS规则到 文本 3应用CSS规则到 图片 运行效果,6.3.6 CSS样式滤镜的应用,下面通过制作一个文字的模糊效果，讲解利用CSS滤镜增加网页视觉效果的方法 运行效果,6.4 链接外部CSS样式文件,CSS样式不但可以直接嵌入在页面中，而且可以保存为独立的样式文件（扩展名为.css），需要引用样式文件中的CSS样式时，可以将其链接到网页文档中。多个网页文件可以共享一个.css样式文件，对.css样式文件的修改将会影响所有以链接方式调用这个.css样式文件的网页文件。,6.4.1 制作CSS样式文件,1从CSS模板新建CSS文件 2修改CSS样式,6.4.2 通过链接使用外部样式表,1链接外部CSS文件 2在网页中应用CSS样式 运行效果,
