本文已参与「新人创作礼」活动，一起开启掘金创作之路。

🔥 本文由程序喵正在路上原创，在稀土掘金首发！
💖 系列专栏：HTML+CSS
🌠 首发时间：2022年8月29日
🦋 欢迎关注🖱点赞👍收藏🌟留言🐾
🌟 一以贯之的努力不得懈怠的人生

🌠学习目标

● 能够设置文本样式
● 能够说出 CSS 的三种引入方式
● 能够独立完成综合案例
● 能够说出 Chrome 调试工具调试样式

🌠CSS 文本属性

CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等

1. 文本颜色

color 属性用于定义文本的颜色

div {
	color: red;
}

表示	属性值
预定义的颜色值	red, green, blue
十六进制	#FF0000, #FF6600, #29D794
RGB代码	rgb(255,0,0) 或 rgb(100%,0%,0%)

开发中最常用的是十六进制

2. 对齐文本

text-align 属性用于设置元素内文本内容的水平对齐方式

语法格式如下：

div {
	text-align: center;
}

属性值	解释
left	左对齐（默认值）
right	右对齐
center	居中对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本外观之文本对齐</title>
    <style>
        h1 {
            /* 本质是让h1盒子里面的文字水平居中对齐 */
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>居中对齐的标题</h1>
</body>
</html>

3. 装饰文本

text-decoration 属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等

语法格式如下：

div {
	text-decoration: underline;
}

属性值	描述
none	默认，没有装饰线（最常用）
underline	下划线，链接 a 自带下划线（常用）
overline	上划线（几乎不用）
line-through	删除线（不常用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体外观之装饰文本</title>
    <style>
        div {
            text-decoration: underline;
        }
        /* 去掉链接自带的下划线  */
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div>起风了</div>
    <a href="#">起风了</a>
</body>
</html>

重点记住如何添加、删除下划线即可

4.文本缩进

text-indent 属性用来指定文本第一行的缩进，通常是将段落的首行缩进

语法格式如下：

div {
	text-indent: 10px;
}

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值

p {
	text-indent: 2em;
}

em 是一个相对单位，就是当前元素（font-size）1 个文字的大小，如果当前元素没有设置大小，则会按照父元素的 1 个文字大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本外观之文本缩进</title>
    <style>
        p {
            /* text-indent: 20px; */
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <P>话说天下大势，分久必合，合久必分。周末七国分争，并入于秦。及秦灭之后，楚、汉分争，又并入于汉。汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃共相辅佐。时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。</P>
 
    <p>建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起。只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十余丈，飞入温德殿中。秋七月，有虹现于玉堂；五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。</p>
 
    <p>时巨鹿郡有兄弟三人，一名张角，一名张宝，一名张梁。那张角本是个不第秀才，因入山采药，遇一老人，碧眼童颜，手执藜杖，唤角至一洞中，以天书三卷授之，曰：“此名《太平要术》，汝得之，当代天宣化，普救世人；若萌异心，必获恶报。”角拜问姓名。老人曰：“吾乃南华老仙也。”言讫，化阵清风而去。角得此书，晓夜攻习，能呼风唤雨，号为“太平道人”。</p>
</body>
</html>

5. 行间距

line-height 属性用于设置行间的距离（行高），可以控制文字行与行之间的距离

语法格式如下：

p {
	line-height: 26px;
}

行间距由上间距、文本高度和下间距组成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS文本外观之行间距</title>
    <style>
        p {
            text-indent: 2em;
            line-height: 26px;
        }
    </style>
</head>
<body>
    <P>话说天下大势，分久必合，合久必分。周末七国分争，并入于秦。及秦灭之后，楚、汉分争，又并入于汉。汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃共相辅佐。时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。</P>
 
    <p>建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起。只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十余丈，飞入温德殿中。秋七月，有虹现于玉堂；五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。</p>
 
    <p>时巨鹿郡有兄弟三人，一名张角，一名张宝，一名张梁。那张角本是个不第秀才，因入山采药，遇一老人，碧眼童颜，手执藜杖，唤角至一洞中，以天书三卷授之，曰：“此名《太平要术》，汝得之，当代天宣化，普救世人；若萌异心，必获恶报。”角拜问姓名。老人曰：“吾乃南华老仙也。”言讫，化阵清风而去。角得此书，晓夜攻习，能呼风唤雨，号为“太平道人”。</p>
</body>
</html>

6. 文本属性总结

属性	表示	注意点
color	文本颜色	我们通常用十六进制表示，而且是简写形式 #fff
text-align	文本对齐	可以设定文字水平的对齐方式
text-indent	文本缩进	通常我们用于段落首行缩进 2 个字的距离 `text-indent: 2em;`
text-decoration	文本修饰	记住添加下划线 underline，取消下划线 none
line-height	行高	控制行与行之间的距离

🌠CSS 的引入方式

按照 CSS 样式书写的位置（或者引入的方式），CSS 样式表可以分为三大类：

行内样式表（行内式）
内部样式表（嵌入式）
外部样式表（链接式）

1. 内部样式表

内部样式表（内嵌样式表）是写到 HTML 页面内部，是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中

语法格式如下：

<style>
	div {
		color: red;
		font-size: 12px;
	}
</style>

● <style> 标签理论上可以放到 HTML 文档的任何地方，但一般会放在文档的 <head> 标签中
● 通过此方式，可以方便控制当前整个页面中的元素样式设置

2. 行内样式表

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式，适合于修改简单样式

语法格式如下：

<div style="color: red; font-size: 12px;">衣带渐宽终不悔，为伊消得人憔悴</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内样式表</title>
</head>
<body>
    <P>话说天下大势，分久必合，合久必分。周末七国分争，并入于秦。及秦灭之后，楚、汉分争，又并入于汉。汉朝自高祖斩白蛇而起义，一统天下，后来光武中兴，传至献帝，遂分为三国。推其致乱之由，殆始于桓、灵二帝。桓帝禁锢善类，崇信宦官。及桓帝崩，灵帝即位，大将军窦武、太傅陈蕃共相辅佐。时有宦官曹节等弄权，窦武、陈蕃谋诛之，机事不密，反为所害，中涓自此愈横。</P>
 
    <p style="color: red; font-size: 26px;">建宁二年四月望日，帝御温德殿。方升座，殿角狂风骤起。只见一条大青蛇，从梁上飞将下来，蟠于椅上。帝惊倒，左右急救入宫，百官俱奔避。须臾，蛇不见了。忽然大雷大雨，加以冰雹，落到半夜方止，坏却房屋无数。建宁四年二月，洛阳地震；又海水泛溢，沿海居民，尽被大浪卷入海中。光和元年，雌鸡化雄。六月朔，黑气十余丈，飞入温德殿中。秋七月，有虹现于玉堂；五原山岸，尽皆崩裂。种种不祥，非止一端。帝下诏问群臣以灾异之由，议郎蔡邕上疏，以为蜺堕鸡化，乃妇寺干政之所致，言颇切直。帝览奏叹息，因起更衣。曹节在后窃视，悉宣告左右；遂以他事陷邕于罪，放归田里。后张让、赵忠、封谞、段珪、曹节、侯览、蹇硕、程旷、夏恽、郭胜十人朋比为奸，号为“十常侍”。帝尊信张让，呼为“阿父”。朝政日非，以致天下人心思乱，盗贼蜂起。</p>
 
    <p>时巨鹿郡有兄弟三人，一名张角，一名张宝，一名张梁。那张角本是个不第秀才，因入山采药，遇一老人，碧眼童颜，手执藜杖，唤角至一洞中，以天书三卷授之，曰：“此名《太平要术》，汝得之，当代天宣化，普救世人；若萌异心，必获恶报。”角拜问姓名。老人曰：“吾乃南华老仙也。”言讫，化阵清风而去。角得此书，晓夜攻习，能呼风唤雨，号为“太平道人”。</p>
</body>
</html>

● style 其实就是标签的属性
● 在双引号中间，写法要符合 CSS 规范
● 可以控制当前的标签设置样式
● 由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素加简单样式的时候，可以考虑使用

3. 外部样式表

实际开发都是外部样式表，适合于样式比较多的情况，核心是样式单独写到 CSS 文件中，之后把 CSS 文件引入到 HTML 页面中使用

引入外部样式表分为两步：

新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中
在 HTML 页面中，使用 <link> 标签引入这个文件
<link rel="stylesheet" href="css文件路径">

外部样式表.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部样式表</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>Is life always this hard, or is it just when you're a kid</div>
    <div>Always like this</div>
</body>
</html>

style.css 文件

/* CSS文件里面只有样式没有标签 */
div {
    color: red;
}

4. CSS 引入方式总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	结构样式混写	较少	控制一个标签
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面
外部样式表	完全实现结构和样式相分离	需要引入	最多，吐血推荐	控制多个页面

🌠综合案例

案例：新闻页面

制作页面整体可以分为两步：

搭建 HTML 结构页面
修改 CSS 样式

综合案例-新闻页面.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>近期天气状况</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>6月我国多地降水量突破历史极值 7月华北华南等地降水仍偏多</h1>
    
    <div class="gray">
        2022-07-05 15:32 
        来源: <a href="http://www.weather.com.cn/" target="_blank">中国天气网</a>
        <input type="text" value="请输入查询条件..." class="search"/> 
        <button class="btn">搜索</button>
    </div>
    <hr>


    <p>中国天气网讯 在今天(7月5日)上午召开的中国气象局7月新闻发布会上, 中国气象局应急减灾与公共服务司副司长王亚伟表示, 今年6月, 我国平均降水量较常年同期偏多9.1%, 多地降水量突破历史极值, 强对流天气频发。预计7月, 华北大部、华南等地降水量仍较常年同期偏多, 另外可能有1至2个热带气旋登陆或影响我国。</p>

    <h4>6月广东等地降水量破纪录 河北江苏等地遭遇雷暴大风</h4>

    <p class="pic">
        <img src="http://image.nmc.cn/product/2022/07/05/STFC/medium/SEVP_NMC_STFC_SFER_ER24_ACHN_L88_P9_20220705060002400.JPG?v=1656988202173" alt="图片显示错误" width="600"/>
    </p>

    <p>今年6月, 全国平均降水量112.1毫米, 较常年同期偏多9.1%。暴雨导致多地降水量突破历史极值。其中南方出现4次区域性暴雨过程, 广东英德(292.9毫米)等12个国家气象站日降水量突破历史极值。6月26-30日, 北方出现入汛以来首次大范围降雨过程, 山东、河北、河南有26个国家气象站日降水量突破6月极值。</p>

    <p class="pic">
        <img src="https://pic.rmb.bdstatic.com/bjh/news/dbb7c556b2a50a29f346e2448f933277.jpeg" alt="图片显示错误"  width="600"/> <br />
        6月22日, 广东省英德市地标文峰塔孤悬江中, 周围汪洋一片。（邱新生/人民视觉版权图片 来源视觉中国）
    </p>

   

    <p>此外6月强对流天气也呈现频发态势。全国共发生8次强对流天气过程。11-14日, 华北、黄淮等地遭遇雷暴大风、冰雹和短时强降水; 22-24日, 河北、江苏等地遭遇雷暴大风、冰雹和短时强降水, 南京江宁最大小时雨量达118.8毫米, 河北保定出现36米/秒的大风。</p>

    <h4>7月预计有1至2个热带气旋登陆或影响我国</h4>

    <p>预计7月, 东北、内蒙古中部、华北大部、华东北部局部和南部、华中南部、华南、西南地区东南部、西藏西部降水较常年同期偏多。其中黑龙江大部、吉林、辽宁、北京、天津、河北大部、福建南部、广东、广西、海南、云南东南部、西藏西部偏多2~5成。</p>

    <p>台风方面, 预计7月,台风数量接近常年到偏少。在西北太平洋和南海海域可能有2~4个热带气旋(中心风力 8级)生成, 接近常年同期(3.8)到偏少; 其中1~2个热带气旋登陆或影响我国, 登陆个数接近常年同期(1.8个)。</p>

    <p>专家提醒, 东北、内蒙古中部、华北大部、华东北部局部和南部、华中南部、华南、西南地区东南部、西藏西部等地, 应加强防范强降水等灾害性天气过程对生产生活的影响及可能引发的次生灾害。东南沿海需防御台风可能带来的强降水、大风和风暴潮灾害。</p>

    <p class="footer">本文来源 : 中国天气网</p>
</body>
</html>

style.css 文件

/* 改变整个页面行间距、字体 */
body {
    font: 16px/28px 'Microsoft YaHei';
}
/* 让标题居中不加粗 */
h1 {
    text-align: center;
    font-weight: 400;
}
.gray {
    color: #666666;
    font-size: 12px;
    text-align: center;
}
/* 去掉链接默认的下划线 */
a {
    text-decoration: none;
}
/* 改变搜索框字体颜色和宽度 */
.search {
    color: #666;
    width: 170px;
}
/* 让按钮的字体加粗 */
.btn {
    font-weight: 700;
}
/* 所有段落首行缩进2个字的距离 */
p {
    text-indent: 2em;
}
/* 想要让图片居中对齐，则是让它的父亲p标签添加水平居中的代码 */
.pic {
    text-align: center;
}
/* 修改文章最好的小字 */
.footer {
    color: #888;
    font-size: 12px;
}

效果图

🌠调试工具

1. 打开调试工具

打开你的浏览器，按下F12键或者右击页面空白处➔检查

2. 使用调试工具

① Ctrl + 滚轮可以放大开发者工具代码大小
② 左边是 HTML 元素结构，右边是 CSS 样式
③ 右边 CSS 样式可以改变数值（左右箭头或者直接输入）和查看颜色
④ Ctrl + 0 复原浏览器大小
⑤ 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误
⑥ 如果有样式，但是样式前面有黄色感叹号提示，则是样式属性书写错误

【前端筑基】CSS简介（下）

🌠学习目标

🌠CSS 文本属性

1. 文本颜色

2. 对齐文本

3. 装饰文本

4.文本缩进

5. 行间距

6. 文本属性总结

🌠CSS 的引入方式

1. 内部样式表

2. 行内样式表

3. 外部样式表

4. CSS 引入方式总结

🌠综合案例

🌠调试工具

1. 打开调试工具

2. 使用调试工具