HTML5+CSS3 Web前端开发项目化教程 课件 项目2 样式页面制作.pptx

《HTML5+CSS3Web前端开发项目化教程》项目2样式页面制作

任务2.3制作“中国剪纸”页面03目录Contents任务2.2制作“游子吟”页面02任务2.1制作“社会主义核心价值观”页面01任务2.4制作“校园动态”文章列表04

教学目标熟悉CSS?样式表的引入方式掌握CSS基础选择器掌握CSS?文本样式属性理解CSS?继承性、层叠性和优先级1.知识目标能够引入CSS样式表文件能够合理运用CSS?选择器定义标签样式能够运用CSS文本属性设置文本样式2.技能目标?树立正确的价值观，培养爱党、爱国、爱校、爱家的家国情怀培养自主学习和独立解决问题的能力遵守代码规范性要求，养成良好的代码编写习惯3.素养目标

1任务2.1制作“社会主义核心价值观”页面

效果展示

知识储备可爱型古典型现实生活中，我们可以通过更换衣服来改变自己的风格。

知识储备邮箱换肤藤蔓绿甜蜜橙其实本质就是给邮箱更换了不同的样式，网页的外观就是通过CSS样式进行控制的。网页也可以通过更改“衣服”来改变自己的外观。

知识储备CSS（CascadingStyleSheet），中文译为层叠样式表，简称样式表。它是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言，是一种格式化网页的标准方式，用来决定页面的表现形式。

知识储备什么是结构与表现分离？内容结构与表现形式相分离是指在Web开发标准中，HTML只用于搭建网页的结构和内容，而相关版面布局、文本或图片的等显示样式都使用CSS控制。

知识储备所示的代码片段，就是将CSS嵌入在HTML文档中，虽然与HTML在同一个文档中，但CSS集中写在HTML文档的头部，也是符合结构与表现相分离的。

知识储备CSS目前最新版本为CSS3，目前很多浏览器已经相继支持，如Chrome、Firefox、MicrosoftEdge、Safari、Opera等等。

知识储备使用CSS3不仅可以设计炫酷美观的网页，提高用户体验，同时还能提高网页性能。CSS3有很多新特征，例如圆角效果、图形化边框、盒子阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现自定义字体、多背景图像、变形处理(旋转、缩放、倾斜、移动)、动画效果、自适应布局、媒体查询等。

知识储备1.CSS样式声明选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}在上面的样式规则中，选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。其中，属性和属性值以“键值对”的形式出现，用英文“:”连接，多个“键值对”之间用英文“;”进行区分。

知识储备1.CSS样式声明CSS样式中的选择器严格区分大小写，而声明不区分大小写，按照书写习惯一般将选择器、声明都采用小写的方式。多个属性之间必须用英文状态下的分号隔开。如果属性的属性值由多个单词组成且中间包含空格，则必须为这个属性值加上引号。在编写CSS代码时，为了提高代码的可读性，可使用“/*注释语句*/”来进行注释。在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可无。因此可以使用空格键、Tab键、回车键等对样式代码进行排版，即所谓的格式化CSS代码。

知识储备2.CSS样式表的引入方式什么是结构与表现分离？在Web开发标准中，HTML内容结构与CSS样式是相分离的，那怎样将CSS样式作用到HTML结构上呢？应用样式最终呈现

知识储备2.CSS样式表的引入方式行内式是通过标签的style属性来设置元素的样式，语法格式如下:标签名style=属性1:属性值1;属性2:属性值2;内容/标签名行内式适用于指定网页中的某一元素的样式，一般用于测试用途，效果范围仅可以控制该标签。行内式内嵌式外链式导入式

知识储备2.CSS样式表的引入方式内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，语法格式如下:headstyletype=text/css选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}/style/head行内式内嵌式外链式导入式

知识储备2.CSS样式表的引入方式内嵌式的作用效果范围为当前页面。1.HTML内容结构2.在head内输入style标签，并在style标签内书写样式行内式内嵌式外链式导入式

知识储备2.CSS样式表的引入方式内嵌式常用于为一个页面设置单独的样式风格。但若在一个网站中很多不同页面中都想采用同样的风格时，内嵌式方法就显示略微麻烦，维护成本也不低。行内式内嵌式外链式导入式

知识储备2.CSS样式表的引入方式外链式是将所有的样式放在一个或多个以.