前端基础——CSS3-CSDN博客

本文链接：https://blog.csdn.net/yinyinlee07/article/details/122512562

前端基础学习第四天

文章目录

- 前端基础学习第四天
- - 一、CSS3

一、CSS3

CSS3中的知识点很多，也新增了很多属性，先从以下几个相对重要的模块开始学习：

1.选择器

除了《前端基础学习第一天》博客中提到的id选择器、类选择器、标签选择器等，CSS中还有一些比较常用且重要的选择器。（包含于CSS1、2、3中的选择器）

（1）伪类选择器

伪类选择器用来定义一些条件下的效果。

常用种类和作用如下：

选择器示例	作用	CSS
a:hover	鼠标悬停在元素上时	1
a:link	选择所有未访问的链接	1
a:active	选择活动链接	1
a:visited	选择访问过的链接	1
input:focus	选择具有焦点的输入元素	2
p:first-child	指定p标签的第一个子元素	2

（2）子选择器

选择父元素中指定的子元素。

写法示例：

div>p {
    color:red;
}

（3）后代选择器

选择某个元素中的指定元素。

写法示例：

div p{
    color:red;
}

（4）相邻兄弟选择器

选择在指定元素之后相邻的第一个元素。

写法示例：

div+p{
    color:red;
}

2.盒模型

与CSS布局联系起来，其实盒模型很容易理解，在开发者模式中，经常会看到一个图示：

这个图就很好的解释了盒模型的组成：width、height、padding、border、margin

而不同浏览器会使用不同盒模型，主要分为两种；

IE盒模型：content（width+height+padding+border）、margin

W3C盒模型（标准模型）：content（width+height）、padding、border、margin

此外，还可以用一个属性来更改盒模型的使用：box-sizing

IE盒模型：box-sizing:border-box;

标准模型：box-sizing:content-box;

3.动画

做动画就要用到@keyframes属性。

写法示例：

<style>
        .myway{
            width: 200px;
            height: 200px;
            background-color: rgb(214, 21, 21);
            animation: myfirst 2s infinite;
        }
        @keyframes myfirst {
            0% {background:  rgb(255, 136, 0);}
            25% {background: rgb(255, 251, 0);}
            50% {background: rgb(102, 255, 0);}
            75% {background: rgb(0, 238, 255);}
            100% {background: rgb(135, 144, 222);}
        }
 </style>

<div class="myway"></div>

运行效果：

其中animation: myfirst 5s infinite;写在盒子样式中，指定了myfirst动画属性，2s的动画秒数，infinite是设置循环播放。

@keyframe属性中，0%是动画开始阶段，100%是动画完成。

4.多媒体查询

CSS3的多媒体查询可以监测到媒体类型（显示器、移动设备等）然后设置不同样式，典型的案例：通过多媒体查询来做自适应的网页布局。

多媒体类型：

示例：

 <style>
        .myway{
            width: 100%;
            height: 200px;
            background-color: rgb(233, 98, 150);
        }
        @media screen and (max-width:800px){ //宽度800以内，背景色变蓝
            .myway{
                background-color: rgb(99, 174, 224);
            }
        }
    </style>

<body>
    <div class="myway"></div>
</body>

“ @media screen and (max-width:800px)“中，screen选定了媒体类型，(max-width:800px)是一个表达式，会返回true或者false。

运行结果：