前端样式CSS3

最新推荐文章于 2024-10-14 18:12:09 发布

qq_44387286

最新推荐文章于 2024-10-14 18:12:09 发布

阅读量771

点赞数 2

文章标签：前端 css3 css

本文链接：https://blog.csdn.net/qq_44387286/article/details/129903794

版权

本文详细介绍了CSS的基本概念，包括内容与表现的分离、选择器的使用（如标签选择器、类选择器、ID选择器）、盒子模型、浮动定位以及网页美化方法，如字体、颜色、背景等。此外，还探讨了CSS的导入方式和不同类型的样式优先级。

摘要由CSDN通过智能技术生成

1.什么是CSS

如何学习

CSS是什么
CSS怎么用（快速入门）
CSS选择器（重点+难点）
美化网页（文字，阴影，超链接，列表渐变…)
盒子模型
浮动
定位
网页动画（特效效果）

cascading style sheet层叠样式表

css：表现（网页美化）

字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动…

2.基本入门

html

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

    <!--规范 <style> 可以写css的代码，每一个声明，最好以分号结尾。
    语法：
        选择器{
            声明1;
            声明2;
            声明3;
        }
    -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

css

h1{
    color: red;
}

css的优势：

内容和表现分离
网页结构表现统一，可以实现复用
样式十分丰富
建议使用独立于html的css文件
利用SEO，容易被搜索引擎收录

3.CSS的三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <style>
        h1{
            color: green;
        }
    </style>
    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>
<!--优先级：就近原则-->

<!--行内样式 在标签元素中，编写一个style属性，编写样式即可-->
    <h1>标题元素</h1>
</body>
</html>

h1{
    color: blue;
}

拓展：外部样式两种写法

链接式：

html

<!--外部样式-->
<link rel="stylesheet" href="css/style.css">

导入式：

@import是CSS2.1特有的！

<!--导入式-->
<style>
		@import url("css/style.css");
</style>

4.选择器

作用：选择页面上的某一个或者某一类元素

4.1基本选择器

标签选择器：选择一类标签标签{}

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

    <style>
        /*标签选择器 会选择这个页面上所有的整个标签的元素*/
        h1{
            color: #80206f;
            background: #83ff82;
            border-radius: 24px;
        }
        p{
            font-size: 80px;
        }
    </style>
</head>
<body>
<h1>学Java</h1>
<h1>学Java</h1>
<p>听狂神说</p>
</body>
</html>

类选择器 class{} 选择所有class属性一致的标签，跨标签

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

    <style>
        /*类选择器的格式  .class的名称{}
        好处：可以多个标签归类 是同一个class 可以复用
        */
        .qingjiang{
            color: green;
        }
        .kuangshen{
            color: #f59972;
        }
    </style>

</head>
<body>
<h1 class="qingjiang">标题1</h1>
<h1 class="kuangshen">标题2</h1>
<h1 class="qingjiang">标题3</h1>
</body>
</html>

id选择器：全局唯一！#id名{}

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

    <style>
        /*
        id选择器  id必须保证全局唯一
        #id名称{}
        优先级：
        不遵循就近原则，固定的
        id选择器 > class选择器 > 标签选择器
        */
        #kuangshen{
            color: red;
        }
        #qingjiang{
            color: #80206f;
        }
    </style>
</head>
<body>
<h1 id="qingjiang">标题1</h1>
<h1 id="kuangshen">标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>

优先级：id>class>标签

4.2层次选择器

后代选择器：在某个元素后面祖爷爷爷爷爸爸你

/*后代选择器*/
body p{
    background: red;
}

子选择器一代儿子

/*子选择器*/
body > p{
    background: #80206f;
}

相邻兄弟选择器

/*相邻兄弟选择器 只有一个 相邻（向下）*/
.active + p{
    background: red;
}

通用选择器

/*通用选择器 当前元素的所有向下兄弟元素*/
.active ~ p{
    background: aqua;
}

4.3结构伪类选择器

伪类：条件

/*ul的第一个元素*/
ul li:first-child{
    background: #f59972;
}
/*ul的最后一个元素*/
ul li:last-child{
    background: #83ff82;
}

