【前端｜CSS系列第1篇】CSS零基础入门之CSS的基本概念和选择器

在这里插入图片描述

欢迎来到CSS零基础入门系列的第一篇博客！在这个系列中，我们将一起学习CSS（层叠样式表）的基础知识，探索如何为网页添加样式和布局。本篇博客将重点介绍CSS的基本概念和选择器，帮助你理解CSS的核心概念。

1. 什么是CSS

CSS，即层叠样式表（Cascading Style Sheets），是一种用于控制网页样式和布局的标记语言。它与HTML结合使用，通过为HTML元素添加样式，可以改变元素的外观和布局。CSS使用选择器和属性来定义样式规则，让我们能够以一种简洁和灵活的方式控制网页的外观。

2. 为什么要使用CSS

使用CSS有以下几个重要的原因：

a. 分离样式和内容： 使用CSS可以将样式与内容分离，使得网页结构更清晰，易于维护。通过将样式定义在单独的CSS文件中，我们可以在不改变HTML结构的情况下修改样式，提高开发效率。

b. 统一风格和布局： CSS提供了一致的样式和布局规则，可以确保网站在不同浏览器和设备上呈现一致的外观。通过定义全局样式，我们可以轻松实现网站的整体风格和布局。

c. 提高可访问性： 使用CSS可以改善网站的可访问性。通过使用适当的标记和样式，我们可以使网站内容更易读，更易于导航，并提供更好的用户体验。

d. 增强用户体验： CSS提供了丰富的样式效果和交互特性，可以为用户提供更好的视觉体验。通过添加动画、过渡和响应式布局，我们可以使网站更具吸引力和互动性。

3. CSS的语法

CSS的基本语法由选择器和声明块组成。选择器用于选择要应用样式的HTML元素，而声明块则包含了一系列的样式声明。

以下是一个简单的CSS规则的示例：

h1 {
  color: blue;
  font-size: 24px;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-blU0U9gt-1687925268908)(/Users/adherezheng/mynote/note/csdn/css/assets/image-20230628103111628.png)]

在上面的示例中，h1是选择器，表示选择所有<h1>标签。大括号内的部分是声明块，其中包含两个样式声明，分别设置了文本颜色和字体大小。

4. 如何插入CSS

有多种方式可以将CSS样式应用到HTML文档中：

a. 内联样式： 可以在HTML元素的style属性中直接定义CSS样式。例如：

<h1 style="color: blue; font-size: 24px;">Hello, CSS!</h1>

b. 嵌入样式： 可以在HTML文档的<head>标签内使用<style>标签来嵌入CSS样式。例如：

<head>
  <style>
    h1 {
      color: blue;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <h1>Hello, CSS!</h1>
</body>

c. 外部样式表： 可以将CSS样式定义在外部的CSS文件中，并通过<link>标签将其引入到HTML文档中。例如：

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Hello, let's study CSS!</h1>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m9TbanXC-1687925268910)(/Users/adherezheng/mynote/note/csdn/css/assets/image-20230628111652108.png)]

5. CSS的基本概念

在使用CSS时，有一些基本概念需要了解：

a. 选择器： 选择器用于选择要应用样式的HTML元素。常见的选择器有元素选择器、类选择器、ID选择器、属性选择器等。

b. 属性和值： CSS样式规则由属性和对应的值组成。属性描述了要设置的样式特性，而值定义了属性的具体设置。

c. 盒模型： 盒模型是CSS中用于描述元素布局和尺寸的概念。它由内容区域、内边距、边框和外边距组成。

d. 流动性和定位： CSS提供了不同的布局方式，如流动布局、浮动布局和定位布局，可以控制元素在页面上的位置和排列方式。

6. CSS选择器

选择器是CSS中用于选择要应用样式的HTML元素的一种模式。常见的选择器包括：

a. 元素选择器： 通过HTML元素的标签名选择元素。例如，h1选择所有<h1>标签。

b. 类选择器： 通过元素的类名选择元素。类选择器以.开头，例如，.my-class选择所有具有my-class类的元素。

c. ID选择器： 通过元素的ID选择元素。ID选择器以#开头，例如，#my-id选择具有my-id ID的元素。

d. 属性选择器： 通过元素的属性选择元素。例如，[type="text"]选择所有type属性为text的元素。

还有许多其他类型的选择器，包括后代选择器、子元素选择器、相邻兄弟选择器等，它们提供了更多灵活的选择元素的方式。

7. CSS选择器的优先级

当多个CSS规则同时应用到同一个元素时，可能会出现冲突。为了解决这种冲突，CSS使用选择器的优先级来确定哪个规则将被应用。

选择器的优先级由四个部分组成，按重要性依次为：

a. 内联样式： 内联样式的优先级最高，即在HTML元素的style属性中直接指定的样式。

b. ID选择器： ID选择器具有较高的优先级，即通过元素的ID选择元素的样式。

使用自定义名称，以 # 作为前缀，然后通过HTML标签的id属性进行名称匹配

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p {
            color: red;
            font-size: 20px;
        }

        h2 {
            color: green;
        }

        .hello {
            background: purple;
        }

        .world {
            font-weight: bold;
        }

        #haha {
            color: blue;
        }
    </style>
