前端基础--CSS

最新推荐文章于 2023-02-09 20:45:38 发布
最新推荐文章于 2023-02-09 20:45:38 发布
阅读量214 收藏 2
点赞数 2
分类专栏： 前端 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50048558/article/details/120011987
版权

一、CSS介绍

● CSS是指层叠样式表 cascading style sheets
● 通过CSS可以让我们定义HTML元素如何显示。
● CSS可以让我们原本HTML不能描述的效果，通过CSS描述出来。
● 通过CSS描述我们的html页面，可以让我们的页面更加漂亮，可以提高工作效率。

二、CSS与HTML结合方式

1.内联/行内样式

HTML标签上通过style属性来引用CSS代码
优点:简单方便
缺点:只能对一个标签进行修饰

<h1 style="color:red">我爱你</h1>

2.内部样式表

通过< style >标签来声明我们的CSS. 通常< style >标签我们推荐写在head和body之间
优点:可以通过多个标签进行统一的样式设置
缺点: 它只能在本页面上进行修饰
语法： 选择器 {属性:值;属性:值}

<style>
    h2{
        color:blue;
    }
</style>

3.外部样式表

单独定义一个CSS文件,注意CSS文件的后缀名就是.css
在项目根目录下，创建css目录，在css目录中创建css文件 css01.css
在< head >中使用< link >标签引用外部的css文件

<!-- css01.css -->
h3{
    color:green;
}

<link href="css/test01.css" rel="stylesheet">

<!-- css01.css -->
h3{
    color:green;
}

<!-- css011.css -->
h4{
    color:yellow;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="css/test01.css" rel="stylesheet">
</head>
<style>
    h2{
        color:blue;
    }
    /*@import url(css/test011.css)*/
</style>
<body>
    <h1 style="color:red">我爱你</h1>
    <br/>
    <h2>我爱你</h2>
    <br/>
    <h3>我爱你</h3>
    <br/>
    <h4>我爱你</h4>
</body>
</html>

关于外部导入css使用与@import的区别

  1. 加载顺序不同
    ● @import方式导入会先加载html，然后才导入css样式，那么如果网络条件不好，就会先看到没有修饰的页面，然后才看到修饰后的页面。
    ● 如果使用link方式，它会先加载样式表，也就是说，我们看到的直接就是修饰的页面；
  2. @import方式导入css样式，它是不支持javascript的动态修改的。而link支持。
    三种样式表的优先级：满足就近原则
    内联 > 内部 > 外部

三、CSS的使用

1.css中选择器

元素(标签)选择器

对页面上相同的标签进行统一的设置，它描述的就是标签的名称.

①类选择器

类选择器在使用时使用"."来描述，它描述的是元素上的class属性值

②id选择器

它只能选择一个元素，使用 “#” 引入，引用的是元素的id属性值。
id选择器，比类选择器更具有唯一性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    /*h1{
        color:red;
    }*/

    .b{
        color:green;
    }

    #c{
        color: blue;
    }

</style>
<body>
    <h1>我爱你</h1>
    <h1 class="b">我爱你</h1>
    <h1 id="c">我爱你</h1>
</body>
</html>

③选择器组

逗号表示，谁和谁。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .b{
        color:green;
    }

    #a,#c{
        color: blue;
    }

</style>
<body>
    <h1 id="a">我爱你</h1>
    <h1 class="b">我爱你</h1>
    <h1 id="c">我爱你</h1>
</body>
</html>

④派生选择器

子代：父子关系（隔代不管）
后代：父子孙，曾孙，从孙…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    /* 子代 */
    div p{
        color:red;
    }
    /* 后代 */
    div>p{
        color: yellow;
    }
</style>
<body>
    <div>
        <p>语文</p>
        <p>数学</p>
        <span>
            <p>英语</p>
            <p>物理</p>
            <p>化学</p>
        </span>
    </div>
</body>
</html>

⑤CSS伪类

