CSS学习笔记

学习时间：2022年7月14日

学习来源：黑马

1 简介

1.1 概述

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

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

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

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

CSS 最大价值: 由 HTML 专注去做结构呈现，样式交给 CSS，即 结构 ( HTML ) 与样式( CSS ) 相分离。

1.2 语法规范

CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。

image-20220715092456534

  • 选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
  • 属性和属性值以“键值对”的形式出现
  • 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
  • 属性和属性值之间用:分开
  • 多个“键值对”之间用;进行区分

所有的样式，都包含在 <style> 标签内，表示是样式表。<style> 一般写到 </head> 上方。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>css语法规范</title>
  <style>
    /* 选择器 {样式} */
    p {
      color: pink;
      font-size: 12px;
    }
  </style>
</head>
<body>
  <p>有点意思</p>
</body>
</html>

1.3 代码风格

  • 样式格式书写

    • 紧凑格式

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

    • 展开格式

      1
      2
      3
      4
      h3 {
          color: pink;
          font-size: 20px; 
      }

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

  • 样式大小写

    1
    2
    3
    h3 {
        color: pink;
    }
    1
    2
    3
    H3 {
        COLOR: PINK; 
    }

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

  • 空格规范

    1
    2
    3
    h3 {
        color: pink; 
    }

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

2 基础选择器

2.1 作用和分类

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

image-20220715093600514

以上 CSS 做了两件事：

  1. 找到所有的 h1 标签。 选择器（选对人）。
  2. 设置这些标签的样式，比如颜色为红色（做对事）。

选择器分为基础选择器和复合选择器两个大类，我们这里先讲解一下基础选择器。

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

2.2 标签选择器

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

  • 语法：
1
2
3
4
5
6
标签名{
    属性1: 属性值1; 
    属性2: 属性值2; 
    属性3: 属性值3; 
    ...
}

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    p {
      color: green;
    }
    div {
      color: pink;
    }
  </style>
</head>
<body>
  <p>男生</p>
  <p>男生</p>
  <p>男生</p>
  <div>女生</div>
  <div>女生</div>
  <div>女生</div>
</body>
</html>

标签选择器可以把某一类标签全部选择出来，比如所有的 <div> 标签和所有的 <span> 标签。

优缺点

  • 能快速为页面中同类型的标签统一设置样式。
  • 不能设计差异化样式，只能选择全部的当前标签。

2.3 类选择器

2.3.1 基本使用

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点.号显示。

  • 语法：
1
2
3
4
.类名 {
    属性1: 属性值1; 
    ...
}
  • html结构需要用class属性来调用 class 类的意思
1
<div class=‘red’> 变红色 </div>

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .red {
      color: red;
    }
    .star-sing {
      color: green;
    }
  </style>
</head>
<body>
  <ul>
    <li class="red">来生孝夫</li>
    <li class="red">竹内玛莉亚</li>
    <li class="star-sing">玉置浩二</li>
    <li>井上阳水</li>
    <li>吉田拓郎</li>
  </ul>
  <div class="red">我也想变成红色</div>
</body>
</html>

注意：

  • 长名称或词组可以使用中横线来为选择器命名。
  • 不要使用纯数字、中文等命名，尽量使用英文字母来表示。
  • 记忆口诀：样式点定义，结构类调用。一个或多个，开发最常用。

2.3.2 多类名

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

  • 使用方式

    1
    <div class="red font20">亚瑟</div>
    • 在标签class 属性中写多个类名
    • 多个类名中间必须用空格分开
    • 这个标签就可以分别具有这些类名的样式

  • 开发场景

    • 可以把一些标签元素相同的样式(共同的部分)放到一个类里面.
    • 这些标签都可以调用这个公共的类，然后再调用自己独有的类.
    • 从而节省CSS代码，统一修改也非常方便.

2.4 id选择器

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

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

  • 语法
1
2
3
4
#id名 {
    属性1: 属性值1; 
    ...
}

注意：id 属性只能在每个 HTML 文档中出现一次。口诀: 样式#定义,结构id调用, 只能调用一次, 别人切勿使用。

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

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #red {
      color: red;
    }
  </style>
</head>
<body>
  <div id="red">来生孝夫</div>
</body>
</html>

2.5 通配符选择器

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

  • 语法
