CSS3学习笔记1-选择器和新增属性

2022-09-14 08:23:51

前言：之前自学了一些关于CSS3的知识，在学习过程中也遇到过坑，不过总算磕磕绊绊的学习完了关于CSS3的相关知识，于是最近把之前的笔记和代码整理了一下，也算是一个对CSS3知识的回顾复习吧，也希望能够对想学这方面知识的小白有所帮助。因为是各种渠道找的资料，学习的不算系统，所以知识点涵盖的不甚全面，望各位看官不吝指正批评。

CSS3简介

CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性，弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。

css3现状

浏览器支持程度差，需要添加私有前缀
移动端支持优于PC端
不断改进中
应用相对广泛

CSS3新增选择器

1.属性选择器新增

E[属性名^=值]：从头去匹配这个‘属性 = 对应值’的E元素
E[属性名$=值]：从尾去匹配这个‘属性 = 对应值’的E元素
E[属性名*=值]：从任意位置去匹配这个‘属性 = 对应值’的E元素
E[属性名|=值]：匹配具备该属性的元素，并且属性值以对应值开头并紧接着“-”，如果该属性的属性值仅有匹配值，也能匹配到。

2.伪类选择器

E：first-child 找到第一个孩子为E的元素
E：last-child 找到最后一个孩子为E的元素
E：nth-child（N）找到第N个孩子为E的元素，N以1开始
E：nth-child（odd）匹配奇数的孩子为E的元素
E：nth-child（even）匹配偶数的孩子为E的元素
E：nth-child（3n+1）匹配第3n+1个孩子为E的元素，n从0开始

:nth-of-type使用方法与:nth-child类似。

3.其他选择器

input:focus{} => 选择获取焦点的表单
Input:checked{} => 选择被选中的checkbox表单
input:enabled{} => 选择可操控的表单元素
input:disabled{} => 选择不可操控的表单
E:target{} => 选择通过锚点跳转的当前E元素
E:empty{} => 选择没有子节点的E元素包括文本节点（基本不用）

伪元素before after

作用：渲染一个虚拟的标签插入到当前元素的内部前面或后面

总结：

伪元素默认是行内元素，我们可以进行转换，在实践中，我们常用来模拟装饰标签
伪元素是虚拟的，不能通过js去获取，但可以用类样式进行覆盖
清除浮动的底层原理，就是通过伪元素去清除浮动，节约DOM内存
content不能省略，即便里面没有内容
当伪类需要配合iconfont去使用的话需要打开iconfont.css 拿到content里面对应的值
当伪元素需要hover的效果的时候不能直接hover 需要借助于父级写法：父级：hover：伪元素

圆角 border-radius

实现元素的圆角化，使用方式与border、padding和margin类似，可以合写，也可以单独设置。

一个值设置的是盒子的四个角的水平和垂直半径
每个角都可以单独进行设置其取值顺序是左上右上右下左下顺时针设置
可以简写简写的逻辑跟padding和margin一样
单位支持像素，和百分比（参照的是宽度和高度）
可以用水平半径/垂直半径去单独控制半径并且每一个半径都可以单独控制

<!DOCTYPE html>

<html lang="zh-cmn-Hans">

<head>

<meta charset="utf-8" />

<title>dcocument</title>

<style>

ul{margin:0;padding:0;}