● CSS伪类可对css的选择器添加一些特殊效果
● 伪类属性列表：
　active 向被激活的元素添加样式。
　hover 当鼠标悬浮在元素上方时，向元素添加样式。
　link 向未被访问的链接添加样式。
　visited 向已被访问的链接添加样式。
　first-child 向元素的第一个子元素添加样式。
超链接的伪类：要遵守使用顺序，爱恨原则 LoVeHAte，lvha

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    /* 未访问 */
    a:link{
        color: green;
    }
    /* 已访问 */
    a:visited {
        color: blue;
    } 
    /* 悬停 */
    a:hover{
        color: red;
    }
    /* 点击不松手 */
    a:active{
        color: yellow;
    }
    /* 过滤所有li中的第一个 */
    li:first-child{
        color: chocolate;
    }
</style>
<body>
    <a href="http://www.baidu.com">百度</a>
    <ul>
        <li>西游记</li>
        <li>水浒传</li>
        <li>红楼梦</li>
        <li>三国演义</li>
    </ul>
</body>
</html>

2.CSS基本属性

①文本属性

● 指定字体：font-family : value;
● 字体大小：font-size : value;
　px：像素
　em：倍数
● 字体加粗：font-weight : normal/bold;
● 文本颜色：color : value;
● 文本排列：text-align : left/right/center;
● 文字修饰：text-decoration : none/underline;
● 行高：line-height : value;
● 首行文本缩进：text-indent : value (2em);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    #title{
        font-family: "微软雅黑"; /* 字体 */
        font-size: 2em; /* 默认字体的2倍 */
        font-weight: bold; /* 加粗 */
        color: red; /* 字体颜色 */
        text-align: center; /* 居中对齐 */
        text-decoration: underline; /* 下划线 */
        line-height: 30px; /* 行高 */
    }

    .c{
        text-indent: 2em; /* 首行缩进 */
    }

</style>
<body>
    <p id="title">我爱你</p>
    <p style="text-align:right">我爱你</p>
    <p class="c">我爱你</p>
    <p>我爱你</p>
</body>
</html>

②背景属性

●CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。
● background-color 设置元素的背景颜色。
● background-image 把图像设置为背景。
● background-repeat 设置背景图像的墙纸效果，是否及如何重复
● repeat：在垂直方向和水平方向重复，为重复值
　repeat-x：仅在水平方向重复
　repeat-y：仅在垂直方向重复
　no-repeat：仅显示一次
● background-position 设置背景图像的起始位置
　1：控制水平方向 x轴： 正值，向右移动； 负值，向左移动
　2：控制垂直方向 y轴： 正值，向下移动； 负值，向上移动
● background-attachment 背景图像是否固定或者随着页面的其余部分滚动
　默认值是 scroll：默认情况下，背景会随文档滚动
　可取值为 fixed：背景图像固定，并不会随着页面的其余部分滚动，常用于实现称为水印的图像。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    div{
        width:400px;
        height:300px;
        background-color: red; /* 背景颜色 */
        background-image: url("img/cat.gif"); /* 背景图片 */
        background-repeat: no-repeat; /* 平铺方式 */
        background-position: 100px 200px; /* 背景的位置(移动) */
        background-attachment: fixed; /* 固定的背景 */
    }
</style>
<body>
    <div>
        <h1>我爱你</h1>
        <h1>我爱你</h1>
        <h1>我爱你</h1>
        <h1>我爱你</h1>
        <h1>我爱你</h1>
        <h1>我爱你</h1>
        <h1>我爱你</h1>
        <h1>我爱你</h1>
        <h1>我爱你</h1>
        <h1>我爱你</h1>
        <h1>我爱你</h1>
        <h1>我爱你</h1>
        <h1>我爱你</h1>
    </div>
</body>
</html>

③列表属性

