这是我参与「第四届青训营」笔记创作活动的第10天。

前言

css是前端的重中之重，是影响你页面美观的最大因素，如果你css没有掌握，那么页面的布局和排版将是一塌糊涂。这节课带大家入门css，希望给大家有所帮助。

什么是css

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

css基本结构

css的四种引入方式

1、行内式： 是在标记的style属性中设定css样式。这种方式没有体现出css的优势，不推荐使用

2、嵌入式： 嵌入式是将css样式集中写在网页的标签对的标签对中

3、链接式： 将一个.css文件引入到HTML文件中（推荐）

4、导入式： 将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，标记也是写在标记中

此种方法有缺点，浏览器会先加载html页面，然后加载css样式，所以网速较慢或者网页较大，客户端会出现先出现网页，最后出现样式\

CSS选择器

1、类选择器

（1）语法： .类名｛样式属性：值；｝

（2）元素使用class="类名"来使用这个样式

2、id选择器

（1）语法： #id名｛样式属性：值；｝

（2）元素使用id="id名"来使用这个样式

3、标签选择器

（1）语法：标签名｛样式属性：值；｝

（2）页面中所有的该标签都是这个样式

4、通用选择器

（1）语法： *｛样式属性：值；｝

（2）页面中所有的元素都是这个样式

基础选择器

选择器就是根据不同的需求把不同的标签选出来，选择器就是选择标签用的。

选择器分为 基础选择器 和 复合选择器 两个大类。

标签选择器

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

作用：

标签选择器可以把某一类标签全部选择出来，比如所有的 <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>

html xml复制代码

类选择器

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

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

<div class="red">变红色</div>

html xml复制代码

注意：

类选择器使用 .（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）
可以理解为给这个标签起了一个别名来表示
长名称或词组可以使用中横线 - 来为类命名
不能使用已有的关键字作为类名
不要使用纯数字、中文等命名，尽量使用英文字母来表示
命名要有意义，尽量使别人一眼就知道这个类名的目的（可读性第一，长度第二，推荐使用英语，如果是使用拼音请使用全拼）
命名规范：见附件（CSS 命名规范.md）

记忆口诀：样式点定义，结构类调用，一个或多个，开发最常用。

<!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>

html xml复制代码

多类名

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

<!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>

html xml复制代码

多类名开发中使用场景

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

html xml复制代码

id选择器

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

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

注意：id 属性只能在每个 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>基础选择器之id选择器</title>
    <style type="text/css">
        /* id 选择器口诀：样式 # 定义，结构 id 调用，只能调用一次，别人切勿使用 */
        #pink {
            color: pink;
        }
    </style>
</head>

<body>
    <div id="pink">zhoujirui</div>
</body>

</html>

html xml复制代码

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

类选择器 (class) 可以重复,id 选择器不可重复（同一个 id 选择器只能调用一次）
类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用

通配符选择器

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

通配符选择器不需要调用，自动就给所有的元素使用样式
特殊情况才使用

// 利用通配符选择器清除所有的元素标签的内外边距
* {
    margin: 0;
    padding: 0;
}

总结

这是前端的基础，只有学好了css，才能更好的提升前端的技能。

以上就是我这节课的所学整理的笔记，如有问题可在评论区指出，感兴趣的话可以关注我。

本人水平有限，请见谅，谢谢浏览。

了解CSS ｜ 青训营笔记

前言