CSS3精选内容通俗易懂

最新推荐文章于 2024-08-21 09:04:44 发布

耳冉鹅

最新推荐文章于 2024-08-21 09:04:44 发布

阅读量279

点赞数

分类专栏：前端基础

本文链接：https://blog.csdn.net/qq_45366447/article/details/113393813

版权

前端基础专栏收录该内容

6 篇文章 0 订阅

订阅专栏

三、美化网页元素

1、概述

有效的传递页面信息
美化网页，吸引用户
凸显页面主题
提高用户的体验

2、字体样式

font-family：字体（可以同时改变英文与中文字体）
font-size：字体大小
font-weight：字体粗细
color：颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body {
            font-family: "Arial Black",微软雅黑;

        }
        h1 {
            font-size: 30px;
            color: wheat;
        }
        .p1 {
            font-weight: bold;
        }
    </style>

</head>
<body>

<h1>故事介绍</h1>
<p class="p1">平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。</p>
<p>在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。</p>
<p>All it took was one glance。Now all I ask is one chance，to try to win your heart。Just give me a chance to start。I'll show you it was meant to be。To be together is our destiny。</p>
</body>
</html>

3、文本样式

颜色
- 单词
- RGB 0~F 六位
- RGBA A：0-1 表示透明度
文本对齐方式
- text-align: 排版，居中
首行缩进
- text-indent
行高
- line-height
- height
装饰
- text-decoration： overline、through、underline、none

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--颜色：
        单词
        RGB 0~F  六位
        RGBA  A:0-1 透明度

    text-align: 排版，居中
    text-indent: 2em 段落首行缩进
    行高与块高一致时，便可实现上下居中（p3）
-->
    <style>
        body {
            font-family: "Arial Black",微软雅黑;

        }
        h1 {
            font-size: 30px;
            color: rgba(0,255,255,0.6);
            text-align: center;
        }
        .p1 {
            font-weight: bold;
            text-indent: 2em;
        }
        .p3 {
            background-color: greenyellow;
            height: 56px;
            line-height: 56px;
        }
        .a1 {
            text-decoration: underline;
        }
        .a2 {
            text-decoration: line-through;
        }
    </style>

</head>
<body>
<p class="a1">下划线</p>
<p>正常</p>
<p class="a2">中划线</p>
<h1>故事介绍</h1>
<p class="p1">平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。</p>
<p class="p2">在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。</p>
<p class="p3">All it took was one glance。
    　　Now all I ask is one chance，to try to win your heart。
    　　Just give me a chance to start。
    　　I'll show you it was meant to be。
    　　To be together is our destiny。</p>
</body>
</html>

图片与文字水平居中 vertical-align: middle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        img,span {
            vertical-align: middle;
        }
    </style>
</head>
<body>

<p>
    <img src="image/activeN.jpg" alt="">
    <span>abcdefghijkl</span>
</p>
</body>
</html>

在这里插入图片描述

4、超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*默认颜色*/
        a {
            text-decoration: none;
            color: wheat;
        }
        /*鼠标悬浮状态*/
        a:hover {
            color: brown;
            font-size: 30px;
        }
        /*鼠标按住未释放的状态*/
        a:active {
            color: blueviolet;
        }
        /*已访问的状态*/
        a:visited {

        }
        /*未访问的状态*/
        a:link {

        }
        /*text-shadow 阴影颜色 水平偏移 垂直偏移 阴影半径*/
        #price {
            text-shadow: #171673 10px 10px 2px;
        }
    </style>
</head>
<body>

<a href="">
    <img src="image/activeN.jpg" alt="" width="200px" height="200px">
</a>
<p>
    <a href="">有内味儿了</a>
</p>
<p>
    <a href="">作者：某不知名网友</a>
</p>
<p id="price">
    ￥999.00
</p>
</body>
</html>

5、列表

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div id="nav">
    <h2 class="title">商品分类</h2>
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
        <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
    </ul>
</div>



</body>
</html>

CSS：

#nav {
    width: 300px;
}
.title {
    font-size: 20px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: rosybrown;
}
/*list-style
    none 去掉圆点
    circle 空心圆
    decimal 数字
    square 正方形
*/
ul li {
    height: 30px;
    list-style: none;
}
ul {
    background: rgba(18, 16, 18, 0.5);
}
a {
    text-decoration: none;
    color: #000000;
}
a:hover {
    color: orange;
    text-decoration: underline;
}

6、背景

背景颜色
背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div {
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            background-image: url("image/2.jpg");
            /*默认是全部平铺的*/
        }
        .d1 {
            background-repeat: repeat-x;
        }
        .d2 {
            background-repeat: repeat-y;
        }
        .d3 {
            background-repeat: no-repeat;
        }
    </style>

</head>
<body>

<div class="d1">div1</div>
<div class="d2">div2</div>
<div class="d3">div3</div>

</body>
</html>

在5的基础上增加小图标

