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设置文本段落的对齐方式、行高、文本与图片的对齐方式，以及文字缩进方式徕排版网页。

(二) <span>标签

1. 描述

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

2. 案例演示

需求说明

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

实现效果

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

核心代码

<p>在宁波教育学院，有一群人默默支持你的<span class="dream">教师梦想<span></p>

<p>选择<span class="school">宁教</span>，成就你的梦想</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页面中<p>标签的字体样式，并同时声明了两种字体：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. 案例演示

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;

}

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;

}

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) . 使用<span>标签

需求说明

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

实现思路

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

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

(3) . 歌手分类字母序号放在标签<span>，使用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标签进行声明。

比如，当<H3>……</H3>标签之间包含<strong>……</strong>标签时，就可以使用后代选择器。

语法

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

案例演示

【需求说明】：

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

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

【案例演示效果】

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

【参考代码】

<strong>问君能有几多愁，</strong>

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

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

后代选择器常用情况

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

(1) . 按标签的嵌套关系，如上例中<h3>标签嵌套<strong>，直接按标签嵌套关系编写样式；

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

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

3. 交集选择器【理解】

描述

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

语法格式

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

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

案例演示

【需要说明】

以欧阳修的词《蝶恋花·庭院深深几许》为例，词的所有内容写在<p>标签内，其中一句词写<p>标签的嵌套标签<strong>中，两个标签均加上类样式txt; 两个类样式的txt分别是后代选择器和交集选择器。

【实现效果】

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

【参考代码】

<body>

<h2>蝶恋花•庭院深深深几许</h2>

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

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

<strong class="txt">雨横风狂三月幕，门掩黄昏，无计留春住。</strong>

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

</p>

</body>

p .txt {color: red; }/后代选择器/

p.txt { color: blue;line-height: 28px;}/交集选择器/

</style>

【总结说明】

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

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

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

4. 并集选择器

描述

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

语法说明

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

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

案例演示

【需求说明】

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

【实现效果】

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

【参考代码】

<body>

<h2>蝶恋花•庭院深深深几许</h2>

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

<p class="first">玉勒雕鞍游冶处，楼高不见章台路。</p>

<p class="second">雨横风狂三月幕，门掩黄昏，无计留春住。</p>

<p id="end">泪眼问花花不语，乱红飞过秋千去。</p>

</body>

h3,

.first,

.second,

end {

font-size: 16px;

color: green;

font-weight: normal;

}

</style>

经验说明

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

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

1. 什么是继承

案例演示

【实现效果】

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

【分析】

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

【参考代码】

<html>

<head>

<title>继承的应用</title>

</head>

<body>

<h1>网络传播学院学习平台</h1>

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

<ul>

<ul>

<li>使用Dreamweaver制作网页</li>

<li>使用CSS布局和美化网页

<ul>

<li>CSS初级</li>

<li>CSS中级</li>

<li>CSS高级</li>

</ul>

</li>

<li>使用JavaScript制作网页特效</li>

</ul>

</li>

<ol>

<li>使用Photoshop处理图形图像</li>

<li>使用Illustrator设计图形</li>

<li>制作Flash动画</li>

</ol>

</ul>

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

</body>

</html>

2. 继承的CSS应用

描述

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

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

案例演示

【实现效果】

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

【核心代码】

li {

color: blue;

font-size: 12px;

}

ul li ul li ul li {

color: red;

}

ul li ol li {

color: green;

}

</style>

三、使用CSS设置超链接

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

(一) 超链接伪类

1. 超链接的默认样式

描述

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

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

案例展示

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

<body>

<p><a href="#">楼兰蜜语新疆野生</a> <a href="#">无漂白薄皮核桃</a></p>

</body>

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

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

(一) 认识<div>标签

1. <div>标签的用法

网页布局

排版网页内容

2. 语法

3. 案例演示

header{

width:200px;

height:280px;

background-color: red;

}

</style>

(二) 背景颜色

1. 描述

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

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

2. 案例演示

实现效果

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

参考代码

【HTML】

<div class="title">全部商品分类</div>

<ul>

</ul>

</div>

【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) . 使用<div>、<p>、<span>等标签编辑页面，页面整体背景颜色为灰色（#eeeeee）

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

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

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

2. 实现效果

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

(二) 淘宝女装分类页面

1. 需求说明

(1) . 使用<div>和标题等HTML标签编辑页面

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

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

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

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

2. 实现效果

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

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 211,817评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,329评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,354评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,498评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,600评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,829评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,979评论 3赞 408
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,722评论 0赞 266
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,189评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,519评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,654评论 1赞 340
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,329评论 4赞 330
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,940评论 3赞 313
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,762评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,993评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,382评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,543评论 2赞 349

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

一、 使用CSS编辑网页文本

(一) 描述

(二) <span>标签

1. 描述

2. 案例演示

需求说明

实现效果

核心代码

(三) 字体样式

1. 描述

(四) 字体类型 font-family

1. 语法格式

2. 案例演示

需求说明

实现效果

核心代码

3. 经验说明

(五) 字体大小

1. 描述

(六) 字体风格

1. 描述

2. 案例演示

需求说明

实现效果

核心代码

(七) 字体粗细

1. 描述

2. font-weight属性的值

3. 案例演示

实现效果

核心代码

(八) 字体属性

1. 描述

2. 案例演示

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

(十) 文本颜色

1. 描述

2. 案例演示

(十一) 水平对齐方式

1. 描述

2. text-align属性常用值

3. 案例演示：新闻

需求：

实现效果

核心代码

(十二) 首行缩进和行高

1. 描述

2. 案例演示

需求

实现效果

核心代码

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

1. 描述

文本装饰

垂直对齐方式

2. 案例演示

实现效果

(十四) 课堂练习

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

训练要点

需求说明

实现思路

参考代码

(十五) 课后练习

1. 新闻信息展示页面

需求说明

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

(一) CSS的复合选择器

1. 描述

2. 后代选择器

描述

语法

案例演示

后代选择器常用情况

3. 交集选择器【理解】

描述

语法格式

案例演示

【总结说明】

一、使用CSS编辑网页文本

三、使用CSS设置超链接

四、背景样式

五、列表样式