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

最新推荐文章于 2024-06-14 15:02:13 发布

m0_67402731

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量142

点赞数

分类专栏：前端 html 文章标签： javascript css css3

本文链接：https://blog.csdn.net/m0_67402731/article/details/123304847

版权

文章目录

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 中使用点号 . 开头表示类选择器，点好 . 后面是具体的类名

特点： 可以差异化表示不同的标签，可以让多个标签使用同一个样式

示例代码：

最低0.47元/天解锁文章

m0_67402731

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Web 三件套】两万字带你入门 CSS

文章目录1. CSS 基本介绍1.1 认识 CSS1.2 CSS 基本语法规范1.2.1 基本语法1.2.2 样式风格1.2.3 样式大小写1.2.4 空格规范1.3 引入方式1.3.1 内部样式1.3.2 行内样式1.3.3 外部样式2. 选择器2.1 选择器的功能2.2 选择器的种类2.3 基础选择器2.3.1 标签选择器2.3.2 类选择器2.3.3 id 选择器2.3.4 通配符选择器2.3.5 基础选择器小结2.4 复
复制链接

扫一扫