私のCSSの方法

cssとは

CSSはhtmlと一緒に使用され、Webページのレイアウトとレイアウトを構築します。モデリングと同様に、最初にフレームを指定してから、フレームを実現します。たとえば、都市部で家を購入した場合、引き継いだときはまだHTMLで建てられたばかりの荒い家でした。このとき、それをうまく装飾するには装飾マスターCSSが必要です。部屋に入れて、天窓を開けて、家具を買いに行き、好きな場所に家具を置いて、好きな色で壁を塗ったり、好きな絵を描いたり、家全体を好きなように飾ったり、これが機能ですcssの。

htmlはどのようにcssにリンクしますか

家を装飾したい場合は、デコレータCSSにhtmlを入力させる必要があります。次に、最初にhtmlとcssをリンクする必要があります。リンクするには3つの方法があります。

1つ目はインラインです。これはhtmlタグの属性にスタイル属性を直接書き込むためのものですが、styleこれは1つの要素にのみ影響し、各要素はhtmlドキュメント全体に散在しているため、集中管理には便利ではありません。複雑すぎないようにしてください。そうしないと、作成が非常に面倒になりますが、セレクターを定義する必要がないという利点もありますが、この方法はお勧めしません。

<figure>子要素を含むコンテナの例を次に示します

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

2つ目は、Webページ内のすべての要素のスタイルを<style>と呼ばれるタグに集中させ、要素の属性にスタイルが書き込まれないため、DOM構造の前に配置することです。各要素の名前を指定します。テーブル、食器、そして<style>ラベルの要素の名前に従って各スタイルを一つずつ書きます。ただし、htmlを作成するたびに、DOMの前にcssスタイルを追加する必要があり、cssは1つのhtmlにしか対応できないため、比較的面倒です。

例えば：

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

3番目のタイプは外部スタイルシートで、これも最も一般的に使用されています。<link>タグリンクを直接使用し、表現するcssコンテンツを拡張子xx.cssのファイルに保存してから、インポートを<head>使用できます。<link>このcssファイルは問題ないので、DOM構造とcssスタイルが分離され、それぞれの分業が最終的に連携します。このようにして、1つのcssを複数のhtmlで使用できるため、はるかに便利です。

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

一般的なCSSセレクターは何ですか？

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

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