《网站设计与开发》 课件 项目三 CSS3 页面美化.pptx

项目三CSS3页面美化;项目引入

网页设计不仅仅是简单的各种元素的堆砌，还要追求美观，达到营销效果。如何通过外观、样式设计美化页面，把商品图片、文案、促销信息、活动方式等内容更加清晰地展示出来，有效地传递给消费者，是网站设计开发人员需要解决的一个难题。

自从HTML被开发以来，页面图文样式就以各种形式存在，以实现页面美化的效果。但随着HTML的更新迭代，为了满足页面设计者的要求，HTML添加了很多显示功能，使得HTML变得越来越杂乱，HTML页面也越来越臃肿，于是层叠样式表（CascadingStyleSheets，CSS）便应运而生了。;CSS是网页设计领域的一个突破，它为HTML标记语言提供了一种样式描述，定义了网页元素的显示方式，能够让网页元素实现精准定位，并且能够方便地调整文字、图片等元素。利用CSS可以实现修改一个小的样式随之更新与之相关的所有页面元素，具有丰富的样式定义、易于使用和修改、多页面应用、页面压缩等特性，一经推出就得到了非常广泛的应用。CSS3是CSS的升级版本。;学习目标

知识目标

1.熟悉CSS3语法规则。

2.掌握常见CSS3选择器的类型及其使用方法。

3.掌握样式表链接方法。

技能目标

1.能够按照CSS3语法规则对页面元素属性进行设置。

2.能够根据需要选择合适的CSS3选择器并应用。;任务分析

CSS是层叠样式表，可以使网页表现形式和内容分离。当需要修改网页的表现形式时，只需要修改样式表即可，不需要改变HTML页面的内容结构，就可以改变整个网站的表现形式和风格，不必逐一修改，极大地减少了重复性劳动。而且，如果采用了外链式样式表应用方式，样式表会保存在浏览器缓存中，加快了整个站点的下载显示速度，提升了系统响应速度。;CSS3作为CSS的成熟标准版本，将原CSS规范精简延伸至多个模块，如选择器、盒模型、背景和边框、文字特效等，各模块也得到了浏览器厂商的广泛支持。本任务重点学习CSS3语法规则、常见CSS3选择器的类型及其使用方法等，通过学习能够根据需要选用合适的CSS3选择器，按照CSS3语法规则对页面元素属性进行设置，实现页面美化效果。;相关知识

一、CSS3语法规则

CSS用于控制网页内容的样式和布局格式，其代码保存在.css类型的文本文件中，或者放在网页内style标签里，或者插在网页标签的style属性值中。CSS的基本语法格式由选择器和声明块两部分组成，如图所示。;选择器决定为哪些元素应用样式，声明块定义相应的样式。声明块是由一对大括号括起来的代码区域，包括一条或多条声明，每条声明由一个属性和一个值组成，属性和值之间用冒号隔开。属性是希望设置的样式属性，每个属性有一个值。因此，也可以说，一个样式规则由选择器、属性和值这3个要素构成。样式设置过程中应当注意，每条声明中的属性值一般不加引号；每一条语句都要使用英文输入状态下的分号来结束；如果属性值为数值型数据，一般情况下需要加单位，如px（像素）。;二、CSS3选择器

要使用CSS对网页元素实现控制，就需要用到CSS选择器。下面分别介绍三大基础选择器、集体选择器、属性选择器及CSS3伪类选择器。

1.三大基础选择器

选择器是一个选择标签的过程。三大基础选择器分别为元素选择器、类选择器和ID选择器。;（1）元素选择器

元素选择器实质就是选择HTML代码中的标签，如HTML标签中的html、body、h1、p、img、div等，一旦定义之后，页面中所有该标签内容都将执行所定义的样式，其基本语法格式如图所示。;（2）类选择器

类选择器在CSS中是最常用到的，主要是对一类或者是一群元素进行操作，它是对HTML标签中class属性进行选择。class的值就是为元素定义的“类名”。类选择器的选择符是“.”，其基本语法格式如图所示。;类选择器遵循“谁调用、谁生效”的原则，一个标签可以调用多个类选择器，或者多个标签可以调用同一个类选择器。类选择器命名应该做到见名知意，需要注意以下问题。

第一，不允许以数字开头或者用纯数字定义类名。

第二，不允许以特殊符号开头或者用纯特殊符号定义类名。

第三，不建议使用汉字定义类名。

第四，不推荐使用属性或者属性的值定义类名。;常见类名命名见表。;（3）ID选择器

ID选择器和类选择器用法和命名要求都一样，区别在于在同一个HTML页面中ID选择器命名具有唯一性，ID选择器的选择符是“#”。使用多个相同的ID选择器，浏览器不会报错，但是不符合W3C（万维网联盟）标准且Javascript语言调用会出错。ID选择器基本语法格式如图所示。

一个标签只能调用一个ID选择器，一个标签可以同时调用