CSS详解（上）

芒果炒香菜
395 阅读41分钟

前言

大四应届生，已经签好工作了，准备七月份入职，细细算来学习前端已经一年有余，感觉日子真是不经过啊。现在趁着大四最后一点时光，重新将之前学过的基础知识捡起来，为入职做准备，也希望给刚入行的新人带来一些启发。

一、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 中，类选择器以一个 . 号显示。

注意：

  • 类选择器使用 .（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）
  • 所有标签上都有class属性，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">
        /* 类选择器口诀：样式 . 定义，结构 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属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
  • 一个标签上只能有一个id属性值
  • 一个id选择器只能选中一个标签

口诀： 样式 # 定义，结构 id 调用，只能调用一次，别人切勿使用。

id 选择器和类选择器的区别：

  • 类选择器 (class) 好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用
  • id 选择器好比人的身份证号码，全中国是唯一的，不可重复（同一个 id 选择器只能调用一次）
  • id 选择器和类选择器最大的不同在于使用次数上
  • 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用
  • 类选择器以 . 开头，id选择器以 # 开头
<!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>姓名：xxx</p>
    <p>生日：1999年10月14日</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>姓名：xxx</p>
    <p>生日：2000年9月14日</p>
    <p>性别：男</p>
    <p>婚姻状况：单身</p>
</body>

</html>

系统自带的默认字体：

QQ截图20220517111935.png

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>姓名：xxx</p>
    <p>生日：1999年11月23日</p>
    <p>性别：男</p>
    <p>婚姻状况：单身</p>
</body>

</html>

3.3 字体粗细

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

p {
	font-weight: bold;
}
属性值描述
normal默认值（不加粗的）
bold定义粗体（加粗的）
100-900400 等同于 normal，而 700 等同于 bold，其它值一般不使用，注意这个数字后面不跟单位
  • 学会让加粗标签（比如 h 和 strong 等）变为不加粗，或者让其他标签加粗
  • h1 ~ h6, strong, b标签的font-weight默认为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 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>姓名：xxx</p>
    <p>生日：2000年4月24日</p>
    <p>性别：男</p>
    <p class="bold">婚姻状况：单身</p>
</body>

</html>

3.4 文字样式

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

p {
	font-style: normal;
}
属性值作用
normal默认值，浏览器会显示标准的字体样式 font-style: normal;
italic浏览器会显示斜体的字体样式, 字体本身支持斜体时.显示的斜体
oblique浏览器会使字体倾斜, 不管字体本身支不支持斜体, 都可以使其倾斜

注意： 平时我们很少给文字加斜体，反而要给斜体标签 (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%)
RGBA 代码rgb(255, 0, 0,0.5) A表示透明度，取值范围为0-1

注意： 开发中最常用的是十六进制。

熟记开发常用色：

黑色：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 属性只能作用于 块级元素，并让该块级元素内的 行内元素 实现居中（不一定是文字），如：span标签、a标签、input标签、img标签。

上述例子中：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>

注意： 开发中会使用 text-decoration : none ; 清除a标签默认的下划线

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>

注意：

  • em在font-size中使用是相对父元素的字体大小，在其他属性中是相对于自身的font-size，如width、height，但是如果子级不设置font-size时，结果就是相对于父级的font-size
  • 根元素的字体大小，rem中的r意思是root

4.5 文本大小写转化

<!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 {
            text-transform: uppercase; // 所有字母大写
        }
    </style>
</head>

<body>
    <p>www.baidu.com</p> // WWW.BAIDU.COM
</body>

</html>
属性值描述
none默认,没有任何影响
capitalize文本中的每个单词的首字母大写
uppercase文本中的每个单词的所有字母大写
lowercase文本中的每个单词的所有字母小写
inherit规定应该从父元素继承 text-transform 属性的值。

4.6 行间距（行高）

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

严格来说:行高是两行文字基线之间的间距(基线:小写x底部对应的那条线)

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: 50px; */
            /* 自己字号的1.5倍 */
            /* line-height: 1.5; */

            /* 66px 宋体 倾斜 加粗 行高是font-size即66px的2倍 */
            font: italic 700 66px/2 宋体;
        }
    </style>
</head>

<body>
    <p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，
        这代表了中国最成熟的三套城市轨道交通系统</p>

    <p>可即使是这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤，
        对很多人而言，每次挤地铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p>

    <p>那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p>
</body>

</html>

补充：行间距测量技巧：上一行文字的底部与本行文字的底部之间的距离就是行间距。 注意：

  • 取值：
    1. 数字+px
    2. 倍数（当前标签font-size的倍数）
  • 应用：
    1. 让单行文本垂直居中可以设置 line-height : 文字父元素高度
    2. 网页精准布局时，会设置 line-height : 1 可以取消上下间距
  • 行高与font连写：
    1. 如果同时设置了行高和font连写，注意覆盖问题
    2. font : style weight size/line-height family ;
  • 文本会默认在行高的中间显示, 所以
    1. 如果行高小于元素高度, 文本会偏上
    2. 如果行高大于元素高度, 文本会偏下

4.6 文本属性总结

