【前端】保姆级的CSS简介

最新推荐文章于 2024-10-16 11:23:07 发布
最新推荐文章于 2024-10-16 11:23:07 发布
阅读量3.8k 收藏 13
点赞数 12
分类专栏： HTML5+CSS3+移动端前端 文章标签： 前端 css html5 html vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62511863/article/details/125599353
版权

🔥 信仰：一个人走得远了，就会忘记自己为了什么而出发，希望你可以不忘初心，不要随波逐流，一直走下去
🦋 欢迎关注🖱点赞👍收藏🌟留言🐾
🦄 本文由 程序喵正在路上 原创，CSDN首发！
💖 系列专栏：HTML5+CSS3+移动端前端
🌠 首发时间：2022年7月6日
✅ 如果觉得博主的文章还不错的话，希望小伙伴们三连支持一下哦

阅读指南

🌠学习目标

● 能够说出什么是 CSS
● 能够使用 CSS 基础选择器
● 能够设置字体样式
● 能够设置文本样式
● 能够说出 CSS 的三种引入方式
● 能够说出 Chrome 调试工具调试样式

🌠CSS 简介

CSS 的主要使用场景就是美化网页，布局网页的。

1. HTML 的局限性

说到 HTML，这其实是个非常单纯的家伙，它只关注内容的语义。比如 <h1> 表明这是一个大标题，<p> 表明这个一个段落，<img> 表明这里有一张图片，<a> 表明这里有一个链接。

很早的时候，世界上的网页虽然很多，但是它们都有一个共同的特点：丑

虽然 HTML 可以做简单的样式，但是带来的却是无尽的臃肿和繁琐…

在这里插入图片描述

2. CSS-网页的美容师

CSS 是层叠样式表（Cascading Style Sheets）的简称，有时我们也会称之为 CSS 样式表或级联样式表。

CSS 也是一种标记语言。

CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外观（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML，让 HTML 更漂亮，让页面布局更简单。

总结：
● HTML 主要做结构，显示元素内容
● CSS 美化 HTML，布局网页
● CSS 最大价值：由 HTML 专注去做结构呈现，样式交给 CSS，即 结构（HTML）与样式（CSS）相分离

3. CSS 语法规范

使用 HTML 时，需要遵从一定的规范，CSS 也是如此。要想熟练地使用 CSS 对网页进行修饰，首先需要了解 CSS 样式规则。

CSS 规则由两个主要的部分构成：选择器以及一条或多条声明，写在 HTML 文件的 <head> 和 </head> 之间添加的 <style> 和 </style> 里面
在这里插入图片描述
● 选择器是用于指定 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>CSS语法规范</title>
    <style>
        /* 选择器 样式 */
        /* 给谁改样式 什么样式 */
        p {
            color:red;
            /* 修改文字大小为12像素 */
            font-size:12px;
        }
    </style>
</head>
<body>
    <p>有点意思</p>
</body>
</html>

在这里插入图片描述

4. CSS 代码风格

以下代码书写风格不是强制规范，而是符合实际开发书写方式

● 样式格式书写

① 紧凑格式

h3 { color: deeppink; font-size: 20px; }

② 展开风格

h3 {
	color: pink;
	font-size: 20px;
}

强烈推荐第二种格式，因为更直观

● 样式大小写风格

h3 {
	color: pink;
}

h3 {
	COLOR: PINK;
}

强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外

● 样式空格风格

h3 {
	color: pink;
}

① 属性值前面，冒号后面，保留一个空格
② 选择器（标签）和大括号中间保留空格

在这里插入图片描述

🌠CSS 基础选择器

1. CSS 选择器的作用

<div>我是div</div>
<div>我是div</div>
<p>我是段落</p>
<ul>
    <li>我是ul里面小li哦</li>
</ul>
<ol>
    <li>我是ul里面小li哦</li>
</ol>

怎么解决下列需求：

  1. 我想把 div 里面的文字改为红色？
  2. 我想把第一个 div 里面的文字改为红色？
  3. 我想把 ul 里面的 li 文字改为红色？

选择器（选择符）就是根据不同需求把不同的标签选出来，这就是选择器的作用。简单来说，就是选择标签用的。

2. 选择器分类

选择器分为基础选择器和复合选择器两个大类，我们先了解以下基础选择器

● 基础选择器是由单个选择器组成的
● 基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器

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>
        p {
            color: green;
            font-size: 20px;
        }
        div {
            color: red;
        }
    </style>