HTML无变化

CSS：

.title {
    font-size: 20px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;

    background: red url("../2.jpg") 250px 0px no-repeat;
}
ul li {
    height: 30px;
    list-style: none;
    background-image: url("../2.jpg");
    background-repeat: no-repeat;
    background-position: 210px 0px;
}

7、渐变

https://www.grabient.com/ 在线渐变配色网站，交互操作超方便，而且好康！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-color: #4158D0;
            background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

        }
    </style>
</head>
<body>
https://www.grabient.com/

</body>
</html>

四、盒子模型

1、概述

在这里插入图片描述

margin：外边距
padding：内边距
border：边框
**盒子的计算方式：**margin+border+padding+内容宽度

2、边框

边框颜色
边框样式
边框粗细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*body的默认外边距为8*/
        /*常见操作：
            h1,ul,li,a,body {
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        */

        body {
            margin: 0;
        }
        #box {
            width: 300px;
            border: 2px solid red ;
        }
        h2 {
            font-size: 18px;
            background-color: wheat;
            line-height: 30px;
            /*默认外边距为14.940*/
            margin: 0;
        }
        form {
            background: #FFCC70;
        }
        div:nth-of-type(1)>input {
            border: 3px solid black;
        }
        div:nth-of-type(2) input {
            border: 3px dashed powderblue;
        }
    </style>

</head>
<body>

<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="password">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="email">
        </div>
    </form>
</div>

</body>
</html>

3、圆角边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            /*左上 右上 右下 左下   顺时针*/
            border-radius: 50px 20px 10px 5px;
            /*圆圈： 圆角=半径*/
            border-radius: 100px;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

半圆以及图片头像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1 {
            border: 3px solid black;
            width: 100px;
            height: 100px;
            border-radius: 50px 50px 0 0;
        }
        /*半圆*/
        .d2 {
            border: 3px solid black;
            width: 100px;
            height: 50px;
            border-radius: 50px 50px 0 0;
        }
        img {
            /*图片为40*40*/
            border-radius: 20px;
        }
    </style>
</head>
<body>
<div class="d1"></div>
<br><br>
<div class="d2"></div>
<br><br>
<img src="image/2.jpg" alt="">
</body>
</html>

4、盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 3px solid black;
            /*x轴 y轴 模糊半径 颜色*/
            box-shadow: 10px 10px 30px red;
        }
        img {
            border-radius: 20px;
            box-shadow: 10px 10px 20px yellow;


        }
    </style>
</head>
<body>
<div></div>
<br><br>
<img src="image/2.jpg" alt="">
</body>
</html>

五、浮动

标准文档流：

块级元素：独占一行（h1-h6、p、div、列表…）
行内元素：不独占一行（span、a、img…）
行内元素可以被包含在块级元素中，反之不可以

1、display

block 块元素
inline 行内元素
inline-block 是块元素但是可以内联在一行
none

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        div {
            width: 100px;
            height: 100px;
            border: 1px solid black;
			display: none;
        }
        span {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            display: inline-block;
        }
    </style>
</head>
<body>
<div>块级元素</div>
<span>行内元素</span>
</body>
</html>

这是一种实现行内元素排列的方式，但大多数情况使用的都是float

2、float

浮动的盒子可以向左浮，也可以向右浮，直到它的外边缘碰到包含框或另一个浮动盒子为止
与clean：both 搭配使用，可以既浮动又保持原有状态（块元素等）

3、父级边框塌陷问题

当边框内所有元素均为浮动时，父级边框便会塌陷（是一种错误情况）

clear：

clear：right; 右侧不允许有浮动元素
clear：left; 左侧不允许有浮动元素
clear：both; 两侧不允许有浮动元素
clear：none;

解决方案：

增加父级元素的高度

#father {
    border: 1px #000 solid;
    height: 800px;
}

增加一个空的div块，清除浮动

<div class="clear"></div>

.clear {
	clear: both;
	margin: 0;
	padding: 0;
}

overflow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content {
            width: 440px;
            height: 300px;
            /*超出部分隐藏*/
            overflow: hidden;
            /*滑动滚轮*/
            overflow: scroll;
        }
    </style>
</head>
<body>
<div class="content">
    <img src="activeN.jpg" alt="">
    <p>个人介绍：劲夫劲夫，全场欢呼。 腕豪腕豪，女人哀嚎。 瑟提瑟提，女人天敌。 闪现劲夫，女人痛哭 引燃劲夫，全场欢呼 劲夫带丛刃，咏春变叶问 征服者坚毅不倒，劲夫变身洪金宝 黑切破败布甲鞋，三拳打死李连杰 破败出的早，女人跑不了 破败早点出，女人一直哭 三项一出，女人啼哭。 黑切握在手，女人直发抖。 破败出得早，女人跑不了。 巨九手里拿，女人头皮麻。 左板甲，右血手，女拳也得绕着走。</p>
</div>
</body>
</html>

