Web 三件套两万字带你入门 CSS

Posted 2022-04-12 吞吞吐吐大魔王

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web 三件套两万字带你入门 CSS相关的知识，希望对你有一定的参考价值。

文章目录

1. CSS 基本介绍
2. 选择器
3. 常用元素属性
4. 元素的显示模式
5. 盒模型
6. 弹性布局

1. CSS 基本介绍

1.1 认识 CSS

CSS（Cascading Style Sheets）：

CSS，即层叠样式表是一种用来表现 html（标准通用标记语言的一个应用）或 XML标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
样式定义如何显示 HTML 元素
样式通常存储在样式表中
多个样式定义可层叠为一个，即同一个元素可以应用多个样式，这些样式之间会产生叠加

1.2 CSS 基本语法规范

1.2.1 基本语法

选择器 
	一条/N条声明

选择器：绝对针对谁修改
声明：决定修改的内容
声明的属性是以键值对的形式写的，其中不同键值对之间以分号区号，每个键值对的键和值以冒号区分

内部样式示例：

<!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>test1</title>
    <style>
        p 
            /* 设置字体颜色 */
            color: green;
            /* 设置字体大小 */
            font-size: 30px;
        
    </style>
</head>
<body>
    <p>我绿了</p>
</body>
</html>

CSS 代码可以放到一个专门的 style 标签里面（内部样式），style 标签本身放到页面的任意位置，一般是放到 head 标签中
CSS 中的注释符是 /* */，可以使用快捷键 Ctrl + /
上述示例中，选择器为段落标签 p，声明的内容包含将字体颜色 color 设置为 green，将字体大小 font-size 设置为 30px

1.2.2 样式风格

紧凑风格
```
p  color: green; font-size: 30px;
```

展开风格（推荐）

p  
    color: green;
    font-size: 30px;

1.2.3 样式大小写

由于在 CSS 中不区分大小写，因此

在开发时，统一使用小写字母
属性名也是使用脊柱命名法，即一个属性若是由多个单词构成，中间用 - 隔开

1.2.4 空格规范

冒号后面带空格
选择器和符号之间带有空格

1.3 引入方式

1.3.1 内部样式

基本介绍： 将 CSS 代码放到一个专门的 style 标签里面，style 标签本身可以放到页面的任意位置，一般是放到 head 标签中

示例代码：

<!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>test1</title>
    <style>
        p 
            /* 设置字体颜色 */
            color: green;
            /* 设置字体大小 */
            font-size: 30px;
        
    </style>
</head>
<body>
    <p>我绿了</p>
</body>
</html>

优点： 内部样式能够实现样式和页面结构分离

缺点： 样式和页面结构分离的不够彻底，尤其是 CSS 内容较多时

1.3.2 行内样式

基本介绍： 将 CSS 代码以 style 属性的方式写到标签中

示例代码：

<!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>test1</title>
</head>
<body>
    <p style="color: green ;font-size: 30px">我绿了</p>
</body>
</html>

优点： 适合写简单的样式

缺点： 只针对某个标签生效，不能写太复杂的样式

注意： 行内样式的优先级较高，会覆盖其它样式

1.3.3 外部样式

基本介绍： 实际开发中最常用的方式，先创建一个 CSS 文件，再使用 link 标签引入 CSS

示例代码：

创建一个 CSS 文件（这里创建一个 style.css），里面写具体样式的内容
```
p 
    color: green;
    font-size: 30px;
```

在 HTML 文件中，通过 link 标签引入写好的 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>test1</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>我绿了</p>
</body>
</html>

link 标签中的 rel 属性值固定为 stylesheet
link 标签中的 href 属性值为 CSS 的路径

优点： 外部样式可以使样式和页面结构彻底分离

缺点：使用外部样式会受到浏览器缓存影响，修改之后不一定立刻生效

补充： 浏览器的缓存知识

浏览器的缓存是计算机中一种常见的提升性能的技术手段。网页依赖的资源（HTML/CSS/JS/图片/字体等）通常是从服务器上获取的，如果频繁访问该网站，那么这些外部资源就没必要反复从服务器获取，就可以使用缓存先存起来（即存到本地磁盘上），再次访问就可以直接从磁盘读取资源，从而提高访问效率。

可以通过 Ctrl + F5 强制刷新页面，使得浏览器重新获取 CSS 文件

2. 选择器

2.1 选择器的功能

CSS 选择器用于选中页面中指定的标签元素。就好比打游戏时，你要先选中攻击的敌人，之后才能给予对方你想造成的伤害。

2.2 选择器的种类

这里主要将选择器分成两大类，八小类来进行介绍

基础选择器：由单个选择器构成的
- 标签选择器
- 类选择器
- id 选择器
- 通配符选择器
复合选择器：将多种基础选择器结合起来使用
- 后代选择器
- 子选择器
- 并集选择器
- 伪类选择器