</head>
<body>
    <p>男生</p>
    <p>男生</p>
    <p>男生</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
</body>
</html>

在这里插入图片描述

4. 类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。

类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点 “." 号显示。

基本语法格式如下

.类名 {
	属性1: 属性值1;
	...
}

例如，将所有拥有 red 类的 HTML 元素均改为红色

.red {
	color: red;
}

结构需要用 class 属性来调用 class 类的意思

演示

<div class='red'> 变红色 </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>
    <style>
        /* 类选择器口诀：样式点定义 结构类(class)调用 一个或多个 开发最常用*/
        .red {
            color: red;
        }
        .star-sing {
            color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li class="red">笑场</li>
        <li>演员</li>
        <li class="red">刚刚好</li>
        <li class="star-sing">我好像在哪见过你</li>
        <li>丑八怪</li>
    </ul>
    <div class="red">我也会变红色</div>
</body>
</html>

在这里插入图片描述

注意

  1. 类选择器使用 ”.“ （英文点号）进行标识，后面紧跟类名（自定义，我们自己命名）
  2. 可以理解为给这个标签起了一个名字来表示
  3. 长名称或词组可以使用中横线来为选择器命名
  4. 不要使用纯数字、中文等命名，尽量使用英文字母来表示
  5. 命名要有意义，尽量使别人一眼就知道这个类名的目的
  6. 命名规范：CSS类命名规则

案例
➤ 所用知识点
—— 类选择器的使用
—— 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>
    <style>
        .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>

在这里插入图片描述
类选择器-多类名

我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以选出这个标签，简单理解就是一个标签有多个名字

➽ 多类名使用方式

<div class="red font20">亚瑟</div>

（1）在标签 class 属性中写多个类名
（2）多个类名中间必须用空格分开
（3）这个标签就可以分别具有这些类名的样式

<!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>
        .red {
            color: red;
        }
        .font35 {
            font-size: 35px;
        }
    </style>
</head>
<body>
    <div class="red">薛之谦</div>
    <div class="red font35">薛之谦</div>
</body>
</html>

在这里插入图片描述
➽ 多类名的使用场景

  1. 可以把一些标签元素相同的样式（共同的部分）放到一个类里面
  2. 这些标签都可以调用这个公共的类，然后再调用自己独有的类
  3. 从而节省 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>
        /* 便于后面修改 */
        .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>

➽ 多类名总结

  1. 各个类名中间用空格分开
  2. 简单理解：就是给某个标签添加了多个类，或者这个标签有多个名字
  3. 这个标签就可以分别具有这些类名的样式
  4. 从而节省 CSS 的代码，统一修改也非常方便
  5. 多类名选择器在后期布局比较复杂的情况下，还是较多使用的

5. id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特有的样式

HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 ”#“ 来定义

基本语法格式如下

#id名 {
	属性1: 属性值1;
	...
}

例如，将 id 为 nav 元素中的内容设置为红色

#nav {
	color: red;
}

注意：id 属性只能在每个 HTML 文档中出现一次，也就是只能调用一次

id 选择器和类选择器的区别
① 类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
② id 选择器好比人的身份证号码，全中国是唯一的，不得重复
③ id 选择器和类选择器最大的不同在于使用次数上
④ 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用

6. 通配符选择器

在 CSS 中，通配符选择器使用 ”*“定义，它表示选取页面中所有元素（标签）

➠ 基本语法格式如下