li{list-style:none;margin:10px 0 0 0;padding:10px;background:#bbb;}

.test .one{border-radius:10px;}

.test .two{border-radius:10px 20px;}

.test .three{border-radius:10px 20px 30px;}

.test .four{border-radius:10px 20px 30px 40px;}

.test2 .one{border-radius:10px/5px;}

.test2 .two{border-radius:10px 20px/5px 10px;}

.test2 .three{border-radius:10px 20px 30px/5px 10px 15px;}

.test2 .four{border-radius:10px 20px 30px 40px/5px 10px 15px 20px;}

</style>

</head>

<body>

<h2>水平与垂直半径相同时：</h2>

<ul class="test">

    <li class="one">提供1个参数<br />border-radius:10px;</li>

    <li class="two">提供2个参数<br />border-radius:10px 20px;</li>

    <li class="three">提供3个参数<br />border-radius:10px 20px 30px;</li>

    <li class="four">提供4个参数<br />border-radius:10px 20px 30px 40px;</li>

</ul>

<h2>水平与垂直半径不同时：</h2>

<ul class="test2">

    <li class="one">提供1个参数<br />border-radius:10px/5px;</li>

    <li class="two">提供2个参数<br />border-radius:10px 20px/5px 10px;</li>

    <li class="three">提供3个参数<br />border-radius:10px 20px 30px/5px 10px 15px;</li>

    <li class="four">提供4个参数<br />border-radius:10px 20px 30px 40px/5px 10px 15px 20px;</li>

</ul>

</body>

</html>

阴影box-shadow

语法 box-shadow：水平偏移垂直偏移模糊大小阴影大小颜色阴影

第一个值：Npx 阴影向水平方向偏移N个像素正数往右负数往左
第二个值：Npx 阴影向垂直方向偏移N个像素正数往下负数往上
第三个值：px 模糊大小
第四个值：px 阴影尺寸
第五个值：颜色默认值是黑色
第六个参数：内外阴影默认是外阴影内阴影是inset
阴影可以写多个，中间用逗号隔开
阴影可以简写，但是需要注意有一些值需要补0

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        div{

            width: 200px;

            height: 200px;

            background-color: green;

            margin: 10px auto;

        }

        /* 第一个值 ：Npx  阴影向水平方向偏移N个像素  正数往右 负数往左 */

        div:nth-child(1){

            box-shadow: -10px 0;

        }

        /* 第二个值 ：Npx  阴影向垂直方向偏移N个像素  正数往下 负数往上 */

        div:nth-child(2){

            box-shadow: 0px -10px;

        }

        div:nth-child(3){

            box-shadow: 10px 10px;

        }

        /* 第三个值 ：羽化大小 （模糊的大小） */

        div:nth-child(4){

            box-shadow: 10px 10px 50px;

        }

        /* 第四个值 ：阴影尺寸 */

        div:nth-child(5){

            box-shadow: 0px 0px 10px 5px;

        }

        /* 第五个值 ：颜色 默认值是黑色 */

        div:nth-child(6){

            box-shadow: 0px 0px 10px 5px rgba(100,100,100,0.5);

        }

        /* 第六个值 内外阴影 默认是外阴影 内阴影是inset */

        div:nth-child(7){

            box-shadow: 0px 0px 10px 5px red inset;

        }

        /* 阴影可以写多组 用逗号隔开*/

        div:nth-child(8){

            box-shadow: 0px 0px 10px 5px red inset,5px 5px 5px 5px pink,10px 10px 5px 5px blue;

        }

        div:nth-child(9){

            box-shadow: 5px 5px red;

        }

    </style>

</head>

<body>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

</body>

</html>

边框图片border-image（了解，有兼容性问题，同时效果难做）

以九宫格的方式来切割图片，然后把每部分图片平铺作为边框。

值说明：

border-image-source:url('border.png'); 图片路径
border-image-slice:26;图片切割，不要带单位，遵从九宫格式切图法（上下左右各来一刀）
border-image-repeat:round或者stretch或者repeat; round没有瑕疵，stretch默认拉伸，repeat 平铺（可能有瑕疵）
简写：border-image:url('border.png') 26 round;

背景图片系列（重点）

1.背景图片的基准点

background-origin：值

border-box:忽略边框直接从边框的起始 0 ，0点平铺
padding-box:默认值，忽略padding 直接从padding的起始 0 ，0点平铺
content-box:从内容部分开始平铺跟padding有关系

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .box{

            width: 800px;

            height: 800px;

            border: 10px dashed #000;

            background:  url(image/heihei.jpg) 0 0 no-repeat;

             /* padding-box  默认取值，从padding的起始点开始平铺 padding的大小不会产生影响*/

            /*  border-box 从border的起始点开始平铺 border的大小不会产生影响 */

            /* content-box 从内容的起始点开始平铺，会留出padding的位置 */

            background-origin: content-box;

            padding: 20px;

        }

    </style>

</head>

<body>

    <div class="box"></div>

</body>

</html>

2.多重背景

背景图片之间用逗号隔开，可以写多组，最先渲染的图片有可能会遮住后面渲染的图片

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .box{

            width: 800px;

            height: 800px;

            border: 10px dashed #000;

            background:  url(image/heihei.jpg) 0 0 no-repeat,url(image/hehe.png) right bottom no-repeat,url(image/11051156_1536_864.jpg) no-repeat;

        }

    </style>

</head>

<body>

    <div class="box"></div>

</body>

</html>

3.背景大小

background-size:值

当只有一个值的情况下，宽度实现拉伸，并且高度会保持等比例，可以支持px，也可以支持百分比，百分比参照的是这个盒子本身的宽度
当有两个值的情况下，宽度和高度会分别拉伸到对应的值，可能会变形，可以支持px，也可以支持百分比，百分比参照的是这个盒子本身的宽度
contain 当图片的宽度或者是高度在缩放的时候有一个“碰到”了盒子的边缘，则停止变化，（宽度或高度满足一个即可）
在contain的基础上保证不留白，这就是cover的效果（宽度和高度都需要满足）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .box{

            width: 800px;

            height: 800px;

            border: 10px dashed #000;

            background:  url(image/Aatrox_1.jpg) 0 0 no-repeat;

            /* 一个值的情况下，宽度会进行拉伸，高度会保持等比例 */

            /* 两个值的情况下，宽度和高度都会拉伸，可能会产生变形 */

            /* 可以接受百分比  百分比参照的是盒子的宽和高 */

            /* contain 当图片的宽度或者是高度有一个达到了最大值，整体停止缩放 可能会带来留白呀*/

            /* cover 在contain的基础上，保持不留白，继续放大，知道另外一个边也得到最大值 */

            background-size:cover;

            /* 预告： background-size会在自适应页面里面用到，在全屏轮播图里面用到 */

        }

    </style>

</head>

<body>

    <div class="box"></div>

</body>

</html>

盒子内减box-sizing

之前我们的盒子的实际宽度是实际宽度 = width + padding + border，而内减属性会自动帮我们减去padding和border值，所以用了内减的盒子实际宽度就等于width，至于padding和border的值会自动被width内减掉。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        div{

            width: 200px;

            height: 200px;

            background-color: yellowgreen;

            margin: 10px auto;

        }

        div:nth-child(2){

            padding: 10px;

        }

        div:nth-child(3){

            padding: 10px;

            border: 10px solid hotpink;

        }

        div:nth-child(4){

            padding: 10px;

            border: 10px solid hotpink;

            box-sizing: border-box;

        }

    </style>

</head>

<body>

    <!-- 一个盒子真正的实际宽度包括 Border + padding + width

        在css3中，可以借助于border-sizing去实现盒子自动内减，有两个值

        broder-box

        content-box

        broder-box 内减掉边框和padding

        content-box 是默认值 该是多少就是多少

    -->

    <div>1</div>

    <div>2</div>

    <div>3</div>

    <div>4</div>

</body>

</html>

渐变

1.线性渐变

background:-webkit-linear-gradient(起始位置,颜色一位置,颜色二位置 ,颜色三位置);

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .box{

            width: 300px;

            height: 300px;

            border: 1px solid #000;

            margin: 10px auto;

            /* 线性渐变

                语法：background:linear-gradient(起始位置,颜色一 位置,颜色二 位置 ,颜色三 位置);

                （1）需要添加私有前缀

                （2）第一个参数，起始位置  可以接受方位名词 也可以是一个点

                    也可以是deg 角度  控制的是渐变线的角度 正值是逆时针，负值是顺时针

                （3）颜色 可以是任意颜色

            */

            background: -webkit-linear-gradient(45deg,red 20%,green 60%,blue);

        }

    </style>

</head>

<body>

    <div class="box"></div>

</body>

</html>

2.径向渐变

background:-webkit-radial-gradient(起始位置,颜色一位置,颜色二位置 ,颜色三位置);

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .box{

            width: 300px;

            height: 300px;

            border: 1px solid #000;

            margin: 10px auto;

            /* 径向渐变

                语法：background:radial-gradient(起始位置,颜色一 位置,颜色二 位置 ,颜色三 位置);

                （1）需要添加私有前缀

                （2）第一个参数，起始位置  可以接受方位名词 也可以是一个点

                    也可以是像素  不接受deg

                （3）颜色 可以是任意颜色

            */

            background: -webkit-radial-gradient(150px 150px,red 20%,green 60%,blue 10%);

        }

    </style>

</head>

<body>

    <div class="box"></div>

</body>

</html>

总结：

两种渐变的参数都是一样的，起始位置都接受方位名词
线性渐变的起始位置还能接受deg 角度径向渐变不能接受deg但是接受px
需要添加私有前缀
颜色位置的取值遵守递增的关系

私有前缀

作用：兼容低版本的一些高级浏览器，或者一些特定的css3属性需要添加私有前缀才起作用每一条css3属性合理来说都需要添加对应浏览器的前缀，以保证其兼容性

谷歌苹果：-webkit
火狐：-moz-
IE：-ms-
o：-o-

注意：在手机端，一般来说只需要写一个-webkit-（针对国内的绝大部分手机端）

添加的位置：大部分都是直接添加到最前面，css2没有的属性都是添加在最前面的，有一些是css2就有的属性是添加在后面的（例如：background：-webkit-linear-gradient（））

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        div{

            border-radius: 10px;

            -webkit-border-radius: 10px;

            -moz-border-radius: 10px;

            -ms-border-radius: 10px;

            -o-border-radius: 10px;

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

码农公寓