CSS美化网页.ppt

用CCS美化网页 层叠样式表（Cascading Style Sheets，CSS）是W3C定义和维护的标准，是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言。 6.1CSS基础 CSS的基本概念在于可将网页要展示的内容与样式设定分开，也就是将网页的外观设定信息从网页内容独立出来，并集中管理。这样，当要改变网页外观时，只需更改样式设定的部分，HTML文件本身并不需要更改。 6.1.1认识“CSS样式”面板 选择“窗口”|“CSS样式”命令可以打开或者关闭“CSS样式”面板。 样式表文件名 CSS规则列表 属性和属性值列表 工具按钮栏 类别视图 6.1.2新建CSS规则 （1）在“新建CSS规则”对话框中首先设置“选择器类型”选项。 （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 创建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标签p/p 2．设置p标签的属性 运行效果 6.2.4超链接的CSS样式 1．创建超级链接 （ 运行效果 ） 2．用CSS样式重新定义超级链接的外观 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自定义段落列表 注意：书中的ol标签应该为ul 运行效果1 运行效果2 6.3.5 用CSS控制区块 1．创建CSS规则 2．应用CSS规则到 文本 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样式 运行效果