在网页中使用css样式

在网页中使用css样式

ID:25142161

大小:415.18 KB

页数:22页

时间:2018-11-17

在网页中使用css样式_第1页
在网页中使用css样式_第2页
在网页中使用css样式_第3页
在网页中使用css样式_第4页
在网页中使用css样式_第5页
资源描述:

《在网页中使用css样式》由会员上传分享,免费在线阅读,更多相关内容在工程资料-天天文库

1、第十章在网页中使用CSS样式CSS即CascadingStyleSheets,称为层叠样式表,又称级联样式表。CSS技术是一种格式化网页的标准方式,它通过设置CSS属性使网页元素获得各种不同的效果。它扩展了HTML的功能,使网页设计者能够以更有效的方式设计网页属性。本章介绍CSS技术的概念和应用。通过本章的学习,读者应该掌握以下内容:·CSS样式的分类及应用方式·使用CSS样式表面板·建立CSS样式表·自定义CSS样式·链接外部CSS样式·复制CSS样式和导出CSS样式10.1CSS样式的分类及应用方式10.1.1CSS样式表概述

2、使用CSS定义的网页风格可以控制HTML语言标志的一些诸如字体、边框、颜色、背景等属性,也可以通过定义外部风格文件实现整个网站页面风格的统一。CSS不仅能定义文字格式,还可以为文字创造出丰富多彩的图形效果。使用文字加样式表来代替部分图形,以减少网页文件的字节数,提高网页的浏览速度,从而提高了网站的竞争力。使用CSS的滤镜功能,还可以直接对图形添加特效,就像图形处理软件一样,使网页更加绚丽。CSS样式为一组样式,它的属性在HTML标签中依次出现,并不显示在浏览器中。CSS样式可以定义在HUE文档的标记里,也可以在外部附加文档中作为外

3、加文件。此外,一个样式表可以作用多个页面,乃至整个站点,因此具有更好的易用性和扩展性。使用CSS技术除了可以在单独网页中应用一致的格式以外,对于大网站的格式设置和维护更具有重要意义。将CSS样式定义到样式表文件中,然后在多个网页中同时应用该样式表中的样式,就能确保多个网页具有一致的格式,并且能够随时更新(只要更改样式表文件就可以使所有网页自动更新),从而大大降低了网站的开发和维护工作量。由于CSS具有以上这些优点,它已经成为一种应用非常广泛的网页设计技术,甚至可以说,如果不懂CSS技术就很难设计出专业化的网站。10.1.2CSS样

4、式的分类DreamweaverMX可以定义几种不同类型的CSS样式,并且可以使用不同的方法将其应用在网页文档中。通常有以下3种CSS样式。(1)创建自定义样式(CustomCSSstyles):自定义CSS样式可以应用于任何文本。若将自定义样式应用于整段文本,则会在该段文本的源代码中加入CLASS属性,例如PCLASS=“testStyle”;若将自定义样式应用于一行文本,则在选择的文本源代码的两边插入包含了CLASS属性的SPAN标记。(2)重定义HTML标签(HTMLtagstyles):HTML标签样式为HTML标识符重新定

5、义格式化,如

。当重新定义格式化

后,所有

应用标识符的文本都会改变而应用新的样式。(3)使用CSS选择器(CSSselectorstyles):CSS选择器样式重新定义了特殊的标记组以及包含特殊序列号(ID)属性标记。如

这样的标记组合表示在表格单元格中的文本应用二级标题;而#testStyle应用于所有包含属性值ID=“testStyle”的标记中。10.1.3CSS样式的应用方式使用CSS的样式有以下几种方式。(1)局部套用:使用CSS语法定义HTML标签,这种方式应用的CSS样式只能影响该H

6、TML标签。(2)内联式:将CSS语法写在文档头部的标签中,这种方式应用的CSS样式将影响整个页面。(3)外联式:将创建好的CSS样式保存为.css文件,在多个文档中链接此.css文件,而在文档中不会出现CSS语法。当.css文件被修改时,所有链接此.css文件的页面将同时被更新。10.1.4CSS样式的冲突在同一个文本中应用两种或两种以上的CSS样式,这些样式会相互冲突产生不可预料的效果。浏览器根据以下规则显示样式属性。(1)如果在同一个文本中应用两种CSS样式,浏览器显示出两种样式中除冲突的属性

7、之外的所有属性。(2)如果在同一个文本中应用两种CSS样式相互冲突,浏览器显示出最里面的样式属性。(3)如果存在直接冲突,自定义CSS样式的属性(应用CLASS属性的样式)将覆盖HTML标记样式的属性。10.2使用CSS样式表面板使用CSS样式设置面板可以创建和管理CSS样式。通过下面的操作方法可以启用CSS样式表面板。·执行主菜单中的“窗口”→“CSS样式”命令。·在网页文档窗口的右侧,单击“设计”浮动面板的下拉三角形按钮。·按组合键Shift+F11键。以上3种方法之一都可以打开CSS样式表面板,默认为“应用样式”视图,还可以

8、切换到“编辑样式”视图,如图10-1所示。图10-1CSS样式表面板在CSS样式面板中可以进行下面的操作。(1)在列表中显示当前网页文档中的CSS样式。(2)单击该面板底部工具栏上的“附加样式表”按钮,将打开“链接外部样式表”对话框,链接或导入外部

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。