2019-04-04第九次课CSS美化网页元素

CSS美化网页元素

[图片上传失败...(image-d90d17-1554343106280)] 学习目标

(1) . 会使用CSS设置字体样式

(2) . 会使用CSS设置文本样式

(3) . 会使用CSS设置图片对齐方式

(4) . 会使用CSS设置超链接样式

(5) . 会使用CSS设置鼠标外观

(6) . 会使用CSS设置背景样式

(7) . 会使用CSS设置列表样式

[图片上传失败...(image-fb7013-1554343106280)] 知识点讲授

一、 使用CSS编辑网页文本

(一) 描述

本节将学习使用CSS设置字体大小、字体类型、文字颜色、字体风格等字体样式；通过CSS设置文本段落的对齐方式、行高、文本与图片的对齐方式，以及文字缩进方式徕排版网页。

(二) 标签

1. 描述

在HTML中，标签是被用来组合HTML文档中的行内元素，它没有固定的格式表示，只有对它应用CSS样式，它才会产生视觉变化。

2. 案例演示

需求说明

文字“教师梦想”、“宁教”突出显示

实现效果

[图片上传失败...(image-3ac313-1554343106285)]

核心代码

在宁波教育学院，有一群人默默支持你的教师梦想

选择宁教，成就你的梦想

p{

font-size: 14px;

}

.dream{

font-size: 24px;

color: red;

}

.school{

font-size: 36px;

color: green;

}

(三) 字体样式

1. 描述

CSS字体属性定义字体类型、字体大小、字体是否加粗、字体风格等。

|

属性名

|

含义

|

举例

|
|

font-family

|

设置字体类型

|

font-family:"隶书";

|
|

font-size

|

设置字体大小

|

font-size:12px;

|
|

font-style

|

设置字体风格

|

font-style:italic;

|
|

font-weight

|

设置字体的粗细

|

font-weight:bold;

|
|

font

|

在一个声明中设置所有字体属性

|

font:italic bold 36px "宋体";

|

(四) 字体类型 font-family

1. 语法格式

p{font-family:Verdana,"楷体";}

这句代码声明了HTML页面中

标签的字体样式，并同时声明了两种字体：Verdana,"楷体"。这样浏览器会优先用英文字体显示文字，如果英文字体没有包含的字符（通常英文字体不支持中文），则从后面的中文字体里找，这样就达到英文使用Verdana，中文使用楷体的不同字体效果。

多种字体之间用逗号隔开。

一些字体的名称中间会出现空格，如Times New Roman字体，或中文，如楷体，这里需要用号将其引起来，命名浏览器知道这是一种字体名称。

2. 案例演示

需求说明

设置中英文字体不一样

实现效果

[图片上传失败...(image-21c4ac-1554343106284)]

核心代码

body{font-family: Times,"Times New Roman", "楷体";}

3. 经验说明

(1) . 当需要同时设置英文字体和中文字体时，一定要将英文字体设置在中文字体之前，如果中文字体设置于英文字体之前，英文字体设置将不起作用。

(2) . 在实际网页开发中，网页的文本如果没有特殊的要求，通常设置为“宋体”，宋体是计算机的默认字体，如果需要其他比较炫的字体，则使用图片代替。

(五) 字体大小

1. 描述

CSS通过font-size属性来控制文字的大小 ，常用单位是px(像素)。其他单位还有in、cm、mm、pt、pc

这里不再展示页面效果图

(六) 字体风格

1. 描述

CSS通过font-style属性设置字体的风格，font-style有三个值：

normal:标准字体样式

italic:斜体字体样式

oblique:倾斜字体

font-style的默认值是normal，italic和oblique在页面中显示效果非常相似。

2. 案例演示

需求说明

标题题使用二种斜体，二级标题使用标准字体样式

实现效果

[图片上传失败...(image-6437f3-1554343106284)]

核心代码

h1{font-size:24px; font-style:italic;}