</head>

<body>
    <p>hello world!</p>
    <h2>WEB前端开发</h2>
    <h3>Nodejs开发</h3>
    <hr>
    <p class="hello">welcome to css!</p>
    <div class="hello">程序员小豪</div>
    <div class="world">test</div>
    <hr>
    <h1 id="haha">23333</h1>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KwMFBCgR-1687925268910)(/Users/adherezheng/mynote/note/csdn/css/assets/image-20230628113426689.png)]

c. 类选择器、属性选择器和伪类选择器： 类选择器和属性选择器的优先级相同，它们较低于ID选择器。

伪类选择器根据不同的状态显示不同的样式，有四种类型：

:link 未访问的链接
:visited 已访问的链接
:hover 鼠标悬浮到连接上，即移动在连接上
:active 选定的链接，被激活

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

<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        a:link,
        a:visited {
            color: green;
            font-size: 13px;
            text-decoration: none;
        }

        a:hover,
        a:active {
            color: pink;
            text-decoration: underline;
        }

        /*普通的标签也可以使用伪类选择器*/
        p:hover {
            color: yellow;
        }

        p:active {
            color: red;
        }
    </style>
</head>

<body>
    <a href="1.html">go!CSS!</a>
    <p>CSS零基础入门</p>
</body>

</html>

在这里插入图片描述

d. 元素选择器、伪元素选择器和通用选择器： 元素选择器和通用选择器的优先级最低，它们适用于所有元素。

下面是常用的伪元素选择器：

:first-letter 为第一个字符的样式
:first-line 为第一行添加样式
:before 在元素内容的最前面添加的内容，需要配合content属性使用
:after 在元素内容的最后面添加的内容，需要配合content属性使用

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p:first-letter {
            color: blue;
            font-size: 30px;
        }

        p:first-line {
            background: green;
        }

        p:before {
            content: "额额";
        }

        p:after {
            content: "嗯嗯";
        }
    </style>
</head>

<body>
    <p>test test</p>
    <hr>
    <p>
        gogogogo <br>
        come on css!
    </p>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h52EzjEO-1687925268910)(/Users/adherezheng/mynote/note/csdn/css/assets/image-20230628115728816.png)]

e. !important： 可以使用!important使某个样式有最高的优先级

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style/world.css">

    <style>
        div {
            font-size: 20px;
        }

        .hello {
            font-weight: bold;
            color: black !important;
        }

        #world {
            text-decoration: underline;
            color: green;
        }

        p {
            color: red;
        }
    </style>
</head>

<body>
    <div class="hello" id="world" style="color:#4190f7">CSS零基础入门</div>
    <p>程序员小豪</p>
</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jXcGyojY-1687925268910)(/Users/adherezheng/mynote/note/csdn/css/assets/image-20230628113126102.png)]

通过合理使用选择器和避免过度使用内联样式，可以更好地控制样式的优先级。

CSS权重

这里先介绍一下负责选择器：

复合选择器（Compound Selector）：复合选择器是由多个简单选择器组合而成的选择器。它们通过在选择器之间没有空格或其他符号来组合。复合选择器可以用来选择同时满足多个条件的元素。
```
.container.main {
  /* 样式规则 */
}
```
在上面的例子中，.container.main是一个复合选择器，它同时选择具有container类和main类的元素。
组合选择器（Combinator Selector）：组合选择器通过使用不同的符号和空格来定义选择器之间的关系。组合选择器用于选择满足特定关系的元素。
- 后代选择器（Descendant Selector）：使用空格选择元素的后代。
```
.container .item {
  /* 样式规则 */
}
```
  上面的例子中，.container .item是后代选择器，它选择.container元素内的所有.item元素。
- 子元素选择器（Child Selector）：使用>选择直接子元素。
```
.container > .item {
  /* 样式规则 */
}
```
  这个选择器选择.container元素下作为直接子元素的所有.item元素。
- 相邻兄弟选择器（Adjacent Sibling Selector）：使用+选择紧接在另一个元素后的兄弟元素。
```
.sibling + .target {
  /* 样式规则 */
}
```
  这个选择器选择.target元素，它紧接在.sibling元素后面。
- 通用兄弟选择器（General Sibling Selector）：使用~选择与另一个元素具有相同父元素的兄弟元素。
```
.sibling ~ .target {
  /* 样式规则 */
}
```
  这个选择器选择.target元素，它与.sibling元素有相同的父元素，并且在.sibling元素之后。
嵌套选择器（Nested Selector）：嵌套选择器是一种将一个选择器嵌套在另一个选择器内部的方法，用于选择具有特定关系的元素。嵌套选择器使用较高的可读性和维护性，可以减少选择器的复杂性。
```
.container {
  /* 样式规则 */

  .item {
    /* 样式规则 */
  }
}
```