第八章 CSS 文字属性
一、知识回顾：
7.1 css的概述
知识点回顾：利用随机点名表随机点名的方式。
7.2 css的基本语法
知识点回顾：利用直播间刷屏的方式。
7.3 css的引入样式
知识点回顾：利用直播间抢答的方式。
7.4 常见选择器
知识点回顾：利用直播间直接点名的方式。
二、本单元内容
8.1 文字样式属性
8.2 段落样式属性
8.1 文字样式属性
8.1.1 文字颜色属性 color
该属性用来设置字体的颜色。
语法格式如下：
{color:red;} /*设置文字为红色*/
课堂互动：
利用直接点名的方式来提问题，回答正确者加分，或在聊天框内扣学生姓名 + 666及其他。
代码如下:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.a{
color: red;
}
</style>
</head>
<body>
<span class="a">欢迎你加入IT高端人才</span><br>
</body>
</html>
8.1.2 文字大小属性 font-size
该属性用来设置文字的大小。具体的语法格式如下：13个属性
{ font-size : 像素数值、xx-small 最小 | x-small 较小 | small 小 | smaller 相对字体尺寸较小 |
initial 初始大小 | inherit 继承 | medium 正常大小 |
large 大 | larger 相对字体尺寸较大 | x-large 较大 | xx-large 最大 | 2em倍数;}
期中：1）small 和 smaller这两种字体是一样大的。
2）initial、inherit、medium这三种字体是一样大的。
````<html></html>
{font-size: 8px;} /*像素数值5是最小的*/
````
````<html></html>
{font-size: xx-small;} /*最小 xx-small*/
````
````<html></html>
{font-size: x-small;} /*较小 x-small*/
````
````<html></html>
{font-size: small;} /*小 small*/
````
````<html></html>
{font-size: smaller;} /*相对字体尺寸较小 smaller */
````
````<html></html>
{font-size: initial;} /*初始大小 initial */
````
````<html></html>
{font-size: inherit;} /*继承 inherit */
````
````<html></html>
{font-size: medium;} /*正常 medium*/
````
````<html></html>
{font-size: large;} /*大 large*/
````
````<html></html>
{font-size: larger;} /*相对字体尺寸较大 larger*/
````
````<html></html>
{font-size: x-large;} /*较大 x-large*/
````
````<html></html>
{font-size: xx-large;} /*最大 xx-large*/
````
````<html></html>
{font-size: 3em;} /*字体倍数单位 em */
````
课堂互动：
利用随机点名表随机点名的方式来提问题，回答正确者加分，或在聊天框内扣学生姓名 + 666及其他。
代码如下：
````<html></html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.a{
font-size: 8px; /*像素数值8是最小的*/
}
.b{
font-size: xx-small; /*最小 xx-small 和像素8是一样大小*/
}
.c{
font-size: x-small; /*较小 x-small*/
}
.d{
font-size: small; /*小 small*/
}
.e{
font-size: smaller; /*相对字体尺寸较小 smaller */
}
.f{
font-size: initial; /*初始大小 initial */
}
.g{
font-size: inherit; /*继承 inherit */
}
.h{
font-size: medium; /*正常 medium*/
}
.i{
font-size: large; /*大 large*/
}
.j{
font-size: larger; /*相对字体尺寸较大 larger*/
}
.k{
font-size: x-large; /*较大 x-large*/
}
.l{
font-size: xx-large; /*最大 xx-large*/
}
.m{
font-size: 3em; /*字体倍数单位 em */
}
</style>
</head>
<body>
<span class="a">思不嫌烦，学不嫌苦，不卑不亢，奋发向上，万薪！</span><br>
<span class="b">思不嫌烦，学不嫌苦，不卑不亢，奋发向上，万薪！</span><br>
<span class="c">思不嫌烦，学不嫌苦，不卑不亢，奋发向上，万薪！</span><br>
<span class="d">思不嫌烦，学不嫌苦，不卑不亢，奋发向上，万薪！</span><br>
<span class="e">思不嫌烦，学不嫌苦，不卑不亢，奋发向上，万薪！</span><br>
<span class="f">思不嫌烦，学不嫌苦，不卑不亢，奋发向上，万薪！</span><br>
<span class="g">思不嫌烦，学不嫌苦，不卑不亢，奋发向上，万薪！</span><br>
<span class="h">思不嫌烦，学不嫌苦，不卑不亢，奋发向上，万薪！</span><br>
<span class="i">思不嫌烦，学不嫌苦，不卑不亢，奋发向上，万薪！</span><br>
<span class="j">思不嫌烦，学不嫌苦，不卑不亢，奋发向上，万薪！</span><br>
<span class="k">思不嫌烦，学不嫌苦，不卑不亢，奋发向上，万薪！</span><br>
<span class="l">思不嫌烦，学不嫌苦，不卑不亢，奋发向上，万薪！</span><br>
<span class="m">思不嫌烦，学不嫌苦，不卑不亢，奋发向上，万薪！</span><br>
</body>
</html>
````
课后作业：
作业描述：
根据所学内容作出此效果，注意文字大小，文字颜色的设置。
8.1.3 字体属性 font-family
该属性用于指定文字的字体类型，如宋体、黑体、隶书、楷体、Times New Roman等。
语法如下：
````<html></html>
{font-family:"宋体";} /*设置字体为宋体,如有多个字体时用“，”隔开，如下*/
````
````<html></html>
{font-family:"宋体","楷体";} /*设置字体为宋体，电脑里没有默认下一个字体*/
````
代码解释：
以上代码是告诉浏览器首先在访问者的计算机中寻找"宋体"字体；如果没有就找"楷体"字体，
两者都没有用默认字体,默认使用宋体。
注意事项：
- 如果想给中文和英文分别单独设置字体, 怎么办?
但凡是中文字体, 里面都包含了英文
但凡是英文字体, 里面都没有包含中文
也就是说中文字体可以处理英文, 而英文字体不能处理中文。
课堂互动：
利用小组PK的方式来提问题，回答正确者加分，或在聊天框内扣学生姓名 + 666及其他。
代码如下：
````<html></html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.a{
font-family: "宋体","黑体";
}
.b{
font-family: Arial, Times New Roman;
}
</style>
</head>
<body>
<span class="a">我是字体20像素的大小 It takes courage to believe</span><br>
<span class="b">It takes courage to believe 坚持信仰需要勇气</span><br>
</body>
</html>
````
注意点：
1、如果取值是中文， 需要用双引号或者单引号括起来
2、设置的字体必须是用户电脑里面已经安装的字体
3、如果想给界面中的英文单独设置字体, 那么英文的字体必须写在中文的前面
8.1.4 文字加粗属性 font-weight
该属性用来定义字体的粗细程度.
语法如下： 值：normal | lighter | bold | bolder |
````<html></html>
{font-weight:100;} /*数值的取值范围是 100-900 从最细到最粗*/
````
````<html></html>
{font-weight:normal;} /*设置字体正常显示*/
````
````<html></html>
{font-weight:lighter;} /*设置字体为细体*/
````
````<html></html>
{font-weight:bold;} /*设置字体为粗体*/
````
````<html></html>
{font-weight:bolder;} /*设置字体为超粗体*/
````
课堂互动：
利用抢答的方式来提问题，回答正确者加分，或在聊天框内扣学生姓名 + 666及其他。
代码如下：
````<html></html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.a{
color: red;
font-weight:100;
}
.b{
color: red;
font-weight:normal;
}
.c{
color: #1E90FF;
font-weight:lighter;
}
.d{
color: #FF1493;
font-weight:bold;
}
.e{
color: #00FF00;
font-weight:bolder;
}
</style>
</head>
<body>
<span class="a">我是像素粗细</span><br>
<span class="b">我是不加粗</span><br>
<span class="c">我是细体</span><br>
<span class="d">我是粗体</span><br>
<span class="e">我是超粗体</span><br>
</body>
</html>
````
课后作业：
作业描述：
根据所学字体属性，文字加粗属性来实现此效果图的内容。
8.1.5 文字倾斜属性 font-style
该属性用来定义字体的倾斜程度。
语法如下： 值：normal | italic | oblique |
````<html></html>
{font-style:normal;} /*设置字体正常显示*/
````
````<html></html>
{font-style:italic;} /*设置字体为斜体字*/
````
````<html></html>
{font-style:oblique;} /*设置字体为偏斜体字*/
````
课堂互动：
利用刷屏的方式来提问题，回答正确者加分，或在聊天框内扣学生姓名 + 666及其他。
代码如下：
````<html></html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.a{
color: lightblue;
font-style:normal;
}
.b{
color: red;
font-style:italic;
}
.c{
color: #1E90FF;
font-style:oblique;
}
</style>
</head>
<body>
<span class="a">我是正常字体</span><br>
<span class="b">我是倾斜</span><br>
<span class="c">我是偏倾斜</span><br>
</body>
</html>
````
课后作业：
作业描述：
根据所学文字倾斜属性来实现此效果图的内容。
注意文字的大小，颜色。
8.1.6 文本装饰效果属性 text-decoration
该属性用来定义字体的装饰效果。
语法如下： 值：none | underline | line-through | overline
````<html></html>
{text-decoration:none;} /*设置字体为正常显示*/
````
````<html></html>
{text-decoration:underline} /*设置字体为下划线样式*/
````
````<html></html>
{text-decoration:line-through;} /*设置字体为删除线样式*/
````
````<html></html>
{text-decoration:overline;} /*设置字体为顶线样式*/
````
课堂互动：
利用小组PK的方式来提问题，回答正确者加分，或在聊天框内扣学生姓名 + 666及其他。
代码如下：
````<html></html>
<html>
<head>
<title></title>
<style type="text/css">
.a{
color: red;
text-decoration:none;
}
.c{
color: #1E90FF;
text-decoration:underline;
}
.d{
color: #FF1493;
text-decoration:line-through;
}
.e{
color: #00FF00;
text-decoration:overline;
}
</style>
</head>
<body>
<span class="a">我是正常的</span><br>
<span class="c">我有下划线</span><br>
<span class="d">我有删除线</span><br>
<span class="e">我有顶线</span><br>
</body>
</html>
````
课后作业：
作业描述：
根据所学文字装饰属性来实现此效果图的内容。
注意文字的大小，颜色，倾斜效果。
8.1.7 案例练习
案例实现思路步骤：
1）首先观察这个可以分为几块部分，可分为上中下，3部分。
2）第一部分：是4张图片，直接导入，设置大小，位置等属性。
3）第二部分：我用的段落标签，因为观察上下的间距比较大，然后设置文字位置，大小等属性。
4）第三部分：也是段落标签，知识写完文字设置位置属性即可。
5）案例1完成。
课堂互动：
利用抢答的方式来提问题，回答正确者加分，或在聊天框内扣学生姓名 + 666及其他。
案例代码：
````<html></html>
<!DOCTYPE html>
<html>
<head>
<title>案例练习1</title>
<style type="text/css">
#box{
width: 770px;
height: 300px;
background-color: ;
border: 1px #cccccc solid;
}
#box img{
width: 100px;
height: 100px;
margin-left: 20px;
margin-top: 16px;
}
.p{
margin-left: 20px;
}
.span{
font-size: 18px;
font-weight: bold;
}
.span1{
margin-left: 50px;
}
.p1{
margin-left: 20px;
font-size: 14px;
}
</style>
</head>
<body>
<h1>技能介绍</h1>
<div id="box">
<img src="图1.png">
<img src="图2.png">
<img src="图3.png">
<img src="图4.png">
<p class="p"><span class="span">炽热光辉</span> <span class="span1">冷却值：20 消耗：100</span></p>
<p class="p1">安琪拉引导魔力朝指定方向释放炽热光辉，持续3秒，对触碰的敌人每0.3秒造成150/190/230（+21%法术加成）点法<br>术伤害并获得可抵免700/1050/1400（+88%法术加成）点伤害的炽热护盾，护盾存在期间不会受到控制效果，施法1<br>秒后再次释放该技能可以取消引导</p>
</div>
</body>
</html>
````
### 8.2 段落样式属性
#### 8.2.1 段落首行缩进属性 text-indent
该属性用来定义文本段落的首行缩进效果。
根据中文的排版习惯，每个正文段落的首行的开始处应该保持两个中文字的空白。
语法如下：
````<html></html>
{text-indent:30px;} /*设置段落首行缩进的位置是30像素的距离*/
````
````<html></html>
{text-indent:2em;} /*设置段落首行缩进的位置是2个文字倍数的距离*/
````
课堂互动：
利用刷屏的方式来提问题，回答正确者加分，或在聊天框内扣学生姓名 + 666及其他。
案例代码：
````<html></html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.a{
color: red;
text-indent:30px;
}
.c{
color: #1E90FF;
text-indent:2em;
}
</style>
</head>
<body>
<p class="a">我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！</p><br>
<p class="c">我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！</p><br>
</body>
</html>
````
8.2.2 字，词间距属性
语法如下：
````<html></html>
{word-spacing:20px;} /*设置每个单词之间的距离*/
````
````<html></html>
{letter-spacing:10px;} /*设置每个字母之间的距离*/
````
````<html></html>
{letter-spacing:20px;} /*设置每个文字之间的距离*/
````
代码注解：
1)）word-spacing:-1px; 单词间距（英文）
将上面英文段落的字母间距设置为“-1px”,这样单词的字母就比正常情况更紧密地排列在一起。
而如果将单词间距设置为10个像素，这样单词之间的距离就大于正常情况了。
在英文中每个单词是用空格间隔开的，如果换字体空格的大小也会发生改变，要量出空格的大小+默认的1px间 距+设置的单词间距就是页面显示的单词间距了。
2）letter-spacing:20px; 文字间距（中文）
文字间距（中文）默认文字间距是1px + 设置的10px是11px。
课堂互动：
利用随机点名表随机点名的方式来提问题，回答正确者加分，或在聊天框内扣学生姓名 + 666及其他。
代码如下：
````<html></html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.a{
color: red;
word-spacing:20px;
}
.c{
color: #1E90FF;
letter-spacing:10px;
}
.d{
color: #FF1493;
letter-spacing:20px;
}
</style>
</head>
<body>
<p class="a">It takes courage to believe</p><br>
<p class="c">It takes courage to believe</p><br>
<p class="d">坚持信仰需要勇气</p><br>
</body>
</html>
8.2.3 行高属性 Line-height
该属性用来定义单行文字的垂直居中效果。
语法如下：
````<html></html>
{line-height: 200px;} /*设置单行文本的垂直居中*/
````
代码注解：
此方法针对只有一行文字的情况，对于超过一行的文本，失效。
当数值和外面的盒子的高一致时，就垂直居中。
当数值大于外面的盒子的高度时，就偏下。
当数值小于外面的盒子的高度时，就偏上。
课堂互动：
利用小组PK的方式来提问题，回答正确者加分，或在聊天框内扣学生姓名 + 666及其他。
案例代码：
````<html></html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: pink;
line-height: 200px;
}
</style>
</head>
<body>
<div>加油，我能行！</div>
</body>
</html>
8.2.4 文字水平对齐属性 text-align
该属性用来定义文字水平对齐的效果。
语法如下： 值：left | center | right | justify |
````<html></html>
{text-align: left;} /*设置文字居左显示*/
````
````<html></html>
{text-align: center;} /*设置文字居中显示*/
````
````<html></html>
{text-align: right;} /*设置文字居右显示*/
````
````<html></html>
{text-align-last: justify;} /*设置文字两端对齐显示*/
````
代码注解：
正常情况下是左对齐方式，每一行的右端是不整齐的（又因为单次的时候经常会出现这种情况），而如果希望右端也能整齐，则可以使用justify
注意：图片的水平对齐通常不能直接通过设置图片的text-align属性，而是通过设置其父元素的该属性值来实现的。
课堂互动：
利用刷屏的方式来提问题，回答正确者加分，或在聊天框内扣学生姓名 + 666及其他。
代码如下：
````<html></html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
}
.a{
text-align: left;
background-color: pink;
}
.b{
text-align: center;
background-color: green;
}
.c{
text-align: right;
background-color: red;
}
.e{
text-align-last: justify;
background-color: gray;
}
</style>
</head>
<body>
<div class="a">加油</div>
<div class="b">我能行！</div>
<div class="c">加油</div>
<div class="e">坚持住</div>
</body>
</html>
课后作业：
作业描述：
根据所学字词间距，行高，水平对齐属性来实现此效果图的内容。
注意文字的大小。
8.2.5 文字垂直对齐属性 vertical-align
该属性用来定义文字的垂直对齐效果。
语法如下： 值：top | middle | bottom |
````<html></html>
{vertical-align: top;} /*设置文字垂直居上显示*/
````
````<html></html>
{vertical-align: middle;} /*设置文字垂直居中显示*/
````
````<html></html>
{vertical-align: bottom;} /*设置文字垂直居下显示*/
````
课堂互动：
利用直接点名的方式来提问题，回答正确者加分，或在聊天框内扣学生姓名 + 666及其他。
代码如下：
````<html></html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
td{
width: 100px;
height: 100px;
}
.a{
vertical-align: top;
background-color: pink;
}
.b{
vertical-align: middle;
background-color: green;
}
.c{
vertical-align: bottom;
background-color: red;
</style>
</head>
<body>
<table>
<tr>
<td class="a">我是上对齐</td>
<td class="b">我是垂直居中</td>
<td class="c">我是下对齐</td>
</tr>
</table>
</body>
</html>
注意：在div无效，表格里可用
课后作业：
作业描述：
根据所学垂直对齐属性来实现此效果图的内容。
注意文字的大小，居上，居中，居下，居下带背景色，并且是圆角矩形状。
8,2,6 案例作业
案例作业效果图：
案例作业实现思路步骤：
1）首先观察这是一个小布局的网页。
2）然后给这个小网页分块，是div
3）分为3块，上中下，三块，分别创建div标签
4）然后开始做第一行的版本活动，两个的是水平线，一个居右，一个居左，文字在中间。
5）中间的算是标签栏，分为3块，左中右，需要设置背景大小，背景颜色，文字颜色和大小，背景图片，文字垂直水平居中，
6）最下面的，我们在看成左右两块，然后把左边的看成上下2块div。
7）左侧的上div需要设置宽高，背景图片，文字大小，居中等属性。
8）左侧下方的div需要设置，文字的大小，颜色，左右移动，上下移动等属性。
9）右侧的直接导入背景图片即可。
10）案例2完成。
案例代码：
````<html></html>
<!DOCTYPE html>
<html>
<head>
<title>案例练习2</title>
<style type="text/css">
#box{
width: 1000px;
height: 540px;
background-image: url(案例2.png);
background-size: 100%;
margin: 0 auto;
}
.dl{
width: 360px;
height: 60px;
background-color: ;
float: left;
margin-top: 50px;
}
.dc{
width: 280px;
height: 60px;
background-color: ;
float: left;
margin-top: 50px;
}
.dl hr{
width: 140px;
float: right;
margin-top: 24px;
}
.dc h1{
color: white;
font-family: "锐字巅峰粗黑简1.0常规";
text-align: center;
font-weight: bolder;
line-height: 5px;
}
.dr{
width: 360px;
height: 60px;
background-color: ;
float: left;
margin-top: 50px;
}
.dr hr{
width: 140px;
float: left;
margin-top: 24px;
}
#daohang{
width: 800px;
height: 64px;
background-color: pink;
position: absolute;
margin-left: 100px;
margin-top: 140px;
}
#daohang a{
width: 264px;
height: 64px;
background-color: black;
display: block;
float: left;
line-height: 64px;
text-decoration: none;
text-align: center;
font-size: 24px;
font-family: "黑体";
font-weight: bold;
border: 1px yellow solid;
color: yellow;
}
#con{
width: 800px;
height: 242px;
background-color: black;
position: absolute;
margin-left: 100px;
margin-top: 230px;
}
.dl1{
width: 400px;
height: 242px;
background-color: black;
float: left;
}
.top{
width: 400px;
height: 64px;
background-color: blue;
font-size: 20px;
line-height: 64px;
text-align: center;
background-image: url(案例2图片2.png);
}
.bottom{
width: 400px;
height: 154px;
background-color: black;
font-size: 12px;
color: white;
padding-top: 24px;
margin-left: 20px;
}
.dr1{
width: 400px;
height: 242px;
background-color: blue;
float: left;
background-image: url(案例2图片.png);
background-size: 100%;
}
</style>
</head>
<body>
<div id="box">
<!--活动版本开始-->
<div class="dl"><hr></div>
<div class="dc"><h1>版本活动</h1></div>
<div class="dr"><hr></div>
<!--活动版本结束-->
<!--3个标题栏开始-->
<div id="daohang">
<a href="">全服助力</a>
<a href="">激战圈中圈</a>
<a href="" style="color: black; background-image: url(案例2图片3.png);">登录新版本</a>
</div>
<!--3个标题栏结束-->
<!--内容展示开始-->
<div id="con">
<div class="dl1">
<div class="top">2020年4月1日-5月31日</div>
<div class="bottom">
《激情沙漠2.0》版本重磅福利，更新版本后登录可获得：主题背<br>景·沙漠绿洲（限时）。 </div>
</div>
<div class="dr1"></div>
</div>
</div>
</body>
</html>