第十一章 网页样式表CSSppt课件.ppt

第十一章 网页样式表CSSppt课件.ppt

ID:59011711

大小:1003.00 KB

页数:30页

时间:2020-09-26

第十一章 网页样式表CSSppt课件.ppt_第1页
第十一章 网页样式表CSSppt课件.ppt_第2页
第十一章 网页样式表CSSppt课件.ppt_第3页
第十一章 网页样式表CSSppt课件.ppt_第4页
第十一章 网页样式表CSSppt课件.ppt_第5页
资源描述:

《第十一章 网页样式表CSSppt课件.ppt》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

1、第11章网页样式表CSS在前面的章节中学习了基本的网页元素,及其对应的HTML标签的语法。但对于网页设计者来说,仅学会这些是不够的。在Web2.0标准中,HTML语言只用于定义网页的结构。要制作出漂亮且符合规范的网页,还需要使用CSS样式表来表现网页的外观。本章将介绍CSS的基本概念,以及通过CSS控制网页元素,如文字外观、背景设置和元素定位等。11.1CSS基础11.1.1CSS基本概念11.1.2CSS功能介绍11.1.1CSS基本概念CSS是CascadingStyleSheets的缩写,中文译为层叠样式表,用于控制或增强网页外

2、观样式,并且可以与网页的内容相分离。CSS1.0是W3C工业合作组织首次发布于1997年,用于对HTML语言功能的补充。1998年又推出了CSS2,进一步增强了HTML的语言功能。但由于浏览器之间的差异,对CSS的支持并不完全兼容。本书讲解的CSS主要针对IE用户。11.1.2CSS功能介绍在Web早期,网页一般用于技术交流,HTML只用于描述结构和内容。但随着Web的流行与发展,漂亮的外观变得格外重要。随着网页越来越复杂,HTML代码变得越来越繁杂,大量的标签堆积起来变得难以阅读和理解。此时CSS的出现为这种状况提供了解决之道。CS

3、S还原了HTML语言原本的描述结构功能,不仅实现了美化页面,还使页面结构变得简洁合理且清晰可读。简单了解CSS用于表现网页,控制或增强网页的外观。11.1.2CSS功能介绍Adobe网站首页效果11.2引用CSS既然CSS有如此强大的功能,那么在网页中如何进行引用?一般有下列4种方法:将外部样式表链接到HTML文件上。将外部样式表导入到HTML文件中。将样式表内嵌HTML文件中。将样式表内联到HTML文件行中。11.2.1外联样式表外联样式表就是把外部的样式表文件链接到网页上,从而在网页中使用样式表。此方法通过标签实现,关

4、于标签在前面的章节中有详细的介绍。将标签加入到标签之间,具体格式如下:…11.2.2内嵌样式表内嵌样式表是把CSS样式定义直接放在标签之间,然后插入到网页的头部。具体使用格式如下:11.2.3导入样式表导入样式表与导入外联样式表的方式相似,也是将外部定义好的CSS文件引入到网页中,从而在网页中进行应用。但是导入的CSS使用@import在内嵌

5、样式表中导入,导入方式可以与其他方式进行结合。导入样式表预览效果11.2.4内联样式表前面介绍了样式表的使用是与表现的内容标签相分离的。内联样式表是把样式直接定义在内容标签内部,不需要把代码放在外部文件或网页头部。内联样式表通过style属性把CSS样式表应用在内容上。其使用格式如下:

11.3CSS基本语法前面介绍了CSS如何在网页中引用,那么CSS到底是如何来定义网页的外观的?其定义的网页外观由一系列规则组成,包括构成、选择符和继承。接下来将分别进行介

6、绍。11.3.1构成CSS的定义由三部分构成:选择符(selector)、属性(properties)和属性的取值(value)。基本格式如下:selector{property:value}(选择符{属性:值})11.3.2选择符CSS的选择符可以分为4种基本类型:标签选择符、ID选择符、类选择符和特殊选择符。除了基本类型外,还可以把基本类型的选择符组合使用。这些类型选择符的使用规则如下。1.标签选择符2.ID选择符3.类选择符4.选择符组5.包含选择符11.3.3继承性继承性也称层叠性。样式表的继承规则是,外部的元素样式会保留下来

7、继承给这个元素所包含的其他元素。事实上,所有在元素中嵌套的元素都会继承外层元素指定的属性值。有时,把很多层嵌套的样式叠加在一起。11.3.4特殊选择符——伪类伪类可看做是一种特殊的类选择符,是能被支持CSS的浏览器自动识别的特殊选择符。其最大的用处是,可以对链接在不同状态下的内容定义不同的样式效果。1.语法2.锚的伪类——动态连接3.锚的伪类——类选择符动态链接11.3.5其他伪类CSS2定义了首字和首行(first-letter和first-line)的伪类,可以对元素的首字或首行设定不同的样式。下面的实例中在段落标记里定义文本首字

8、尺寸为默认大小的3倍,源码如下所示:p:first-letter{font-size:300%}11.4使用Dreamweaver编辑CSS前面的内容介绍了CS

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

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

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