【CSS3系列】第一章 · CSS3新增的三种基本属性

news2024/12/23 15:08:24

写在前面

Hello大家好，我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正！谢谢大家！！！

如果小哥哥小姐姐们对我的文章感兴趣，请不要吝啬你们的小手，多多点赞加关注呀！❤❤❤ 爱你们！！！

写在前面

1. CSS3 简介

1.1 CSS3 概述

1.2 CSS3私有前缀

2. CSS3新增的3个基本属性

2.1 CSS3 新增长度单位

2.2 CSS3 新增颜色设置方式

2.3 CSS3 新增选择器

结语

【其他系列】

【HTML5系列】

【HTML4系列】

【CSS2系列】

【Java基础系列】

1. CSS3 简介

1.1 CSS3 概述

CSS3 是 CSS2 的升级版本，它在 CSS2 的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题。
CSS3 在未来会按照模块化的方式去发展：
https://www.w3.org/Style/CSS/current-work.html
CSS3 的新特性如下：
新增了更加实用的选择器，例如：动态伪类选择器、目标伪类选择器、伪元素选择器等等。
新增了更好的视觉效果，例如：圆角、阴影、渐变等。
新增了丰富的背景效果，例如：支持多个背景图片，同时新增了若干个背景相关的属性。
新增了全新的布局方案 —— 弹性盒子。
新增了 Web 字体，可以显示用户电脑上没有安装的字体。
增强了颜色，例如： HSL 、 HSLA 、 RGBA 几种新的颜色模式，新增 opacity 属性来控制透明度。
增加了 2D 和 3D 变换，例如：旋转、扭曲、缩放、位移等。
增加动画与过渡效果，让效果的变换更具流线性、平滑性。

1.2 CSS3私有前缀

什么是私有前缀

如下代码中的 -webkit- 就是私有前缀
div {
    width:400px;
    height:400px;
    -webkit-border-radius: 20px;
}
为什么要有私有前缀

W3C 标准所提出的某个 CSS 特性，在被浏览器正式支持之前，浏览器厂商会根据浏览器的内核，使用私有前缀来测试该 CSS 特性，在浏览器正式支持该 CSS 特性后，就不需要私有前缀了。
举个例子：
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
查询 CSS3 兼容性的网站：https://caniuse.com/

常见浏览器私有前缀

Chrome 浏览器： -webkit-
Safari 浏览器： -webkit-
Firefox 浏览器： -moz-
Edge 浏览器： -webkit-
旧 Opera 浏览器： -o-
旧 IE 浏览器： -ms-

注意：

我们在编码时，不用过于关注浏览器私有前缀，不用绞尽脑汁的去记忆，也不用每个都去查询，因为常用的 CSS3 新特性，主流浏览器都是支持的，即便是为了老浏览器而加前缀，我们也可以借助现代的构建工具，去帮我们添加私有前缀。

2. CSS3新增的3个基本属性

2.1 CSS3 新增长度单位

rem 根元素字体大小的倍数，只与根元素字体大小有关。
vw 视口宽度的百分之多少 10vw 就是视口宽度的 10% 。
vh 视口高度的百分之多少 10vh 就是视口高度的 10% 。
vmax 视口宽高中大的那个的百分之多少。（了解即可）
vmin 视口宽高中小的那个的百分之多少。（了解即可）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>新增长度单位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box1 {
            width: 200px;
            height: 200px;
            background-color: deepskyblue;
        }
        .box2 {
            width: 20vw;
            height: 20vh;
            background-color: green;
        }
        .box3 {
            width: 20vmax;
            height: 20vmin;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box1">像素</div>
    <div class="box2">vw和vh</div>
    <div class="box3">vmax</div>
</body>
</html>
2.2 CSS3 新增颜色设置方式

CSS3 新增了三种颜色设置方式，分别是： rgba 、 hsl 、 hsla
这些在 CSS2 中已经详细讲解：
地址：https://blog.csdn.net/qq_34025246/article/details/129918059

2.3 CSS3 新增选择器

CSS3 新增的选择器有：动态伪类、目标伪类、语言伪类、 UI 伪类、结构伪类、否定伪类、伪元素；
这些在 CSS2 中已经详细讲解：
地址：https://blog.csdn.net/qq_34025246/article/details/129903322