CSS语言

余杯冷饮

已于 2023-05-30 12:49:49 修改

阅读量561

点赞数

文章标签： css 前端

于 2023-04-04 16:28:50 首次发布

本文链接：https://blog.csdn.net/weixin_56584626/article/details/129956341

版权

本文介绍了CSS的基础知识，包括层叠样式表的作用、如何添加样式（行内、内部、外部样式）、选择器的类型（如标签、类、ID选择器及层次选择器）以及如何使用选择器进行元素定位。还详细讲解了网页美化、盒子模型、浮动和定位的概念与应用，如文字样式、阴影效果、超链接样式、浮动元素的处理以及相对、绝对和固定定位等，这些都是构建和布局网页的关键技术。

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

一、CSS是什么

(Cascading Style Sheet):层叠级联样式表
CSS:表现(美化网页),字体,颜色,边距,高度,宽度,背景图片,网页定位,网页浮动

二、CSS怎么用(快速入门)

1.行内样式

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

<!--行内样式-->
<h1 style="color: red" >我是标题</h1>

</body>
</html>

2.内部样式

头部style标签:

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

    <!-- 在style中编写css代码
        语法:{
            声明1;
            声明2;
            声明3;
        }
        -->
    <style>
        h1{
            color: red;
            font-size: 10px;
        }
    </style>
</head>
<body>

<h1>我是标题</h1>

</body>
</html>

建议使用这种规范:

3.外部样式

引入CSS文件:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NyH3J8Hd-1680596907761)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230324172737067.png)]

CSS的优势:

内容和表现分离
网页结构表现统一,可以实现复用
样式十分丰富

优先级:就近原则

三、CSS选择器

选择页面上某一个或者某一类元素

1.基本选择器

1.1 标签选择器

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

    <style>
   h1{
       color: red;
   }
        
   p{
       color: red;
   }
    </style>
    
</head>
<body>

<h1>我是标题</h1>
<p>听说</p>

</body>
</html>

1.2 类选择器

可以复用

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

    <style>
        .lfq{
            color: red;
        }

        .tbq{
            color: aqua;
        }
        .lby{
            color: aquamarine;
        }
        .hxq{
            color: blue;
        }
    </style>

</head>
<body>

<h1 class="lfq">我是标题1</h1>
<h1 class="tbq">我是标题2</h1>
<h1 class="lby">我是标题3</h1>
<p class="hxq">听说</p>

</body>
</html>

1.3 id选择器

全局唯一

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

    <style>
        #1{
            color: blue;
        }
        #2{
            color: aquamarine;
        }
        #3{
            color: red;
        }
    </style>

</head>
<body>
    
<h1 id="1">我是标题1</h1>
<h1 id="2">我是标题2</h1>
<h1 id="3">我是标题3</h1>

</body>
</html>

优先级:id选择器>class选择器>标签选择器

2.层次选择器

2.1 后代选择器:

body p{}

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

    <style>
       body p{
           background: red;
       }
    </style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
</body>
</html>

2.2 子选择器

body>p{}

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

    <style>
        body>p {
            background: aquamarine;
        }
    </style>
</head>
<body>

<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>

</body>
</html>

2.3 相邻兄弟选择器

.active + p{}

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

    <style>
        .active + p{
            background: blue;
        }
    </style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
</body>
</html>

2.4 通用兄弟选择器

.active~p{}

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

    <style>
        .active~p{
            background: beige;
        }
    </style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
</body>
</html>

3.结构伪类选择器

伪类:条件

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

    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            background: blue;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
            background: red;
        }
    </style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
</body>
</html>

4.属性选择器

a[id=first]{}

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

    <style>
.damo a{
    float : left;
    display: block;
    height: 50px;
    width: 50px;
    border-radius: 10px;
    background: aquamarine;
    text-align: center;
    color: bisque;
    text-decoration: none;
    margin-right: 5px;
    font : bold 20px/50px Arial;
}

        /*存在id属性的元素*/
        a[id]{
            background: yellow;
        }
        a[id=first]{
            background: bisque;
        }
        
    </style>
</head>
<body>
<p class="damo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="01.jpg" class="links item">2</a>
    <a href="">3</a>
    <a href="">4</a>
    <a href="">5</a>
    <a href="">6</a>
    <a href="">7</a>
    <a href="">8</a>
    <a href="">9</a>
    <a href="">10</a>
</p>
</body>
</html>

四、美化网页(文字,阴影,超链接,列表)

1.为什么美化网页