CSS列表属性作用如下：
● 设置不同的列表项标记为有序列表
● 设置不同的列表项标记为无序列表
● 设置列表项标记为图像
有两种类型的列表：
● 无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）
● 有序列表 - 列表项的标记有数字或字母
使用CSS，可以列出进一步的样式，并可用图像作列表项标记。
● none：无标记。（去除标记）
● disc：默认。标记是实心圆。
● circle：标记是空心圆。
● square：标记是实心方块。
● decimal：标记是数字。
● decimal-leading-zero：0开头的数字标记。(01, 02, 03, 等。)
● lower-roman：小写罗马数字(i, ii, iii, iv, v, 等。)
● upper-roman：大写罗马数字(I, II, III, IV, V, 等。)
● lower-alpha：小写英文字母The marker is lower-alpha (a, b, c, d, e,等。)
● upper-alpha：大写英文字母The marker is upper-alpha (A, B, C, D, E,等。)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    div{
        width: 400px;
        height: 40px;
        margin: 10px; /* div与div之间产生10像素间隙 */
    }
    .a{
        border-width: 2px;
        border-color: red;
        border-style: solid; /* 实线 */
        border-right-color: green; /* 有边框颜色 */
        border-bottom-style: dashed; /* 下边框样式 */
    }
    /* 简写 */
    .b1{
        border:10px solid red;
    }
    .b2{
        border:10px dotted red;
    }
    .b3{
        border:10px dashed red;
    }
    .b4{
        border:10px double red;
    }
    .b5{
        border:10px groove red;
    }
    .b6{
        border:10px ridge red;
    }
    .b7{
        border:10px inset red;
    }
    .b8{
        border:10px outset red;
    }
</style>
<body>
    <div class="a"></div>
    <div class="b1">实心线</div>
    <div class="b2">点线</div>
    <div class="b3">虚线</div>
    <div class="b4">双线</div>
    <div class="b5">3D效果凹槽</div>
    <div class="b6">3D脊边框</div>
    <div class="b7">3D嵌入边框</div>
    <div class="b8">3D突出边框</div>
</body>
</html>

④轮廓属性

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
轮廓和边框的区别：
● 边框 (border) 可以是围绕元素内容和内边距的一条或多条线；
● 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    div{
        width: 400px;
        height: 200px;
        border: 30px solid darkgreen;
        outline: 5px dashed red;
    }
</style>
<body>
    <div></div>
</body>
</html>

⑤盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。
盒子模型
● margin(外边距) - 盒子与盒子之间的距离
● border(边框) - 盒子的保护壳
● padding(内边距/填充) - 内填充，盒子边与内容之间的距离
● content(内容) - 盒子的内容，显示的文本或图像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    div{
        height: 200px;
        width: 300px;
        border: 2px solid red;
        margin-top: 100px; /* 上外边距 */ 
        margin-left: 50px; /* 左外边距 */
        padding-top: 40px; /* 上内边距 */
        padding-left: 80px; /* 左内边距 */
    }
</style>
<body>
    <div>
        <img src="img/cat.gif">
    </div>
</body>
</html>

3.CSS定位

①默认定位

● 块级元素：h1~h6，p, div 等，自上而下，垂直排列（自动换行）；可以改变宽高
● 行内元素：a,b,span,等，从左向右，水平排列（不会换行）；不能改变宽高
● 行内块元素：input,img等，从左向右，水平排列（自动换行）；可以改变宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    div{
        width: 100px;
        height: 50px;
        border: 2px solid red;
    }
    span{
        width: 100px;
        height: 50px;
        border: 2px solid red;
        /* span标签是行内标签，无法改变宽高，但只要转换成行内块元素就可以改变宽高了 */
        display: inline-block; /* 将span元素显示成行内块 */
    }
    a{
        width: 100px;
        height: 50px;
        border: 2px solid red;
        /* a标签是行内标签，无法改变宽高，但只要转换成行内块元素就可以改变宽高了 */
        display: inline-block; /* 将a元素显示成行内块 */
    }
</style>
<body>
    <div>我爱你</div>
    <div>我爱你</div>
    <div>我爱你</div>
    <hr/>
    <span>我爱你</span>
    <span>我爱你</span>
    <span>我爱你</span>
    <hr/>
    <a href="http://www.baidu.com">百度</a>
    <a href="http://www.baidu.com">百度</a>
    <a href="http://www.baidu.com">百度</a>