.title{font-style:oblique;}

h2{font-size:16px; font-style:normal;}

(七) 字体粗细

1. 描述

CSS中使用font-weight属性控制文字的粗细。

2. font-weight属性的值

|

值

|

说明

|
|

normal

|

默认值，定义标准的字体。

|
|

bold

|

粗体字体。

|
|

bolder

|

更粗的字体。

|
|

lighter

|

更细的字体。

|
|

100、200、300、400、500、600、700、800、900

|

定义由细到粗的字体。

400等同于normal，700等同于bold。

|

3. 案例演示

实现效果

[图片上传失败...(image-9b5022-1554343106284)]

核心代码

.title {font-style:oblique; font-weight:normal;}

h2{font-size:16px; font-style:normal;}

p{font-size:12px;}

.pretitle{font-weight:bold;}

(八) 字体属性

1. 描述

在前讲解的几个字体属性是单独使用的，实际上CSS中如果对同一部分的字体设置多种字体属性时，需要使用font属性来进行声明，即利用font属性一次设置字体的所有属性。

各个属性之间用英文空格分开，顺序依次是字体风格、字体粗细、字体大小、字体类型

2. 案例演示

p{

font:oblique bold 12px “楷体”;

}

(九) 使用CSS排版网页文本

在网页中，用于排版网页文本的样式有文本颜色、水平对齐方式，首行缩进、行高、文本装饰、垂直对齐方式。常用的文本属性、及用法如下表：

|

属性

|

含义

|

举例

|
|

color

|

设置文本颜色

|

color:#00C;

|
|

text-align

|

设置元素水平对齐方式

|

text-align:right;

|
|

text-indent

|

设置首行文本的缩进

|

text-indent:20px;

|
|

line-height

|

设置文本的行高

|

line-height:25px;

|
|

text-decoration

|

设置文本的装饰

|

text-decoration:underline;

|

(十) 文本颜色

1. 描述

在HTML页面中，颜色统一采用RGB格式，按十六进制的方法表示，前两位表示红色，中间两位表示绿色，最后两位表示蓝色。比如“#FFFFFF”; 如果看到3位的时，比如”#396”，是这个简写“#339966”。

当然也可以用英文单词直接表示颜色

2. 案例演示

前面的例子都演示过，不再演示

(十一) 水平对齐方式

1. 描述

在CSS中，文本的的水平对齐是通过text-align属性来控制的。

2. text-align属性常用值

|

值

|

说明

|
|

left

|

把文本排列到左边。默认值：由浏览器决定

|
|

right

|

把文本排列到右边

|
|

center

|

把文本排列到中间

|
|

justify

|

实现两端对齐文本效果

|

3. 案例演示：新闻

需求：

标题居中，来源居右，内容居左

实现效果

[图片上传失败...(image-9aec7b-1554343106284)]

核心代码

h1{

color: #091cc4;

font-size: 24px;

text-align: center;

}

h3{

text-align: right;

}

p{

font-size: 12px;

text-align: left;

}

(十二) 首行缩进和行高

1. 描述

在使用word编辑文档时，通常会设置段落的行距，并且段落的首行缩进两个字符，CSS，通过line-height属性民来设置行高，通过text-indent属性设置首行缩进。

在CSS中，text-indent常使用的单元是em,text-indent:2m表示缩进2个字符

2. 案例演示

需求

首行缩进2个字符，行高20px；

实现效果

[图片上传失败...(image-eb1f28-1554343106283)]

核心代码

h1{

color: #091cc4;

font-size: 24px;

text-align: center;

}

h3{

text-align: right;

}

p{

font-size: 12px;

text-align: left;

line-height: 20px;

text-indent: 2em;

}

(十三) 文本修饰和垂直对齐

1. 描述

文本装饰

text-decoration属性

|

值

|

说明

|
|

none

|

默认值，定义的标准文本。

|
|

underline

|

