第八章 CSS 文字属性(课件珍藏版)
第八章 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及其他。
代码如下:
欢迎你加入IT高端人才
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这三种字体是一样大的。
````
{font-size: 8px;} /*像素数值5是最小的*/
````
````
{font-size: xx-small;} /*最小 xx-small*/
````
````
{font-size: x-small;} /*较小 x-small*/
````
````
{font-size: small;} /*小 small*/
````
````
{font-size: smaller;} /*相对字体尺寸较小 smaller */
````
````
{font-size: initial;} /*初始大小 initial */
````
````
{font-size: inherit;} /*继承 inherit */
````
````
{font-size: medium;} /*正常 medium*/
````
````
{font-size: large;} /*大 large*/
````
````
{font-size: larger;} /*相对字体尺寸较大 larger*/
````
````
{font-size: x-large;} /*较大 x-large*/
````
````
{font-size: xx-large;} /*最大 xx-large*/
````
````
{font-size: 3em;} /*字体倍数单位 em */
````
课堂互动：
利用随机点名表随机点名的方式来提问题，回答正确者加分，或在聊天框内扣学生姓名 + 666及其他。
代码如下：
````
思不嫌烦，学不嫌苦，不卑不亢，奋发向上，万薪！
思不嫌烦，学不嫌苦，不卑不亢，奋发向上，万薪！
思不嫌烦，学不嫌苦，不卑不亢，奋发向上，万薪！
思不嫌烦，学不嫌苦，不卑不亢，奋发向上，万薪！
思不嫌烦，学不嫌苦，不卑不亢，奋发向上，万薪！
思不嫌烦，学不嫌苦，不卑不亢，奋发向上，万薪！
思不嫌烦，学不嫌苦，不卑不亢，奋发向上，万薪！
思不嫌烦，学不嫌苦，不卑不亢，奋发向上，万薪！
思不嫌烦，学不嫌苦，不卑不亢，奋发向上，万薪！
思不嫌烦，学不嫌苦，不卑不亢，奋发向上，万薪！
思不嫌烦，学不嫌苦，不卑不亢，奋发向上，万薪！
思不嫌烦，学不嫌苦，不卑不亢，奋发向上，万薪！
思不嫌烦，学不嫌苦，不卑不亢，奋发向上，万薪！
````
课后作业：
作业描述：
根据所学内容作出此效果，注意文字大小，文字颜色的设置。
8.1.3 字体属性 font-family
该属性用于指定文字的字体类型，如宋体、黑体、隶书、楷体、Times New Roman等。
语法如下：
````
{font-family:"宋体";} /*设置字体为宋体,如有多个字体时用“，”隔开，如下*/
````
````
{font-family:"宋体","楷体";} /*设置字体为宋体，电脑里没有默认下一个字体*/
````
代码解释：
以上代码是告诉浏览器首先在访问者的计算机中寻找"宋体"字体；如果没有就找"楷体"字体，
两者都没有用默认字体,默认使用宋体。
注意事项：
- 如果想给中文和英文分别单独设置字体, 怎么办?
但凡是中文字体, 里面都包含了英文
但凡是英文字体, 里面都没有包含中文
也就是说中文字体可以处理英文, 而英文字体不能处理中文。
课堂互动：
利用小组PK的方式来提问题，回答正确者加分，或在聊天框内扣学生姓名 + 666及其他。
代码如下：
````
我是字体20像素的大小 It takes courage to believe
It takes courage to believe 坚持信仰需要勇气
````
注意点：
1、如果取值是中文， 需要用双引号或者单引号括起来
2、设置的字体必须是用户电脑里面已经安装的字体
3、如果想给界面中的英文单独设置字体, 那么英文的字体必须写在中文的前面
8.1.4 文字加粗属性 font-weight
该属性用来定义字体的粗细程度.
语法如下： 值：normal | lighter | bold | bolder |
````
{font-weight:100;} /*数值的取值范围是 100-900 从最细到最粗*/
````
````
{font-weight:normal;} /*设置字体正常显示*/
````
````
{font-weight:lighter;} /*设置字体为细体*/
````
````
{font-weight:bold;} /*设置字体为粗体*/
````
````
{font-weight:bolder;} /*设置字体为超粗体*/
````
课堂互动：
利用抢答的方式来提问题，回答正确者加分，或在聊天框内扣学生姓名 + 666及其他。
代码如下：
````
我是像素粗细
我是不加粗
我是细体
我是粗体
我是超粗体
````
课后作业：
作业描述：
根据所学字体属性，文字加粗属性来实现此效果图的内容。
8.1.5 文字倾斜属性 font-style
该属性用来定义字体的倾斜程度。
语法如下： 值：normal | italic | oblique |
````
{font-style:normal;} /*设置字体正常显示*/
````
````
{font-style:italic;} /*设置字体为斜体字*/
````
````
{font-style:oblique;} /*设置字体为偏斜体字*/
````
课堂互动：
利用刷屏的方式来提问题，回答正确者加分，或在聊天框内扣学生姓名 + 666及其他。
代码如下：
````
我是正常字体
我是倾斜
我是偏倾斜
````
课后作业：
作业描述：
根据所学文字倾斜属性来实现此效果图的内容。
注意文字的大小，颜色。
8.1.6 文本装饰效果属性 text-decoration
该属性用来定义字体的装饰效果。
语法如下： 值：none | underline | line-through | overline
````
{text-decoration:none;} /*设置字体为正常显示*/
````
````
{text-decoration:underline} /*设置字体为下划线样式*/
````
````
{text-decoration:line-through;} /*设置字体为删除线样式*/
````
````
{text-decoration:overline;} /*设置字体为顶线样式*/
````
课堂互动：
利用小组PK的方式来提问题，回答正确者加分，或在聊天框内扣学生姓名 + 666及其他。
代码如下：
````
我是正常的
我有下划线
我有删除线
我有顶线
````
课后作业：
作业描述：
根据所学文字装饰属性来实现此效果图的内容。
注意文字的大小，颜色，倾斜效果。
8.1.7 案例练习
案例实现思路步骤：
1）首先观察这个可以分为几块部分，可分为上中下，3部分。
2）第一部分：是4张图片，直接导入，设置大小，位置等属性。
3）第二部分：我用的段落标签，因为观察上下的间距比较大，然后设置文字位置，大小等属性。
4）第三部分：也是段落标签，知识写完文字设置位置属性即可。
5）案例1完成。
课堂互动：
利用抢答的方式来提问题，回答正确者加分，或在聊天框内扣学生姓名 + 666及其他。
案例代码：
````
技能介绍
炽热光辉 冷却值：20 消耗：100
安琪拉引导魔力朝指定方向释放炽热光辉，持续3秒，对触碰的敌人每0.3秒造成150/190/230（+21%法术加成）点法
术伤害并获得可抵免700/1050/1400（+88%法术加成）点伤害的炽热护盾，护盾存在期间不会受到控制效果，施法1
秒后再次释放该技能可以取消引导
````
### 8.2 段落样式属性
#### 8.2.1 段落首行缩进属性 text-indent
该属性用来定义文本段落的首行缩进效果。
根据中文的排版习惯，每个正文段落的首行的开始处应该保持两个中文字的空白。
语法如下：
````
{text-indent:30px;} /*设置段落首行缩进的位置是30像素的距离*/
````
````
{text-indent:2em;} /*设置段落首行缩进的位置是2个文字倍数的距离*/
````
课堂互动：
利用刷屏的方式来提问题，回答正确者加分，或在聊天框内扣学生姓名 + 666及其他。
案例代码：
````
我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！
我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！我是最棒的，我是最优秀的！
````
8.2.2 字，词间距属性
语法如下：
````
{word-spacing:20px;} /*设置每个单词之间的距离*/
````
````
{letter-spacing:10px;} /*设置每个字母之间的距离*/
````
````
{letter-spacing:20px;} /*设置每个文字之间的距离*/
````
代码注解：
1)）word-spacing:-1px; 单词间距（英文）
将上面英文段落的字母间距设置为“-1px”,这样单词的字母就比正常情况更紧密地排列在一起。
而如果将单词间距设置为10个像素，这样单词之间的距离就大于正常情况了。
在英文中每个单词是用空格间隔开的，如果换字体空格的大小也会发生改变，要量出空格的大小+默认的1px间 距+设置的单词间距就是页面显示的单词间距了。
2）letter-spacing:20px; 文字间距（中文）
文字间距（中文）默认文字间距是1px + 设置的10px是11px。
课堂互动：
利用随机点名表随机点名的方式来提问题，回答正确者加分，或在聊天框内扣学生姓名 + 666及其他。
代码如下：
````
It takes courage to believe
It takes courage to believe
坚持信仰需要勇气
8.2.3 行高属性 Line-height
该属性用来定义单行文字的垂直居中效果。
语法如下：
````
{line-height: 200px;} /*设置单行文本的垂直居中*/
````
代码注解：
此方法针对只有一行文字的情况，对于超过一行的文本，失效。
当数值和外面的盒子的高一致时，就垂直居中。
当数值大于外面的盒子的高度时，就偏下。
当数值小于外面的盒子的高度时，就偏上。
课堂互动：
利用小组PK的方式来提问题，回答正确者加分，或在聊天框内扣学生姓名 + 666及其他。
案例代码：
````
8.2.4 文字水平对齐属性 text-align
该属性用来定义文字水平对齐的效果。
语法如下： 值：left | center | right | justify |
````
{text-align: left;} /*设置文字居左显示*/
````
````
{text-align: center;} /*设置文字居中显示*/
````
````
{text-align: right;} /*设置文字居右显示*/
````
````
{text-align-last: justify;} /*设置文字两端对齐显示*/
````
代码注解：
正常情况下是左对齐方式，每一行的右端是不整齐的（又因为单次的时候经常会出现这种情况），而如果希望右端也能整齐，则可以使用justify
注意：图片的水平对齐通常不能直接通过设置图片的text-align属性，而是通过设置其父元素的该属性值来实现的。
课堂互动：
利用刷屏的方式来提问题，回答正确者加分，或在聊天框内扣学生姓名 + 666及其他。
代码如下：
````
课后作业：
作业描述：
根据所学字词间距，行高，水平对齐属性来实现此效果图的内容。
注意文字的大小。
8.2.5 文字垂直对齐属性 vertical-align
该属性用来定义文字的垂直对齐效果。
语法如下： 值：top | middle | bottom |
````
{vertical-align: top;} /*设置文字垂直居上显示*/
````
````
{vertical-align: middle;} /*设置文字垂直居中显示*/
````
````
{vertical-align: bottom;} /*设置文字垂直居下显示*/
````
课堂互动：
利用直接点名的方式来提问题，回答正确者加分，或在聊天框内扣学生姓名 + 666及其他。
代码如下：
````
| 我是上对齐 | 我是垂直居中 | 我是下对齐 |
注意：在div无效，表格里可用
课后作业：
作业描述：
根据所学垂直对齐属性来实现此效果图的内容。
注意文字的大小，居上，居中，居下，居下带背景色，并且是圆角矩形状。
8,2,6 案例作业
案例作业效果图：
案例作业实现思路步骤：
1）首先观察这是一个小布局的网页。
2）然后给这个小网页分块，是div
3）分为3块，上中下，三块，分别创建div标签
4）然后开始做第一行的版本活动，两个的是水平线，一个居右，一个居左，文字在中间。
5）中间的算是标签栏，分为3块，左中右，需要设置背景大小，背景颜色，文字颜色和大小，背景图片，文字垂直水平居中，
6）最下面的，我们在看成左右两块，然后把左边的看成上下2块div。
7）左侧的上div需要设置宽高，背景图片，文字大小，居中等属性。
8）左侧下方的div需要设置，文字的大小，颜色，左右移动，上下移动等属性。
9）右侧的直接导入背景图片即可。
10）案例2完成。
案例代码：
````