</body>
</html>

②浮动定位

● 让元素“飞”起来。不仅可以靠着左边或右边。还可以消除“块级”的霸道特性（独自占一行）。
● float取值：
　none ：不浮动
　left：贴着左边 浮动
　right：贴着右边 浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .da{
        width: 300px;
        height: 300px;
        border: 5px solid black;
        padding: 10px;
    }
    .a,.b{
        width: 80px;
        height: 80px;
    }
    .a{
        background-color: red;
        float: left;
    }
    .b{
        background-color: blue;
        float: right;
    }
</style>
<body>
    <div class="da">
        <div class="a"></div>
        <div class="b"></div>
    </div>
</body>
</html>

③相对定位

和原来的位置进行比较，进行移动定位（偏移）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .da{
        width: 300px;
        height: 300px;
        border: 5px solid black
    }
    .a,.b,.c{
        width: 200px;
        height: 60px;
    }
    .a{
        background-color: palevioletred;
    }
    .b{
        background-color: darkcyan;
        position: relative; /* 相对定位 */
        top: 30px;
        left: 50px;
    }
    .c{
        background-color: chocolate;
    }
</style>
<body>
    <div class="da">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
    </div>
</body>
</html>

在这里插入图片描述

④绝对定位

本元素与已定位的祖先元素的距离
● 如果父级元素定位了，就以父级为参照物；
● 如果父级没定位，找爷爷级，爷爷定位了，以爷爷为参照物。
● 如果爷爷没定位，继续向上找，都没定位的话，body是最终选择。

以父节点作为参照物

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .yeye{
        width: 400px;
        height: 250px;
        background-color: olive;
    }
    .baba{
        width: 300px;
        height: 200px;
        background-color: black;
        padding: 20px;
        position: relative;
    }
    .a,.b,.c{
        width: 200px;
        height: 60px;
    }
    .a{
        background-color: palevioletred;
    }
    .b{
        background-color: darkcyan;
        position: absolute; /* 绝对定位 */
        top: 30px;
        left: 50px;
    }
    .c{
        background-color: chocolate;
    }
</style>
<body>
    <div class="yeye">
        <div class="baba">
            <div class="a"></div>
            <div class="b"></div>
            <div class="c"></div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述以爷爷节点作为参照物

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .yeye{
        width: 400px;
        height: 250px;
        background-color: olive;
        position: relative;
    }
    .baba{
        width: 300px;
        height: 200px;
        background-color: black;
        padding: 20px;
    }
    .a,.b,.c{
        width: 200px;
        height: 60px;
    }
    .a{
        background-color: palevioletred;
    }
    .b{
        background-color: darkcyan;
        position: absolute; /* 绝对定位 */
        top: 30px;
        left: 50px;
    }
    .c{
        background-color: chocolate;
    }
</style>
<body>
    <div class="yeye">
        <div class="baba">
            <div class="a"></div>
            <div class="b"></div>
            <div class="c"></div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

⑤固定定位

将元素的内容固定在页面的某个位置，当用户向下滚动页面时元素框并不随着移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .gg{
        width: 300px;
        height: 200px;
        background-color: red;
        position: fixed;
        top: 50px;
        left: 50px;
    }
</style>
<body>
    <div class="gg"></div>
    <h1>百度</h1>
    <h1>百度</h1>
    <h1>百度</h1>
    <h1>百度</h1>
    <h1>百度</h1>
    <h1>百度</h1>
    <h1>百度</h1>
    <h1>百度</h1>
    <h1>百度</h1>
    <h1>百度</h1>
    <h1>百度</h1>
    <h1>百度</h1>
    <h1>百度</h1>
    <h1>百度</h1>
    <h1>百度</h1>
    <h1>百度</h1>
    <h1>百度</h1>
    <h1>百度</h1>
</body>
</html>

⑥z-index(z轴属性)

