Web前端技术开发（HTML5+CSS3+JavaScript）课件 第五单元 使用CSS美化页面

Web前端开发技术第五单元使用CSS美化页面掌握CSS的基本概念及其使用学会插入CSS样式表学会编写CSS文件CSS选择符类型的应用CSS样式表的引入5.1CSS基础5.2CSS字体样式设置5.3文本精细排版5.4背景设置

CSS基础15.1.1CSS样式表的概念CSS（CascadingStyleSheet）即层叠样式表或称级联样式表，简称样式表。样式：是指对网页中的元素（文字、段落、图像、列表等）外观的整体概括，即描述所有网页元素的显示形式（例如，文字的大小、字体、背景及图像的颜色、大小等都是样式）。层叠：就是指当HTML文件引用多个CSS文件时，如果CSS文件之间所定义的样式发生了冲突，将依据层次的先后来处理样式对内容的控制，遵循最近优先原则；CSS还具有继承的特性，子元素会自然继承父元素的样式。HTML与CSS的关系：内容结构与表现形式的关系，HTML确定网页结构和内容，CSS来决定页面元素的表现形式。5.1.2CSS的选择器基本语法：语法说明：

5.1.2CSS的选择器CSS选择器具有多种不同类型，从大类上分主要有“基本”选择器和“复合”选择器。基本选择器：1.标记选择器

基于语法：2.类选择器

基于语法：3.ID选择符

基于语法：

5.1.2CSS的选择器复合选择器：1.交集选择器

基于语法：2.并集选择器

基于语法：3.包含选择符

基于语法：

5.1.2CSS的选择器伪类：

伪类不属于选择符，它是让页面呈现丰富表现力的特殊属性。之所以称为“伪”，是因为它指定的对象在文档中并不存在，它们指定的是元素的某种状态。

应用最为广泛的伪类是链接的4个状态：未链接状态（a:link）；已访问链接状态（a:visited）；鼠标指针悬停在链接上的状态（a:hover）；被激活（在鼠标单击与释放之间发生的事件）的链接状态（a:active）。基于语法：

5.1.3CSS样式表引入方式

本小节介绍插入CSS样式表到HTML文档的3种常用方式，分别是链入外部样式表、内部样式表、嵌入样式表。1.链入外部样式表基本语法：语法说明：rel=＂stylesheet＂是指在HTML文件中使用的是外部样式表；type=＂text/css＂指明该文件的类型是样式表文件；href的URL指定CSS样式表文件地址，一般使用相对地址来表示。

5.1.3CSS样式表引入方式2.内部样式表基本语法：语法说明：

<style></style>标记用来说明所要定义的样式；type=＂text/css＂说明这是一段CSS样式表代码；<!--与-->标记的加入是为了防止一些不支持CSS的浏览器，将<style>与</style>之间的CSS代码当成普通的字符串显示在网页中。

5.1.3CSS样式表引入方式3.嵌入样式表基本语法：语法说明：

style属性中的内容就相当于样式表大括号里的内容。需要指出的是，style属性可以应用于HTML文件中的body标记，以及除了basefont、param和script之外的任意元素。插入CSS时需要注意优先级问题，遵循以下两个规律：

（1）行内式>嵌入式>外部样式；

（2）外部样式中，出现在后面的优先级高于出现在前面的优先级。

CSS字体样式设置25.2CSS字

体

样

式

设

置设置字体——font-family基本语法：语法说明：

font-family属性可以一次定义多个字体，而在浏览器读取字体时，会按照定义的先后顺序来决定选用哪种字体。若浏览器在计算机上找不到第一种字体，则自动读取第二种字体，若第二种字体也找不到，则自动读取第三种字体，这样依次类推。如果定义的所有字体都找不见，则选用计算机系统的默认字体。5.2CSS字

体

样

式

设

置设置字体大小——font-size基本语法：语法说明：font-size属性定义文字字体大小，下面介绍常用的度量单位如下：px(像素),最常用的单位是px(默认单位)。与显示器的分辨率相关。

分辨率越高，像素密度越大。通常这也意味着字体看上去会更小；em，常用在首行缩进2个字符；

