CSS美化网页.ppt

CSS美化网页美化网页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标签标签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自定义段落列表自定义段落列表注意：书中的注意：书中的标签应该为标签应该为运行效果运行效果1运行效果运行效果26.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样式样式运行效果运行效果