有效地传递页面信息
美化网页,页面漂亮,才能吸引用户
凸显页面的主题
提高用户的体验

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            background: yellow;
        }
    </style>
</head>
<body>
欢迎学习<span>Java</span>
</body>
</html>

2.字体样式

font-family:字体样式

font-size:字体大小

font-weight:字体粗细

color:字体颜色

3.文本样式

color:颜色

text-align:文本对齐方式

text-indent:首行缩进

line-height:行高

text-decoration:装饰

vertical-align:middle:文本图片水平对齐

4.超链接

超链接:

<a href=""></a>

鼠标悬浮颜色:

/*鼠标悬浮颜色*/
a:hover{
    color: blue;
}

鼠标按住未释放颜色:

/*鼠标按住未释放颜色*/
a:active{
    color: yellow;
}

5.阴影

text-shadow:阴影颜色,水平偏移,垂直偏移,阴影半径

五、盒子模型

1.什么是盒子模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YRJ288r2-1680596907762)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230329215950436.png)]

margin:外边距

padding:内边距

border:边框

2.边框

2.1 边框的粗细

border:1px ;

2.2 边框的样式

border: solid;

2.3 边框的颜色

border: red;

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

    <style>
        body{
            margin: 0px;
            padding: 0px;

        }
        #box{
            width: 300px;
            border:1px solid red;
            margin-left: 700px;
            margin-top: 300px;
        }
        form{
            background: aquamarine;
        }
        div:nth-of-type(1) input{
            border: 3px solid black;
        }
        h2{
            font-size: 20px;
            background:red;
            line-height: 30px;
        }
    </style>
</head>
<body>

<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div class=""> 
            <span>用户名:</span>
            <input type="text">
        </div>
        <div>
            <span>密码:</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱:</span>
            <input type="text">
        </div>
    </form>
</div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VqawI7RM-1680596907762)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230329221915312.png)]

3. 外边距

居中:

margin: 0 auto;

左外边距:

 margin-left: 700px;

上外边距:

margin-top: 300px;

右外边距:

 margin-left: 700px;

4.内边距

左内边距:

padding-left: 100px;

右内边距:

padding-right: 100px;

上内边距:

padding-top: 100px;

下内边距:

padding-bottom: 100px;

5.盒子的大小

盒子的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

六、浮动

块级元素:独占一行

h1~h6   p   div   列表...

行内元素:不独占一行

span   a   img   strong...

1.display

变为块级元素:独占一行

display: block;

变为行内元素:在同一行

display: inline;

行内块元素:既是行内元素也是块级元素

display: inline-block;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul li{
            display: inline-block;
        }
    </style>
</head>
<body>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EPCbNxUj-1680596907763)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230329224628023.png)]

消失:

display: none;

2.浮动

向左浮动:

float: left;

向右浮动:

float: right;

3.父级边框塌陷

<body>
        <div id="father">
            <div class="layer01"><img src="img/1.jpg" alt=""></div>
            <div class="layer02"><img src="img/2.jpg" alt=""></div>
            <div class="layer03"><img src="img/3.jpg" alt=""></div>
            <div class="layer04">
                浮动的盒子可以向左，也可以向右。。。。。哈哈啊哈哈哈哈哈哈
            </div>
           <!-- <div class="clear"></div>-->
        </div>
</body>

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px #000 solid;
    /*height: 500px;*/

    /*overflow: hidden;*/
}
/*#father:after{
    content: '';
    display: block;
    clear: both;
}*/
.layer01{
    border: 1px #F00 dashed;
    display: inline-block;
    float: left;
}
.layer02{
    border: 1px #00F dashed;
    display: inline-block;
    float: left;
}
.layer03{
    border: 1px #060 dashed;
    display: inline-block;
    float: left;
}
/*
clear: left; 左侧不允许有浮动元素
clear: right; 右侧不允许有浮动元素
clear: both; 两侧不允许有浮动元素
*/
.layer04{
    border: 1px #666 dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    float: left;
    clear: both;
}


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

塌陷状态：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JvWaPAV2-1680596907763)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230402231304779.png)]

解决方案：

3.1增加父级元素的高度

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

3.2增加一个空的div标签，设置属性

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

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

3.3父级元素增加属性

overflow: hidden; //溢出时，隐藏;边框大小根据内容适应
overflow: none;

3.4父类增加一个伪类

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

不塌陷状态：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-enkZC0dj-1680596907764)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230402231353986.png)]

七、定位

css中的position属性，position有四个值：

