中职《Web前端开发案例教程（HTML5+CSS3）（第2版）》（人邮版·2023）任务3美化简单学院网站 同步课件(共107张PPT)

(课件网) 任务3 美化简单学院网站 Web前端开发案例教程 HTML5+CSS3 微课版 在任务2中使用HTML标记和相应的属性搭建了简单学院网站，可以看出，只使用HTML标记创建的网站并不美观，本任务对简单学院网站进行美化，设置文字的颜色和对齐方式等。通过本任务的实现，掌握CSS3的基本语法、使用方式、选择器以及常用的文本样式属性等。 任务3 美化简单学院网站 任务3 任务效果 图3-1 网站首页 图3-2　学院简介页面 对任务2中搭建的简单学院网站进行美化，页面浏览效果如图3-1~3-4所示 任务效果 图3-3 学院新闻页面 图3-4　新闻详情页面 知识点 CSS基本概念 01 CSS使用方式 02 常用CSS选择器 03 CSS常用文本属性 04 CSS高级特性 05 任务3 美化简单学院网站 任务3 3.2.1 什么是CSS 在任务2中搭建了简单学院网站 如果希望网页美观、大方，并且升级轻松、维护方便 有什么好办法吗 3.2.1 什么是CSS 这就好比我们有了一间房子，我们需要进行装修，我们来选择装修材料。 我们在完成了首页的HTML代码后，需要对网页进行美化，使用的装饰材料是CSS。 3.2.1 什么是CSS CSS（Cascading Style Sheet），称为层叠样式表 不需要编译、可直接由浏览器执行的标记性语言，是用于格式化网页的标准格式 扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式 由W3C工作组组织负责制定和发布CSS 3.2.1 什么是CSS CSS 3.2.1 什么是CSS 样式就是格式。对于网页来说，像网页显示的文字的大小和颜色、图片位置、段落和列表等，都是网页显示的样式 层叠是指当HTML文件引用多个CSS样式时，如果CSS的定义发生冲突，浏览器就按照CSS的样式优先级来应用样式。 对于由几百个网页组成的大型网站来说，要使所有的网页样式风格统一，可以定义一个CSS样式表文件，这样几百个网页都调用这个样式表文件即可 CSS将样式的定义与HTML文件结构分离 如果要修改网页的样式，只需修改CSS样式表文件就可以 3.2.1 什么是CSS CSS的特点 CSS的发展历程 1994年 提出了 CSS 的想法 2005年12月 开始 CSS3 标准的制定 1996年12月 发布了CSS1.0规范开始 CSS3 标准的制定 可向网页添加字体、颜色等属性 1998年5月 发布了CSS2.0规范 添加了用于定位的属性 还扩展了对其他媒体的显示控制 3.2.1 什么是CSS CSS样式，用于控制文字的颜色、对齐方式等 HTML内容 CSS嵌入在HTML文档中，虽然与HTML在同一个文档中，但CSS集中写在HTML文档的头部，符合结构与表现相分离的。 3.2.1 什么是CSS 3.2.2 引入CSS样式 行内式也称为内联样式，是通过标记的style属性设置元素的样式，其基本语法格式如下： <标记 style="属性：属性值； 属性：属性值；……">内容 标记的属性，实际上任何HTML标记都拥有style属性，通过该属性可以设置标记的样式。 CSS属性，不同于HTML标记的属性。属性和属性值书写时不区分大小写，按照书写习惯一般采用小写的形式 属性和属性值之间用英文状态下的冒号分隔 多个属性之间必须用英文状态下的分号隔开 最后一个属性值后的分号可以省略 行内样式 3.2.2 引入CSS样式 例3-1使用行内式设置元素样式 在HBuilderX中新建项目chapter03，选择模板类型：“基本HTML项目”，该项目下包含css、img和js目录，分别用于存放样式表文件、图像文件和脚本文件。在项目内新建html文件example01.html 行内样式 3.2.2 引入CSS样式 行内式由于将表现和内容混在一起，不符合Web标准，所以很少使用。一般需要临时修改某个样式规则时使用。 行内样式 3.2.2 引入CSS样式 内部样式表是将所有CSS样式代码写在HTML文档的头部标记中，使用