mi camino css

que es css

CSS se usa junto con html para construir el diseño y el diseño de una página web. Al igual que el modelado, primero proporcione un marco y luego realice el marco. Por ejemplo, si compraste una casa en el casco urbano, cuando te hiciste cargo todavía era una casa tosca que acababa de construirse con HTML, en este momento necesitas el maestro de decoración CSS para decorarla bien, colgar una luz en la habitación, abre una claraboya y compra algunos muebles Entra, coloca los muebles donde quieras y luego pinta la pared con tu color favorito o pinta el cuadro que te guste, y decora toda la casa como quieras, esta es la función de css.

¿Cómo se vincula html a css?

Si desea decorar la casa, debe permitir que el decorador CSS ingrese el html. Luego, primero debe vincular el html y el css. Hay tres formas de vincular.

El primero es en línea, que consiste en escribir directamente el atributo de estilo en el styleatributo de la etiqueta html, pero esto solo afecta a un elemento, y cada elemento está disperso en todo el documento html, lo que no es conveniente para la gestión centralizada. no debería ser demasiado complicado, de lo contrario será muy problemático escribir, pero también tiene la ventaja de que no necesita definir selectores, pero este método no se recomienda.

Aquí hay <figure>un ejemplo de un contenedor que contiene elementos secundarios.

<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 segunda es concentrar los estilos de todos los elementos de la página web en una <style>etiqueta llamada y ponerla delante de la estructura DOM, porque los estilos no están escritos en los atributos de los elementos.Especificar un nombre para cada elemento, como mesa, vajilla, y luego <style>escriba cada estilo uno por uno de acuerdo con el nombre del elemento en la etiqueta. Sin embargo, cada vez que escribe un html, debe agregar un estilo css delante del DOM, y un css solo puede corresponder a un html, lo cual es relativamente problemático.

por ejemplo:

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

El tercer tipo es la hoja de estilo externa, que también es la más utilizada. Puede usar el <link>enlace de la etiqueta directamente y luego almacenar el contenido css para expresarlo en un archivo con la extensión xx.css, y luego <head>usar la <link>importación en él Este archivo css está bien, por lo que la estructura DOM y el estilo css están separados, y las respectivas divisiones del trabajo y finalmente cooperan, y de esta manera, un css se puede usar en múltiples html, lo que será mucho más conveniente

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

¿Cuáles son los selectores de CSS comunes?

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

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