任务3 美化简单学院网站教学课件 Web前端开发案例教程（HTML5+CSS3）（第2版） 中职 高三 高教版

2023-03-14
| 107页
| 166人阅读
| 2人下载
普通

内容正文：

任务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 15 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文档的<head>头部标记中，使用<style>标记定义，其语法格式如下：   ...... <head> <style type="text/css"> 选择器1{属性：属性值； 属性：属性值；……} /* 注释内容 */ 选择器2{属性：属性值； 属性：属性值；……} ...... </style> </head> ...... <style>标记一般位于<head>标记中的<title>标记之后 指定CSS样式作用的HTML对象，有标记选择器、类选择器和ID选择器等

资源预览图

任务3 美化简单学院网站教学课件 Web前端开发案例教程（HTML5+CSS3）（第2版） 中职 高三 高教版
1
任务3 美化简单学院网站教学课件 Web前端开发案例教程（HTML5+CSS3）（第2版） 中职 高三 高教版
2
任务3 美化简单学院网站教学课件 Web前端开发案例教程（HTML5+CSS3）（第2版） 中职 高三 高教版
3
任务3 美化简单学院网站教学课件 Web前端开发案例教程（HTML5+CSS3）（第2版） 中职 高三 高教版
4
任务3 美化简单学院网站教学课件 Web前端开发案例教程（HTML5+CSS3）（第2版） 中职 高三 高教版
5
任务3 美化简单学院网站教学课件 Web前端开发案例教程（HTML5+CSS3）（第2版） 中职 高三 高教版
6
所属专辑
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。