网页设计与制作项目式教程（HTML+CSS）课件05.为“中国民俗”网站页面设置外观.pptxVIP

网页设计与制作项目式教程（HTML+CSS）项目二简单展示类网页开发项目——为“中国民俗”网站页面设置外观

任务2.4为“中国民俗”网站页面设置外观项目实施任务分析小丁使用HTML制作了“中国民俗”网站页面的内容后，发现最终效果跟网站设计需求的效果不一样，老师告诉小丁，他只完成了网站页面的html内容的设置，还需要为网站页面设置CSS外观样式，设置了外观样式的网页最终效果如图2-1和图2-2所示。图2-1“中国民俗”网站网页图2-2传统节日详情页

任务2.4为“中国民俗”网站页面设置外观知识储备知识导图本任务涉及的主要知识点如图所示。

任务2.4为“中国民俗”网站页面设置外观知识储备新知学习1：CSS基本概念、功能特点和引入方式1.CSS基本概念CSS（CascadingStyleSheets），即串联样式表，CSS的出现是为了改造HTML标签在浏览器中所展示的外观，使其变得更加好看，就像盖房子，HTML是把房子结构建好，而CSS是给房子装修，刷油漆和装饰。

任务2.4为“中国民俗”网站页面设置外观知识储备新知学习1：CSS基本概念、功能特点和引入方式2.CSS功能特点（1）丰富的样式定义CSS提供了丰富的文档样式外观，样式定义如何显示HTML元素，如字体样式、文本样式、边框样式、背景样式、超链接样式、图片样式、列表样式、表格样式等一些系列页面效果。（2）易于使用和修改CSS有多种定义方式供HTML页面使用，如果要修改样式，只需要在样式列表中找到相应的样式声明进行修改。

任务2.4为“中国民俗”网站页面设置外观知识储备新知学习1：CSS基本概念、功能特点和引入方式（3）多页面应用CSS样式表可以单独存放在一个CSS文件中，这样我们可以在多个页面中使用同一个CSS样式表，可以同时控制多张网页的布局，极大地提高工作效率。（4）层叠层叠就是多个样式定义可层叠为一个，对一个元素多次设置同一个样式，将使用最后一次设置的属性值。例如对多个页面同时应用了一套CSS样式表，而某一个页面中的某些元素想要使用其他的样式，就可以针对这些样式单独定义到页面中，这些后来的样式将覆盖掉前面的样式设置，在浏览器中看到的将会是最后面设置的样式效果。

任务2.4为“中国民俗”网站页面设置外观知识储备3.CSS引入方式在HTML中，共有3种CSS引入方式，分别是内联样式表，内部样式表，外部样式表，这3种引入方式的优先级为：内联样式表内部样式表外部样式表。新知学习1：CSS基本概念、功能特点和引入方式

任务2.4为“中国民俗”网站页面设置外观知识储备（1）内联样式表内联样式表，也是将HTML代码和CSS代码放在同一个文件中，但是它和内部样式表不同，CSS样式不是在style/style标签中定义，而是将CSS样式写在元素的通用属性style中，这种方式只对单个元素有效，不会影响整个文件，可以精准地控制HTML文档的显示效果，对于一些规模较小的项目，或者只需要设置少量样式的情况下，可是适当使用内联样式，示例代码如下：新知学习1：CSS基本概念、功能特点和引入方式代码运行效果：

任务2.4为“中国民俗”网站页面设置外观知识储备（2）内部样式表内部样式表是将HTML代码和CSS代码放在同一个文件中，直接将CSS样式写在style/style标签中作为内容，这种写法重用性较差，有时还会导致HTML文档过大，当重复的CSS代码在不同的HTML文档中存在时会导致大量的重复下载，在希望某些CSS样式效果仅对某个页面有效时，通常采用这种形式，示例代码如下：引入CSS样式后页面预览效果同内联样式表。新知学习1：CSS基本概念、功能特点和引入方式

任务2.4为“中国民俗”网站页面设置外观知识储备（3）外部样式表外部样式表是最理想的CSS引入方式，在实际开发中，为了提高网页的性能和维护性，一般都使用外部样式表，外部样式表就是将HTML页面和CSS页面单独放在不同文件中，然后在HTML文档的head/head标签中通过link标签来引入CSS样式表，基本格式如下：linktype=”text/css”rel=”stylesheet”href=”CSS样式文件的URL”/在CSS文件夹中新建CSS文件，如下图所示。新知学习1：CSS基本概念、功能特点和引入方式

任务2.4为“中国民俗”网站页面设置外观知识储备给CSS文件命名，如下图所示。项目布局如下图所示新知学习1：CSS基本概念、功能特点和引入方式

任务2.4为“中国民俗”网站页面设置外观知识储备在HTML页面使用link标签引入CSS文件，需注意CSS文件名必须一致，示例代码如下：新知学习1：CSS基本概念、功能特点和引入方式CSS文件中书写样式代码和引入CSS样式后页面预览效果同内部样