《网页设计与制作（活页式）》 课件 项目3 CSS样式.pptx

网页设计与制作项目三CSS样式N

知识目标掌握CSS样式的使用方法掌握CSS语法掌握CSS选择器的使用

3.1.1初识CSS样式任务3.1〓CSS基础知识实例1使用CSS修饰段落CSS可以给网页文字设置不同的字体样式，即建立一个CSS规则。如果想改变整个网页上所有出现的颜色、尺寸、字体，只需要修改一些CSS规则即可。CSS文件是纯文本格式文件。

3.1.2HTML和CSS的对比任务3.1〓CSS基础知识HTML的缺点维护困难：修改某个特殊标签格式耗时较长，尤其对整个网站而言，后期修改和维护成本较高标签不足：HTML本身标签非常少，很多标签都是为网页内容服务的，而关于内容样式标签，如文字间距、段落缩进，很难在HTML中找到。网页体积大：由于没有对各种风格样式进行控制，HTML页面往往体积过大，占用宽度。定位困难：在整体布局页面时，HTML对各个模块的位置调整缺乏灵活，过多的table标签将会导致页面的复杂和后期维护的困难。

3.1.2HTML和CSS的对比任务3.1〓CSS基础知识CSS样式的优点丰富的样式定义：CSS提供了丰富的文档样式外观，可以设置文本和背景属性；允许为任何元素创建边框，设置元素边框与其他元素间的距离；允许随意改变文本的大写和小写方式、修饰方式等效果。易于使用和修改：CSS可以将样式定义在HTML元素的style属性中，也可以定义在header部分，还可以写在一个专门的CSS文件中(即CSS样式表)，将所有的样式声明统一存放，进行统一管理。如果要修改样式，只需在样式列表中修改。多页面应用：CSS样式表可以单独存放在一个CSS文件中，这样可以在多个页面中使用同一个CSS样式表。CSS样式表不属于任何页面文件，在任何页面文件中都可以引用，这样可以实现多个页面风格的统一。层叠：对一个元素多次设置同一个样式，最后一次设置的属性值有效。在浏览器中看到的将是最后一次设置的样式效果。页面压缩：使用CSS可以减少页面文件体积，加载页面时可提升速度。

3.1.3制作欢迎标题任务3.1〓CSS基础知识实例2制作欢迎标题

3.1.4CSS语法和样式表分类任务3.1〓CSS基础知识1.CSS语法格式CSS语法格式由若干样式规则组成，这些样式规则可以应用到不同的元素或文档中来定义它们显示的外观。每一条样式规则都由选择器（selector）、属性（property）和属性值（value）三部分组成。selector有多种形式，既可以是文档中的HTML标签，如bodytablep标签等，也可以是XML文档中的标签。property是选择器制定的标签所包含的属性。value是选择器的多个属性，属性和属性值为一组，组与组之间需要用分号隔开。CSS语法格式为：selector{propertyl：valuel；property2：value2；}

3.1.4CSS语法和样式表分类任务3.1〓CSS基础知识2.CSS样式规则下面给出一条样式规则，如p{color：red}。该样式规则的选择器为p，为段落标签p提供样式，color为段落文字的颜色属性，red为属性值。此样式表示标签p指定的段落文字为红色。如果要为段落设置多种样式，则可以使用下列语句：p{font-family：隶书；color：red；font-size：40px；font-weight：bold}

3.1.4CSS语法和样式表分类任务3.1〓CSS基础知识3.样式表分类行内样式表当需要对某个特定标签进行单独设置时使用行内样式表，应用到各个页面。在所修饰的标签内加style属性，如果后续为多条样式规则，多条样式规则用分号分开。内部样式表内部样式表与网页内容位于同一个文件中，在head标签中的style标签中。这种方式便于在同一页面中修改样式，但是不能彻底实现页面内容与样式的分离，不利于在多页面间共享复用代码。外部样式表外部样式表是指CSS代码单独写在一个或多个CSS文件中，需要时在head中通过link/标签引用，加载页面时没有加载样式表，需要用到样式表时才去寻找相应的样式。

任务1.3〓网页制作工具任务3.2〓CSS样式代码3.2.1CSS常用选择器1.标签选择器标签选择器使用简单、明确且通用性强，但针对性较差。（1）格式TagName{property：value}其中，TagName表示标签名称，如ph1等标签；property表示CSS属性；value表示CSS属性值。（2）用途通过一个具体标签来命名，可以对文档中每一个出现该标签的地方应用样式定义。这种做法通常用于设置整个网站中都会出现的基本样式。

任务1.3〓网页制作工具任务3.2〓CSS样式代码3.2.1CSS常用选择器1.标签选择器实例3使用标签选择器给段落