* {
	属性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>通配符选择器</title>
    <style>
        * {
            color: red;
        }
        /* * 这里把 html body div span li 等等的标签都改为了红色 */
    </style>
</head>
<body>
    <div>我的</div>
    <span>我的</span>
    <ul>
        <li>还是我的</li>
    </ul>
</body>
</html>

在这里插入图片描述

下面是清除所有的元素标签的内外边距

* {
	margin: 0;
	padding: 0;
}

7. 基础选择器总结

基础选择器作用特点使用情况用法
标签选择器可以选出所有相同的标签，比如 p不能差异化选择较多p { color: red; }
类选择器可以选出 1 个或者多个标签可以根据需求选择非常多.nav { color: red; }
id 选择器一次只能选择 1 个标签ID 属性只能在每个 HTML 文档中出现一次一般和 js 搭配#nav { color: red; }
通配符选择器选择所有的标签选择的太多，有部分可能不需要特殊情况使用* { color: red; }

● 每个基础选择器都有使用场景，都需要掌握
● 如果是修改样式，类选择器是使用最多的

🌠CSS 字体属性

CSS Fonts（字体）属性用于定义字体系列、大小、粗细和文字样式（如斜体）

1. 字体系列

CSS 使用 font-family 属性定义文本的字体系列

语法格式如下：

p { font-family:"微软雅黑"; }
div { font-family: Arial,"Microsoft","微软雅黑"; }

<!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>
        h2 {
            font-family: '楷体';
        }
        p {
            /* font-family: 'Microsoft YaHei'; */
            font-family: 'Times New Roman', Times, serif;
        }
    </style>
    
</head>
<body>
    <h2>桃花庵歌</h2>
    <h4>明 唐伯虎</h4>
    <p>桃花坞里桃花庵，桃花庵下桃花仙。</p>
    <p>桃花仙人种桃树，又摘桃花换酒钱。</p>
    <p>酒醒只在花前坐，酒醉还来花下眠。</p>
    <p>半醉半醒日复日，花落花开年复年。</p>
    <p>但愿老死花酒间，不愿鞠躬车马前。</p>
    <p>车尘马足富者事，酒盏花枝隐士缘。</p>
    <p>若将显者比隐士，一在平地一在天。</p>
    <p>若将花酒比车马，彼何碌碌我何闲。</p>
    <p>世人笑我太疯癫，我笑他人看不穿。</p>
    <p>不见五陵豪杰墓，无花无酒锄作田。</p>
</body>
</html>

在这里插入图片描述

● 各种字体之间必须使用英文状态下的逗号隔开
● 一般情况下，如果有空格隔开的多个单词组成的字体，加引号
● 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
● 最常用的几个字体：body { font-family: 'Microsoft YaHei', tahoma, arial, 'Hiragino Sans GB'; }

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>
        body {
            font-size: 20px;
        }
        /* 标题标签比较特殊，需要单独指定文字大小 */
        h2 {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h2>桃花庵歌</h2>
    <h4>明 唐伯虎</h4>
    <p>桃花坞里桃花庵，桃花庵下桃花仙。</p>
    <p>桃花仙人种桃树，又摘桃花换酒钱。</p>
    <p>酒醒只在花前坐，酒醉还来花下眠。</p>
    <p>半醉半醒日复日，花落花开年复年。</p>
    <p>但愿老死花酒间，不愿鞠躬车马前。</p>
    <p>车尘马足富者事，酒盏花枝隐士缘。</p>
    <p>若将显者比隐士，一在平地一在天。</p>
    <p>若将花酒比车马，彼何碌碌我何闲。</p>
    <p>世人笑我太疯癫，我笑他人看不穿。</p>
    <p>不见五陵豪杰墓，无花无酒锄作田。</p>
</body>
</html>

在这里插入图片描述

3. 字体粗细

CSS 粗细 font-weight 属性设置文本字体的粗细

语法格式如下：

p {
	font-weight: bold;
}
属性值描述
normal默认值（不加粗的）
bold定义粗体（加粗的）
100-900400 等同于 normal，而 700 等同于 bold，注意这个数字后面不跟单位
<!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>
        .bold {
            /* font-weight: bold; */
            /* 这个700的后面不要跟单位 等价于 bold 都是加粗的效果 */
            /* 实际开发中，我们跟提倡使用数字来表示加粗或者变细 */
            font-weight: 700;
        }
        h2 {
            /* font-weight: normal; */
            font-weight: 400;
        }
    </style>
</head>
<body>
    <h2>桃花庵歌</h2>
    <h4>明 唐伯虎</h4>
    <p>桃花坞里桃花庵，桃花庵下桃花仙。</p>
    <p>桃花仙人种桃树，又摘桃花换酒钱。</p>
    <p>酒醒只在花前坐，酒醉还来花下眠。</p>
    <p>半醉半醒日复日，花落花开年复年。</p>
    <p>但愿老死花酒间，不愿鞠躬车马前。</p>
    <p>车尘马足富者事，酒盏花枝隐士缘。</p>
    <p>若将显者比隐士，一在平地一在天。</p>
    <p>若将花酒比车马，彼何碌碌我何闲。</p>
    <p class="bold">世人笑我太疯癫，我笑他人看不穿。</p>
    <p>不见五陵豪杰墓，无花无酒锄作田。</p>
</body>
</html>

在这里插入图片描述

● 学会让加粗标签（比如 h 和 strong 等）不加粗，或者其他标签加粗
● 实际开发时，我们更喜欢用数字表示粗细

4. 文字样式

CSS 使用 font-style 属性设置文本的风格

语法格式如下：

p {
	font-style: normal;
}
属性值作用
normal默认值，浏览器会显示标准的字体样式 font-style: normal;
italic浏览器会显示斜体的字体样式
<!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 {
            font-style: italic;
        }
        em {
            font-style: normal;
        }
    </style>
</head>
<body>
    <p>同学，上课时候的你</p>
    <em>下课时候的你</em>
</body>
</html>

在这里插入图片描述

注意：平时我们很少给文字加斜体，反而要给斜体标签（em, i）改为不倾斜字体

5. 字体复合属性

字体属性可以把以上文字样式综合来写，这样可以更节约代码

语法格式如下：

body {
	font: font-style font-weight font-size/line-height font-family;
}

<!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 {
            /* font-style: italic;
            font-weight: 700;
            font-size: 16px;
            font-family: 'Microsoft YaHei'; */

             /* 复合属性：简写的方式 */
             font: italic 700 16px/20px 'Microsoft YaHei';
        }
    </style>
</head>
<body>
    <div>世人笑我太疯癫，我笑他人看不穿</div>
</body>
</html>

在这里插入图片描述

● 使用 font 属性时，必须按上面语法格式中的顺序来写，不能更换顺序，并且每个属性之间以空格隔开
● 不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

6. 字体属性总结

属性表示注意点
font-size字号我们通常用的单位是 px（像素），一定要跟上单位
font-family字体实际工作中按照团队规定来写字体
font-weight字体粗细记住加粗是 700 或者 bold，不加粗是 normal 或者 400，记住数字不要跟单位
font-style字体样式记住倾斜是 italic，不倾斜是 normal，工作中我们最常用 normal
font字体连写1. 字体连写是有顺序的，不能随意换位置 2. 其中字号和字体必须同时出现

🌠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. 行内样式表（行内式）
  2. 内部样式表（嵌入式）
  3. 外部样式表（链接式）

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 页面中使用

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

  1. 新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中
  2. 在 HTML 页面中，使用 <link> 标签引入这个文件
  3. <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 引入方式总结

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

🌠综合案例

案例：新闻页面

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

  1. 搭建 HTML 结构页面
  2. 修改 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基础保姆级教学
weixin_45229261的博客
11-28 71
前端三件套，第二阶段css初，新开始
webpack 使用 保姆级 html css js 打包 处理
lyinshaofeng的博客
11-23 845
webpack 使用 保姆级 html css js 打包 处理
前端开发移动端适配（保姆级）
linyuzhizou的博客
04-23 670
web前端开发进行移动端适配
Shopify开发入门-前端保姆级教程
热门推荐
采黎的博客
02-08 1万+
Shopify、Shopify开发、Shopify前端开发教程、Shopify主题开发、Shopify应用开发、Shopify插件开发。本文旨在介绍Shopify开发入门、环境、配置等，帮助开发者配置环境、了解各个开发模式的区别及用途；已有Shopify开发经验者可退出，以免浪费你的宝贵时间。**本文5k字+，图片、链接、代码块较多，请耐心阅读~**
保姆级HTML+CSS零基础教学
weixin_69464412的博客
04-04 637
AI时代保姆级的HTML+CSS教程，配套b站视频讲解
css选择器史上最详细保姆级教学
m0_67776134的博客
02-15 420
justify-content:作用对象弹性盒子 设置弹性盒子内子元素在排列方向上的分布方式flex-strat(开始)flex-center(中间)flex-end(结尾)space-between(空白在中间)space-around(空格在周围)align-items:作用对象:弹性盒子 设置弹性盒子内子元素在排列方式上垂直方向的对齐flex-strat(开始)flex-center(中间)flex-end(结尾)baseline(弹性的开端，以元素底部为对齐)
保姆级前端翻牌效果(CSS)
2201_75705263的博客
11-14 742
css 前端翻牌效果
前端字体图标保姆级攻略
weixin_45229261的博客
10-20 232
展示的是图标，本质是字体。处理简单，颜色单一的小图标。优点：体积小，灵活的修改样式，兼容所有浏览器，使用方便使用：网址：https://www.iconfont.cn/ 阿里巴巴字体库（常用）下载字体库：登陆网址—选择图标库–选择图标–加入购物车–添加至项目–下载到本地使用：解压–打开文件，复制√文件到fonts文件夹。
保姆级教程 CSS 知识点梳理大全，超详细！！！
2301_82243626的博客
05-01 31
相邻兄弟选择器（+）介于两个选择器之间，当第二个元素紧跟着第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。绝对定位的盒子会以自己祖先元素中，离自己最近的拥有定位属性的盒子，当做基准点，这个盒子通常是相对定位的，所以这个性质也叫做子绝父相。所有的HTML标签都可以看成矩形盒子，由width，height，padding、border构成，称为盒子模型。使用display：inline；伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态，超级链接拥有4个特殊的状态。
CSS保姆级教程（三）(常用的DIV+CSS布局类型）
OakHachi'Blog
02-24 986
图解CSS，快速入门实战
vue3 tailwindcss使用保姆级教程
05-25
下面是一份保姆级教程，帮助您快速上手 Vue3 和 Tailwindcss。 ## 1. 安装 Vue3 在使用 Vue3 之前，我们需要先安装 Vue3。 可以通过以下命令来安装最新版本的 Vue3： ```bash npm install vue@next ``` ## 2. ...
如何搭建一个VUE+Element前端项目（保姆级教学）
m0_57958926的博客
01-19 1134
1.安装Node环境 1.node.js下载安装不过多赘述。 这样就算安装成功。 2.搭建vue项目环境 　1、全局安装vue-cli 　　npm install --global vue-cli 警告不用管（我自己也不知道啥意思能跑起来不报错就完事了） 2.创建项目文件 输入命令行：vue init webpack +你的项目名 框起来的部分就是你创建的项目所在的文件路径 说明： 　　　　Vue build==>打包方式，回车即可； 　　　　Install ...
CSS保姆级教程（二）(选择符的分类，伪类及对象）
OakHachi'Blog
02-24 397
图解CSS，快速入门实战
06_实现watch
qq_53109172的博客
10-16 755
watch 本质上就是监听一个响应式数据，这个响应式数据发生变化的时候，进行通知并触发相应的回调函数。
web扩展
x737510的博客
10-10 614
HTTP（Hypertext Transfer Protocol）协议中的它们在用途和使用方式上有一些区别。用于请求服务器上的资源，通常是获取数据。GET 请求是幂等的，多次请求返回的结果应该是相同的，而且不应该对服务器产生任何副作用。用于向服务器提交数据，通常是提交表单数据或上传文件等。POST 请求可能对服务器产生副作用，例如在数据库中创建新的资源。数据通过 URL 参数传递，附在 URL 后面。因为数据在 URL 中可见，所以不适合传递敏感信息，且有长度限制。
004-按照指定功能模块名称分组
最新发布
xiaogang1226的博客
10-16 194
需要把一个功能模块的几个功能点放在同一个文档目录下，这几个功能点分布在不同的 Controller。需要把他们单独分组，方便前端对接。在@ApiOperation 里面增加属性 tags 赋值。
前端地图数据开发
shuxiaoxii的博客
10-13 281
基于Turf.js教你快速实现地理围栏的合并拆分。turf js 地理空间分析库，处理各种地图算法。如何拆分一个乡镇或区的地图。获取市级的行政区域划分。直接导入地图的json。高德地图查看市级区域。js实现地图区域合并。
Element-plus el-form、el-dialog 数据回显同时用时，重置失效问题
Mr. Zhang Xiaojian's Blog
10-12 511
当第一次打开网页并点击“编辑”按钮时，虽然对话框变量变为 true 使对话框可见，但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制，DOM 实际上还未更新，因此表单组件内绑定了这些有值的初始数据。这样，在后续调用 resetFields 方法时，表单将会重置为这些默认值而不是空值。编辑时表单的初始值被设置成了回显的数据，而不是空字符串。时，表单会回到上次设置的初始值，即回显的数据。
Vue3动态组件component不生效问题解决方法
Java_fenxiang的博客
10-14 704
问题：vue3循环渲染动态组件component不生效，页面空白在vue3使用component动态组件展示组件时，组件就是不展示显示空白。在vue2中使用动态变量component展示组件都是没问题。试了很多方法 踩了很多坑，所以记录下：登录后复制 <div class="preview-list" id="c...
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序喵正在路上

你的鼓励是我创作最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值