如果有重叠元素，使用z轴属性，定义上下层次。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .a,.b{
        width: 100px;
        height: 60px;
    }
    .a{
        background-color: blueviolet;
        position: relative;
        z-index: 3;
    }
    .b{
        background-color: violet;
        position: relative;
        top: -20px;
        left: 20px;
        z-index: 2;
    }
</style>
<body>
    <div class="a"></div>
    <div class="b"></div>
</body>
</html>

谁的z值大谁在上面
注意：
　z轴属性，要配合相对或绝对定位来使用。
　z值没有额定数值（整型就可以，具体用数字几，悉听尊便）

四、CSS3

1.圆角

● border-radius：左上 右上 右下 左下;
● border-radius：四个角;
● border-radius：50%; 圆形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    div{
        width: 200px;
        height: 200px;
        background-color: orangered;
        /* border-radius: 1px 5px 30px 50px; */
                       /* 左上 右上 右下 左下 */
        border-radius: 30px;
    }
</style>
<body>
    <div></div>
</body>
</html>

2.盒子阴影

box-shadow：1 2 3 4 5;
1：水平偏移
2：垂直偏移
3：模糊半径
4：扩张半径
5：颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    div{
        width: 200px;
        height: 200px;
        box-shadow: 20px 20px 30px 10px gray;
    }
</style>
<body>
    <div></div>
</body>
</html>

3.渐变

①线性渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    div{
        width: 200px;
        height: 60px;
        margin: 10px;
    }
    .a1{
        background: linear-gradient(red,black);
    }
    .a2{
        background: linear-gradient(red,black,green,blue,yellow);
    }
    .a3{
        background: linear-gradient(to left,red,black);
    }
    .a4{
        background: linear-gradient(to top left,red,black);
    }
    .a5{
        background: linear-gradient(30deg,red,black);
    }
</style>
<body>
    <div class="a1"></div>
    <div class="a2"></div>
    <div class="a3"></div>
    <div class="a4"></div>
    <div class="a5"></div>
</body>
</html>

②径向渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    div{
        width: 200px;
        height: 200px;
        margin: 10px;
    }
    .a1{
        background: radial-gradient(red,black);
    }
    .a2{
        background: radial-gradient(red,black,green,blue,yellow);
    }
    .a3{
        border-radius: 50%;
        background: radial-gradient(red,black);
    }

</style>
<body>
    <div class="a1"></div>
    <div class="a2"></div>
    <div class="a3"></div>
</body>
</html>

4.背景

①背景位置

background-origin：指定了背景图像的位置区域
● border-box : 背景贴边框的边
● padding-box : 背景贴内边框的边
● content-box : 背景贴内容的边

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    div {
        background: url("img/1.jpg") no-repeat;
        width: 200px;
        height: 80px;
        margin: 20px;
        border: 10px dashed black;
        padding: 20px;
    }
    .a {
        background-origin: border-box;
    }
    .b {
        background-origin: padding-box;
    }
    .c {
        background-origin: content-box;
    }
</style>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</body>

</html>

②背景裁切

background-clip:
● border-box 边框开切
● padding-box 内边距开切
● content-box 内容开切

<style>
	div {
		width: 200px;
		height: 80px;
		border: 10px dashed red;
		background-color: darkcyan;
		margin: 20px;
		padding: 20px;
	}
	.a {
		background-clip: border-box;
	}
	.b {
		background-clip: padding-box;
	}
	.c {
		background-clip: content-box;
	}
</style>
<body>
	<div class="a"></div>
	<div class="b"></div>
	<div class="c"></div>
</body>

③背景大小

background-size:
● cover 缩放成完全覆盖背景区域最小大小
● contain 缩放成完全适应背景区域最大大小

<style>
	div {
		background: url("img/1.jpg") no-repeat;
		width: 200px;
		height: 100px;
		border: 2px solid red;
		margin: 20px;
	}
	.a {
		background-size: cover; /* 完全覆盖 */
	}
	.b {
		background-size: contain; /* 完全适应 */
	}
