《第9章 CSS样式基础课件.ppt》由会员分享，可在线阅读，更多相关《第9章 CSS样式基础课件.ppt（10页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、CSS样式是对HTML语言的有效补充，通过使用CSS样式，能够节省许多重复性的格式设置，例如网页文字的大小和颜色等。通过CSS样式可以轻松地设置网页元素的显示位置和格式，还可以使用CSS 3.0新增的样式属性，在网页中实现动态的交互效果，大大提升网页的美观性。为什么要使用为什么要使用CSS样式样式在HTML中，虽然有、和等标签可以控制文本或图像等内容的显示效果，但这些标签的功能非常有限，而且对有些特定的网站需求，用这些标签是不能够完成的，所以需要引入CSS样式。CSS样式的版本发展样式的版本发展随着CSS的广泛应用，CSS技术也越来越成熟。CSS现在有3个不同层次的标准，即CSS 1、CSS
2、2和CSS 3。CSS 1主要定义了网页的基本属性，如字体、颜色和空白边等。CSS 2在此基础上添加了一些高级功能，如浮动和定位，以及一些高级选择器，如子选择器和相邻选择器等。CSS 3开始遵循模块化开发，这将有助于理清模块化规范之间的不同关系，减少完整文件的大小。CSS 3.0的发展的发展目前CSS 3.0规范尚处于完善之中，因此浏览器的支持程度各有不同。为了让用户能够体验到CSS 3.0的好处，各主流浏览器都定义了自己的私有属性。CSS 3.0开始遵循模块化的开发。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，CSS 3.0把它分解为多个小的模块，这样，有助于理清各个模块规范之间的
3、关系。浏览器对浏览器对CSS 3.0的支持情况的支持情况尽管CSS 3.0的很多新的特性很受开发者的欢迎，但并不是所有的浏览器都支持它。各个主流浏览器都定义了各自的私有属性，以便能够让用户体验CSS 3.0的新特性。了解了解CSS 3.0的全新功能的全新功能与之前的版本相比，CSS 3.0的改进是非常大的。CSS 3.0不仅仅进行了修订和完善，更增加了很多新的特性，把样式表的功能发挥得淋漓尽致。之前的很多效果都借助图片和脚本来实现，现在只需要几行代码就能搞定了。这不仅简化了设计师的工作，页面代码也更加简洁和清晰。CSS样式是纯文本格式文件，在编辑CSS时，可以使用一些简单的纯文本编辑工具，例如
4、记事本，同样也可以使用专业的CSS编辑工具，例如Dreamweaver。CSS样式是由若干条样式规则组成的，这些样式规则可以应用到不同的元素或文档中来定义他们所显示的外观 。 CSS样式基本语法样式基本语法CSS样式由选择器和属性构成，CSS样式的基本语法如下。CSS选择器 属性1: 属性值1;属性2: 属性值2;属性3: 属性值3; CSS规则构成规则构成所有CSS样式的基础就是CSS规则，每一条规则都是一条单独的语句，确定应该如何设计样式，以及应该如何应用这些样式。因此，CSS样式由规则列表组成，浏览器用它来确定页面的显示效果。CSS由两部分组成：选择器和声明，其中声明由属性和属性值组成。
5、选择器声明属性属性值在CSS样式中提供了多种类型的CSS选择器，包括通配符选择器、标签选择器、类选择器、ID选择器和伪类选择器等，还有一些特殊的选择器，在创建CSS样式时，首先需要了解各种选择器类型的作用。 通配选择器通配选择器所谓的通配符选择器，也是指对对象可以使用模糊指定的方式进行选择。CSS的通配符选择器可以使用*作为关键字，使用方法如下。* 属性: 属性值;标签选择器标签选择器HTML文档是由多个不同的标签组成，CSS标签选择器可以用来控制标签的应用样式。标签名属性: 属性值;实战练习实战练习创建通配选择器和标签选择器创建通配选择器和标签选择器最终文件：光盘最终文件第9章9-3-2.h
6、tml视频：光盘视频第9章9-3-2.swf ID选择器选择器在CSS样式中，ID选择器使用#进行标识，如果需要对id名为top的标签设置样式，应当使用如下格式。#top 属性: 属性值;类选择器类选择器类选择器用来为一系列的标签定义相同的显示样式，其基本语法如下。.类名称 属性: 属性值;实战练习实战练习创建创建ID选择器和类选择选择器和类选择器器最终文件：光盘最终文件第9章9-3-4.html视频：光盘视频第9章9-3-4.swf伪类和伪对象选择器伪类和伪对象选择器伪类及伪对象是一种特殊的类和对象，由CSS样式自动支持，属CSS的一种扩展类型和对象，名称不能被用户自定义，使用时只能够按标准
7、格式进行应用。实战练习实战练习创建超链接伪类选择器创建超链接伪类选择器群组选择器群组选择器使用逗号对选择器进行分隔，使得页面中所有的、和标签都将具有相同的样式定义，这样做的好处是对于页面中需要使用相同样式的地方只需要书写一次CSS样式即可实现，减少代码量，改善CSS代码的结构。派生选择器派生选择器当仅仅想对某一个对象中的“子”对象进行样式设置时，派生选择器就被派上了用场，派生选择器指选择器组合中前一个对象包含后一个对象，对象之间使用空格作为分隔符。实战练习实战练习创建群组选择器和派生选创建群组选择器和派生选择器择器最终文件：光盘最终文件第9章9-3-5.html视频：光盘视频第9章9-3-5.
8、swf最终文件：光盘最终文件第9章9-3-7.html视频：光盘视频第9章9-3-7.swf在CSS样式表中，选择器是一个非常重要的功能。伴随着CSS 3和HTML 5的发展，选择器的功能已经超出了CSS的应用范围，发展成为一个独立的选择器规范。针对CSS样式表选择器，在CSS 3.0中新增了4种选择器类型，分别是属性选择器、结构伪类选择器、UI元素状态伪类选择器和伪元素选择器 。 属性选择器属性选择器属性选择器是指直接使用属性控制HTML标签样式，它可以根据某个属性是否存在或者通过属性值来查找元素，具有很强大的效果。实战练习实战练习在网页中使用属性选择器在网页中使用属性选择器结构伪类选择器结
9、构伪类选择器结构伪类选择器是指运用文档结构树来实现元素过滤，简单的来说，就是利用文档结构之间的相互关系来匹配指定的元素，用来减少文档内对class属性以及id属性的定义，从而可以使整个文档更加简练。最终文件：光盘最终文件第9章9-4-1.html视频：光盘视频第9章9-4-1.swfUI元素状态伪类选择器元素状态伪类选择器UI元素状态包括可用、不可用、选中、未选中、获取焦点、失去焦点、锁定和待机等。在CSS 3.0中提供了UI元素状态伪类选择器，可以设置元素处在某种状态下的样式，在人机交互过程中，只要元素的状态发生了变化，选择器就有可能会匹配成功。伪元素选择器伪元素选择器在CSS3.0中，还有
10、一种伪元素选择器，它并不是针对真正的元素使用的选择器，而是针对CSS已经定义好的伪元素使用的选择器。 实战练习实战练习在网页中使用伪元素选择器在网页中使用伪元素选择器最终文件：光盘最终文件第9章9-4-4.html视频：光盘视频第9章9-4-4.swfCSS样式能够很好的控制页面的显示，以达到分离网页内容和样式代码。CSS样式可以用来改变从文本样式到页面布局的一切，并且能够与JavaScript结合产生动态显示效果。 应用应用CSS样式的样式的4种方式种方式在网页中应用CSS样式表有4种方式：内联CSS样式、内部CSS样式、链接外部CSS样式表文件和导入外部CSS样式表文件。实战练习实战练习创建并链接外部创建并链接外部CSS样式表文件样式表文件CSS样式的特性样式的特性CSS通过与HTML的文档结构相对应的选择符来达到控制页面表现的目的，在CSS样式的应用过程中，还需要注意CSS样式的一些特性，包括继承性、特殊性、层叠性和重要性。最终文件：光盘最终文件第9章9-5-1.html视频：光盘视频第9章9-5-1.swfCSS样式是网页设计制作的必备技能，本章主要介绍了有关CSS样式的基础知识，包括CSS样式的版本、CSS样式语法、CSS选择器和在网页中应用CSS样式的方式等内容。通过本章的学习，使读者对CSS样式的理解更加深入，以便熟练地掌握并使用CSS样式。