/*选中p1,定位到父元素，选中当前的第一个元素
        选择当前p元素的父级元素，选中父级元素的第一个，并且是p元素才生效  顺序
        */
p:nth-child(1){
    background: red;
}
/*选中父元素下的第二个p元素  类型*/
p:nth-of-type(2){
    background: green;
}

a:hover{
    background: yellow;
}

4.4属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: #f59972;
            text-align:center;
            color: #5b3480;
            text-decoration: none;
            margin-right:5px;
            font:bold 20px/50px Arial;
        }
        /*属性名 属性名=属性值（正则）
        = 绝对等于
        *= 包含这个元素
        ^= 以这个开头
        $= 以这个结尾
        */
       /*存在id属性的元素 a[]{}*/
       /* a[id]{*/
       /*     background: yellow;*/
       /* }*/

        /*id=first的元素*/
        /*a[id=first]{*/
        /*    background: gray;*/
        /*}*/

        /*class中含有link的元素*/
        /*a[class*="link"]{*/
        /*    background: green;*/
        /*}*/

        /*选中href中以http开头的元素*/
        /*a[href^="http"]{*/
        /*    background: aqua;*/
        /*}*/

        /*选中以pdf结尾的元素*/
        a[href$="pdf"]{
            background: #3453f5;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="link item first" id="first"></a>
    <a href="" class="link item active" target="_blank" title="test"></a>
    <a href="image/123.html" class="link item"></a>
    <a href="image/123.png" class="link item"></a>
    <a href="image/123.jpg" class="link item"></a>
    <a href="abc" class="link item"></a>
    <a href="/a.pdf" class="link item"></a>
    <a href="/abc.pdf" class="link item"></a>
    <a href="abc.doc" class="link item"></a>
    <a href="abcd.doc" class="link item"></a>
</p>
</body>
</html>

5.美化网页元素

span标签：重点要突出的字，使用span套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hh{
            font-size: 50px;
        }
    </style>
</head>
<body>
欢迎学习<span class="hh">java</span>
</body>
</html>

5.1字体样式

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

<!--
       font-family 字体
       font-size  字体大小
       font-weight 字体粗细
       color   字体颜色
-->
    <style>
        body{
            font-family: "Arial Black",楷体;
            color: #3453f5;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
        }
    </style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">
平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在第六代魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>
<p class="p2">
在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块杂牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>
<p>
I love three things:the sun ,the moon and you.
The sun is for the day ,the moon is for the night
and you forever.
</p>
</body>
</html>

5.2文本样式

颜色 color rgb rgba
文本对齐的方式 text-align=center
首行缩进 text-indent:2em
行高 line-height 单行文字上下居中！line-height = height
装饰 text-decoration
文本图片对齐

<!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 段落首行缩进
        line-height: 200px; 行高 如果和块的高度一致，可实现居中
       -->

    <style>
        h1{
            color: rgba(0,255,255,0.9);
            text-align: center;
        }

        .p1{
            text-indent: 2em;
        }

        .p3{
            background: #83ff82;
            height: 200px;
            line-height: 200px;
            text-align: center;
        }
        /*下划线*/
        .l1{
            text-decoration: underline;
        }
        /*中划线*/
        .l2{
            text-decoration: line-through;
        }
        /*上划线*/
        .l3{
            text-decoration: overline;
        }
         /* 水平对齐 参照物 a,b
         */
        img,span{
            vertical-align: middle;
        }
    </style>
</head>
<body>

<p class="l1">12312</p>
<p class="l2">12312</p>
<p class="l3">12312</p>

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

<p>
    <img src="image/1.png" alt="">
    <span>你好呀java</span>
</p>
</body>
</html>

5.3超链接伪类和文本阴影

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

    <style>
        a{
            text-decoration: none;
            color: blue;
        }
        a:hover{
            color: #83ff82;
        }
        /*text-shadow:阴影颜色 水平偏移 垂直偏移 阴影半径*/
        #price{
            text-shadow: #f59972 10px 10px 1px;
        }
    </style>