设置文本的下划线。

|
|

overline

|

设置文本的上划线。

|
|

line-through

|

设置文本的删除线。

|
|

blink

|

设置文本闪烁。此值只在firefox浏览器中有效，在IE中无效。

|

其中none和underline是常用的，在后面的课程中会经常使用。

垂直对齐方式

vertical-align属性：middle、top、bottom

2. 案例演示

实现效果

[图片上传失败...(image-ff18c0-1554343106283)]

(十四) 课堂练习

1. 制作百度音乐标签页面

训练要点

(1) . 使用Dreamweaver制作网页

(2) . 使用字体属性设置字体风格、大小

(3) . 使用文本属性设置字体颜色、行距

(4) . 使用标签

需求说明

[图片上传失败...(image-ce8a82-1554343106283)]

实现思路

(1) . 使用color属性设置字体颜色

(2) . 使用font设置字体类型和字体大小，但是顺序为字体大小→字体类型，字体类型要先设置英文字体，再设置中文字体；或者使用font-size设置字体大小，使用font-family设置字体类型。

(3) . 歌手分类字母序号放在标签，使用font-weight设置字体加粗。

(4) . CSS文件单独放在CSS文件夹下，使用链接式引用CSS文件。

参考代码

@charset "gb2312";

/* CSS Document */

h2{ font-size:18px; font-family:"楷体";}

p{font:12px "Times New Roman", Times "宋体"; line-height:20px;}