在父类添加一个伪类 after （强力推荐）

#father:after{
    content: '';
    display: block;
    clear: both;
}

六、定位

1、相对定位

相对定位 position：relative;
相对于原来的位置进行指定的偏移
相对定位时，元素仍在标准文档流中，原位置会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            padding: 20px;
        }
        div {
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        /*相对定位：相对于自己原来的位置进行偏移*/
        #father {
            border: 1px solid black;
        }
        #first {
            border: 1px dashed #1827ff;
            background-color: wheat;
            position: relative;   /*相对定位：上下左右*/
            top: -30px;
        }
        #second {
            border: 1px dashed #1827ff;
            background-color: #2c17ff;
        }
        #last {
            border: 1px dashed #1827ff;
            background-color: #7bffec;
            position: relative;
            top: 30px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="last">第三个盒子</div>
</div>
</body>
</html>

练习：

使用div和a标签进行布局页面
每个超链接宽度和高度均为100px，鼠标悬停时变色

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 50px;
            border: 2px solid black;
            width: 346px;
            height: 346px;

        }
        a {
            display: block;
            width: 100px;
            height: 100px;
            text-decoration: none;
            text-align: center;
            line-height: 100px;
            color: white;
            background-color: deeppink;
            font-size: 18px;
            text-align: center;
            border: 1px solid black;
        }
        a:hover {
            background-color: blue;
        }
        .d1 {
            display: inline-block;
            margin-left: 20px;
            margin-top: 20px;
        }
        .d2 {
            display: inline-block;
            float: right;
            margin-right: 20px;
            margin-top: 20px;
        }
        .d3 {
            display: inline-block;
            margin-left: 20px;
        }
        .d4 {
            display: inline-block;
            float: right;
            margin-right: 20px;
        }
        .d5 {
            margin-left: 122px;
        }
    </style>
</head>
<body>
<div class="d1">
    <a href="">链接1</a>
</div>
<div class="d2">
    <a href="">链接2</a>
</div>
<div class="d5">
    <a href="">链接5</a>
</div>
<div class="d3">
    <a href="">链接3</a>
</div>
<div class="d4">
    <a href="">链接4</a>
</div>

</body>
</html>

注：每个div均有边框，因此在计算位置时需加入边框的长度

练习：

在上题的基础上，用相对定位完成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box {
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red;
        }
        a {
            width: 100px;
            height: 100px;
            text-decoration: none;
            background-color: deeppink;
            line-height: 100px;
            text-align: center;
            display: block;
            color: white;
        }
        a:hover {
            background-color: blue;
        }
        .a2,.a4 {
            position: relative;
            left: 200px;
            top: -100px;
        }
        .a5 {
            position: relative;
            left: 100px;
            top: -300px;
        }
    </style>
</head>
<body>
<div id="box">
    <a href=""class="a1">链接1</a>
    <a href=""class="a2">链接2</a>
    <a href=""class="a3">链接3</a>
    <a href=""class="a4">链接4</a>
    <a href=""class="a5">链接5</a>
</div>
</body>
</html>

2、绝对定位

定位：基于XXX定位，上下左右

若没有父级元素定位，则相对浏览器进行定位
假设父级元素存在定位，我们会相对父级元素定位
在父级元素范围内移动
- 相对于父级或浏览器的位置，进行指定的偏移
- 绝对定位的话，它不再标准文档流中，原来的位置不会被保留

#father {
    border: 1px solid black;
    position: absolute;
}
#second {
            border: 1px dashed #1827ff;
            background-color: #2c17ff;
            position: absolute;
            right: 30px;
            top: -10px;
        }

3、固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            height: 1000px;
        }
        /*绝对定位：相对浏览器*/
        div:nth-of-type(1) {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        /*fixed 固定定位*/
        div:nth-of-type(2) {
            width: 50px;
            height: 50px;
            background: #FFCC70;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>

<div>div1</div>
<div>div2</div>
</body>
</html>

4、z-index与透明度

图层

在这里插入图片描述

z-index：默认为0，无上限

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
    <ul>
        <li><img src="activeN.jpg" alt=""></li>
        <li class="tip">不是蒜头王叭</li>
        <li class="BG"></li>
        <li>2021年1月29日15:42:56</li>
        <li>地点：米奇妙妙屋</li>
    </ul>
</div>
</body>
</html>

#content {
    width: 440px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 14px;
    line-height: 25px;
    border: 1px solid black;
}
ul,li {
    padding: 0;
    margin: 0;
    list-style: none;
}
/*父级元素相对定位*/
#content ul {
    position: relative;
}
.tip, .BG {
    position: absolute;
    width: 440px;
    top: 415px;
    height: 25px;
}
.tip {
    /*z-index 底层为0*/
    z-index: 1;
    color: white;
}
.BG {
    background: black;
    /*背景透明度*/
    opacity: 0.5;
}

七、总结

在这里插入图片描述