</head>
<body>
<a href="#">
    <img src="image/1.png" alt="">
</a>
<p>
    <a href="#">码出高效，java开发手册</a>
</p>
<p>
    <a href="#">作者：古井老师</a>
</p>
<p id="price">
    ￥99
</p>
</body>
</html>

5.4列表样式

#nav{
    width: 300px;
}

.title{
    font-size: 20px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 30px;
    background: #f5ca42;

}
/*list-style
    none 去掉原点
    circle 空心圆
    demical 数字
    square 正方形
*/
ul{
    background: gray;
}
ul li{
    height: 30px;
    list-style: none;
}

a{
    color: #000;
    text-decoration: none;
}
a:hover{
    color: blue;
    text-decoration: underline;
}

5.5背景

背景颜色

背景图片

<style>
    div{
        width: 1000px;
        height: 700px;
        border:1px solid red;
        background-image: url("images/1.png");
        /*默认全部是平铺的*/
    }
    .div1{
        background-repeat: repeat-x;
    }
    .div2{
        background-repeat: repeat-y;
    }
    .div3{
        background-repeat: no-repeat;
    }
</style>

.title{
    font-size: 20px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 30px;
    /*颜色 图片 图片位置 平铺方式*/
    background: #f5ca42 url("../images/1.png") 270px 10px no-repeat;

}
/*list-style
    none 去掉原点
    circle 空心圆
    demical 数字
    square 正方形
*/
ul{
    background: gray;
}
ul li{
    height: 30px;
    list-style: none;
    background-image: url("../images/1.png");
    background-repeat: no-repeat;
    background-position: 230px 3px;
}

5.5渐变

background-color: #4158D0;
background-image: linear-gradient(8deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

6.盒子模型

6.1什么是盒子模型

margin:外边距
padding:内边距
border:边框

6.2边框

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

<style>
    /*body总是默认有一个外边距 margin:0*/
    /*h1,ul,li,a,body{*/
    /*    margin: 0;*/
    /*    padding: 0;*/
    /*    text-decoration: none;*/
    /*}*/
    /*border 粗细 样式 颜色*/
    #box{
        width: 300px;
        border:1px solid red;
    }
    h2{
        font-size: 16px;
        background-color: #cd2e94;
        line-height: 30px;
        color: white;
    }
    form{
        background: #83ff82;
    }
    div:nth-of-type(1) input{
        border:3px solid black;
    }
    div:nth-of-type(2) input{
        border:3px dashed yellow;
    }
    div:nth-of-type(3) input{
        border:3px solid blue;
    }
</style>

6.3内外边距

<!--外边距的作用：居中-->
<style>

    #box{
        width: 300px;
        border:1px solid red;
        margin: 0 auto;
    }
    /*顺时针旋转
    margin:0
    margin:0 1px
    margin:0 1px 2px 3px
    */
    h2{
        font-size: 16px;
        background-color: #cd2e94;
        line-height: 30px;
        color: white;
        margin: 0;
    }
    form{
        background: #83ff82;
    }
    input{
        border:1px solid black;
    }
    div:nth-of-type(1){
        padding: 10px;
    }
</style>

盒子的计算方式：你这个元素到底多大？

margin+border+padding+内容

6.4圆角边框

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

6.5阴影

<style>
    div{
        width: 100px;
        height: 100px;
        border:10px solid red;
        box-shadow: 10px 10px 100px yellow;
    }
</style>

7.浮动

7.1.标准文档流

块级元素：独占一行

h1~h6 p div 列表......

行内元素：不独占一行

span a img strong......

行内元素可以被包含在块级元素中，反之则不可以

7.2.display

<style>
    div{
        width: 100px;
        height: 100px;
        border:1px solid red;
        display: inline;
    }
    span{
        width: 100px;
        height: 100px;
        border:1px solid red;
        display: inline-block;
    }
</style>

display也是实现行内元素排列的方式，但是我们很多情况都是用float.

