十二、css简介、浏览器兼容的前缀、css3新增选择器、css3新增属性、css3背景属性。

最新推荐文章于 2023-03-10 17:56:15 发布

小豆很优秀

最新推荐文章于 2023-03-10 17:56:15 发布

阅读量198

点赞数

分类专栏： HTML5 HTML的基本信息 css 文章标签： css html html5 css3

本文链接：https://blog.csdn.net/qq_52426181/article/details/110676283

版权

HTML5 同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

HTML的基本信息

14 篇文章 0 订阅

订阅专栏

css

11 篇文章 0 订阅

订阅专栏

一、css3简介

CSS3 是最新的 CSS 标准。

CSS3 模块：选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面

CSS3的优点：CSS3将完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。

渐进增强和优雅降级：

渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。

二、浏览器是否添加兼容前缀

vs code中的插件： autoprefixer

这个插件可以帮我们自己来判断是否需要添加兼容前缀，如果我们写的是标准属性，那么不会添加，如果写的属性需要添加，则会帮我们进行添加

在外部创建css文件，在css文件中书写代码，书写完成后f1----运行autoprefixer:run

三、css3新增选择器

1、属性选择器

css2中的属性选择器
- E[attr] 指定了属性名称，但没有指定属性值
- E[attr = value] 指定了属性名称，并且指定属性值
- E[attr ~= value] 指定了属性名称，并且属性值是词列表中的一个
css3中新增的属性选择器
- E[attr ^= “val”] 选择拥有attr属性且属性值为val开头的E元素
- E[attr $= “val”] 选择拥有attr属性且属性值以val结束的E元素
- E[attr *= “val”] 选择拥有attr属性且属性值中包含val的E元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 交集选择器： 满足选择器1的要求，还需要同时满足选择器2的要求才可以被选择出来 */
        /* div[class] {
            color: blueviolet;
        } */
        /* div[class="box"] {
            color: brown;
        } */
        /* <标签名 属性名="属性值"> */

        /* div[class~="box"] {
            color: cadetblue;
        } */
        /* 必须是div标签，指定了属性名称为class,并且属性值中得以box开头  */
        /* div[class^="box"] {
            color: yellow;
        } */
        /* 必须是div标签，指定了属性名称为class,并且属性值中得以box结尾  */
        /* div[class $= "box"] {
            color: pink;
        } */

        /* 必须是div标签，指定了属性名称为class,并且属性值中包含box就可以被选中  */
        div[class *= "box"] {
            color: green;
        }
    </style>
</head>
<body>
    <div class="box">box1</div>
    <div class="box2 box">box2</div>
    <div class="boxa">boxa</div>
    <div class="abox">abox</div>
    <div id="box">box3</div>
    <div class="boax">box4</div>
    <p class="box">p1</p>
</body>
</html>

属性选择器的特殊性（权重） 0，0，1，0

2、css3新增结构伪类选择器

复习链接伪类选择器

a:link {}                /*访问前*/
a:visited{}              /*访问后*/
a:hover{}                /*鼠标悬停时*/ 
a:active{}               /*鼠标按住不松手时*/

（1）：first-child

选择父元素中的第一个子元素E

E:first-child{}

（2）：last-child

选择父元素中的最后一个子元素E

E:last-child{}

（3）：nth-child(n)

选择父元素中的第n个子元素E

E:nth-child(n){}

n可以是数字
n可以是表达式
n可以是关键词 even | odd

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* ul :first-child {
            color: red;
        } */
        /* css选择器的渲染顺序是从右向左进行查找 */
        /* .list1 li:first-child {
            color: chocolate;
        } */
        /* 先找li的父元素中的最后一个孩子，然后匹配是不是li标签 */
        /* li:last-child {
            color: cornflowerblue;
        } */

        /* 先找li的父元素中的第5个孩子，在匹配一个看看是不是li标签，如果是那么就选中了 */
        /* li:nth-child(5) {
            color: crimson;
        } */
        /* li:nth-child(2n+1) {
            color: cyan;
        } */
        li:nth-child(odd) {
            color: darkgoldenrod;
        }
        li:nth-child(even) {
            color: yellow;
        }

    </style>
</head>
<body>
    <ul class="list1">
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
        <li>li5</li>
        <li>li6</li>
        <li>li7</li>
        <li>li8</li>
        <li>li9</li>
        <li>li10</li>
        <!-- <div>box</div> -->
    </ul>
    <!-- <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
        <li>li5</li>
        <li>li6</li>
        <li>li7</li>
        <li>li8</li>
        <li>li9</li>
        <li>li10</li>
    </ul> -->
    
</body>
</html>

（4）：nth-last-child(n)

选择父元素中倒数第n个子元素E

E:nth-last-child(n){}

n可以是数字，表达式，关键词

 /* 先找li的父元素，找父元素中的倒数第三个子元素，再匹配是不是li标签，是可以选中 */
/* li:nth-last-child(3) {
    color: darkgreen;
} */
/* li:nth-last-child(2n+1) {
    color: blue;
} */
li:nth-last-child(odd) {
    color:tomato;
}

