目录
文本属性
文本颜色
文本对齐
修饰文本
文本缩进
行高
字体属性
字体系列
字体大小
字体粗细
字体样式
字体/文本综合属性写法
Chrome调试工具的使用
文本属性
文本颜色
在CSS中使用color 属性用于定义文本的颜色，使用background-color设置一个盒子背景颜色
基本语法：
选择器 {color: 颜色值;background-color: 颜色值;
}在CSS中，颜色值有四种表示形式，这四种表示形式都是等价的：
| 表示形式 | 属性值 |
| 预定义的颜色值 |
|
| 十六进制（开发时最常用） |
|
| RGB值 |
|
| RGBa值（a表示透明度） |
|
对于十六进制表示方法需要注意：
如果三组中，每组数字都相同，此时可以每组可以省略只写一个数字，例如：#ffaabb改写成#fab，但是类似于：#ffaabc不能改写成#fabc
常见的十六进制取值：
纯白色：#fff
纯黑色：#000
示例代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本颜色</title><style>.red {/* color: red; 等价于下面的代码*/color: #ff0000;}.red_transparent {color: rgba(255, 0, 0, 0.5);}.blue {/* color: blue; 等价于下面的代码 */color: #0000ff;}.green {/* color: green; 等价于下面的代码*/color: #008000;}</style>
</head><body><p class="red">这是一个红色的段落</p><p class="red_transparent">这是一个半透明红色的段落</p><p class="blue">这是一个蓝色的段落</p><p class="green">这是一个绿色的段落</p>
</body></html>效果如下：
文本对齐
在CSS中使用text-align 属性用于设置元素内文本内容的水平对齐方式
基本语法：
选择器 {text-align: 值;
}在CSS中，text-align属性有三种值：
| 属性值 | 描述 |
|
| 左对齐（默认值） |
|
| 居中对齐 |
|
| 右对齐 |
对于占用一整行的标签来说，其区域相当于一个盒子，而文本对齐属性实际改变的是文字在盒子中的位置，但是并不改变盒子本身的大小，对于只占用当前位置的标签来说，居中对齐效果需要text-align属性给文本所在标签（文本的父元素）设置
示例代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本对齐属性</title><style>.font-align {/* 将p标签的文本对齐方式设置为居中 */text-align: center;}</style>
</head><body><p class="font-align">这是一个居中对齐的p标签</p><span class="font-align">这是一个居中对齐的span标签</span><br /><span>这是一个没有居中对齐的span标签</span><div class="font-align">这是一个居中对齐的div标签</div></body></html>效果如下：
修饰文本
在CSS中使用text-decoration属性修改文本是否带有划线
基本语法：
选择器 {text-decoration: 值;
}在CSS中，修饰文本有以下四个值：
| 属性值 | 描述 |
|
| 无装饰线（默认值） |
|
| 下划线（部分标签自带下划线，例如标签 |
|
| 上划线 |
|
| 删除线 |
一般使用text-decoration属性是为了将带有下划线的标签改为无下划线
示例代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>修改文本</title><style>/* 将a标签的文本修饰设置为无修饰 */.non-decorate {text-decoration: none;}</style>
</head><body><a href="https://www.baidu.com">百度一下</a><a href="https://www.baidu.com" class="non-decorate">百度一下</a>
</body></html>效果如下：
文本缩进
在CSS中使用text-indent属性对文本缩进进行控制
基本语法：
选择器 {text-indent: 值em/值px;
}在设置文本缩进值时，可以考虑采用em作为单位，也可以采用px作为单位，em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小
示例代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本缩进</title><style>.indent {/* 将p标签的文本缩进设置为2em（2个字符） */text-indent: 2em;}</style>
</head><body><p class="indent">这是一个缩进2个字符的段落</p><p>这是一个没有缩进的段落</p>
</body></html>效果如下：
行高
在CSS中可以使用line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离
所谓行高，即行与行之间的间距，具体包括的范围如下：
📌
注意段落间距并不是由行高来决定的，改变行高不会改变段落间距
基本语法：
选择器 {line-height: 值em/值px;
}- 让单行文本垂直居中可以设置
line-height:文字父元素高度 - 网页精准布局时，会设置
Iine-height: 1（不要带单位）可以取消上下间距
示例代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>行高</title><style>* {font-family: 'Microsoft YaHei';}.height_line {line-height: 60px;}</style>
</head><body><!-- 段落行高 --><p class="height_line">这是一个段落，并且设置了行高为60px <br />这是第二行</p><p>这是一个段落，但是没有设置行高 <br />这是第二行 </p>
</body></html>效果如下：
字体属性
字体系列
在CSS中 使用 font-family 属性定义文本的字体系列
基本语法如下：
标签 {font-family: 字体, 字体;
}注意：
- 各种字体之间必须使用英文状态下的逗号隔开
- 一般情况下,如果有空格隔开的多个单词组成的字体,加单引号或双引号，例如
"Microsoft YaHei" - 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
- 如果字体系列中有多个字体时，将会从左向右依次匹配，直到匹配到当前设备存在的字体
- 常见字体：
body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }
示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字体集属性</title><style>.fontStyle{font-family:'Microsoft YaHei', 'Times New Roman', Times, serif;}</style>
</head>
<body><p>这是一个段落，观察字体</p><p class="fontStyle">这是一个段落，观察字体</p>
</body>
</html>效果如下：
字体大小
在CSS中使用 font-size 属性定义字体大小
基本语法如下：
标签 {font-size: 大小px;
}- px（像素）大小是我们网页的最常用的单位，给大小时一定要带px
- 谷歌浏览器默认的文字大小为16px
- 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
- 使用
<body></body>可以指定整个页面文字的大小
示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字体大小属性设置</title><style>.fontsize {font-size: 20px;}</style>
</head>
<body><h1 class="fontsize">字体大小属性设置</h1><h1>字体大小属性设置</h1><p class="fontsize">这是一个20px的字体大小</p><p>这是一个默认的字体大小</p>
</body>
</html>效果如下：
字体粗细
在CSS中使用font-weight 属性设置文本字体的粗细
基本语法如下：
选择器 {font-weight: 值;
}在CSS中，有下面三种值：
| 属性值 | 描述 |
|
| 默认值（不加粗） |
|
| 定义粗体（加粗） |
| 常数值 | 在CSS中，一共有100-900九个值，400等同于 |
一般考虑将粗体改为非粗体，例如将粗体的标题改为非粗体
示例代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>将标题改为非粗体</title><style>h1 {font-family: 'Microsoft YaHei';}/* 将h1标签的字体粗细设置为非粗体 */.non-bold {font-weight: 400;}</style>
</head><body><h1>这是一个正常标题</h1><h1 class="non-bold">这是非粗体标题</h1>
</body></html>效果如下：
字体样式
在CSS中 使用 font-style 属性设置文本的风格
基本语法：
选择器 {font-style: 值;
}| 属性值 | 描述 |
|
| 默认值，浏览器会显示每一个标签的默认值 |
|
| 浏览器会显示斜体 |
示例代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字体样式</title><style>/* 将p标签的字体样式设置为斜体 */.italic {font-style: italic;}</style>
</head><body><p>这是一个段落，但是没有被修饰为斜体</p><p class="italic">这是一个段落，并且被修饰为斜体</p>
</body></html>效果如下：
字体/文本综合属性写法
字体属性可以把以上文字样式综合来写, 这样可以更节约代码:
基本语法：
选择器 { font: font-style font-weight font-size/line-height font-family;
}使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开 不需要设置的属性可以省略（浏览器取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字体样式综合</title><style>.fontStyle {/* 按照下面的顺序进行书写：font-style font-weight font-size font-family */font: italic bold 20px 'Microsoft YaHei';}</style>
</head><body><p class="fontStyle">这是一个段落，并且被修饰为斜体，粗体，20px，Microsoft YaHei</p><p>这是一个段落，但是没有被修饰</p>
</body></html>效果如下：
Chrome调试工具的使用
- Ctrl+滚轮 可以放大开发者工具代码大小
- 一般左边是 HTML 元素结构，右边是 CSS 样式
- 右边 CSS 样式可以改动数值（左右箭头或者直接输入）和查看颜色
- Ctrl + 0 复原浏览器大小
- 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误
- 如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误
