ma façon css

c'est quoi css

CSS est utilisé avec html pour construire la mise en page et la mise en page d'une page Web.Comme la modélisation, donnez d'abord un cadre, puis réalisez le cadre. Par exemple, si vous avez acheté une maison en zone urbaine, lorsque vous en avez pris possession, c'était encore une maison brute qui venait d'être construite avec HTML. A ce moment, vous avez besoin du maître de la décoration CSS pour bien la décorer, accrocher une lumière dans la pièce, ouvrez une lucarne et achetez des meubles Entrez, placez les meubles où vous voulez, puis peignez le mur avec votre couleur préférée ou peignez l'image que vous aimez, et décorez toute la maison comme vous le souhaitez, c'est la fonction de css.

Comment le html est-il lié au css

Si vous voulez décorer la maison, vous devez laisser le décorateur CSS entrer le html. Ensuite, vous devez d'abord lier le html et le css. Il y a trois façons de lier.

Le premier est inline, qui consiste à écrire directement l'attribut style dans l' styleattribut de la balise html, mais cela n'affecte qu'un élément, et chaque élément est éparpillé dans tout le document html, ce qui n'est pas pratique pour une gestion centralisée. ne devrait pas être trop compliqué, sinon ce sera très pénible à écrire, mais il y a aussi un avantage que vous n'avez pas besoin de définir des sélecteurs, mais cette méthode n'est pas recommandée.

Voici <figure>un exemple de conteneur contenant des éléments enfants

<figure>
    <div style="width: 50px; height: 50px; background-color:aqua;border-radius: 50%; margin-bottom: 10px;"></div>
        <div style="width:50px;height: 100px;background-color:coral; border-radius: 10px;"></div>
        </figure>
复制代码

La seconde consiste à concentrer les styles de tous les éléments de la page Web dans une <style>balise appelée et à la placer devant la structure DOM, car les styles ne sont pas écrits dans les attributs des éléments. Spécifiez un nom pour chaque élément, tel que table, vaisselle, puis <style>écrivez chaque style un par un selon le nom de l'élément dans l'étiquette. Cependant, à chaque fois que vous écrivez un html, vous devez ajouter un style css devant le DOM, et un css ne peut correspondre qu'à un seul html, ce qui est relativement gênant.

par exemple:

<style>
    .main{
        color:yellow;
    }
    <style>
  <body>  
 <figure class="main"></figure>
 </body>
复制代码

Le troisième type est la feuille de style externe, qui est aussi la plus couramment utilisée. Vous pouvez utiliser <link>directement le lien de balise, puis stocker le contenu css à exprimer dans un fichier avec l'extension xx.css, puis <head>utiliser l' <link>import Ce fichier css est bien, de sorte que la structure DOM et le style css sont séparés, et les divisions respectives du travail et enfin coopèrent, et de cette façon, un css peut être utilisé sur plusieurs html, ce qui sera beaucoup plus pratique

<link rel="stylesheet" href="./xx.css"   />
复制代码

Quels sont les sélecteurs CSS courants ?

为了灵活的选择将要设置样式的元素，css也有很多选择器可以使用，

标签选择器（div）
- 选择标签为<div>的所有元素，虽然用起来很方便，但是一个复杂的结构中肯定不止一个同名的标签，一旦你定义了一个标签，那么所有同名的标签都会跟着改变。
类选择器（.main）
- 为元素指定一个class属性的样式，给每个元素起不同的类名来区分每个元素，可以给有共同属性的元素起相同的类名，还可以为一个元素分配多个类名，多个类名的话类名之间用空格分开就可以了

如下选择类名为main的所有元素

   <fiure class="main"></figure>
复制代码

.main{
    height: 1300px;
    width: 200px;
    }
复制代码

ID选择器（#box）
- 通过为元素命名唯一的ID名，然后在css中用#id的形式引用元素

<div id="box">
复制代码

#box{
     height: 300px;
     width: 460px;
     }
复制代码

伪类选择器（p:hover)
- 伪类选择器用选择处于特殊位置或状态的元素，比如选择一堆元素中的第一个或者最后一个元素，或者隔一个选一个元素，鼠标指针悬停状态的元素。
```
.p:hover{
 transition: 0.5s ease-out;

 background-color: lightcoral;
 border-radius: 50%;
 }
复制代码
```
当然了，选择器也是有分优先级的： id选择器>类选择器>标签选择器>子选择器>后代选择器>伪类选择器>

单位em和rem的区别

css里还有很多常用的单位，例如px、em、rem等。发现没有，em和rem就差一个字母，却是两个单位，虽然都表示元素字体的高度，但是和em单位相比，rem单位的优势是只要修改<html>的文字大小，就可以改变整个页面中的元素大小了，是不是很方便

/*em的用法*/
div{
    font-size:12px;
}
div>p{
    width:10em;
    height:10em;
}
复制代码

/*rem的用法*/
html{
    font-size:14px;
}
div{
    font-size:12px;
}
div>p{
    width:10rem;
    height:10rem;
}
复制代码

盒模型

在家中你要是想画出一块一块地方专门用于娱乐用的，那么此刻你就需要盒师傅给你画出一个地方，盒模型又分为标准盒子和怪异盒子。