属性表示注意点
color文本颜色我们通常用 十六进制 而且通常是简写形式 #fff（6 个一样可以简写）
text-align文本对齐可以设定文字水平的对齐方式
text-indent文本缩进通常我们用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration文本修饰牢记 添加下划线 underline 取消下划线 none
text-transform文本转化可以使文本的大小写进行转化
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引入方式总结

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

六、 CSS的复合选择器

6.1 什么是复合选择器

在 CSS 中，可以根据选择器的类型把选择器分为：基础选择器 和 复合选择器，复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的。

  • 复合选择器可以更准确、更高效的选择目标元素（标签）
  • 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
  • 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等

6.2 后代选择器

后代选择器 又称为 包含选择器，在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式;

语法：

选择器1 选择器2 { css}

例如：

ul li { 样式声明 } 		/* 选择 ul 里面所有的 li 标签元素 */
  • 选择器1和选择器2中间用 空格 隔开
  • 选择器1是父级，选择器2 是子级，最终选择的是选择器2，即：选择器1 是不会生效样式的
  • 选择器2 可以是儿子，也可以是孙子等，只要是选择器1 的后代即可
  • 选择器1和选择器2 可以是任意基础选择器
<!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>
        /* 把 ol 里面的小 li 选出来改为 pink */
        ol li {
            color: pink;
        }

        /* 把 ol 里面的小 a 选出来改为 red */
        ol a {
            color: red;
        }

        /* 把 ul 里面的小 li 选出来改为 green */
        ul li {
            color: green;
        }

        /* 把 nav 类中的 li 里面的 a 选出来改为 yellow */
        .nav li a {
            color: yellow;
        }
    </style>
</head>

<body>
    <ol>
        <li>我是 ol 的孩子</li>
        <li>我是 ol 的孩子</li>
        <li>我是 ol 的孩子</li>
        <li><a href="#">我是 ol 的孙子</a></li>
    </ol>
    <ul>
        <li>我是 ul 的孩子</li>
        <li>我是 ul 的孩子</li>
        <li>我是 ul 的孩子</li>
        <li><a href="#">我是 ul 的孙子，但是我不会变化</a></li>
    </ul>
    <ul class="nav">
        <li><a href="#">我偏要变色！并且只能我一个人色……</a></li>
    </ul>
</body>

</html>

6.3 子选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素。

注意：是最近一级而并非最近一个！

语法：

选择器1 > 选择器2 { css}

上述语法表示选择选择器1 里面的所有直接后代（子元素）选择器2。

例如：

div>p { 样式声明 } 	/* 选择 div 里面所有最近一级 p 标签元素 */
  • 选择器1和选择器2 中间用 大于号 隔开
  • 选择器1 是父级，选择器2 是子级，最终选择的是选择器2，即选择器1 是不会生效样式的
  • 选择器2 必须是亲儿子，其孙子、重孙之类都不归他管，你也可以叫：亲儿子选择器
