《网络技术基础——Internet和网页设计教学课件作者第二版童欣第109章Frontpage》由会员分享,可在线阅读,更多相关《网络技术基础——Internet和网页设计教学课件作者第二版童欣第109章Frontpage(26页珍藏版)》请在金锄头文库上搜索。
1、10.9 网页样式表,在编辑网页的过程中,为了使文本的风格在各个网页中保持一致,通常使用样式。样式是控制文本块或段落外观的一组格式属性。使用样式表的目的不仅是让它们具有相同的外观,也是为了修改和编辑方便。如果要修改文本的外观,只要修改样式,凡应用了样式的文本就都被修改了。,10.9 网页样式表,1创建网页样式 一般情况下,编辑文本时,如果没有使用样式的话,都是在普通样式下编辑的文本,即样式工具按钮栏中显示的是 。单击普通右侧的下拉箭头,可看到在下拉列表中,系统已经提供的一些样式。除此之外,用户还能创建自己的样式。,10.9.1 网页样式, 单击“格式”菜单下的“样式”命令,弹出“样式”对话框。
2、,10.9.1 网页样式, 在该对话框中,单击“新建”按钮,弹出“新样式”对话框。在“名称(选择器)”输入框中输入新建样式的名称,如font1。单击“格式”按钮,从弹出的菜单中可看到字体、段落、边框、编号方式和定位选项。,10.9.1 网页样式,字体: 用来定义文本的字体、颜色、字型、字号、效果及字符间距等。,10.9.1 网页样式,段落: 用来定义段落的对齐方式、缩进等。,10.9.1 网页样式,边框: 用来定义边框、背景等。,10.9.1 网页样式,编号方式: 用来定义项目列表的符号、编号等样式。,10.9.1 网页样式,定位: 用来定义文本饶图片的环绕方式,,10.9.1 网页样式, 根
3、据需要选择要定义样式的各个内容。例如设置一个名为font1的文本样式,各属性设置如图所示。单击“确定”按钮,样式设置好后了。,10.9.1 网页样式, 单击“确定”按钮,样式设置好后了。单击“格式”工具栏中的“样式”右侧的箭头,可看到font1已经添加到样式列表中,,10.9.1 网页样式,10.9.1 网页样式,2应用样式 样式创建好后,就要在网页元素中应用样式了。应用样式的方法很简单:将光标定位在要应用样式的文本中,或选中要应用样式的网页元素,单击样式表中的样式即可。,10.9.1 网页样式,例如:将图中的文本应用样式。,10.9.1 网页样式, 选中要使用样式的文本,单击样式下拉列表中的
4、“font1”,文本就被设置成font1定义的格式。 将标题应用 “标题1”的样式。如图所示。,10.9.1 网页样式,3修改样式 打开“样式”对话框,在“样式”列表框中,选择要修改的用户创建的样式,单击“修改”按钮,即可对样式重新定义。 4删除样式 打开“样式”对话框,在“样式”列表框中,选择要删除的用户创建的样式,单击“删除”按钮,样式就被删除了。,10.9.2 外部样式表,用上述方法创建的样式,只能在创建样式的文件中使用,而不能被其它文件所使用,这种样式在应用上受到了很大的限制,要使样式能被站点中其它文件使用,就需要创建外部样式,当在站点的网页链接到外部样式时,该外部样式就被链接到网页中
5、的样式列表中了。,10.9.2 外部样式表,1创建外部样式 外部样式其实是一种后缀为.css的级联样式表文件。创建外部样式,就是创建一个这样的样式文件。 单击“文件”菜单下“新建”命令,在“新建”任务窗格中的“新建网页”选项中,选择“其他网页摸板” ,打开“网页摸板”对话框。单击“样式表”标签,切换到“样式表”选项卡,,10.9.2 外部样式表,在“样式表”选项卡中,选择一种要创建的样式类型,如创建一个“普通”样式表。单击“确定”按钮,,10.9.2 外部样式表,进入编辑样式界面,系统弹出“样式”工具栏,单击“样式”工具按钮 ,弹出“样式”对话框,定义样式的字体、段落等。创建的过程同上节相同。
6、,10.9.2 外部样式表,样式创建好后,单击“样式”对话框中的“确定”按钮,回到编辑样式窗口。这时可看到该级联样式的HTML标记符。,10.9.2 外部样式表,单击“文件”菜单下的“保存”命令,在“另存为”对话框中,输入要保存的样式的文件名,确定要保存样式的位置,单击“保存”按钮,该样式文件就被保存指定的位置上了。,10.9.2 外部样式表,2使用外部样式 使用外部级联样式表的方法是: 打开要使用外部样式的网页。 单击“格式”菜单下的“样式表链接”命令,打开“链接样式表”对话框。,10.9.2 外部样式表,单击“添加”按钮,弹出“选择样式表”对话框。选择要链接的样式文件。,10.9.2 外部
7、样式表,单击“确定”按钮,返回到“链接样式表”,并在URL的列表框中出现了选择的样式文件,单击“确定”按钮。回到要使用样式的网页。 单击“样式”列表的下拉箭头,可见,外部级联样式文件已加到列表中,用户可以使用了。,10.9.2 外部样式表,3修改外部样式 修改外部样式的方法是: 在“文件夹列表”中或“文件夹”视图下,双击外部样式文件名,即可打开样式编辑窗口,单击“样式”工具按钮,弹出“样式”对话框,重新编辑样式。 4删除外部样式 删除外部样式文件同删除站点中的其它文件一样。最简单的一种方法是:在“文件夹列表”中或“文件夹”视图下,鼠标右键单击外部样式文件名,在弹出的快捷菜单中,选择“删除”命令,即可删除外部样式文件。,