p span{font-weight:bold; color:#F00;}

(十五) 课后练习

1. 新闻信息展示页面

需求说明

制作北大青鸟网站新闻信息展示页面

使用外部样式表创建页面样式

[图片上传失败...(image-e648b2-1554343106283)]

二、 CSS的复合选择器和CSS的继承性

(一) CSS的复合选择器

1. 描述

CSS复合选择器是以标签选择器、类选择器、ID选择器这3种基本选择器为基础，通过不同方式将两个或多个选择器组合在一起而形成的选择器。复合选择器分为后代选择器、交集选择器和并集选择器。

2. 后代选择器

描述

在HTML中经常有标签的嵌套使用，那么在CSS选择器， 就可以通过嵌套的方式，对特殊位置的HTML标签进行声明。

比如，当

……

标签之间包含……标签时，就可以使用后代选择器。

语法

后代选择器的写法就是把外层标签写在前面，内层标签写在后面，之间用空格分隔。

案例演示

【需求说明】：

第一行标签中的文本字体颜色为红色，字体大小为16px

第二行标签的文本字体颜色为蓝色，字体大小为36px

【案例演示效果】

[图片上传失败...(image-b8ecef-1554343106282)]

【参考代码】

问君能有几多愁，

恰似一江春水向东流。

strong {color: red; font-size: 16px; }

h3 strong {color: blue; font-size: 36px; }

后代选择器常用情况

后代选择是CSS应用中非常常用的，通常在HTML标签嵌套时，常用情况如下：

(1) . 按标签的嵌套关系，如上例中

标签嵌套，直接按标签嵌套关系编写样式；

(2) . 按选择器的嵌套关系，当最外层的类选择器名称为head，它里面嵌套类选择器、ID选择器，这时直接按样式的嵌套关系编写，如.head .menu 或.head #menu

(3) . 3种选择互相嵌套关系，当最外层的ID选择器名称为nav，它里面嵌套类选择器和标签选择，如#nav .title 或#nav li

3. 交集选择器【理解】

描述

交集选择器是由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。即选中同时满足前后两者定义的元素

语法格式

第一个必须是标签选择器，第二个必须是类选择器或ID选择器；

这两个选择器之间不能有空格，必须连续书写。

案例演示

【需要说明】

以欧阳修的词《蝶恋花·庭院深深几许》为例，词的所有内容写在

标签内，其中一句词写

标签的嵌套标签中，两个标签均加上类样式txt; 两个类样式的txt分别是后代选择器和交集选择器。

【实现效果】

[图片上传失败...(image-113c5c-1554343106282)]

【参考代码】

蝶恋花•庭院深深深几许

庭院深深深几许，杨柳堆烟，帘幕无重数。

玉勒雕鞍游冶处， 楼高不见章台路。

雨横风狂三月幕，门掩黄昏，无计留春住。

泪眼问花花不语，乱红飞过秋千去。

【总结说明】

(1) . 由两个选择器直接连接构成，选中二者各自元素范围的交集

(2) . 第一个必须是标签选择器，第二个必须是类选择器或者ID选择器

(3) . 选择器之间不能有空格，必须连续书写

4. 并集选择器

描述

与次选择器相对应，还有一种并集选择器，它的结果是同时选中各个基本选择器所选择的范围。

语法说明

任何形式的选择器（包括标签选择器、类选择器、ID选择器等）都可以作为并集选择器的的一部分。

并集选择器是多个选择器通过逗号连接而成。

案例演示

【需求说明】

以欧阳修的词《蝶恋花·庭院深深几许》为例，把诗词的每句都放在不同的标签中，然后这些标签设置相同的样式。

【实现效果】

[图片上传失败...(image-f202cb-1554343106281)]

【参考代码】

蝶恋花•庭院深深深几许

庭院深深深几许，杨柳堆烟，帘幕无重数。

玉勒雕鞍游冶处，楼高不见章台路。

雨横风狂三月幕，门掩黄昏，无计留春住。

泪眼问花花不语，乱红飞过秋千去。

经验说明

在实际开发中，并集选择器经常会用在对页面中所有标签进行全局设置样式。

(二) CSS继承特性【理解】

1. 什么是继承

案例演示

【实现效果】

[图片上传失败...(image-604091-1554343106281)]

【分析】

[图片上传失败...(image-59dd0a-1554343106281)]

【参考代码】

网络传播学院学习平台

欢迎来到网传学习平台，这里将为您提供丰富的学习内容。

• 网页制作

• 使用Dreamweaver制作网页
• 使用CSS布局和美化网页

  • CSS初级
  • CSS中级
  • CSS高级

• 使用JavaScript制作网页特效

• 平面设计

1. 美术基础
2. 使用Photoshop处理图形图像
3. 使用Illustrator设计图形
4. 制作Flash动画

如果您有任何问题，欢迎给我们留言。

2. 继承的CSS应用

描述

(1) . 子标签可以继承父标签的样式风格

(2) . 子标签的样式不会影响父标签的样式风格

案例演示

【实现效果】

[图片上传失败...(image-ed7d95-1554343106281)]

【核心代码】

三、 使用CSS设置超链接

在任何一个网页上，超链接都是最基本的元素，通过超链接能够实现页面的跳转、功能的激活。下面介绍如何使用CSS设置超链接的样式。

(一) 超链接伪类

1. 超链接的默认样式

描述

文本有下划线，图片有边框

单击链接前后的文本颜色不一样

案例展示

[图片上传失败...(image-f9a9ed-1554343106281)]

楼兰蜜语新疆野生  无漂白薄皮核桃

500gx2包 ￥48.8

2. 超链接接伪类

语法

标签名:伪类名{声明;}

常用的超链接伪类

|

伪类名称

|

含义

|

示例

|
|

a:link

|

未单击访问时超链接样式

|

a:link{color:#9ef5f9;}

|
|

a:visited

|

单击访问后超链接样式

|

a:visited {color:#333;}

|
|

a:hover

|

鼠标悬浮其上的超链接样式

|

a:hover{color:#ff7300;

|
|

a:active

|

鼠标单击未释放的超链接样式

|

a:active {color:#999;}

|

设置伪类的顺序：a:link->a:visited->a:hover->a:active

案例演示

[图片上传失败...(image-42cab9-1554343106281)]

[图片上传失败...(image-5c5c6c-1554343106281)]

参考代码

img {

border:0px;

}

p {

font-size:12px;

}

a {

color:#000;

text-decoration:none;

}

a:hover {

color:#B46210;

text-decoration:underline;

}

3. CSS设置鼠标形状

语法说明

CSS通过cursor来设置鼠标指针的样式

cursor属性的常用值

|

值

|

说明

|

图例

|
|

default

|

默认光标

|

[图片上传失败...(image-83361a-1554343106274)]

|
|

pointer

|

超链接的指针

|

[图片上传失败...(image-1c82e8-1554343106274)]

|
|

wait

|

指示程序正在忙

|

[图片上传失败...(image-f8d9db-1554343106274)]

|
|

help

|

指示可用的帮助

|

[图片上传失败...(image-86c4b7-1554343106274)]

|
|

text

|

指示文本

|

[图片上传失败...(image-3be81-1554343106274)]

|
|

crosshair

|

鼠标呈现十字状

|

[图片上传失败...(image-ac99b4-1554343106274)]

|

案例演示

在上例的基础上，加下如下样式

span{cursor:pointer;}

四、 背景样式

background

可以设置背景颜色和背景图像

(一) 认识

标签

1.

标签的用法

网页布局

排版网页内容

2. 语法

网页内容…

3. 案例演示

网页内容…

(二) 背景颜色

1. 描述

在CSS中，使用background-color属性设置字体、div、列表等网页元素的背景颜色，它的值的表示方法与color表示方法一样，也是用十六进制的方法表示背景颜色值。

但是它有一个特殊的值-transparent值，即透明的意思。

2. 案例演示

实现效果

[图片上传失败...(image-554ace-1554343106281)]

参考代码

【HTML】

全部商品分类

• 图书  音像  数字商品
• 家用电器  手机  数码
• 电脑  办公
• 家居  家装  厨具
• 服饰鞋帽  个护化妆
• 礼品箱包  钟表  珠宝
• 食品饮料  保健食品
• 彩票  旅行  充值  票务

【CSS】

nav {

width:230px;

background-color:#D7D7D7;

}

.title {

background-color:#C00;

font-size:18px;

font-weight:bold;

color:#FFF;

text-indent:1em;

line-height:35px;

}

nav ul li {

height:25px;

line-height:25px;

}

a {

font-size:14px;

text-decoration:none;

color:#000;

}

a:hover {

color:#F60;

text-decoration:underline;

}

(三) 背景图像

1. 描述

在CSS中，使用background-image属性来设置背景图像

2. 语法说明

背景图像

background-image属性

background-image:url(图片路径);

背景重复方式

background-repeat属性

默认值是水平和垂直方向重复

repeat：沿水平和垂直两个方向平铺

no-repeat：不平铺，即只显示一次

repeat-x：只沿水平方向平铺

repeat-y：只沿垂直方向平铺

背景定位

background-position属性

|

值

|

含义

|
|

Xpos Ypos

|

单位：px，Xpos表示水平位置，Ypos表示垂直位置

|
|

X% Y%

|

使用百分比表示背景的位置

|
|

X、Y方向关键词

|

水平方向的关键词：left、center、right

垂直方向的关键词：top、center、bottom

|

3. 案例演示

需求说明

给导航标题右侧添加向下指示的三角箭头

给每行的导航菜单添加向右指示的三角箭头

实现效果

[图片上传失败...(image-799ac9-1554343106281)]

参考代码

.title {

……

background-image: url(../image/arrow-down.gif);

background-repeat: no-repeat;

background-position: 205px 10px;

}

nav ul li {

……

background-image: url(../image/arrow-right.gif);

background-repeat: no-repeat;

background-position: 170px 2px;

}

(四) 背景属性

[图片上传失败...(image-cdfc7-1554343106281)]

(五) 课堂作业

1. 家用电器商品分类页面

需求说明

(1) . 电器分类无下划线，鼠标悬浮超链接时显示下划线。

(2) . 分类内容超链无下划线，鼠标悬浮至超链接时字体颜色为棕红色（#F60），显示下划线。

实现效果

[图片上传失败...(image-f45da7-1554343106281)]

五、 列表样式

CSS列表有4个属性来设置列表样式，分别是list-style-type、list-style-image、list-style-position和list-style。下面分别介绍这4个属性。

(一) list-style-type

1. 描述

list-style-type属性设置列表项标记的类型。

2. 常用属性值

|

值

|

说明

|

语法示例

|
|

none

|

无标记符号

|

list-style-type:none;

|
|

disc

|

实心圆，默认类型

|

list-style-type:disc;

|
|

circle

|

空心圆

|

list-style-type:circle;

|
|

square

|

实心正方形

|

list-style-type:square;

|
|

decimal

|

数字

|

list-style-type:decimal

|

(二) list-style-image

1. 描述

list-style-image属性是使用图像来替换列表项的标记

当设置了list-style-image，list-style-type就不会起作用。

2. 案例演示

需求说明

把三角形设置为列表项的标记

实现效果

[图片上传失败...(image-bf9c2a-1554343106280)]

参考代码

nav ul li {

height:25px;

line-height:25px;

/* background-image: url(../image/arrow-right.gif);

background-repeat: no-repeat;

background-position: 170px 2px; */

list-style-image: url(../image/arrow-right.gif);

list-style-type: circle;

}

(三) list-style-position

1. 描述

此属性设置在何处放置列表项标记。

2. 属性值

inside：放置在文本以风，且环绕文本根据标记对齐

outside：默认值，它保持标记位于文本的左侧，列表项标记放置在文本以外，且环绕文本不根据标记对齐

(四) 列表样式简写

list-style简写顺序

style-type、style-position、style-image

(五) 课堂练习

1. 畅销书排行榜页面

需求说明

使用无序列表制作畅销书排行榜页面

超链接无下划线，鼠标悬浮至超链接时显示下划线

实现效果

[图片上传失败...(image-cc5dc5-1554343106280)]

实现思路

(1) . 使用list-style-type属性设置列表无标记符号。

(2) . 使用背景属性设置列表的图标样式，列表内容向内缩进2个字符。

六、 本章总结

(1) . 使用CSS设置字体的大小、类型、风格、粗细等。

(2) . 使用CSS设置文本颜色、行距、首行缩进、对齐方式、文本装饰等。

(3) . 使用CSS设置超链接在不同状态下的样式。

(4) . 使用CSS设置页面背景颜色、背景图片，为列表设置列表自定义图标。

(5) . 使用CSS设置列表项的类型、列表图像及列表符号显示位置。

七、 课后作业

(一) 制作一个Android课程介绍的界面

1. 需求说明

(1) . 使用

、

、等标签编辑页面，页面整体背景颜色为灰色（#eeeeee）

(2) . 课程特色字体颜色为绿色（#5c9815）,设计理念字体颜色为（#F26522）

(3) . 课程特色和设计理念每行开头带背景颜色的字体为白色，背景颜色从提供的素材的页面效果图中获取。

(4) . 使用外部样式表创建页面样式。

2. 实现效果

[图片上传失败...(image-e8b015-1554343106280)]

(二) 淘宝女装分类页面

1. 需求说明

(1) . 使用

和标题等HTML标签编辑页面

(2) . 女装各分类名称前的图片使用背景图片的方式实现，标题字体大小 为18px,加粗显示

(3) . 分类内容字体大小 为12px,超链接文本字体颜色为黑色，无下划线，当鼠标移至超链接文本上时字体颜色为橙色（#F60）,并且显示下划线。

(4) . 使用外部样式表创建页面样式

(5) . 页面中其他效果见效果图

2. 实现效果

[图片上传失败...(image-4631ca-1554343106280)]