<!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>
        .nav>a {
            color: red;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">我是儿子1</a>
        <p>
            <a href="#">我是孙子1</a>
            <a href="#">我是孙子2</a>
        </p>
        <a href="#">我是儿子2</a>
    </div>
</body>

</html>

6.4 并集选择器

并集选择器 可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。 并集选择器 是各选择器通过英文逗号 , 连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法：

选择器1 ，选择器2 { css}

选择器1,
选择器2,
选择器3 {
    样式声明
}
/* 推荐写法，编码风格 */

上述语法表示选择元素1、元素2 和 元素3。

例如：

ul, div { 样式声明 }		 /* 选择 ul 和 div标签元素 */
  • 选择器1 和 选择器2 中间用逗号隔开（最后一个不加逗号）
  • 逗号可以理解为和的意思
  • 并集选择器通常用于集体声明
<!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>
        /* 要求1：请把熊大和熊二改为粉色 */
        /* div,
        p {
            color: pink;
        } */

        /* 要求2：请把熊大和熊二改为红色，还有小猪一家改为粉色 */
        div,
        p,
        .pig li {
            color: pink;
        }
        /* 语法规范：并集选择器通常竖着写 */
    </style>
</head>

<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
</body>

</html>

6.5 交集选择器

交集选择器 :可以选中页面中同时满足多个选择器的标签
既又原则:找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式

语法：

选择器1选择器2 { 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>Document</title>
    <style>
        /* 必须是p标签,而且添加了box类 */
        p.box {
            color: red;
        }
    </style>
</head>

<body>
    <!-- 找到元素标签为p,且类名为box的p元素, 设置文字颜色是红色 -->
    <p class="box">这是p标签:box</p> // 变红
    <p>pppppp</p>
    <div class="box">这是div标签:box</div>
</body>

</html>

6.6 兄弟选择器

兄弟选择器用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。兄弟选择器分为相邻兄弟选择器和普通兄弟选择器两种.

1.临相邻兄弟选择器

该选择器使用加号“+”来连接前后两个选择器。选择器中的两个元素有同一个父元素，而且第二个元素必须紧跟第一个元素。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>相邻兄弟选择器</title>
    <style type="text/css">
       // 选中h1元素后的紧挨着h1元素的p元素
        h1 + p {
            color:red;
        }
    </style>
</head>
 
<body>
    <p>Hello word!</p>
    <p>Hello word!</p>
    <h1>Hello word!</h1>
    <p>Hello word!</p>
    <p>Hello word!</p>
    <p>Hello word!</p>
    <p>Hello word!</p>
</body>
</html>

2.普通兄弟选择器

普通兄弟选择器使用 “~”来链接前后两个选择器。选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个元素。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>相邻兄弟选择器</title>
    <style type="text/css">
       // 选中h1元素后的所有p元素
        h1 + p {
            color:red;
        }
    </style>
</head>
 
<body>
    <p>Hello word!</p>
    <p>Hello word!</p>
    <h1>Hello word!</h1>
    <p>Hello word!</p>
    <p>Hello word!</p>
    <p>Hello word!</p>
    <p>Hello word!</p>
</body>
</html>

6.7 伪类选择器

伪类选择器 用于向处于某种状态的元素添加特殊的效果，比如：给链接添加特殊效果（链接伪类），或选择第 n 个元素（结构伪类）。 伪类选择器 书写最大的特点是用冒号 : 表示，比如：:hover、:first-child。 因为伪类选择器很多，比如：链接伪类、结构伪类 等，所以这里先讲解常用的链接伪类选择器。

伪类的由来：因为在页面中并没有这个真实存在的类，所以称为 “伪类”。

6.8 链接伪类选择器

链接伪类选择器注意事项：

  • 为了确保生效且不冲突，请按照 LVFHA 的顺序声明 :link :visited :focus :hover :active
  • 因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式
  • 如果只给a元素设置样式, 而不给它设置伪类, 那么相当于给a元素的所有伪类都设置了相同的样式(和a一样)

链接伪类选择器实际工作开发中的写法：

/* a 是标签选择器 所有的链接 */
a {
	color: gray;
}

/* :hover 是链接伪类选择器 鼠标经过 */
a:hover {
	color: red; 	/* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}

<!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>
        /* 注意：要学会触类旁通，这里不只是可以改变颜色，当链接为图片时还可以改图片 */
        /* 1、a:link 把没有点击过的（访问过的）链接选出来 */
        a:link {
            color: #333;
            text-decoration: none;
        }

        /* 2、a:visited 选择点击过的（访问过的）链接选出来 */
        a:visited {
            color: orange;
        }

        /* 3、a:hover 选择鼠标经过（停留）的那个链接 */
        a:hover {
            color: skyblue;
        }

        /* 4、a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
        a:active {
            color: green;
        }
    </style>
</head>

<body>
    <a href="#">小猪佩奇</a>
</body>

</html>

20210405203010954.gif

注意：除了a元素之外, :hover :active 也适用于其他标签元素。

6.9 :focus伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

input:focus {
	background-color: yellow;
}

<!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>复合选择器之focus伪类选择器</title>
    <style>
        /* 把获得光标的 input 表单元素选区出来 */
        /* :focus 一般放在:visited之后, :hover之前 */
        input:focus {
            background-color: pink;
            color: red;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

</html>

20210405202554834.gif

6.10 复合选择器总结

选择器作用特征使用情况隔开符号及用法
后代选择器用来选择后代元素可以是子孙后代较多符号是空格 .nav a
子代选择器选择最近一级元素只选亲儿子较少符号是大于 .nav>p
并集选择器选择某些相同样式的元素可以用于集体声明较多符号是逗号 .nav, .header
交集选择器选中页面中同时满足多个选择器的元素选择某一特定元素一般两选择器紧挨着p.header
链接伪类选择器选择不同状态的链接跟链接相关较多重点记住 a{} 和 a:hover 实际开发的写法
:focus 选择器选择获得光标的表单跟表单相关较少input:focus 记住这个写法

强调：复合选择器的层级写得越细越好（可读性，可维护性，安全性），同时将复合选择器的层级写得越细，可以提前避免大部分的选择器优先级混乱！

七、CSS 的元素显示模式

7.1 什么是元素显示模式

作用： 网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。

元素显示模式 就是元素（标签）以什么方式进行显示，比如 <div> 自己占一行，比如一行可以放多个 <span>。

HTML 元素一般分为 块元素 和 行内元素 两种类型。

拓展:事实上, 元素与元素之间没有本质区别, 如div之所以是块元素, 无非是浏览器给它默认加上了display: block; 属性而已. 其他元素同理, 不同的样式只是因为浏览器默认添加的属性不同.

7.2 块元素

常见的块元素有 <h1> ~ <h6>、<p>、<div>、<ul>、<ol>、<li>、<dl>、<dt>、<dd>、<table>、<tr>、<form>、 header、nav、footer等，其中 <div> 标签是最典型的块元素。

块级元素的特点：

  • 比较霸道，自己独占一行
  • 高度，宽度、外边距以及内边距都可以控制
  • 宽度默认是父元素的宽度，高度默认由内容撑开
  • 是一个容器及盒子，里面可以放行内或者块级元素

注意：

  • 文字类的块级元素内不能放置块级元素，会发生语法错误
  • <p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放 <div>
  • 同理， <h1> ~ <h6> 等都是文字类块级标签，里面也不能放其他块级元素

7.3 行内元素

常见的行内元素有 <a>、<span>、<em>、<strong> 、<i>、<b>等，其中 <span> 标签是最典型的行内元素，有的地方也将行内元素称为内联元素。

行内元素的特点：

  • 相邻行内元素在一行上，一行可以显示多个
  • 高、宽直接设置是无效的
  • 默认宽度就是它本身内容的宽度
  • 行内元素只能容纳文本或其他行内元素（a 除外）
  • 行内元素在水平方向上的内边距/外边距/边框设置是有效的，在垂直方向上无效(其中设置内边距/边框看起来会撑起盒子,但是不占据空间)

注意：

  • a标签不能嵌套a标签
  • <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全

实例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>盒子阴影</title>
    <style>
      .one {
        /* 无效 */
        width: 200px;
        height: 200px;

        /* 水平方向有效, 盒子会被撑起来, 垂直方向不占据空间 */
        padding: 60px;

        /* 水平方向有效, 盒子会被撑起来, 但垂直方向不占据空间 */
        border: 10px solid red;

        /* 水平方向有效, 垂直方向无效 */
        margin: 50px;

        background-color: aqua;
      }
    </style>
  </head>

  <body>
    <span class="one">哈哈哈</span>
    <span>呵呵呵</span>
    <div>嘿嘿嘿</div>
  </body>
</html>

image.png

7.4 行内块元素

在行内元素中有几个特殊的标签：<img>、<input>、<th>、<td>、<textarea>、<button>、<select>，它们同时具有 块元素 和 行内元素 的特点，有些资料称它们为 行内块元素。

行内块元素的特点：

  • 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）
  • 默认宽度就是它本身内容的宽度（行内元素特点）
  • 高度，行高、外边距以及内边距都可以控制（块级元素特点） 注意：
  • 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

拓展: 严格意义上来说, 是没有行内块元素的说法的, 只有块元素和行内元素, 上述行内块元素可以归为行内元素

7.5 元素显示模式总结

元素模式元素排列设置样式默认宽度包含
块级元素一行只能放一个块级元素可以设置宽度和高度容器的 100%容量级可以包含任何标签
行内元素一行可以放多个行内元素不可以直接设置宽度和高度它本身内容的宽度容纳文本或其他行内元素
行内块元素一行放多个行内块元素可以设置宽度和高度它本身内容的宽度

学习元素显示模式的主要目的是分清它们各自的特点，当我们网页布局的时候，在合适的地方用合适的标签元素。

7.6 元素显示模式转换

特殊情况下，我们需要元素模式的转换，简单理解: 一个模式的元素需要另外一种模式的特性 比如：想要增加链接 <a> 的触发范围。

  • 转换为块元素：display: block;（由于经常需要设置宽高，所以通常会将行内元素转换为块元素）
  • 转换为行内元素：display: inline;
  • 转换为行内块：display: inline-block;（常用）
<!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>
        a {
            width: 150px;
            height: 50px;
            background-color: orange;
            /* 把行内元素 a 转换为 块级元素 */
            display: block;
        }

        div {
            width: 300px;
            height: 100px;
            background-color: black;
            color: white;
            /* 把 div 块级元素转化为行内元素 */
            display: inline;
        }

        span {
            width: 300px;
            height: 30px;
            background-color: skyblue;
            /* 行内元素转化为行内块元素 */
            display: inline-block;
        }
    </style>
</head>

<body>
    <a href="#">我是行内元素</a>
    <a href="#">我是行内元素</a>
    <div>我是块级元素</div>
    <div>我是块级元素</div>
    <span>行内元素转化为行内块元素</span>
    <span>行内元素转化为行内块元素</span>
</body>

</html>

7.7 简洁版小米侧边栏案例

<!doctype html>
<html lang="zh-CN">

<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>
        /* 1、把 a 转换为块级元素 */
        a {
            display: block;
            width: 230px;
            height: 40px;
            background-color: #55585a;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            text-indent: 2em;
            /* 一个小技巧：单行文字垂直居中的代码，让文字的行高等于盒子的高度 */
            line-height: 40px;
        }

        /* 2、鼠标经过链接变换背景颜色 */
        a:hover {
            background-color: #ff6700;
        }
    </style>
</head>

<body>
    <!--
    说明：在实际开发中，为了避免链接堆叠，从而降低浏览器排名
    开发中一般都将这些链接放在无序列表中，这里只是为了方便演示才这样使用
	-->
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
</body>

</html>

20210405205628339.gif

7.8 小技巧：单行文字垂直居中

CSS 没有给我们提供文字垂直居中的代码，这里我们可以使用一个小技巧来实现。

解决方案： 让 文字的行高 等于 盒子的高度 就可以让文字在当前盒子内垂直居中。

简单理解： 行高的上空隙和下空隙把文字挤到中间了，如果行高小于盒子高度，文字会偏上，如果行高大于盒子高度，则文字偏下。

7.9 一个注意点：块级元素不会自动换行

当块级元素的宽度超过其父元素宽度时，其不会发生换行。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
        name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <title>块级元素不会自动换行</title>
    <style>
        div {
            background-color: #FFFF00;
            width: 600px;
            height: 300px;
            color: #FFFFFF;
            font-size: 24px;
            border: 1px solid transparent;
        }

        .div {
            background-color: #000;
            width: 730px;
            height: 100px;
            margin: 20px 0;

        }

        span {
            background-color: #000;
            width: 700px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div>
        <div class="div">块级元素 块级元素 块级元素 块级元素 块级元素 块级元素 块级元素 块级元素 块级元素 块级元素 块级元素 块级元素</div>
        <span>行内元素 行内元素 行内元素 行内元素 行内元素 行内元素 行内元素 行内元素</span>
    </div>
</body>
</html>

image-20220125215313482.png

八、CSS 的背景

通过 CSS 背景属性，可以给页面元素添加背景样式。 背景属性可以设置 背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定 等。

拓展 :

  1. 给盒子设置背景色的话, 内容/内边距/边框都会被设置上.
  2. 如果你的boeder没有设置颜色, 浏览器会使用你设置的color作为边框的颜色

8.1 背景颜色

background-color 属性定义了元素的背景颜色。

background-color: 颜色值;

一般情况下元素背景颜色默认值是 transparent（透明），我们也可以手动指定背景颜色为透明色。

background-color: transparent;

目前 CSS 还支持丰富的渐变色，但是某些浏览器不支持，这里了解即可，具体内容请查阅资料。

<!doctype html>
<html lang="zh-CN">

<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>
        #grad1 {
            height: 200px;
            /* 浏览器不支持时显示 */
            background-color: red;
            /* 线性渐变 - 从上到下（默认情况下）*/
            background-image: linear-gradient(#e66465, #9198e5);
        }
    </style>
</head>

<body>
    <h3>线性渐变 - 从上到下</h3>
    <p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>

    <div id="grad1"></div>

    <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
</body>

</html>

20210405211456978.jpg

8.2 背景图片

background-image 属性描述了元素的背景图像，实际开发常用于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置（精灵图也是一种运用场景）。

background-image : none | url(url)
参数值作用
none无背景图（默认的）
url使用绝对或相对地址指定背景图像

注意：

  • 背景图片后面的地址，千万不要忘记加 URL， 同时里面的路径不要加引号
  • 页面元素既可以添加背景颜色也可以添加背景图片，两者可以同时存在，只不过背景图片区域会在上面覆盖住背景颜色
  • 背景图片默认是在水平和垂直方向平铺的
  • 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的, 如果设置了背景图片后, 元素没有具体的宽高, 背景图片是不会显示的.
  • 可以同时设置多张背景图, 用逗号隔开, 第一张图片显示在最上面, 后续图片按顺序层叠在下面
background-color: pink;
background-image: url(../images/logo.png);
/* 1、背景图片不平铺 */
/* background-repeat: no-repeat; */
/* 2、默认情况下，背景图片是平铺的 */
/* background-repeat: repeat; */ 

/* 3、同时设置多张图片的写法 */
 background-image: url(), url();

8.3 背景平铺

如果需要在 HTML 页面上对背景图像进行平铺，可以使用 background-repeat 属性。

注：平铺可以简单的理解为“重复”。

background-repeat: repeat | no-repeat | repeat-x | repeat-y
参数值作用
repeat背景图像在纵向和横向上平铺（默认的）
no-repeat背景图像不平铺
repeat-x背景图像在横向上平铺
repeat-y背景图像在纵向上平铺

8.4 背景图片位置

利用 background-position 属性可以改变图片在背景中的位置。

background-position: x y;

参数代表的意思是：x 坐标 和 y 坐标，可以使用 方位名词 或者 精确单位。

参数值说明
length百分数| 由浮点数字和单位标识符组成的长度值
positiontop| center | bottom | left | rigth 方位名词

  • 参数是方位名词

    • 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致
    • 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

  • 参数是精确单位

    • 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标
    • 如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中

  • 参数是混合单位

    • 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标

QQ截图20220520232710.png

注意：

  • 正数: 向右向下移动; 负数:向左向上移动
  • 背景图只显示在盒子里面，超出盒子部分不显示
  • 设置全局背景一般用 center top

8.5 背景图像固定（背景附着）

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment 后期可以制作 视差滚动 的效果。

background-attachment : local |scroll | fixed
参数作用
scroll默认值， 此关键属性值表示背景相对于元素本身固定， 而不是随着它的内容滚动；
local此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动；
fixed此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动；

background-attachment属性详解

<!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>
        body {
            background-image: url(images/bg.jpg);
            background-repeat: no-repeat;
            /* center让背景图居中,即使浏览器窗口缩小, 背景图依然居中显示 */
            /* 设置全局背景一般用 center top */
            background-position: center top;
            /* 把背景图片固定住 */
            background-attachment: fixed;
            color: #fff;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
    <p>天王盖地虎, pink老师一米五</p>
</body>

</html>

20210405212447451-16422629370077.gif

8.6 背景图片大小

作用：设置背景图片的大小

语法：background-size：宽度 高度；

取值：

Snipaste_2022-06-16_16-49-20.png

<!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>Document</title>
    <style>
        .box {
            width: 400px;
            height:300px;
            background-color: pink;
            background-image: url(./images/1.jpg);
            background-repeat: no-repeat;
            /* background-size: 300px; */
            /* background-size: 50%; */
            /* background-size: 100px 40px; */

            /* 如果图片和盒子并不是等比例的，使用contain将图片的宽或高其中之一缩放到与盒子的尺寸相同了, 
            那么另一个方向就会停止缩放 -- 导致盒子一边可能有留白 */
            background-size: contain;
            /* 如果图片和盒子并不是等比例的，使用cover将图片的宽或高都缩放到与盒子的尺寸相同, 
            那么其中一方会溢出隐藏, 导致图片显示不全 */
            /* background-size: cover; */

            /* 当然在工作中, 图的比例和盒子的比例都是相同的, contain 和cover效果完全相同; */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

8.7 背景复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性 background 中，从而节约代码量。 当使用简写属性时，没有特定的书写顺序，一般习惯约定顺序为： background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置/背景图片大小

background: transparent url(image.jpg) no-repeat fixed top bottom/cover;

实际开发中，我们更提倡其他背景属性连写，背景图片大小单独写。

8.8 背景色半透明

CSS3 为我们提供了背景颜色半透明的效果。

background: rgba(0, 0, 0, 0.3);
  • 最后一个参数是 alpha 透明度，取值范围在 0~1 之间
  • 习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);
  • 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
  • CSS3 新增属性，是 IE9+ 版本浏览器才支持的
  • 但是现在实际开发，我们不太关注兼容性写法了，可以放心使用
<!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>
        div {
            width: 300px;
            height: 300px;
            /* background-color: black; */
            background: rgba(0, 0, 0, .3);
        }
    </style>
</head>

<body>
    <!-- 只是让背景颜色半透明，盒子里的内容并不受影响 -->
    <div>zhoujirui</div>
</body>

</html>

8.9 背景总结

属性作用值
backgroud-color背景颜色预定义的颜色值 / 十六进制 / RGB代码
backgroud-image背景图片url（图片路径）
backgroud-repeat是否平铺repeat / no-repeat / repeat-x / repeat-y
backgroud-position背景位置length / position 分别是 x 和 y 坐标
backgroud-attachment背景附着scroll（背景滚动）/ fixed（背景固定）
backgroud-size背景图片大小px/ 百分比/ contain/cover
背景简写书写更简单背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
背景色半透明背景颜色半透明background: rgba(0, 0, 0, 0.3); 后面必须是4个值

背景图片：实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置（精灵图也是一种运用场景）。

8.10 王者荣耀案例

<!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>
        /* 对于 logo 图片来说，最常用的方法便是利用背景来设置，而并非直接插入图片 */
        h3 {
            width: 118px;
            height: 40px;
            font-size: 14px;
            font-weight: 400;
            line-height: 40px;
            background-image: url(../image/icon.png);
            background-repeat: no-repeat;
            background-position: left center;
            text-indent: 2em;
        }

        h3 a {
            color: #000;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <h3><a href="#">成长守护平台</a></h3>
</body>

</html>

20210405213212859.jpg

<!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>
        body {
            background-image: url(../image/b.jpg);
            background-repeat: no-repeat;
            /* 设置全局背景一般用 center top */
            background-position: center top;
        }
    </style>
</head>

<body>
    <!-- 对于网页中的大面积图片而言，一般不采用直接插入图片的方式来做，
    因为图片的分辨率及尺寸是固定的但是显示器或网页窗口的大小分辨率则是会改变的，
    直接插入图片的话不方便控制图片大小及位置 -->
    <!-- <img src="../image/b.jpg" alt=""> -->
</body>

</html>

202104052132139.jpg

8.11 img标签和背景图片的区别

需求：需要在网页中展示一张图片的效果？

  • 方法一：直接写上img标签即可 img标签是一个标签，不设置宽高默认会以原尺寸显示
  • 方法二：div标签+ 背景图片 需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签

8.12 提高：背景渐变

使用background-image属性实现渐变背景效果

  • 渐变是多个颜色逐渐变化的视觉效果
  • 一般用于设置盒子的背景
background-image: linear-gradient( 颜色1,颜色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>
        .box {
            width: 300px;
            height: 200px;
            /* background-image: linear-gradient(
                pink,
                green,
                hotpink
            ); */
            
            /* 常用 */
            background-image: linear-gradient(
                transparent,
                rgba(0,0,0, .6)
            );
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

案例：

初始：

Snipaste_2022-06-21_22-20-40.png

鼠标移入时：

Snipaste_2022-06-21_22-23-22.png

<!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 {
        position: relative;
      }

      .box img {
        width: 300px;
      }

      .box .title {
        position: absolute;
        left: 15px;
        bottom: 20px;
        z-index: 2;
        width: 260px;
        color: #fff;
        font-size: 20px;
        font-weight: 700;
      }

      .box .mask {
        position: absolute;
        left: 0;
        top: 0;
        /* display: none; */
        opacity: 0;
        width: 300px;
        height: 212px;
        background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.4));
        transition: all 0.5s;
      }
      .box:hover .mask {
        opacity: 1;
        /* display: block; */
      }
    </style>
  </head>

  <body>
    <div class="box">
      <img src="./images/product.jpeg" alt="" />
      <div class="title">OceanStor Pacific 海量存储斩获2021 Interop金奖</div>
      <!-- 渐变背景 mask -->
      <div class="mask"></div>
    </div>
  </body>
</html>

九、emmet语法

作用：通过简写语法，快速生成代码

QQ截图20220520204154.png

十、CSS三大特性

10.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>
        div {
            color: red;
        }

        div {
            color: pink;
        }
    </style>
</head>

<body>
    <!-- pink 色 -->
    <div>xxx</div>
</body>

</html>

10.2 继承性

现实中的继承：我们继承了父亲的姓。

CSS 中的继承：子标签会继承父标签的某些样式，如：文本颜色和字号，简单的理解就是：子承父业。

  • 恰当地使用继承可以简化代码，降低 CSS 样式的复杂性
  • 子元素可以继承父元素的样式（ text-、font-、line-、color ） 文本、字体、段落、颜色 详情可以看我的另一篇文章
<!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 {
            color: pink;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div>
        <p>xxx</p>
    </div>
</body>

</html>

行高的继承

body {
    font: 12px/1.5 'Microsoft YaHei';
}
  • 行高可以跟单位也可以不跟单位
  • 如果子元素没有设置行高，则会继承父元素的行高为 1.5
  • 此时子元素的行高是：当前元素的文字大小 * 1.5
  • body 行高 1.5 这样写法最大的优势就是里面的子元素可以根据自己文字的大小自动调整行高
<!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 {
            color: pink;
            /* font: 12px/18px; */
            font: 12px/1.5;		/* 12 + 12 * 0.5 = 18 */
        }

        div {
            /* 子元素继承了父元素 body 的行高 1.5 */
            /* 这个 1.5 就是当前元素文字大小 font-size 的 1.5 倍 */
            /* 所以当前 div 的行高就是：14 + 14 * 0.5 = 21px */
            font-size: 14px;
        }

        p {
            /* 1.5 * 16 = 24 当前行高 */
            font-size: 16px;
        }

        /* li 没有手动指定文字大小，则会继承父亲（此处的父亲可以层层向上推）的文字大小  */
        /* 即：body 12px 所有 li 的文字大小为 12px */
        /* 当前 li 的行高就是 12 * 1.5 = 18  */
    </style>
</head>

<body>
    <div>xxx</div>
    <p>JERRY</p>
    <ul>
        <li>没有指定文字大小</li>
    </ul>
</body>

</html>

继承失效的特殊情况：

如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式

  1. a标签的color会继承失效
    • 其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
  2. h系列标签的font-size会继承失效
    • 其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了

强制继承：让子元素强制继承父元素样式

在css中，某些属性不会自动从元素继承到其子元素。这是因为通常希望这些属性对于应用该属性的元素（或元素选择）是唯一的。常见的这种性质margin，padding，background，display等。但是，有时还是需要子元素继承某些不可继承的属性。为此，我们可以将inherit值应用于应该继承的属性。inherit值可以应用于任何CSS属性和任何HTML元素。

#content {
  color: red; // 可继承
  padding: 5px; // 不可继承
}
#content p {
  padding: inherit; // 强制继承不可继承的属性
}


<div id="content">
  <h3>Some header</h3>
  <p>Some paragraph</p>
</div>

10.3 优先级

  • 选择器相同，则执行层叠性
  • 选择器不同，则根据选择器权重执行 即：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式

优先级公式：

继承< 通配符选择器< 标签选择器< 类选择器< id选择器< 行内样式< !important 选择器权重如下表所示：

选择器选择器权重
通配符选择器*0,0,0,0
元素选择器0,0,0,1
类选择器、伪类选择器0,0,1,0
ID 选择器0,1,0,0
行内样式 style=""1,0,0,0
!important 重要的∞ 无穷大

规则： 比较位级别，位级别相同时比较位大小。

<!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 {
            color: pink;
        }

        .test {
            color: red;
        }

        #demo {
            color: green;
        }
    </style>
</head>

<body>
    <div class="test">你笑起来真好看</div> <!-- red -->
    <div class="test" id="demo">你笑起来真好看</div> <!-- green -->
    <div class="test" id="demo" style="color: blue;">你笑起来真好看</div> <!-- blue -->
<!-- 
    假如在 css 选择器 某一个属性值后面跟上 !important，那么这个属性一定会执行！
    例如：div {
             color: pink !important;  
          }
          ...
    <div class="test" id="demo" style="color: blue;">你笑起来真好看</div> -- pink --
-->

</body>

</html>

优先级注意问题：

  • 权重是由 4 组数字组成的，但是不会有进位！
  • 可以理解为：类选择器 永远大于 元素选择器，ID 选择器 永远大于 类选择器，以此类推！
  • 等级判断 从左到右，如果某一位数值相同，则判断下一位数值
  • 可以简单的记忆：通配符 权重为 0，标签选择器 为 1，类（伪类）选择器为 10，ID 选择器为 100，行内样式表 为 1000，!important 无穷大
  • 继承样式没有权重，!important不能提升继承的优先级，只要是继承优先级最低！
  • a 链接浏览器默认指定了一个样式，所以它不参与继承，所以设置样式需要选中单独设置
<!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>
        /* 父亲的权重是 100 */
        #father {
            color: red !important;
        }

        /* p 继承的样式没有权重*/
        /* 所以以后我们看标签到底执行哪一个样式，就先看这个标签有没有直接被选出来
           如果直接被选择出来了，那么就与父亲无关了！*/
        p {
            color: pink;
        }
    </style>
</head>

<body>
    <!-- 继承的样式没有权重，不管父元素权重多高，子元素得到的权重都是 0 -->
    <div id="father">
        <p>你还是很好看</p> <!-- pink -->
    </div>
    <!-- a 链接浏览器默认指定了一个样式，所以它不参与继承，所以给 a 改样式必须直接把 a 选出来 -->
    <a href="#">我是单独的样式</a>
</body>

</html>

权重的叠加：

如果是复合选择器，则会有权重叠加，需要计算权重。

注意：再次强调！权重虽然会叠加，但一定不会进位！（1万个元素选择器也比不过一个类选择器）。

从左到右逐位比较，只有左一位同样大，才比较右边一位！

例如：

  • div ul li ——> 0,0,0,3
  • .nav ul li ——> 0,0,1,2
  • a:hover ——> 0,0,1,1
  • .nav a ——> 0,0,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>
        /* 复合选择器会有权重叠加的问题 */
        /* 权重虽然会叠加，但是永远不会有进位 例如：十个 0,0,0,1 相加为 0,0,0,10 而不是 0,0,1,0 */
        /* ul li 权重 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
        ul li {
            color: green;
        }

        /* li 的权重是 0,0,0,1 */
        li {
            color: red;
        }

        /* .nav li 权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
        .nav li {
            color: pink;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>大猪蹄子</li>	<!-- pink -->
        <li>大肘子</li>	<!-- pink -->
        <li>猪尾巴</li>	<!-- pink -->
    </ul>
</body>

</html>

CSS优先级资料

10.3.1 优先级计算

例1：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>第1题：普通题</title>
	<style>
		/* (行内, id, 类, 标签) */
		/* !important 最高 */
		/* 继承: 最低 */

		/* (0, 2, 0, 0) */
		#father #son {
			color:blue; 
		} 
		
		/* (0, 1, 1, 1) */
		#father p.c2 {
			color:black;
		} 
		
		/* (0, 0, 2, 2) */
		div.c1 p.c2 {
			color:red;
		} 

		/* 继承, 最低 */
		#father { 
			color:green !important;
		} 

		/* 继承, 最低 */
		div#father.c1 {
			color: yellow ;
		} 

	</style>