</style>
<body>
	<div class="a"></div>
	<div class="b"></div>
</body>

5.过渡动画

①过渡

从一个状态到另一个状态，中间的“缓慢”过程；缺点是，控制不了中间某个时间点。
transition｛1 2 3 4｝

  1. 过渡或动画模拟的css属性
  2. 完成过渡所使用的时间（2s内完成）
  3. 过渡函数。。。
    在这里插入图片描述
  4. 过渡开始出现的延迟时间
transition: width 2s ease 1s;

目前，css3只开发出部分的过渡属性，下图所示：
在这里插入图片描述

<style>
	div{
		width: 100px;
		height: 50px;
		border: 2px solid red;
	}
	.a{
		transition: width 2s linear 1s; /*1秒过后，div在2秒内匀速缓慢的变宽*/
	}
	div:hover{ width: 300px;} /*触发div变宽*/
</style>
<body>
	<div class="a">Hello,拉勾</div>
</body>

②动画

从一个状态到另一个状态，过程中每个时间点都可以控制。关键帧：@keyframes 动画帧 { from{} to{} } 或者{ 0%{} 20%{}… }动画属性：animation{ 1 , 2 , 3 , 4 , 5 }

  1. 动画帧
  2. 执行时间
  3. 过渡函数
  4. 动画执行的延迟（可省略）
  5. 动画执行的次数
    需求1：一个 元素从左向右移动，3秒内执行2次
<style>
	div{
		width: 700px;
		border: 1px solid red;
	}
	@keyframes x{
	from{ margin-left: 0px;}
	to{ margin-left: 550px;}
	}
	img{
		animation: x 3s linear 2;
	}
</style>
<body>
	<div>
		<img src="img/cat.gif">
	</div>
</body>

需求2：一个 元素从左向右移动，3秒内执行完成。无限次交替执行
infinite：无限次
alternate：来回执行（交替，一去一回）

<style>
	.wai{
		width: 600px;
		height: 100px;
		border: 2px solid red;
	}
	.nei{
		width: 40px;
		height: 80px;
		margin: 5px;
		background: red;
	}
	.nei{
		animation: x 3s linear infinite alternate;
	}
	@keyframes x{
	0%{ margin-left: 0px; }
	25%{ background: yellowgreen; }
	50%{ background: goldenrod; }
	75%{ background: palevioletred;}
	100%{
		background: coral;
		margin-left: 550px;
	}
	}
