02【CSS简介、基础选择器、字体属性、文本属性、引入方式】
2022/7/13 6:22:30
本文主要是介绍02【CSS简介、基础选择器、字体属性、文本属性、引入方式】，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
本文档是个人对 Pink 老师课程的总结归纳及补充，转载请注明出处！
转自：https://github.com/JERRY-Z-J-R/I-love-you-3-thousand
对前端知识的快速巩固和学习！
一、CSS简介
CSS 的主要使用场景就是布局网页，美化页面的。
1.1 HTML的局限性
HTML 只关注内容的语义，虽然 HTML 可以做简单的样式，但是带来的是无尽的臃肿、繁琐和低维护性……
1.2 CSS网页的美容师
CSS 是 层叠样式表 的简称。
有时我们也会称之为 CSS样式表 或 级联样式表。
CSS 也是一种 标记语言。
CSS 主要用于设置 HTML 页面中的文本样式（字体、大小、颜色、对齐方式……）、图片样式（宽高、边框样式、边距……）以及版面的布局和外观显示样式。
CSS 让我们的网页更加丰富多彩，布局更加灵活自如，简单理解：CSS 可以美化 HTML，让 HTML 更漂亮，同时让页面布局更简单。
总结：
- HTML 搭建结构，填入元素内容
- CSS 美化 HTML，布局网页元素
- CSS 最大价值：由 HTML 专注去做结构呈现，样式交给 CSS，即：结构 与 样式 分离
1.3 CSS语法规范
使用 HTML 时，需要遵从一定的规范，CSS 也是如此，要想熟练地使用 CSS 对网页进行修饰，首先需要了解 CSS 样式规则。
CSS 规则由两个主要的部分构成：选择器 以及 一条或多条声明。
选择器是用于选出需要设置 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式属性和属性值以“键值对”的形式出现属性: 属性值;- 属性是对指定的对象设置的样式属性，例如：字体大小、文本颜色等
- 属性和属性值之间用英文
:分开 - 多个 “键值对” 之间用英文
;进行区分（末尾的键值对可以不加;）
所有的样式，都包含在 <style> 标签内，表示是样式表。
<style> 一般写到 </head> 里。
<head>
<style type="text/css">
h4 {
color: bule;
font-size: 100px;
}
</style>
</head>
注意：<style> 标签可以写到其他标签内部并作用与该标签区域内，但是强烈不推荐这种写法！
type="text/css"可以省略。
1.4 CSS代码风格
1.4.1 样式格式书写
- 紧凑格式（不推荐）
h3 { color: deeppink; font-size: 20px; }
- 展开格式（推荐）
h3 {
color: deeppink;
font-size: 20px;
}
强烈推荐第二种格式，因为更直观！不用担心占用空间，因为后期可以通过代码压缩工具来压缩代码。
1.4.2 样式大小书写
- 大写（不推荐）
H3 {
COLOR: PINK;
}
- 小写（推荐）
h3 {
color: pink;
}
强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外。
凡是你不确定是否用大写的都一律用小写就对了！
1.4.3 空格规范
h3 {
color: pink;
}
- 属性值前面，冒号后面，保留一个空格
- 选择器（标签）和前花括号中间，保留一个空格
二、CSS基础选择器
2.1 CSS选择器的作用
选择器就是根据不同的需求把不同的标签选出来，这就是选择器的作用，简单来说，就是：选择标签用的。
h1 {
color: red;
font-size: 25px;
}
以上 CSS 做了两件事：
- 找到所有的 h1 标签。（选对人）
- 设置这些标签的样式：颜色为红色、字体大小为 25 像素。（做对事）
2.2 选择器的分类
选择器分为 基础选择器 和 复合选择器 两个大类，本文首先介绍一下基础选择器。
- 基础选择器是由
单个选择器组成的 - 基础选择器又包括：
标签选择器、类选择器、id 选择器、通配符选择器
2.3 标签选择器
标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。
语法：
标签名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
作用：
标签选择器可以把某一类标签全部选择出来，比如所有的 <div> 标签和所有的 <span> 标签。
优点：
能快速为页面中同类型的标签统一设置样式。
缺点：
不能设计差异化样式，只能选择全部的当前标签。
<!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>
<style type="text/css">
/* 会对所有的该标签元素运用样式，优点：快速统一，缺点：无法差异化设置 */
p {
color: green;
}
div {
color: pink;
}
</style>
</head>
<body>
<p>男</p>
<p>男</p>
<p>男</p>
<div>女生</div>
<div>女生</div>
<div>女生</div>
</body>
</html>
2.4 类选择器
如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用 类选择器 。
CSS 语法：
.类名 {
属性1: 属性值1;
...
}
例如：将所有拥有 red 类的 HTML 元素均设置为红色。
.red {
color: red;
}
HTML 语法：
<div class="red">变红色</div>
类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个 . 号显示。
注意：
- 类选择器使用
.（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的） - 可以理解为给这个标签起了一个别名来表示
- 长名称或词组可以使用中横线
-来为类命名 - 不能使用已有的关键字作为类名
- 不要使用纯数字、中文等命名，尽量使用英文字母来表示
- 命名要有意义，尽量使别人一眼就知道这个类名的目的（可读性第一，长度第二，推荐使用英语，如果是使用拼音请使用全拼）
- 命名规范：见附件（Web前端开发规范手册.pdf）
记忆口诀：样式点定义，结构类调用，一个或多个，开发最常用。
<!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>
<style type="text/css">
/* 类选择器口诀：样式 . 定义，结构 class 调用，一个或多个，开发最常用 */
.red {
width: 100px;
height: 100px;
background-color: red;
}
.green {
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="red"></div>
</body>
</html>
类选择器——多类名
我们可以给一个标签指定多个类名，从而达到更多的选择目的，这些类名都可以选出这个标签，简单理解就是一个标签有多个名字。
- 在标签 class 属性中写多个类名
- 多个类名中间必须用
空格分开 - 这个标签就可以分别具有这些类名的样式
<!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>
<style type="text/css">
/* 一个标签可以运用多个类选择器，之间用空格隔开 */
.red {
color: red;
}
.font35 {
font-size: 35px;
}
</style>
</head>
<body>
<div class="red font35">zhoujirui</div>
</body>
</html>
多类名开发中使用场景
- 可以把一些标签元素相同的样式（共同的部分）放到一个类里面
- 这些标签都可以调用这个公共的类，然后再调用自己独有的类
- 从而节省 CSS 代码，统一修改也非常方便（模块化、可重用化）
<!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>
<style type="text/css">
/* 类选择器最大的优势在于：复用 */
.box {
width: 100px;
height: 100px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
</style>
</head>
<body>
<div class="box red"></div>
<div class="box green"></div>
<div class="box red"></div>
</body>
</html>
多类名选择器在后期布局比较复杂的情况下，是使用得较多的。
2.5 id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 # 来定义。
语法：
#id名 {
属性1: 属性值1;
...
}
例如：将 id 为 nav 元素中的内容设置为红色。
#nav {
color: red;
}
注意：id 属性只能在每个 HTML 文档中出现一次。
口诀：样式 # 定义，结构 id 调用，只能调用一次，别人切勿使用。
id 选择器和类选择器的区别：
- 类选择器 (class) 好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
- id 选择器好比人的身份证号码，全中国是唯一的，不可重复（同一个 id 选择器只能调用一次）
- id 选择器和类选择器最大的不同在于使用次数上
- 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用
<!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>基础选择器之id选择器</title>
<style type="text/css">
/* id 选择器口诀：样式 # 定义，结构 id 调用，只能调用一次，别人切勿使用 */
#pink {
color: pink;
}
</style>
</head>
<body>
<div id="pink">zhoujirui</div>
</body>
</html>
再次强调：同一 id 只能定义一次，同一 id 选择器也只能调用一次！（对于 CSS 修改样式来说，最好使用类选择器，id 选择器主要与后面的 JS 搭配使用）。
2.6 通配符选择器
在 CSS 中，通配符选择器使用 * 定义，它表示选取页面中所有元素（标签）。
语法：
* {
属性1: 属性值1;
...
}
- 通配符选择器不需要调用，自动就给所有的元素使用样式
- 特殊情况才使用，后面讲解使用场景
// 利用通配符选择器清除所有的元素标签的内外边距，后期讲
* {
margin: 0;
padding: 0;
}
<!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>
<style type="text/css">
/* * 给 html 标签所有的元素都使用样式，并且这个过程是自动完成的，不需要手动调用 */
* {
color: red;
}
</style>
</head>
<body>
<div>我的</div>
<span>我的</span>
<ul>
<li>还是我的</li>
</ul>
</body>
</html>
2.7 基础选择器总结
| 基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 可以选出所有相同的标签，比如：p | 不能差异化选择 | 较多 | p {color: red;} |
| 类选择器 | 可以选出 1 个或者 多个 标签 | 可以根据需求选择 | 非常多 | .nav {color: red;} |
| id 选择器 | 一次只能选择 1 个标签 | ID 属性只能在每个 HTML 文档中出现一次，也只能调用一次 | 一般和 js 搭配 | #nav {color: red;} |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要 | 特殊情况使用 | * {color: red;} |
- 每个基础选择器都有使用场景，都需要掌握
- 如果是修改样式，类选择器是使用最多的
三、CSS字体属性
CSS Fonts（字体）属性用于定义：字体系列、大小、粗细、和 文字样式（如：斜体）。
3.1 字体系列
CSS 使用 font-family 属性定义文本的字体系列。
p {
font-family: "Microsoft YaHei";
}
div {
font-family: Arial, "Microsoft YaHei";
}
- 各种字体之间必须使用英文状态下的逗号隔开
- 一般情况下，如果有空格隔开的多个单词组成的字体，加引号
- 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
- 最常用的字体：
body {font-family: "Microsoft YaHei", tahoma, arial, sans-serif, "Hiragino Sans GB";}
Apple 官网字体：
body { font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif }
Instagram 官网字体：
body { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Helvetica, Arial, sans-serif }
知乎官网字体：
body { font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif }
爱奇艺官网字体：
body { font-family: PingFangSC-Regular, Helvetica, Arial, Microsoft Yahei, sans-serif }
<!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 type="text/css">
/* 浏览器会从第一个字体开始进行适配，如果本机可以适配的话，那么就使用该字体，否则看下一个字体，
如果都不可以，那么浏览器会使用自带的默认字体，所以实际开发中一般建议使用比较标准化的字体 */
h2 {
/* font-family: '微软雅黑'; 可以使用中文，但不建议 */
font-family: "Microsoft YaHei", Arial, sans-serif;
}
p {
font-family: "Times New Roman", Times, serif;
}
</style>
</head>
<body>
<h2>JERRY的秘密</h2>
<p>姓名：周吉瑞</p>
<p>生日：2000年5月4日</p>
<p>性别：男</p>
<p>婚姻状况：单身</p>
</body>
</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>CSS字体属性之字体系列</title>
<style type="text/css">
/* 一些情况下，如果要全局设置字体可以直接在 body 标签选择器中指明 */
body {
font-family: "Microsoft YaHei", Arial, sans-serif;
}
</style>
</head>
<body>
<h2>JERRY的秘密</h2>
<p>姓名：周吉瑞</p>
<p>生日：2000年5月4日</p>
<p>性别：男</p>
<p>婚姻状况：单身</p>
</body>
</html>
注意：浏览器字体是依据用户操作系统来调用的，所以这里介绍一种 Windows 系统安装字体的方法。
当然实际开发中通常浏览器请求时，会把字体文件随 HTML CSS JS 等一同传送到客服端。
3.2 字体大小
CSS 使用 font-size 属性定义字体大小。
p {
font-size: 20px;
}
- px（像素）大小是我们网页的最常用的单位
- 谷歌浏览器默认的文字大小为：16px
- 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
- 可以给 body 指定整个页面文字的大小
<!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 type="text/css">
/* 全局设置时，一般在 body 标签选择器中指定文字大小，谷歌浏览器默认 16px，
但是最好还是指定一个明确值，以保证在不同浏览器中的效果是一样的 */
body {
font-size: 24px;
}
/* 标题标签比较特殊，body 中的设置对其是不生效的，需要单独指定文字大小 */
h2 {
font-size: 54px;
}
</style>
</head>
<body>
<h2>JERRY的秘密</h2>
<p>姓名：周吉瑞</p>
<p>生日：2000年5月4日</p>
<p>性别：男</p>
<p>婚姻状况：单身</p>
</body>
</html>
3.3 字体粗细
CSS 使用 font-weight 属性设置文本字体的粗细。
p {
font-weight: bold;
}
| 属性值 | 描述 |
|---|---|
normal |
默认值（不加粗的） |
bold |
定义粗体（加粗的） |
100-900 |
400 等同于 normal，而 700 等同于 bold，其它值一般不使用，注意这个数字后面不跟单位 |
- 学会让加粗标签（比如 h 和 strong 等）变为不加粗，或者让其他标签加粗
- 实际开发时，我们更喜欢用数字表示粗细
<!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 type="text/css">
.bold {
/* font-weight: bold; */
/* 实际开发中，我们更提倡使用数字来表示加粗的效果 */
/* 这个 700 的后面不要跟单位 */
font-weight: 700;
}
/* 使文字不加粗 */
h2 {
/* font-weight: normal; */
font-weight: 400;
}
</style>
</head>
<body>
<h2>JERRY的秘密</h2>
<p>姓名：周吉瑞</p>
<p>生日：2000年5月4日</p>
<p>性别：男</p>
<p class="bold">婚姻状况：单身</p>
</body>
</html>
3.4 文字样式
CSS 使用 font-style 属性设置文本的风格。
p {
font-style: normal;
}
| 属性值 | 作用 |
|---|---|
normal |
默认值，浏览器会显示标准的字体样式 font-style: normal; |
italic |
浏览器会显示斜体的字体样式 |
注意：平时我们很少给文字加斜体，反而要给斜体标签 (em、i) 改为不倾斜字体。
<!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 type="text/css">
p {
/* 让不倾斜的字体倾斜 */
font-style: italic;
}
em {
/* 让倾斜的字体不倾斜 */
font-style: normal;
}
</style>
</head>
<body>
<p>上课时候的你</p>
<em>下课时候的你</em>
</body>
</html>
3.5 字体复合属性
字体属性可以把以上文字样式综合来写，这样可以更节约代码。
body {
font: font-style font-weight font-size/line-height font-family;
}
body {
font: normal 400 font-size/line-height "Microsoft YaHei", Arial, sans-serif;
}
- 使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
- 不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用
<!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 type="text/css">
/* 想要 div 文字变倾斜、加粗、字号设置为 16 像素，并且是微软雅黑 */
div {
/* font-style: italic;
font-weight: 700;
font-size: 16px;
font-family: 'Microsoft YaHei'; */
/* 复合属性：简写的方式，里面的顺序不能打乱 以空格隔开 */
/* font: font-style font-weight font-size/line-height font-family; */
font: italic 700 16px 'Microsoft YaHei';
/* 注意：不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用 */
/* font: 20px 'Microsoft YaHei'； */
}
</style>
</head>
<body>
<div>三生三世十里桃花，一心一意百行代码</div>
</body>
</html>
3.6 字体属性总结
| 属性 | 表示 | 注意点 |
|---|---|---|
font-size |
字号 | 我们通常用的单位是 px 像素，一定要跟上单位 |
font-family |
字体 | 实际工作中按照团队约定来写字体 |
font-weight |
字体属性 | 记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位 |
font-style |
字体样式 | 记住倾斜是 italic 不倾斜是 normal 工作中我们最常用 normal |
font |
字体连写 | 1、字体连写是有顺序的不能随意换位置，2、其中字号和字体必须同时出现 |
四、CSS文本属性
CSS Text（文本）属性可定义文本的 外观，比如：文本颜色、文本对齐、文本装饰、文本缩进、行间距 等。
4.1 文本颜色
color 属性用于定义文本的颜色。
div {
color: red;
}
| 表示方式 | 属性值 |
|---|---|
| 预定义的颜色值 | red，green，blue，black，white，gray |
| 十六进制 | #FF0000，#FF6600，#29D794（每两位对应：#红R绿G蓝B） |
| RGB 代码 | rgb(255, 0, 0) 或 rgb(100%, 0%, 0%) |
注意：开发中最常用的是十六进制。
熟记开发常用色：
黑色：
black、#000000、rgb(0, 0, 0)（三原色啥也没有混合就为黑）白色：
white、#FFFFFF、rgb(255, 255, 255)（三原色全满混合就为白）灰色：
gray、#808080、rgb(128, 128, 128)（三原色全半混合就为灰）红色：
red、#FF0000、rgb(255, 0, 0)绿色：
green、#008000、rgb(0, 128, 0)（绿色较为特殊，green 对应的是 #008000）蓝色：
blue、#0000FF、rgb(0, 0, 255)黄色：
yellow、#FFFF00、rgb(255, 255, 0)青色：
#00FFFF、rgb(0, 255, 255)洋红：
#FF00FF、rgb(255, 0, 255)橙色：
orange粉色：
pink烈粉色：
hotpink（浓度低）、deeppink（浓度高）天蓝色：
skyblue深色系：
dark颜色如：darkgreen浅色系：
light颜色如：lightgreen
<!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 type="text/css">
div {
/* color: deeppink; */
/* color: #FF1493; 最常用 */
color: rgb(255, 20, 147);
}
</style>
</head>
<body>
<div>pink</div>
</body>
</html>
4.2 文本对齐
text-align 属性用于设置元素内文本内容的水平对齐方式。
div {
text-align: center;
}
| 属性值 | 解释 |
|---|---|
| left | 左对齐（默认值） |
| rigth | 右对齐 |
| 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 type="text/css">
h1 {
/* 本质是让 h1 盒子里面的文字水平居中对齐 */
/* text-align: center; */
text-align: right;
}
</style>
</head>
<body>
<h1>右对齐的标题</h1>
</body>
</html>
注意：
text-align 属性只能作用于 块级元素，并让该块级元素内的 行内元素 实现居中（不一定是文字）。
上述例子中：h1 为块级元素，所以给 h1 设置 text-align，便会作用于里面的文本（如果里面还有行内元素的话，也会一同作用）。
<!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 type="text/css">
div {
text-align: center;
}
</style>
</head>
<body>
<div>
<p>zhoujiruizhoujirui</p>
</div>
</body>
</html>
上述例子中：为 div 设置 text-align 之所以能够使其内部的块级元素 p 里的文字居中，原因是 p 会继承父元素 div 的 text-align 属性，所以相当于对 p 设置了 text-align。
4.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 type="text/css">
/* 默认为 none 没有装饰 */
div {
/* 上划线 几乎不用 */
/* text-decoration: overline; */
/* 删除线 不常用 */
/* text-decoration: line-through; */
/* 下划线 常用，链接 a 自带下划线 */
text-decoration: underline;
}
a {
/* 取消 a 默认的下划线 */
text-decoration: none;
color: #333333;
}
</style>
</head>
<body>
<div>粉红色的回忆</div>
<a href="http://jerry-z-j-r.github.io">JERRY</a>
</body>
</html>
4.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 type="text/css">
p {
font-size: 24px;
/* 文本的首行缩进多少距离，不仅可以为正值，还可以为负值 */
/* text-indent: 20px; */
/* em 为相对于当前元素的大小单位 */
text-indent: 2em;
}
</style>
</head>
<body>
<p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，
这代表了中国最成熟的三套城市轨道交通系统</p>
<p>可即使是这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤，
对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p>
<p>那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p>
</body>
</html>
4.5 行间距（行高）
line-height 属性用于设置行间的距离（行高），可以控制文字行与行之间的距离。
p {
line-height: 26px;
}
-
行间距 = 上间距 + 文本高度 + 下间距 -
上下间距 = （行间距 - 文本高度）/ 2 -
文本高度 = font-size
<!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 type="text/css">
/* 行间距 = 上间距 + 文本高度 + 下间距 */
/* 行间距 = 行高 */
/* 文本高度 = 字体像素大小 */
/* 上下间距 = （行间距 - 文本高度）/ 2 */
p {
line-height: 25px;
}
</style>
</head>
<body>
<p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，
这代表了中国最成熟的三套城市轨道交通系统</p>
<p>可即使是这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤，
对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p>
<p>那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p>
</body>
</html>
补充：行间距测量技巧：上一行文字的底部与本行文字的底部之间的距离就是行间距。
4.6 文本属性总结
| 属性 | 表示 | 注意点 |
|---|---|---|
color |
文本颜色 | 我们通常用 十六进制 而且通常是简写形式 #fff（6 个一样可以简写） |
text-align |
文本对齐 | 可以设定文字水平的对齐方式 |
text-indent |
文本缩进 | 通常我们用于段落首行缩进2个字的距离 text-indent: 2em; |
text-decoration |
文本修饰 | 牢记 添加下划线 underline 取消下划线 none |
line-height |
行高 | 控制行与行之间的距离 |
五、CSS引入方式
5.1 CSS的三种引入方式
按照 CSS 样式书写的位置（或者引入的方式），CSS 样式表可以分为三大类：
- 行内样式表（行内式）
- 内部样式表（嵌入式）
- 外部样式表（外链式）
5.2 行内样式表
行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式，适合于修改简单样式。
<div style="color: red; font-size: 12px;">
青春不常在，抓紧谈恋爱
</div>
style其实就是标签的属性- 在双引号中间，写法要符合 CSS 规范
- 可以控制当前的标签设置样式
- 由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
- 使用行内样式表设定 CSS，通常也被称为
行内式引入
5.3 内部样式表
内部样式表（嵌入样式表）时写到 HTML 页面内部，是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中。
<style type="text/css">
div {
color: red;
font-size: 12px;
}
</style>
<style>标签理论上可以放在 HTML 文档的任何地方，但一般会放到文档的<head>标签中- 目前的浏览器已经支持省略
type属性 - 通过此种方式，可以方便控制当前整个页面中的元素样式设置
- 代码结构清晰，但是并没有实现结构与样式完全分离
- 使用内部样式表设定 CSS，通常也被称为
嵌入式引入，这种方式是我们练习时常用的方式
5.4 外部样式表
实际开发都是外部样式表，适合于样式比较多的情况，核心是：样式单独写到 CSS 文件中，之后把 CSS 文件引入到 HTML 页面中使用。
引入外部样式表分为两步：
- 新建一个后缀名为：
.css的样式文件，把所有的 CSS 代码都放入此文件中 - 在 HTML 页面中，使用
<link>标签引入这个文件
<link rel="stylesheet" type="text/css" href="css文件路径">
| 属性 | 作用 |
|---|---|
rel |
定义当前文档与被链接文档之间的关系，在这里需要指定为 "stylesheet"，表示被链接的文档是一个样式表文件 |
type |
定被链接文档的 MIME 类型，该属性最常见的 MIME 类型是 "text/css"，该类型描述样式表，目前的浏览器已经支持省略 "type" 属性 |
href |
定义所链接外部样式表文件的 URL，可以是相对路径，也可以是绝对路径 |
注意：使用外部样式表设定 CSS，通常也被称为 外链式 或 链接式引入，这种方式是开发中常用的方式。
5.5 CSS引入方式总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表（行内式） | 书写方便，权重高 | 结构样式混写 | 较少 | 控制一个标签 |
| 内部样式表（嵌入式） | 部分结构和样式分离 | 没有彻底分离 | 较多 | 控制一个页面 |
| 外部样式表（外链式） | 完全实现结构和样式相分离 | 需要引入 | 最多，吐血推荐 | 控制多个页面 |
这篇关于02【CSS简介、基础选择器、字体属性、文本属性、引入方式】的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-12-07uniapp动态设置不同的css有哪些方法？-icode9专业技术文章分享
- 2024-12-07UniApp 中，怎么通过 CSS 设置 view 组件的水平居中效果？-icode9专业技术文章分享
- 2024-12-06TailwindCSS开发入门教程
- 2024-12-06TailwindCSS项目实战：从入门到上手
- 2024-12-06TailwindCss项目实战：初学者指南
- 2024-12-05TailwindCSS入门指南：轻松上手实用教程
- 2024-12-05TailwindCss入门指南：轻松上手实用技巧
- 2024-12-04Tailwind.css入门：简洁高效的设计利器
- 2024-12-03Tailwind.css学习：从入门到实战的全面指南
- 2024-11-29Tailwind.css入门指南：快速上手实用教程
