基本信息
文件名称:第3章 初识CSS3电子课件.pptx
文件大小:1.94 MB
总页数:65 页
更新时间:2025-05-20
总字数:约9.12千字
文档摘要

第3章初识CSS3《HTML5+CSS3网页设计与制作(第2版)》

学习目标/Target掌握CSS样式的引入方式,能够在网页中引入CSS样式了解CSS3的优势,能够阐述CSS3的优势熟悉CSS3样式规则,能够按照CSS样式规则正确编写CSS样式代码了解结构与表现分离的含义,能够阐述结构与表现分离的作用掌握CSS基础选择器的用法,能够使用CSS基础选择器设置不同的网页样式

学习目标/Target掌握CSS复合选择器的用法,能够使用CSS复合选择器设置不同的网页样式熟悉CSS层叠性和继承性,能够运用CSS的层叠性和继承性优化代码结构掌握CSS文本样式属性的用法,能够在网页中设置字体样式属性和文本外观属性熟悉CSS优先级规则,能够区分复合选择器权重的大小

章节概述/Summary随着网页制作技术的不断发展,HTML5属性样式的简单应用已经无法满足网页设计的需求。但使用CSS能够在不改变原有HTML结构的情况下,实现更加丰富的样式效果。例如更多样的字体、更绚丽的图形和动画等,这极大地满足了网页设计的需求。本章主要讲解CSS3的基础知识。

目录/Contents010203结构与表现分离CSS3的优势CSS核心基础04设置文本样式

目录/Contents0506CSS核心进阶阶段案例——制作活动通知页面

结构与表现分离3.1

3.1结构与表现分离什么是结构与表现分离?

3.1结构与表现分离结构与表现相分离是指在网页设计中,HTML标签只负责定义网页的结构、内容和语义,并不涉及具体的样式;而所有的样式设置则交由CSS来完成。

3.1结构与表现分离如今,大多数网页开发都遵循Web标准,这意味着需要使用HTML代码编写网页的结构和内容,使用CSS来控制网页的布局以及文本或图片的显示样式。可以将HTML和CSS的关系比作人的身体和衣服。就像通过穿上不同的衣服可以改变人的外在形象一样,通过更改CSS样式,也可以轻松地控制网页的外观样式。

CSS3的优势3.2

3.2CSS3的优势CSS3是CSS的最新版本,它在旧版本CSS的基础上增加了许多强大的新功能,可帮助开发人员解决实际问题。使用CSS3可以设计出炫酷、美观的网页,并提升网页的性能。相对于旧版本CSS,CSS3最突出的优势主要体现在节约成本和提高性能两方面,本节将做具体介绍。

3.2CSS3的优势节约成本提高性能CSS3中不再需要JavaScript脚本或Flash代码来实现动画效果。网页设计者不再需要花费大量时间编写代码,这种简化的方式极大地节约了开发成本。由于CSS3的功能增强,可以更少地依赖图片和脚本来创建图形化网站。在进行网页设计时,减少标签的嵌套和图片的使用数量,可以提高网页的加载速度。

CSS核心基础3.3

3.3CSS核心基础掌握CSS基础知识是学习CSS3的基石。本节将详细介绍CSS的基础知识,包括CSS样式规则、引入CSS样式以及CSS基础选择器。

3.3.1CSS样式规则选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;……}在上面的样式规则中,选择器用于指定需要改变样式的HTML标签;大括号内部是一条或多条声明,每条声明由一对属性和属性值组成,属性和属性值以“键值对”的形式出现。

3.3.1CSS样式规则选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;……}

3.3.1CSS样式规则值得一提的是,在编写CSS样式代码时,除了要遵循CSS样式规则外,还必须注意CSS代码结构的特点。CSS代码结构具有以下特点。CSS样式中的选择器严格区分大小写,而声明不区分大小写。若有多个声明,则必须用英文分号“;”隔开,最后一个声明后的分号可以省略,但是为了便于增加新声明最好保留。如果属性的属性值由多个单词组成且中间包含空格,则必须为这个属性值加上英文引号。在编写CSS代码时,为了增强代码的可读性,可使用注释语句进行介绍说明。CSS代码中的空格是不被解析的,大括号及分号前后的空格可有可无。

3.3.2引入CSS样式引入CSS样式表的方式有哪些?

3.3.2引入CSS样式行内式也称为内联样式,该方式通过HTML标签的style属性直接在标签中设置CSS样式,其基本语法格式如下:行内式行内式内部式外部式导入式标签名style=属性1:属性值1;属性2:属性值2;属性3:属性值3;内容/标签名

3.3.2引入CSS样式行内式内部式外部式导入式内嵌式是指将CSS代码使用style标签定义。style标签通常写在head标签中,其基本语法格式如下:内部式style选择器{属性1:属性值1;属