</head>
<body>
	<div id="father" class="c1">
		<p id="son" class="c2">
			这行文本是蓝色的
		</p>
	</div>
</body>
</html>

例2：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>第2题: 标签选择器选择一类</title>
	<style>
		/* (行内, id, 类, 标签) */
		/* !important 最高 */
		/* 继承: 最低 */
	
		/* 0,0,0,2 */
                /*都能直接选中div*/
	  div div {
			color: skyblue;
		} 

		/* 0,0,0,1 */
		div {
			color: red;
		}
	</style>
</head>
<body>
	<div>
		<div>
			<div>
				这行文本是浅蓝色的
			</div>
		</div>
	</div>
</body>
</html>

例3：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>第3题: 权重叠加每位不存在进制</title>
	<style>
		/* (行内, id, 类, 标签) */
		div div div div div div div div div div div div {  
			color: red;
		}
		/* 类选择器优先级更高 */
		.one { 
			color: pink;
		}
	</style>
</head>
<body>
	<div>
		<div>
			<div>
				<div>
					<div>
						<div>
							<div>
								<div>
									<div>
										<div>
											<div>
												<div class="one">这行文字是粉色</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

例4：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>第4题：权重相同此时比较层叠性</title>
	<style>
		/* (0, 0, 2, 1) */
		.c1 .c2 div { 
			color: blue;
		}
		
		/* (0, 1, 0, 1) */
		div #box3 {
			color:green;
		}
		
		/* (0, 1, 0, 1) */
                /* 层叠掉上面的选择器 */
		#box1 div {
			color:yellow;
		}
	</style>
</head>
<body>
	<div id="box1" class="c1">
		<div id="box2" class="c2">
			<div id="box3" class="c3">
				这行文本是黄色的
			</div>
		</div>
	</div>
</body>
</html>

例5：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>第5题: 全是继承的特殊情况</title>
	<style>
		/* 都是继承, 继承里面谁高, 看继承哪个父级, 哪个父级高, 哪个选择器生效 */

		/* 继承 */
		div p {
			color:red;
		} 

		/* 继承 */
		.father {
			color:blue;
		} 
	</style>
</head>
<body>
	<div class="father">
		<p class="son"> 
			<span>文字是红色的</span>
		</p>
	</div>
</body>
</html>

10.3.2 Chrome调试工具

QQ截图20220521181101.png

参考资料：

avatar
文章
阅读
粉丝