欢迎来到天天文库
浏览记录
ID:40337777
大小:685.00 KB
页数:22页
时间:2019-07-31
《网页制作实用教程 张淑清 第5章 网页内容的修饰-CSS样式》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、第5章网页内容的修饰-CSS样式教学内容:CSS样式的类型、创建CSS样式、编辑CSS样式、设置CSS样式的基本属性、链接和导出CSS样式表、CSS在网页中的应用。教学重点和难点:掌握在网页中添加、应用CSS样式的方法。5.1初识CSSCSS样式就像word中的格式刷,可以对众多网页中的文本及文本区外观进行统一控制。5.1.1样式表的概念样式表是为了弥补HTML语言而开发,调整字间距、行间距、取消链接的下划线、固定背景图像等样式表可以实现原来的HTML标记无法实现的效果。1.样式表的优点(1)内容结构和格式控制相分离(2)精确控制网页外观(3)制作体积下,下载页面快(4)快速规格网页样式(
2、5)兼容不同浏览器2.样式表标记定义样式表的部分用标记来表示。样式表的内容应该位于
3、1.2CSS样式的类型1.类样式(class)类样式的名称必须以句点(英文状态)开头,后跟字母或字母和数字组合(例如,.mycss)。为类样式命名时,不能使用body,table等与“标签”样式相冲突的HTML标签名称。class的类别定义在代码中是写在标记之间,并放在
4、态。a:link:超链接文字的一般状态a:visited:超链接文字已链接过的状态a:hover:鼠标光标移到超链接文字上的状态a:active:超链接文字正在链接中的状态5.2使用CSS编辑器使用CSS编辑器可以创建、编辑和删除CSS样式。并且可以将外部样式表文件附加到当前文档。“附加样式表”:单击该按钮会打开“链接外部样式表”对话框,可选择要链接到或导入到当前文档中的外部样式表。“新建CSS规则”:打开“新建CSS样式”对话框,可以选择创建的样式类型。如类样式、标签样式或高级样式。“编辑样式”:打开“CSS样式定义”对话框,可编辑当前文档或外部样式表中的样式。“删除CSS规则”:删除“
5、CSS样式”面板的所选样式,并从应用该样式的所有元素中删除格式,但是不删除对该样式的引用。5.2.1创建CSS新样式1.创建标签样式例1:将页面背景色设置成土黄色(#996600),页面左边界、上边界均为0。操作步骤如下:①单击“CSS样式”面板中的“新建CSS样式”按钮。在“新建CSS样式”对话框中,“选择器类型”设置为“标签”,在“标签”下拉菜单中选择body,“定义在”设置为“仅对该文档”,然后单击“确定”按钮,创建一个名为body的标签样式。②在“body的CSS规则定义”对话框中设置该样式的属性,在“分类”的“背景”项中设置网页的背景颜色为“#996600”。然后将“分类”切换到
6、“方框”,在边界区域分别设置页面的上、左边界为“0”像素。③单击“确定”按钮后,在“CSS样式”面板中会增加body样式名称,并且定义的样式会自动应用到页面中。④将页面切换到“拆分”视图,我们会发现body标签出现在代码里,是包围在这对标记之间,并且镶嵌在网页的
7、该文档”,单击“确定”按钮。②在出现的“.style2的CSS规则定义”对话框中,设置类型项中的字体为“黑体”,大小为“24点数(pt)”。③单击“确定”按钮。④保存网页,按F12键预览网页。3.创建高级样式参见教材第5章[实例3]。5.2.2编辑CSS样式1.管理CSS样式修改例2中创建的.style2样式。将样式名称改为.biaoti,字体设置为新宋体,字号设置为36像素,颜色设置为#339966。操作如下:①打开“
此文档下载收益归作者所有