1
2
3
4
* {
    属性1: 属性值1; 
    ...
}
  • 通配符选择器不需要调用， 自动就给所有的元素使用样式
  • 特殊情况才使用，后面讲解使用场景(以下是清除所有的元素标签的内外边距,后期讲)
1
2
3
4
* {
    margin: 0;
    padding: 0;
}

3 字体属性

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

3.1 字体系列

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

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

3.2 字体大小

CSS 使用 font-size 属性定义字体大小。

1
2
3
p { 
    font-size: 20px; 
}
  • px（像素）大小是我们网页的最常用的单位
  • 谷歌浏览器默认的文字大小为16px
  • 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
  • 可以给 body 指定整个页面文字的大小

3.3 字体粗细

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

1
2
3
p { 
    font-weight: bold;
}

image-20220715101843621

实际开发时，我们更喜欢用数字表示粗细。

3.4 文字样式

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

1
2
3
p { 
    font-style: normal;
}

image-20220715101935560

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

3.5 复合属性

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

1
2
3
body { 
    font: font-style font-weight font-size/line-height font-family; 
}
  • 使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
  • 不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

代码示例

1
2
3
p {
    font: italic 700 16px 'Microsoft yahei';
}

4 文本属性

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

4.1 文本颜色

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

1
2
3
div { 
    color: red;
}

image-20220715102449147

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

4.2 对齐文本

text-align 属性用于设置元素内文本内容的水平对齐方式。注意不是将元素进行水平对齐。

1
2
3
div { 
    text-align: center;
}