7.3.float

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: black 1px solid;
}
.layer01{
    border: 2px dashed #ff0000;
    display: inline-block;
    float: right;
}
.layer02{
    border: 2px dashed #00ff00;
    display: inline-block;
    float: right;
}
.layer03{
    border: 2px dashed #000068;
    display: inline-block;
    float: right;
}
.layer04{
    border: 2px dashed #666;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    float: right;
}

7.4父级边框塌陷问题

clear

/*clear:right 右侧不允许有浮动元素*/
/*clear:left  左侧不允许有浮动元素*/
/*clear:both  两侧不允许有浮动元素*/
/*clear:none */

解决方案：

增加父级元素的高度、

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

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

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

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

overflow

在父级元素中添加一个 overflow:hidden;

父类添加一个伪类：after

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

小结：

浮动元素后面增加空div

简单，代码中尽量避免空div
设置父元素的高度

简单，元素假设有了固定的高度，就会被限制

overflow

简单，下拉的一些场景避免使用
父类添加一个伪类：after(推荐)

写法稍微复杂一点，但是没有副作用，推荐使用

7.5.对比

display

方向不可以控制
float

浮动起来的话会脱离标准文档流吗，所以要解决父级边框塌陷的问题。

8.定位

8.1.相对定位

<!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 red;
        }
        #div1{
            background-color: #ffb850;
            border:1px dashed green;
            position: relative;/*相对定位*/
            top:-20px;
            left: 10px;
        }
        #div2{
            background-color: #d251ff;
            border:1px dashed yellow;
            position: relative;
            bottom: 100px;
            right: 20px;
        }
        #div3{
            background-color: #43fffa;
            border:1px dashed blue;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="div1">第一个盒子</div>
    <div id="div2">第二个盒子</div>
    <div id="div3">第三个盒子</div>
</div>
</body>
</html>

相对定位：position: relative

相对于原来的位置，进行指定的偏移，相对定位的话，它依然在标准文档流中。原来的位置会保留。

top:-20px;
left: 10px;
bottom: 100px;
right: 20px;

8.2.绝对定位

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

没有父级元素定位的前提下，相对于浏览器定位
假设父级元素存在定位，我们通常会相对于父级元素进行偏移
在父级元素范围内移动

相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border:1px solid red;
            position: relative;
        }
        #div1{
            background-color: #ffb850;
            border:1px dashed green;
        }
        #div2{
            background-color: #d251ff;
            border:1px dashed yellow;
            position: absolute;//绝对定位
            right: 30px;
        }
        #div3{
            background-color: #43fffa;
            border:1px dashed blue;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="div1">第一个盒子</div>
    <div id="div2">第二个盒子</div>
    <div id="div3">第三个盒子</div>
</div>
</body>
</html>

8.3.z-index

默认是0，最高无限–999

<!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="images/bg.jpg" alt=""></li>
        <li class="tipText">学习数据库，找狂神</li>
        <li class="tipBg"></li>
        <li>时间：2020.10.1</li>
        <li>地点：北京</li>
    </ul>
</div>
</body>
</html>

opacity:0.5;//背景透明度

#content{
    width: 300px;
    margin:0;
    padding: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 2px solid red;
}
ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    width: 300px;
    height: 25px;
    position: absolute;
    top:125px;
}
.tipText{
    color: white;
    text-align: center;
    /*z-index:999;*/
}
.tipBg{
    background-color: black;
    opacity: 0.5;/*背景透明度*/
}

第三个盒子

```

8.3.z-index

默认是0，最高无限–999

<!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="images/bg.jpg" alt=""></li>
        <li class="tipText">学习数据库，找狂神</li>
        <li class="tipBg"></li>
        <li>时间：2020.10.1</li>
        <li>地点：北京</li>
    </ul>
</div>
</body>
</html>

opacity:0.5;//背景透明度

#content{
    width: 300px;
    margin:0;
    padding: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 2px solid red;
}
ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    width: 300px;
    height: 25px;
    position: absolute;
    top:125px;
}
.tipText{
    color: white;
    text-align: center;
    /*z-index:999;*/
}
.tipBg{
    background-color: black;
    opacity: 0.5;/*背景透明度*/
}