第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;属