第3章 CSS技术基础 在实际开发中,HTML主要用来显示网页的内容,而网页样式的设计通常交由层叠样式表(Cascading Style Sheet,CSS)来负责。这样做的好处是使得内容与表现分离,便于对网站进行开发与维护,并能提高用户体验。本章主要介绍CSS技术的基础知识,读者重点需要掌握CSS选择器的用法以及如何使用DIV进行网页的布局。 3.1CSS的基本语法 CSS样式表是由若干条样式规则组成,每一条样式规则由三部分组成: 选择器(selector)、属性(property)和值(value),基本语法如下: selector {property: value} selector的含义为指定选择网页中标签的方式,property表示选择器所指定标签包含的属性,value表示属性的值。例如,可以定义如下一个简单的样式表: p{ color: blue; font-size: 20px; } 其作用在网页中的简单流程为,先选择网页中所有的
标签,然后设置
标签中所有字体的颜色为蓝色,大小为20个像素。 样式规则必须放在一对大括号({})内,可以是一条或多条,属性和值之间用英文冒号(:)分开,每条规则以英文分号(;)结尾。 3.2在HTML中使用CSS 在HTML中引入CSS样式的方法有3种,分别为行内样式、内部样式表和外部样式表,下面分别介绍这3种方式的优缺点和应用场景。 3.2.1行内样式 行内样式是通过在HTML标签中添加style属性来引入CSS。 【例31】添加style属性创建页面31.html。
蓝色字体,大小20像素
绿色字体,大小15像素
图31应用行内样式 例31所示代码的显示效果如图31所示。 由于行内样式将CSS代码直接写在HTML中,不能使得内容与样式分离,因此在实际开发中应用的不多。但是,由于行内样式只对当前的HTML标签起作用,往往在特定的场景中使用。 3.2.2内部样式表 内部样式表就是将CSS代码写在HTML的标签中,与HTML内容位于同一个页面中。 【例32】利用内部样式表创建页面32.html。应用了外部样式表的段落
其中,标签的属性ref=“stylesheet”指在页面中引用外部样式表,type=“text/css”是指链接文件的类型是样式表文本,href属性用来指定css文件所在的路径。上述代码通过引用外部样式表的方式为当前页面设置样式,该方式实现了样式和内容的彻底分离。一个外部样式表可以应用到多个页面。当改变这个外部样式表文件时,所在页面的样式会随之改变。这在制作具有大量相同风格的网站时非常有用。 3.2.43种方式的优先级 CSS名为层叠样式表的原因是允许同时给网页中的元素应用多个样式,页面元素的最终样式即为多个样式的叠加效果。由于相互叠加的样式可能引起冲突,因此首先需要了解样式的优先级。 【例34】利用层叠样式表创建页面34.html。、
标签的样式风格。标签选择器可以同时为页面中多个相同标签指定样式。 2. 类选择器 页面中,元素的class属性可以为元素分组。例如下述代码将3个
标签分为一组。
我是属于title组
我是属于title组
我是属于title组
类选择器的作用便是声明同一组元素标签的样式。定义类选择器的方式是在class属性值的前面加一个句点“.”,例如下述代码定义了一个名为.title的样式。 .title{ font-size: 16px; color: #00509F; } 其中,定义的样式(字体大小和颜色)会作用于页面中所有class属性值为title的标签。 3. ID选择器 在页面中,元素的id属性用来唯一标识该元素。同样,ID选择器主要用来对某个特定元素定义样式。与类选择器不同的是,使用ID选择器定义样式时,必须在ID名称前加一个“#”号。 【例36】利用ID选择器创建页面36.html。ID属性为WZU的段落
ID属性为ZJU的段落
例36所示代码为页面中id属性值为wzu的元素设置样式(字体设置成红色)。 3.3.2高级选择器 本节主要介绍CSS常用的高级选择器,如层次选择器、并集选择器和交集选择器。 1. 层次选择器 HTML中各元素间主要的层次关系包括后代、父子、相邻兄弟和一般兄弟等几种关系。这些关系被抽象为HTML的文档对象模型(Document Object Model,DOM)。下面首先通过一个示例来讲述什么是DOM。 【例37】创建页面37.html。 1 2 3p
上述代码对应的DOM模型如图34所示。其中1、2、3和元素,并设置各个元素的背景色为黄色。
7. 交集选择器
交集选择器也是指多个选择器的组合,但交集选择器需要同时满足其中每一个选择器的条件,并且各个选择器之间没有分隔符。例如在页面37.html中添加如下样式:
a.you{
background: yellow;
}
此选择器中的a.you实际上是标签选择器a和类选择器.you的组合,即选择页面中所有class属性值为you的元素(此例为1和4),并设置背景色为黄色。
3.4CSS样式设置
CSS的样式设置主要包括文本样式、超链接和列表样式以及背景样式等。下面分别对这几类样式设置进行介绍。
3.4.1文本样式
文字是网页中最重要的组成部分,通过文字可以传递多种信息。CSS对网页文字的设置主要包括设置字体大小、类型、颜色、风格以及文本段落的对齐方式、行高、文字缩进等。
1. 标签
在HTML中,标签本身没有显示效果,通常用来与CSS结合来给段落中的文字进行样式设置。
【例38】利用标签创建页面38.html。
锄禾日当午,汗滴禾下土。 霍元甲、陈真和叶问。 拳王阿里、泰森、霍利菲尔德 标签一样独占一行,这种不独占一行的元素称为行内元素。另外,例38中分别对标签内的字体进行了大小(fontsize)、风格(fontstyle)、粗细(fontweight)等样式进行了设置。表32列出了几个常用的字体属性及其可选参数值。
除了字体属性外,CSS对文本样式的控制还包括文本颜色、水平对齐方式、首行缩进、行高、文本装饰等属性设置,具体用法如表33所示。
表32常用字体属性设置
属性名含义举例
fontfamily设置子类型fontfamily:“宋体”
fontsize设置字体大小fontsize:15px
fontstyle设置字体风格fontstyle:italic
fontweight设置字体粗细fontweight:bold
font在一个声明中设置所有字体属性font:italic bold 30px “宋体”
表33常用文本样式设置
属性名含义举例
color设置文本颜色color:red
textalign设置水平对齐方式textalign:left
textindent设置首行文本的缩进textindent:18px
lineheight设置文本的行高lineheight:20px
textdecoration设置文本的装饰textdecoration:underline
更多的字体属性设置可参考W3C文档(https://www.w3school.com.cn/css/css_font.asp/)。
3.4.2超链接
网页中的超链接有默认的伪类样式: 超链接文字有下画线,单击超链接前文本颜色为蓝色,单击超链接后文本颜色为紫色,鼠标单击未释放时的超链接为红色。所谓伪类样式就是根据元素处于某种行为或者状态时的特征来修饰样式。基本语法为“标签名: 伪类名{声明;}”。常用的超链接伪类有4种,如表34所示。
表34超链接伪类
伪 类 名 称含义伪类样式举例
A:link未单击访问的状态A:link{color:yellow}
A:visited单击访问后的状态A:visited{color:blue}
A:hover鼠标悬浮其上的状态A:hover{color:red}
A:active鼠标单击未释放的状态A:active{color:green}
需要注意的是,对超链接伪类设置样式时要按照如下顺序进行: a:link>a:visited>a:hover>a:active,如果先设置“a:hover”再设置“a:visited”,则“a:visited”将不起作用。
【例39】创建页面39.html。
用户登录
标签(块元素)、表单元素以及表单内的3个
标签背景颜色为aquamarine; 密码框所在
标签与最外层