</style>
<body>
<div class="wai"></div>
<div class="nei"></div>
</body>
kickmyeyes
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端基础-CSS注释
01-20
三、css注释 语法：/*注释的内容*/ 四、css基本选择器 1.标签选择器 通过标签来选择元素，标签{css样式} 示意图 2.id选择器 通过id属性来选择元素，#id名{css样式} 示意图 注意：id选择要保证...
CSS基础/css详解
m0_65878076的博客
03-12 1208
一：css介绍 1.1：什么是css？ css全称叫做CaseCading Style Sheets css是在hTML的基础上用来告诉浏览器html里面的内容以什么样的方式呈现给大家 用css来渲染html，让我们的页面看起来更有层次感，更好看。 最重要的是，它可以同时控制多个页面的布局，可以大量节约我们的时间。 二：css的引入（也可以说和html怎么结合在一起使用） css引入的方式有四种，我们看看他们的区别， 2.1：第一种行内式： 行内模式就是在我们的...
CSS详解
qq_30505673的博客
09-18 1098
1. CSS基本语法 CSS使用格式 选择器 { 属性 : 值; 属性 : 值; … } 说明: 选择器是将样式和页面元素关联起来的名称 属性名是希望设置的样式属性, 每个属性有一个或者多个值 属性和值之间用冒号隔开 一个属性和值与下一个属性和值之间用分号, 最后一个分号可以省略. 2. CSS引入方法 CSS样式导入HTML中有三种方式 1.内联式: 通过标签的 style 属性, ...
CSS入门详解
weixin_43893483的博客
04-21 834
一、CSS简介 现在互联网的前端三层： HTML 超文本标记语言 从语义的角度描述页面结构 CSS 层叠式样式表 从审美的角度负责页面样式 JS Javascript 从交互的角度描述页面行为 1、css整体感知 css是cascading style sheet 层叠式样式表的简写。“层叠式”的意思。 css的最新版本是css3，我们学习的是css2.1。css3与css2.1不矛盾，所...
关于CSS（详细篇）
weixin_53342968的博客
02-09 2757
详细介绍了CSS的含义、属性、选择器等
前端基础-CSS样式的分类
01-08
css样式的分类 1.内部样式—-内联样式 使用的是style标签 /* 样式 */ 多学一招：把页面的公共样式（不多的情况下）写在style标签中 2.行内样式 直接写在标签上的style属性中 我是盒子 多学一招：通常是后台...
前端基础-CSS标签的显示模式
01-08
标签的显示模式（重点） div和span标签 ​ 1.样式完全相同，标签不同，显示的结果完全不同 ​ 2.每个div会独占一行，多个span会并列一排 1.块元素 特点：宽度默认是100%，高度默认是0，可以设置宽度和高度，会继承...
前端CSS基础-常规流练习.rar
04-09
结合博客前端CSS基础——常规流中练习对应图片代码，三大布局规则之一常规流布局，用常规流布局实现网页效果图。
头歌教学实践平台 Web前端开发基础 CSS-基础知识
最新发布
01-20
头歌教学实践平台 Web前端开发基础 CSS-基础知识。源码txt格式。
【CSS详解】一文掌握CSS基础用法
小新要变强的博客
09-27 3952
CSS入门教程，一文掌握CSS基础用法~
CSS基础（超详解）
热门推荐
m0_52896041的博客
11-30 2万+
Css (层叠样式表)是种格式化网页的标准方式， 用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。
CSS知识全解
qq_54334713的博客
03-23 2523
css3复习大纲
html+css详解
Jennifering的博客
05-22 602
今天，我们一起来学习css。    css是用来设置网页标签的样式即宽、高、背景颜色、位置等的一种让浏览器解释执行的语言，用于布局与美化网页的层叠样式表；对于使用大写还是小写字母不敏感，但推荐使用小写。一、css语法：    1.选择器——我要找的html标签（元素）    {属性1：属性值1；width:20px；}    属性和值之间用冒号分开，多个属性之间加分号。非行内样式写法（即内嵌样式和...
CSS知识超详细
m0_71012114的博客
08-23 1992
本文详细介绍了CSS详细知识，最详细的CSS知识点大全。
CSS详解漫谈
hwinte的博客
11-12 324
1 CSS介绍 HTML与CSS就是装修前后的区别 CSS是指层叠样式表 cascading style sheets 通过CSS可以让我们定义HTML元素如何显示（如何美丽的显示） CSS可以让我们原本HTML不能描述的效果，通过CSS描述出来（通过div） 通过CSS描述我们的html页面，可以让我们的页面更加漂亮，可以提高工作效率 HTML是创造世界，CSS是在创造世界的基础上让世界更加美丽 2 CSS与HTML结合方式 2.1 第一种方式 内联/行内样式 就是在我们的HTML标签上通过style属性
CSS样式----图文详解：css样式表和选择器
zdy0_2004的专栏
10-03 1587
主要内容 CSS概述 CSS和HTML结合的三种方式：行内样式表、内嵌样式表、外部样式表 CSS四种基本选择器：标签选择器、类选择器、ID选择器、通用选择器 CSS三种扩展选择器：组合选择器、后代选择器、伪类选择器 CSS样式优先级 CSS 概述 CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果
抽签页面前端代码css
01-07
抽签页面前端代码CSS主要用于布局和样式设计，下面是一个简单的抽签页面前端...以上是一个基础的抽签页面前端代码CSS示例，你可以根据实际需求进行自定义修改，添加一些动画效果或其他样式来增强页面的美观性和交互性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值