image-20220715102534433

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    h1 {
      /* 本质是让h1盒子中的文字水平居中对齐 */
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>居中对齐的标题</h1>
</body>
</html>

image-20220715103031143

4.3 行间距

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

1
2
3
p { 
    line-height: 26px;
}

image-20220715103118041

  • 行间距（或称行高），有三部分组成：
    • 文本自身的高度
    • 上下相等的两个间距

5 引入方式

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

  1. 行内样式表（行内式）
  2. 内部样式表（嵌入式）
  3. 外部样式表（链接式）

5.1 内部样式表

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

1
2
3
4
5
6
<style>
    div {
        color: red;
        font-size: 12px;
    }
</style>
  • <style> 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的<head>标签中
  • 通过此种方式，可以方便控制当前整个页面中的元素样式设置
  • 代码结构清晰，但是并没有实现结构与样式完全分离
  • 使用内部样式表设定 CSS，通常也被称为嵌入式引入，这种方式是我们练习时常用的方式

5.2 行内样式表

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

1
<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>
  • style 其实就是标签的属性
  • 在双引号中间，写法要符合 CSS 规范
  • 可以控制当前的标签设置样式
  • 由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
  • 使用行内样式表设定 CSS，通常也被称为行内式引入

5.3 外部样式表

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

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

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

image-20220715111055592

使用外部样式表设定 CSS，通常也被称为外链式或链接式引入，这种方式是开发中常用的方式

6 Emmet语法

6.1 简介

Emmet语法的前身是Zen coding，它使用缩写来提高html和css的编写速度，Vscode内部已经集成了该语法。

首选项—>设置中：

image-20220715113647755

6.2 生成html语法

  • !：生成html基本模板结构

  • 生成标签直接输入标签名按tab即可

  • 生成多个标签：div*3

    1
    2
    3
    <div></div>
    <div></div>
    <div></div>

  • 父子关系标签：ul>li

    • ul>li

      1
      2
      3
      <ul>
          <li></li>
      </ul>

    • ul>li*3

      1
      2
      3
      4
      5
      <ul>
          <li></li>
          <li></li>
          <li></li>
      </ul>

    • (ul>li)*3

      1
      2
      3
      4
      5
      6
      7
      8
      9
      <ul>
          <li></li>
      </ul>
      <ul>
          <li></li>
      </ul>
      <ul>
          <li></li>
      </ul>

  • 兄弟关系标签：div+p

  • 生成带有类名或id的标签：.demo或#two

    • p.demo

      1
      <p class="demo"></p>

  • 生成有顺序类名的标签：$

    • div.demo$*5

      1
      2
      3
      4
      5
      <div class="demo1"></div>
      <div class="demo2"></div>
      <div class="demo3"></div>
      <div class="demo4"></div>
      <div class="demo5"></div>

  • 在生成的标签内部写内容可以使用{}

    • div{Hello World}

      1
      <div>Hello World</div>

6.3 生成css语法

使用缩写即可。

例如w100自动生成为width: 100px;，其余略。

6.4 格式化代码

image-20220715115338079

7 复合选择器

7.1 简介

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

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

7.2 后代选择器

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

  • 语法
1
元素1 元素2 { 样式声明 }

上述语法表示选择元素 1 里面的所有元素 2 (后代元素)。

  • 注意：
    • 元素1 和 元素2 中间用空格隔开
    • 元素1 是父级，元素2 是子级，最终选择的是元素2
    • 元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可
    • 元素1 和 元素2 可以是任意基础选择器

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 选择ol下的li */
    ol li {
      color: pink;
    }
    ol li a {
      color: red;
    }
    .nav li {
      color: blue;
    }
    .nav li a {
      color: green;
    }
  </style>
</head>
<body>
  <ol>
    <li>我是ol的孩子</li>
    <li>我是ol的孩子</li>
    <li>我是ol的孩子</li>
    <li><a href="#">我是孙子</a></li>
  </ol>
  <ul class="nav">
    <li>我是ul的孩子</li>
    <li>我是ul的孩子</li>
    <li>我是ul的孩子</li>
    <li><a href="#">我是孙子</a></li>
  </ul>
</body>
</html>

7.3 子选择器

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

  • 语法：
1
元素1 > 元素2 { 样式声明 }

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

  • 注意：
    • 元素1 和 元素2 中间用 大于号 隔开
    • 元素1 是父级，元素2 是子级，最终选择的是元素2
    • 元素2 必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他 亲儿子选择器

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .nav > a {
      color: red;
    }
  </style>
</head>
<body>
  <div class="nav">
    <a href="#">我是儿子</a>
    <p>
      <a href="#">我是孙子</a>
    </p>
  </div>
</body>
</html>

image-20220718163838911

7.4 并集选择器

并集选择器可以选择多组标签, 同时为他们定义相同的样式。通常用于集体声明.

并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

  • 语法
1
元素1,元素2 { 样式声明 }

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

  • 注意：
    • 元素1 和 元素2 中间用逗号隔开
    • 逗号可以理解为和的意思
    • 并集选择器通常用于集体声明

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 并集选择器一般竖着写 */
    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>

image-20220718164340367

7.5 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。

因为伪类选择器很多，比如有链接伪类、结构伪类等，所以这里先给大家讲解常用的链接伪类选择器。

7.5.1 链接伪类选择器

  • 为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。
  • 记忆法：love hate
  • 因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
1
2
3
4
a:link /* 选择所有未被访问的链接 */
a:visited /* 选择所有已被访问的链接 */
a:hover /* 选择鼠标指针位于其上的链接 */
a:active /* 选择活动链接（鼠标按下未弹起的链接） */

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    /* 选出未访问的链接 */
    a:link {
      color: #333;
      text-decoration: none;
    }
    /* 选出访问过的链接 */
    a:visited {
      color: orange;
    }
    /* 选择鼠标指针位于其上的链接 */
    a:hover {
      color: skyblue;
    }
    /* 选择活动链接 */
    a:active {
      color: green;
    }
  </style>
</head>
<body>
  <a href="#">小猪佩奇</a>
</body>
</html>

7.5.2 :focus 伪类选择器

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

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

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    input:focus {
      background-color: pink;
    }
  </style>
</head>
<body>
  <input type="text">
  <input type="text">
  <input type="text">
</body>
</html>

image-20220718165713865

8 元素显示模式

8.1 概念

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

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

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

8.2 块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中 <div> 标签是最典型的块元素。

  • 特点：

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

  • 注意：

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

8.3 行内元素

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

  • 特点：

    • 相邻行内元素在一行上，一行可以显示多个。
    • 高、宽直接设置是无效的。
    • 默认宽度就是它本身内容的宽度。
    • 行内元素只能容纳文本或其他行内元素（除了a标签）。

  • 注意：

    • 链接里面不能再放链接
    • 特殊情况：链接 <a> 里面可以放块级元素，但是给 <a>转换一下块级模式最安全

8.4 行内块元素

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

  • 特点：
    • 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
    • 默认宽度就是它本身内容的宽度（行内元素特点）。
    • 高度，行高、外边距以及内边距都可以控制（块级元素特点）。

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    input {
      width: 240px;
      height: 120px;
    }
  </style>
</head>
<body>
  <input type="text">
  <input type="text">
</body>
</html>

image-20220718171337223

8.5 元素显示模式转换

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

  • 使用display转换元素显示模式：

    • 转换为块元素：display:block;

    • 转换为行内元素：display:inline;

    • 转换为行内块：display: inline-block;

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    a {
      width: 150px;
      height: 50px;
      background-color: pink;
      /* 转换成块元素 */
      display: block;
    }
    div {
      /* 此时高宽的设置无效 */
      width: 300px;
      height: 100px;
      background-color: purple;
      /* 转换成行内元素 */
      display: inline;
    }
  </style>
</head>
<body>
  <a href="#">一个链接</a>
  <a href="#">一个链接</a>
  <div>我是块级元素</div>
  <div>我是块级元素</div>
</body>
</html>

image-20220718171949527

小案例——简单的侧边栏实现

案例的核心思路分为两步:

  1. 把链接a 转换为块级元素, 这样链接就可以单独占一行,并且有宽度和高度.
  2. 鼠标经过a 给 链接设置背景颜色
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    a {
      width: 230px;
      height: 40px;
      background-color: #55585a;
      display: block;
      font-size: 14px;
      color: white;
      text-decoration: none;
      text-indent: 2em;
      /* 让行高等于盒子高度，实现文字垂直居中 */
      line-height: 40px;
    }

    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>

image-20220718173149708

单行文字垂直居中的原理

image-20220718173213530

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

9 背景

通过 CSS 背景属性，可以给页面元素添加背景样式。

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

9.1 背景颜色

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

1
background-color:颜色值;

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

9.2 背景图片

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

1
background-image : none | url (url)

image-20220718173619166

注意：背景图片后面的地址，千万不要忘记加 URL， 同时里面的路径不要加引号。

9.3 背景平铺

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

1
background-repeat: repeat | no-repeat | repeat-x | repeat-y

image-20220718173652891

9.4 背景图片位置

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

1
background-position: x y;

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

image-20220718173729100

  • 参数是方位名词

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

  • 参数是精确单位

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

  • 参数是混合单位

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

9.5 背景图像固定

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。后期可以制作视差滚动的效果。

1
background-attachment : scroll | fixed

image-20220718173924838

9.6 复合写法

为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性 background 中。从而节约代码量.

当使用简写属性时，没有特定的书写顺序,一般习惯约定顺序为：

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

1
background: transparent url(image.jpg) repeat-y fixed top ;

9.7 综合案例

导航栏：

image-20220718174037436

  • 链接属于行内元素, 但是此时需要宽度高度,因此需要模式转换.
  • 里面文字需要水平居中和垂直居中. 因此需要单行文字垂直居中的代码.
  • 链接里面需要设置背景图片.因此需要用到背景的相关属性设置.
  • 鼠标经过变化背景图片,因此需要用到链接伪类选择器.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .nav a {
      display: inline-block;
      width: 120px;
      height: 58px;
      background-color: red;
      text-align: center;
      line-height: 48px;
      text-decoration: none;
      color: white;
    }

    .nav .bg1 {
      background: url(./imgs/bg1.png) no-repeat;
    }

    .nav .bg1:hover {
      background-image: url(./imgs/bg11.png);
    }

    .nav .bg2 {
      background: url(./imgs/bg2.png) no-repeat;
    }

    .nav .bg2:hover {
      background-image: url(./imgs/bg22.png);
    }
  </style>
</head>
<body>
  <div class="nav">
    <a href="#" class="bg1">五彩导航</a>
    <a href="#" class="bg2">五彩导航</a>
  </div>
</body>
</html>

10 三大特性

CSS 有三个非常重要的三个特性：层叠性、继承性、优先级。

10.1 层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。

  • 层叠性原则：
    • 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
    • 样式不冲突，不会层叠
    • CSS 层叠性口诀：长江后浪推前浪，前浪死在沙滩上。

image-20220718191539022

10.2 继承性

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

  • 恰当地使用继承可以简化代码，降低 CSS 样式的复杂性
  • 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

image-20220718191725209

行高的继承性

1
2
3
body {
 font:12px/1.5 Microsoft YaHei; 
}
  • 行高可以跟单位也可以不跟单位
  • 如果子元素没有设置行高，则会继承父元素的行高为 1.5
  • 此时子元素的行高是：当前子元素的文字大小 * 1.5
  • body 行高 1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

10.3 优先级

当同一个元素指定多个选择器，就会有优先级的产生。

  • 选择器相同，则执行层叠性
  • 选择器不同，则根据选择器权重执行。选择器权重如下表所示：

image-20220718192551562

1
2
3
div {
    color: pink!important; /* 最高优先级 */
}

  • 注意：

    • 权重是有4组数字组成,但是不会有进位。
    • 可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推..
    • 等级判断从左向右，如果某一位数值相同，则判断下一位数值。
    • 可以简单记忆法: 通配符和继承权重为0, 标签选择器为1,类(伪类)选择器为 10, id选择器 100, 行内样式表为1000, !important 无穷大.
    • 继承的权重是0， 如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0。

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

    • 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

11 盒子模型

页面布局要学习三大核心, 盒子模型, 浮动 和 定位. 学习好盒子模型能非常好的帮助我们布局页面.

11.1 本质

  • 网页布局过程：

    • 先准备好相关的网页元素，网页元素基本都是盒子 Box 。
    • 利用 CSS 设置好盒子样式，然后摆放到相应位置。
    • 往盒子里面装内容.

  • 网页布局的核心本质： 就是利用 CSS 摆盒子。

11.2 组成

盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 实际内容。

image-20220718193814515

11.3 边框

border可以设置元素的边框。边框有三部分组成:边框宽度(粗细) 边框样式 边框颜色。

  • 语法：
1
border : border-width || border-style || border-color

image-20220718193924441

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div {
      width: 300px;
      height: 200px;
      border-width: 5px;
      border-style: solid;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

边框会额外增加盒子的实际大小。因此我们有两种方案解决:

  • 测量盒子大小的时候,不量边框
  • 如果测量的时候包含了边框,则需要 width/height 减去边框宽度

11.4 内边距

padding 属性用于设置内边距，即边框与内容之间的距离。

image-20220725101732501

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    div {
      width: 200px;
      height: 200px;
      background-color: pink;
      padding-left: 20px;
      padding-top: 30px;
    }
  </style>
</head>
<body>
  <div>
    盒子内容是content盒子内容是content盒子内容是content盒子内容是content
  </div>
</body>
</html>

当我们给盒子指定 padding 值之后，发生了 2 件事情：

  1. 内容和边框有了距离，添加了内边距。
  2. padding影响了盒子实际大小。

也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

1
2
3
4
5
6
div {
    width: 200px;
    height: 200px;
    background-color: pink;
    padding-left: 40px;
}
  • 未添加padding之前的盒子大小：

image-20220725102724165

  • 添加内边距之后的盒子大小：

image-20220725102851278

如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

案例：新浪导航栏

相关取值:

  1. 上边框为3像素, 颜色为 #ff8500
  2. 下边框为1像素 颜色为 #edeef0
  3. 盒子高度为 41像素, 背景颜色为 #fcfcfc
  4. 文字颜色为 #4c4c4c

代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .nav {
      height: 41px;
      border-top: 3px solid #ff8500;
      border-bottom: 1px solid #edeef0;
      background-color: #fcfcfcfc;
      line-height: 41px;
    }
    .nav a {
      /* height: 41px; */
      padding: 0 20px;
      font-size: 12px;
      color: #4c4c4c;
      text-decoration: none;
      display: inline-block;
    }
    .nav a:hover {
      background-color: #eee;
      color: #ff8500;
    }
  </style>
</head>
<body>
  <div class="nav">
    <a href="#">新浪导航</a>
    <a href="#">手机新浪网</a>
    <a href="#">移动客户端</a>
    <a href="#">微博</a>
    <a href="#">三个字</a>
  </div>
</body>
</html>

image-20220725105440690

  • 如果盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。

11.5 外边距

margin 属性用于设置外边距，即控制盒子和盒子之间的距离。