标准盒模型下width=content内容的宽度，设定了width和height值的时候，padding和border不被包含在定义的width和height之内，用box-sizing：content-box表示；总面积的公式为width/height+padding* 2 + border* 2+margin*2。
怪异盒模型下width=content+padding+border，内容宽度会被padding和border挤小，也就是说width已经包含了padding和border的值了，用box-sizing:border-box表示怪异盒子；总面积公式为width/height+margin* 2。

伪元素

在房间的装修中少不了要用到伪元素来展现你装修之后的效果。

表示伪元素的有 ::before、::after、::first-letter和::first-line；
伪元素的语法都是在元素后面跟双冒号然后再跟伪元素的关键词；单冒号是用于伪类的
所有的伪元素都要用content属性声明引用内容，::before的引用文本显示在段落之前，::after的引用文本显示在段落之后

边框

border-style、border-width、border-color、border-radius分别表示边框的样式、宽度、颜色、圆角

阴影、剪切和滤镜

每一件小物品在光的照射下都会倒映出一个影子，离光源的远近都会影响到影子的大小和清晰度，box-shadow属性就是对这些现象的描述。

box-shadow有以下五个不同的参数

h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离，实际是模糊程度
spread	可选。阴影的大小
color	可选。阴影的颜色。在css颜色值需按照颜色值的完整列表

在元素内创建一个剪切区域可以用clip-path来表示，然后剪切区域之外的那些将会被隐藏

下面用inset()函数来剪切一个矩形

{
    width:10em;
    height:10em;
    clip-path:inset(1em 2em 3em 4em);
}
复制代码

clip-path后面跟的函数都表示不一样的形状

inset():表示剪切一个矩形
circle()：表示剪切一个圆形
ellipse()：表示剪切一个椭圆形
polygon()：表示剪切一个多边形
复制代码

想从多种角度看到多种视觉效果，那么就需要用到我们的滤镜咯
表示透明度的滤镜用函数opacity()表示，函数接收的参数值是从零到一来表示透明与否的，其中0表示完全透明，1表示不透明；
表示模糊的滤镜用blur()来表示,函数接收的参数是一个长度值，表示模糊半径，对整个元素进行模糊处理
hue-rotate()函数表示色相滤镜，函数接收一个角度值作为参数，正数表示沿顺时间方向寻找色值，负数表示沿逆时针方向寻找色值
还可以在filter属性中同时使用多个滤镜，多个函数之间用空格分开就可以了

表示接近透明
   div:nth-child(1){filter:opacity(0.2);} 
没有模糊效果
   div:nth-child(1){filter:blur(0px);}

复制代码

计数器

计数器的完整语法包括3个语句：定义计数器counter-reset、计数器累加counter-increment、读取计数器的值content:counter(n)
counter-reset要定义在父容器中；counter-increment要定义在子元素中；content:counter()用于读出计数器的值，content属性是用于伪元素的，所以要在伪元素中读取计数器的值

   .container{
    font-size: 10px;
    width: 50em;
    display: grid;
    grid-template-columns: repeat(7,1fr);
    grid-gap: 1em;
    counter-reset: n 1;
    
}
.container div{
    width: 3em;
    height: 3em;
    background-color: rosybrown;
    border-radius: 50%;
    position: relative;
    counter-increment: n 2;
}
.container div::before{
    content: 'x';
    position: absolute;
    font-size: 1.5em;
    font-family: sans-serif;
    width: inherit;
    line-height: 2em;
    text-align: center;
    color: white;
    content: counter(n);

} 
复制代码

变换、缓动和动画

把房子当作一个数轴，水平平移的时候用函数translateX()表示，垂直平移的时候用函数translateY()表示，X和Y要大写。 rotate()函数用于旋转元素，接收的参数表示元素被旋转的角度，正数顺时针旋转，负数逆时针旋转，单位用deg表示度，也可以用turn表示圈

表示水平平移
    div:nth-child(1){transform:translateX(100%);}
表示逆时针旋转45°
    div:nth-child(1){transfrom:rotate(-45deg)
复制代码

transition用于元素从一个状态转换到另一个状态时中间加上过渡的效果，

transition-duration  表示缓动持续的时间，
transition-delay  表示转换时状态延时发生
transition-property  可以去掉我们不想让它参与缓动的元素，会直接变成终止状态，但是很少会单独使用
复制代码

animation-duration``和animation-timing-function定义了动画时长和时间函数；animation-iteration-count定义动画执行多少次，属性值infinite表示无限次；animation-direction定义动画的方向;animation-delay定义了动画的延时启动时长，
animation-direction有四个值为normal、alternate、reverse、alternate-reverse,分别表示从动画起点向终点运动、从动画起点向终点运动然后再折返到起点、从动画的终点向起点运动、从动画的终点向起点运动，然后再折返到终点。
from...to...关键帧分别表示动画的起点和终点

@keyframes shift{
    from{
        transform:translateX(-6em);
        }
    }

复制代码

也可以用百分比关键帧代替，0%代替from，100%代替to。

关键帧也有一些缺点，比如关键帧只关心百分比值，不关心具体的时间，所以要是要调动动画时长的时候，还要修改关键帧的百分比值；不能明确的表明两次动画之间的间隔时长，必须把时间算到一次动画里，以此让动画的持续时间变长