meu jeito css

o que é css

CSS é usado junto com html para construir o layout e o layout de uma página da Web. Assim como a modelagem, primeiro forneça um quadro e depois realize o quadro. Por exemplo, se você comprou uma casa na área urbana, quando você assumiu ainda era uma casa tosca que tinha acabado de ser construída com HTML. Neste momento, você precisa do CSS mestre de decoração para decorá-la bem, pendure uma luz o quarto, abra uma clarabóia e compre alguns móveis Entre, coloque os móveis onde quiser e depois pinte a parede com sua cor favorita ou pinte o quadro que você gosta, e decore a casa inteira como quiser, essa é a função de css.

Como o html se liga ao css

Se você quiser decorar a casa, você deve deixar o CSS do decorador entrar no html. Então você precisa primeiro vincular o html e o css. Existem três maneiras de vincular.

O primeiro é inline, que é escrever diretamente o atributo style no styleatributo da tag html, mas isso afeta apenas um elemento, e cada elemento fica disperso em todo o documento html, o que não é conveniente para gerenciamento centralizado. não deve ser muito complicado, caso contrário, será muito problemático escrever, mas também há uma vantagem de que você não precisa definir seletores, mas esse método não é recomendado.

Aqui está <figure>um exemplo de um contêiner contendo elementos filho

<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>
复制代码

A segunda é concentrar os estilos de todos os elementos da página web em uma <style>tag chamada e colocá-la na frente da estrutura DOM, pois os estilos não são escritos nos atributos dos elementos. Especifique um nome para cada elemento, como mesa, talheres e, em seguida, <style>escreva cada estilo, um por um, de acordo com o nome do elemento no rótulo. No entanto, toda vez que você escreve um html, você precisa adicionar um estilo css na frente do DOM, e um css só pode corresponder a um html, o que é relativamente problemático.

por exemplo:

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

O terceiro tipo é a folha de estilo externa, que também é a mais usada. Você pode usar o <link>link da tag diretamente, e então armazenar o conteúdo css a ser expresso em um arquivo com a extensão xx.css, e então <head>usar a <link>importação Este arquivo css é bom, para que a estrutura DOM e o estilo css sejam separados, e as respectivas divisões de trabalho e finalmente cooperem, e desta forma, um css pode ser usado em vários html, o que será muito mais conveniente

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

Quais são os seletores CSS comuns?

为了灵活的选择将要设置样式的元素，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。

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