（5）：nth-of-type(n)

匹配属于父元素的特定类型的第 n 个子元素

:nth-of-type(n){}

（6）：nth-last-of-type(n)

匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数

:nth-last-of-type(n) {}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li:nth-of-type(5) {
            color: red;
        }
        /* 标签选择器也叫做类型选择器，元素名称选择器 */
        /* class名称为box的父元素，将找到的父元素下方的所有标签按照类型（标签名）分组，再去找每个组里的第2个元素，再匹配是不是class名叫box */
        /* .box:nth-of-type(2) {
            color: yellow;
        } */
        /* class名称为box的父元素，将找到的父元素下方的所有标签按照类型（标签名）分组，找每个类型中的倒数第一个元素，再匹配是不是class名叫box */
        .box:nth-last-of-type(1) {
            color: tomato;
        }
    </style>
</head>
<body>
    <ul class="list1">
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
        <li>li5</li>
        <li>li6</li>
        <li>li7</li>
        <li>li8</li>
        <li>li9</li>
        <li>li10</li>
    </ul>
    <div class="wrap">
        <p class="box">p1</p>
        <div class="box">div1</div>
        <p class="box">p2</p>
        <p class="box">p3</p>
        <div class="box">div2</div>
        <div class="box">div3</div>
        <span class="box">span1</span>
        <span class="box">span2</span>
    </div>
   
    
</body>
</html>

3、css3中新增的状态伪类选择器

（1）：enabled

匹配用户界面上处于可用状态的元素

E:enabled {}

（2）：disabled

匹配用户界面上处于禁用状态的元素

E:disabled {}

（3）：checked

匹配用户界面上处于选中状态的元素

E:checked {}

 input[type="text"]:enabled {

   background-color: tomato;

  }

  input:disabled {

    background-color: yellow;

  }

  input[type="radio"]:checked + span{

    background-color: tomato;

   }

伪类选择器的特殊性（权重）：0，0，1，0

伪元素选择器的特殊性（权重）: 0，0，0，1

四、css3新增属性

1、border-radius属性

设置圆角

兼容性： ie9+及标准浏览器最新版下是支持的

2、box-shadow属性

设置盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow 设置水平方向的阴影位置
v-shadow 设置垂直方向的阴影位置
blur 设置模糊距离（羽化值）
spread 设置阴影大小
color 设置阴影颜色
inset 设置内外阴影，如果默认不写是外阴影，如果设置内阴影写inset

注意：

水平阴影位置和垂直阴影位置可以是正值，负值或者0
模糊距离值越大越模糊，不可以是负值
阴影大小也可以是正值或者负值，0
阴影颜色可以是十六进制、颜色关键词、rgba()，rgb()
兼容性: ie9+

3、text-shadow

设置文字阴影

text-shadow：水平阴影位置 垂直阴影位置 模糊距离 阴影颜色;

兼容性： ie10+

文字阴影和盒子阴影都可以设置多个，注意多组之间逗号隔开就可以了

五、css3背景属性

1、多背景的设置

background-image:url(),url();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 800px;
            height: 500px;
            border: 1px solid red;
            /* 书写位置靠前的背景图显示在前面 */
            background-image: url("./images/1.jpg"),url("./images/2.jpg");
            background-repeat: no-repeat;
            background-position: left top,right bottom;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

2、background-size

规定背景图片的尺寸

兼容性： ie9+

background-size:px | % | contain | cover;

px

一般设置两个值，第一个值是背景图片的宽度，第二个值是背景图片的高度

如果只设置一个值，这个值代表是背景图片的宽度，高度将变成auto(等比例缩放)
%

一般设置两个值，第一个值是背景图片的宽度（是相对于父元素的宽度进行计算的），第二个值是背景图片的高度（是相对于父元素的高度进行计算的）

如果只设置一个值，这个值代表是背景图片的宽度，高度将变成auto(等比例缩放)
contain

包含的意思，将背景图片扩展到最大尺寸，将最长的边完全放入盒子中，较短的边等比例缩放中会出现留白
cover

遮盖的意思，将背景图片扩展到足够大的尺寸，将最短的边完全放入盒子中去，较长的边等比例缩放时可能出现显示不完整

3、background-origin

规定背景图片的定位区域，规定背景图片左上角的起始位置

background-origin:border-box | padding-box | content-box;

border-box 背景图片左上角的起始位置从边框开始
padding-box 背景图片左上角的起始位置从padding开始
content-box 背景图片左上角的起始位置从内容区域开始

4、background-clip

规定背景的绘制区域

background-clip:border-box | padding-box | content-box;

border-box 背景超出边框之外的部分就直接裁剪
padding-box 背景超出padding之外的部分就直接裁剪
content-box 背景超出内容之外的部分就直接裁剪

小豆很优秀

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
十二、css简介、浏览器兼容的前缀、css3新增选择器、css3新增属性、css3背景属性。

一、css3简介CSS3 是最新的 CSS 标准。CSS3 模块：选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面CSS3的优点：CSS3将完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。渐进增强和优雅降级：渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。区别：优
复制链接

扫一扫

专栏目录