其他分享
首页 > 其他分享> > css 回顾

css 回顾

作者：互联网

css 回顾

在这里插入图片描述
在这里插入图片描述

样式表

样式表分类：外部、内部、行内（除了引用不一样，样式的本身是一样的）
外部：一个独立的文件，以.css为扩展名
内嵌：在当前文件里嵌套使用，写在中
行内：在当前标签这一行内使用
嵌入：
优先级：html由上往下执行，后执行的会将前面的覆盖掉！！（行内样式一定会最后执行而覆盖掉前面的，内部与外部看谁离标签近）
例子：

内嵌样式表：

<style type="text/css">                   <!--type="text/css"：在当前样式里是文本或者CSS（也可以吧“text/”去掉）-->
    p{         							<!--对所有的段落标签进行设计-->                                
        。。。。。。
    }
</style>

外部样式表：

在这里插入图片描述

行内样式： 不建议使用

<p style="background-color: red; font-size: 40px;">
这是行内样式
</p>

内嵌样式： 很少使用

<style type="text/css">
    @import url("css/style.css");
</style>

长度单位

七个你可能不了解的CSS单位

文本修饰

在这里插入图片描述
在这里插入图片描述

.p1{
    text-shadow: 3px 3px 2 red;
}

字体

在这里插入图片描述
在这里插入图片描述

word-break：属性规定自动换行的处理方法。
在这里插入图片描述
white-space：属性设置如何处理元素内的空白。 在这里插入图片描述

背景

在这里插入图片描述
background-size：设置背景图片大小
background-color: transparent;(设置背景为透明)

可以对元素设置多个背景图像；设置背景图片时，值写在url()内的
在这里插入图片描述

background-image: url("../picture/Primary.jpg");
background-image: url("image/1.jpg"),url("image/2.jpg");

渐变背景：

display：规定元素应该生成的框的类型。

w3schhol

grid-template-columns: repeat(3, 33.33%);
grid-template-columns: repeat(2, 100px 20px 80px);

选择器

w3school
![在这里插入图片描述](https://www.icode9.com/i/ll/?i=2021022在这里插入图片描述
8163957229.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RyeU15QmVzdFRvRG9f,size_16,color_FFFFFF,t_70)

h1#content{         <!--选择id为content的h1标签-->
    ........
}

input[type="button"]{}

在这里插入图片描述
:nth-of-type() ：该选择器选取父元素的第 N 个指定类型的子元素。

p:first-child{                        /*选中父元素（body）第一个子元素，(如果是p的话)，就将该子元素背景设为红色*/
    background-color: red;                                            
}

p:first-of-type{                       /*选中父元素（body）第一个同类子元素，(第一个p)，将该子元素背景设为蓝色*/
    background-color: blue;
}

td:nth-child(2){                                   /*选中父元素(tr)第二个子元素，(td），将该单元格背景设为红色*/
    background-color: red;
}

在这里插入图片描述
. . . . . .

浮动

在这里插入图片描述
脱标流，即脱离文档流（并没有脱离文本流），也称之为是浮动，或者是position的实现效果。（让块级元素能实现从左到右显示）

css动画

@keyframes规则

@keyframes myfirst{
    ....
}

动画animation

调用动画
当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

div{
    width: 300px;
    height: 300px;
    background-color: red;
    -webkit-animation: myfirst 5s; /* Safari and Chrome */
}

w3school
在这里插入图片描述
例子：

<!DOCTYPE html>
<html>
<head>
    <style> 
    div
    {
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;
    -moz-animation:myfirst 5s; /* Firefox */
    -webkit-animation:myfirst 5s; /* Safari and Chrome */
    -o-animation:myfirst 5s; /* Opera */
    }
    
    @keyframes myfirst
    {
    from {background:red;}
    to {background:yellow;}
    }
    
    @-moz-keyframes myfirst /* Firefox */
    {
    from {background:red;}
    to {background:yellow;}
    }
    
    @-webkit-keyframes myfirst /* Safari and Chrome */
    {
    from {background:red;}
    to {background:yellow;}
    }
    
    @-o-keyframes myfirst /* Opera */
    {
    from {background:red;}
    to {background:yellow;}
    }
    </style>
</head>
<body>
    <div></div>
    <p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>

过渡transition

要实现这一点，必须规定两项内容：
规定您希望把效果添加到哪个 CSS 属性上
规定效果的时长
格式：-webkit-transition: css属性 时间

.d1{
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
.d1:hover{
    width: 300px;
    height: 300px;
    -webkit-transform: rotate(180deg);
}

在这里插入图片描述
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);

transition：不同简写属性之间空格分隔，相同属性之间逗号分隔

-webkit-transition: width 2s ,height 2s ,-webkit-transform 2s linear;

2D转换transform

translate(x,y) ：通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

以上代码能够起到水平垂直居中的效果

rotate(deg)：通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。 angle：角度

scale(x,y)：通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：

skew(x-angle,y-angle)：通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

matrix()：matrix() 方法把所有 2D 转换方法组合在一起。

在这里插入图片描述
在这里插入图片描述

标签：动画,回顾,myfirst,元素,keyframes,background,选择器,css
来源： https://blog.csdn.net/TryMyBestToDo_/article/details/114226740