relative（相对定位）
absolute（绝对定位）
static（静态定位）
fixed（固定定位）

通过top、left、bottom、right来调整元素位置

1.相对定位relative

<!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 #666;
            padding: 0px;
        }
        #first{
            background: #e3bca9;
            border: 1px dashed coral;
            position: relative;     /*相对定位：上下左右*/
            top: -20px;
            left: 20px;
        }
        #second{
            background: #b2d4b2;
            border: 1px dashed green;
        }
        #third{
            border: 1px dashed #c71a49;
            background: #e7b9bd;
            position: relative;
            bottom: -20px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Etm06cJG-1680596907764)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230404104624509.png)]

相对定位：

position: relative;

相对于原来的位置，进行指定的移动，相对定位的话，他任然在标准文档流中，原来的位置会被保留

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

方块定位练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            border: 1px solid red;
            height: 300px;
            width: 300px;
            padding: 10px;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background: #c71a49;
            line-height: 100px;
            text-align: center;
            color: white;
            position: relative;
        }
        .a1{
            display: block;
        }
        .a2{
            display: block;
            left: 100px;
        }
        .a3{
            display: block;
        }
        .a4{
            display: block;
            left: 200px;
            bottom: 300px;
        }
        .a5{
            display: block;
            left: 200px;
            bottom: 200px;
        }
    </style>
</head>
<body>
<div class="father">
    <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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h4K299fP-1680596907765)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230404104714444.png)]

2.绝对定位absolute

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

1.没有父级元素定位的前提下，相对于浏览器定位

2.假设父级元素存在定位，通常会相对于父级元素进行偏移

3.在父级元素范围内移动

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

<!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 #666;
            padding: 0px;
        }
        #first{
            background: #e3bca9;
            border: 1px dashed coral;
            position: absolute;    /*绝对定位，默认相对于浏览器偏移*/
            top: 20px;
            left: 20px;
        }
        #second{
            background: #b2d4b2;
            border: 1px dashed green;
            position: absolute;
            top: 20px;
            right: 20px;
        }
        #third{
            border: 1px dashed #c71a49;
            background: #e7b9bd;
            position: absolute;
            bottom: 600px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qy6nKb5I-1680596907765)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230404105633810.png)]

3.固定定位fixed

固定定位是元素固定于浏览器可视区的位置，主要使用场景：可以在浏览器页面滚动时元素的位置不会改变

特点：

跟父元素没有任何关系
不随滚动条滚动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 2000px;
        }
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background: #c71a49;
            text-align: center;
            position: absolute;
            right: 0px;
            bottom: 0px;
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background:yellow;
            text-align: center;
            position: fixed;/*固定定位*/
            right: 0px;
            bottom: 0px;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VRy460Oh-1680596907766)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230404110535644.png)]

滚动条下拉后，固定定位任然不动

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cxI8VsY0-1680596907766)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230404110553327.png)]

4.z-index

在使用定位布局的时候，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            padding: 0px;
            margin: 0px;
            font-size: 12px;
            line-height: 25px;
            border: black 1px solid;
            width: 200px;
        }
        ul,li{
            padding: 0px;
            margin: 0px;
            list-style: none;
        }
        div ul{
            position: relative;
        }
        .tipText,.tipBtg{
            position: absolute;
            width: 300px;
            height: 25px;
            top: 180px;
        }
        .tipBtg{
            background: black;
        }
        .tipText{
            color: #b2d4b2;
            z-index: 999;  /*文字层级优先级999*/
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li><img src="../image/01.png" alt=""></li>
        <li class="tipText">学习微服务</li>
        <li class="tipBtg"></li>
        <li>时间：2099,1,1</li>
        <li>地点：火星一号基地</li>
    </ul>
</div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8YtB32zY-1680596907766)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230404112601057.png)]

八、网页动画(特效)

@keyframes 规则是创建动画。

@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。

当在 @keyframes 创建动画，要把它绑定到一个选择器，否则动画不会有任何效果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>
        div
        {
            width:200px;
            height:200px;
            background:red;
            animation:myfirst 5s; 
        }
        @keyframes myfirst
        {
            from {background:red;}
            to {background:yellow;}
        }

    </style>
</head>
<body>
<div></div>
</body>
</html>

tion: relative;
}
.tipText,.tipBtg{
position: absolute;
width: 300px;
height: 25px;
top: 180px;
}
.tipBtg{
background: black;
}
.tipText{
color: #b2d4b2;
z-index: 999; /文字层级优先级999/
}