除了上述介绍的八种选择器，CSS 中还有很多其它的选择器，这里只具体介绍这八种常用的选择器

参考文档：https://www.w3school.com.cn/cssref/css_selectors.asp

2.3 基础选择器

2.3.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>test1</title>
    <style>
        p 
            color: green;
            font-size: 30px;
        
        div 
            color: red;
            font-size: 50px;
        
    </style>
</head>
<body>
    <p>我绿了</p>
    <div>我红了</div>
</body>
</html>

2.3.2 类选择器

基本介绍： 可以对标签设置一个或多个类 class 属性，然后选择器的对象可以为某个类名，选中后就能对所有属于该类的标签内容进行修改

语法细节：

标签中设置的 class 属性的值：不能使用纯数字、中文、标签名来命名
如果 class 属性的值过长，可以使用 - 分割
一个类可以被多个标签使用，一个标签也可以使用多个类（多个类名之间使用空格分割）
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>test1</title>
    <style>
        .red 
            color: red;
        
        .green 
            color: green;
        
        .font-size 
            font-size: 30px;
        
    </style>
</head>
<body>
    <p class="red">我红了</p>
    <p class="green">我绿了</p>
    <div class="red font-size">我红了</div>
</body>
</html>

2.3.3 id 选择器

基本介绍： 可以对每个标签设置一个 id 属性，然后选择器的对象可以为 id 名，选中后就能对是某个 id 的标签的内容进行修改

语法细节：

每个标签都只能设置一个 id 属性，且 id 属性值是唯一的
CSS 中使用 # 开头表示 id 选择器，# 后面是具体的 id 值

特点： 通过 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>test1</title>
    <style>
        #one 
            color: red;
        
        #two 
            color: green;
        
    </style>
</head>
<body>
    <p id="one">我红了</p>
    <p id="two">我绿了</p>
</body>
</html>

2.3.4 通配符选择器

基本介绍： 选择器的对象是 * 所表示的就是通配符选择器，它能够选取所有的标签。常用来清楚浏览器的默认样式

特点： 通配符选择器能让页面的所有标签都被修改

示例代码：

<!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>test1</title>
    <style>
        * 
            color: red;
        

    </style>
</head>
<body>
    <p>我红了</p>
    <div>我也红了</p>
    <p>我们都红了</p>
</body>
</html>

2.3.5 基础选择器小结

选择器	作用	特点	优先级
标签选择器	能够选出所有相同的标签	不能差异化选择	较低
类选择器	能够选出一个或多个同类标签	根据需求选择，最灵活，最常用	较高
id 选择器	能够选出某个唯一 id 的标签	同一个 id 在一个 HTML 中只能出现一次	最高
通配符选择器	能够选出所有标签	特殊清空使用（如清楚浏览器的默认样式）	最低

由于选择器可以组合使用，因此在基础选择器中有一个优先级（即对元素的针对性，针对性越强，优先级就越高），组合的基础选择器会按照优先级更高的显示修改的内容

不过由于 CSS 还有复合选择器，所以优先级其实是有一个复杂的计算规则的，这个要根据具体情况判断

2.4 复合选择器

2.4.1 后代选择器

基本介绍： 后代选择器的选择对象为某个父元素的某个子元素（包括孙子元素）

语法细节：

元素1 元素2 样式声明

元素1是父级，元素2是子级
元素1和元素2之间要使用空格分割
后代选择器只会影响元素2，不会影响元素1
后代选择器不仅仅可以是标签选择器的组合，还可以是类选择器或 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>test1</title>
    <style>
        ul li 
            color: red;
        
        .green li 
            color: green;
        
    </style>
</head>
<body>
    <ul>
        <li>弥豆子</li>
        <li>弥豆子</li>
        <li>弥豆子</li>
    </ul>
    <ol class="green">
        <li>善逸</li>
        <li>善逸</li>
        <li>善逸</li>
    </ol>
</body>
</html>

2.4.2 子选择器

基本介绍： 和后代选择器类似，选择器的对象为某个父元素的子元素，但是只能是子元素，不能是孙子元素

语法细节：

元素1>元素2 样式声明

元素1是父级，元素2是子级
元素1和元素2之间用 > 隔开
子选择器只选亲儿子，不选孙子元素

示例代码：

<!DOCTYPE html>
<html lang="en">以上是关于Web 三件套两万字带你入门 CSS的主要内容，如果未能解决你的问题，请参考以下文章 
 两万字带你认识黑客在kali中使用的工具
 狂肝两万字带你用pytorch搞深度学习！！！
 硬核两万字带你理解C++之多态
 Web 三件套JavaScript 入门知识（超多动图超详解）
 Web 三件套JavaScript 入门知识（超多动图超详解）
 万字带你入门 ZooKeeper