关键字，绝对大小。xx-small、x-small、small、medium、large、x-large、xx-large。分别代表极小、较小、小、中等、大、较大和极大；

百分比是基于父元素中字体的大小为参考值的；

绝对尺寸，可使用不同的单位包括in(英寸)、cm、mm、pt(点)、pc(皮卡)；5.2CSS字

体

样

式

设

置设置字体样式——font-style基本语法：语法说明：font-style属性设置文字的斜体效果，该属性的取值如下表所示。5.2CSS字

体

样

式

设

置设置字体加粗——font-weight基本语法：语法说明：

font-weight属性定义文字加粗效果，该属性的取值如下表所示。5.2CSS字

体

样

式

设

置设置字体变体——font-variant基本语法：语法说明：

font-variant属性设置为small-caps表示英文字体显示为小型的大写字母；normal表示正常的字体，默认值就为这个字体。5.2CSS字

体

样

式

设

置组合设置字体属性——font基本语法：语法说明：

font属性主要用作不同字体属性的略写，特别是可以定义行高；属性与属性之间一定要用空格间隔开。5.2CSS字

体

样

式

设

置设置文字颜色——color基本语法：语法说明：

设置颜色的3种方法，此处不再赘述，详见3.2.1节。文本精细排版3基本语法：语法说明：text-decoration属性设置添加线，该属性的取值如下表所示。5.3.1添

加

文

本

修

饰—text-decoration基本语法：语法说明：

text-align属性设置文本对齐方式。其中，left代表左对齐方式；right代表右对齐方式；center代表居中对齐方式；justify代表两端对齐方式。text-align属性可应用于HTML中的任何块级标记，如<p>，<h1>~<h6>等。5.3.2设

置

文

本

对

齐

方

式—text-align基本语法：语法说明：

text-indent属性定义文本块中首行文本的缩进。这最常用于建立一个“标签页”效果。长度包括长度值和长度单位，长度单位同样可以使用之前提到的所有单位。百分比则是相对上一级元素的宽度而定的。允许指定负值。如果使用负值，那么首行会被缩进到左边，这会产生一种“悬挂缩进”的效果。5.3.3设

置

文

本

缩

进—text-indent基本语法：语法说明：

其中，normal为浏览器默认的行高，一般由字体大小属性来决定；数字，表示行高为该元素字体大小与该数字相乘的结果；长度，表示行高由长度值和长度单位确定；百分比：表示行高是该元素字体大小的百分比。5.3.4调

整

行

高—line-height基本语法：语法说明：

text-transform属性用于转换英文的大小写。该属性的取值如下表所示。5.3.5转

换

英

文

大

小

写—text-transform

背景设置4基本语法：语法说明：

关键字和RGB值的设置可以参考前面3.2.1章节介绍。transparent表示透明值，为默认值。5.4.1设

置

背

景

颜

色—background-color基本语法：语法说明：

URL指定要插入的背景图片路径或名称，路径可以为绝对路径也可以为相对路径。图片的格式一般以GIF、JPG和PNG格式为主。none值为默认值表示不指定任何背景图片。5.4.2插

入

背

景

图

片—background-image基本语法：语法说明：

background-repeat属性用于设置图片平铺效果。该属性的取值如下表所示。5.4.3设

置

重

复

背

景

图

片—background-repeat基本语法：语法说明：scroll表示背景图片是随着滚动条的移动而移动，为默认值；fixed表示背景图片固定在页面上不动，不随着滚动条的移动而移动。5.4.4插

入

背

景

附

件—background-attachment基本语法：语法说明：

利用百分比和数值图片位置时，需要指定两个值，第一个代表水平位置，第二个代表垂直位置，两个值之间用空格隔开。默认值为“0%0%”或是“00”，表示此时背景图片将被定位于对象内容区域的左上角。“100%100%”表示右下角。使用数值时允许使用负值。

关键字在水平方向的主要有left、center、right，表示居左、居中和居右。表示垂直方向的关键字主要有top、center、bottom，表示顶端、居中和底端。其中水平方向和垂直方向的关键字可相互搭配使用。

另外，设置backgroun