CSS

最新推荐文章于 2024-06-16 20:55:56 发布

谁砍了我的二叉树

最新推荐文章于 2024-06-16 20:55:56 发布

阅读量290

点赞数

分类专栏：我的JAVA笔记文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_46687179/article/details/120896251

版权

我的JAVA笔记专栏收录该内容

15 篇文章 1 订阅

订阅专栏

什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS：表现（美化网页）

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

快速入门

在这里插入图片描述

css的优势:

1、内容和表现分离

2、网页结构表现统一，可以实现复用

3、样式十分的丰富

4、建议使用独立于html的css文件

5、利用SEO，容易被搜索引擎收录

CSS的3种导入方式

在这里插入图片描述

选择器

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

基本选择器

标签选择器
类选择器class
ID选择器

在这里插入图片描述

层次选择器

后代选择器：在某个元素的后面。

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

子选择器：当前层。

/*子选择器*/
body>p{
    background: green;
}

相邻选择器：对被选择层的下一个兄弟生效，如果下面没有兄弟就不会生效，有多个也只生效一个。
```
/*相邻兄弟选择器:*/
.active + p{
    background: red;
}
```

通用选择器：对被选择层的向下所有兄弟生效。

/*通用选择器*/
.active~p{
    background: #e50ec7;
}

结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--不用id和class选择器-->
  <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            background: #e50ec7;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
            background: red;
        }
        /*选择第一个p元素:X:nth-child(i)选择当前层的第i个元素,如果该元素是X类就生效,否者不生效*/
        p:nth-child(3){
            background: green;
        }
        /*选择第一个p元素:X:nth-of-type(i)选择当前层的为p的第i个元素,有就生效*/
        p:nth-of-type(1){
            background: aqua;
        }
        /*点击变色*/
        a:hover{
            background: black;
        }
  </style>
</head>
<body>
  <h1>h1</h1>
  <p>p1</p>
  <p>p2</p>
  <p>p3</p>
  <ul>
      <li>l1</li>
      <li>l2</li>
      <li>l3</li>
  </ul>
  <a href="">123456789</a>

</body>
</html>

属性选择器(常用)

<!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: blue;
        text-align: center;
        color: gainsboro;
        text-decoration: none;
        margin-right: 5px;
        font: bold 20px/50px Arial;
    }
    /*a[属性/属性=属性值]
    (正则表达式)
    = 绝对等于
    *= 包含元素
    ^= 以***开头
    $= 以***结尾
    */

    /*存在id属性的元素*/
    a[id]{
      background: yellow;
    }
    /*first带不带""都可以*/
    a[id="first"]{
      background: red;
    }

    /*class中有links的元素*/
    a[class*="links"]{
      background: aqua;
    }

    /*选中href以http开头的元素*/
    a[href^="http"]{
      background: #e50ec7;
    }
    /*以last结尾*/
    a[class$="last"]{
      background: yellow;
    }

  </style>
</head>
<body>

<p class="demo">
  <a href="https://baidu.com" class="links item first" id="first" target="_blank">1</a>
  <a href="http://c.biancheng.net/view/1276.html//" class="links item active" target="_blank" title="test">2</a>
  <a href="images/123.html" class="links item">3</a>
  <a href="images/123.png" class="links item">4</a>
  <a href="images/123.jpg" class="links item">5</a>
  <a href="abc" class="links item">6</a>
  <a href="/a.pdf" class="links item">7</a>
  <a href="/abc.pdf" class="links item">8</a>
  <a href="/abc.doc" class="links item">9</a>
  <a href="/abcd.doc" class="links item last">10</a>
</p>

</body>
</html>

在这里插入图片描述

美化网页元素

span标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #title1{
        font-size: 50px;
    }
  </style>
</head>
<body>
<!--特殊突出的标签一般用span标签-->
欢迎学习 <span id="title1">Java</span>

</body>
</html>

字体标签

<!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: #e50ec7;
    }
    h1{
      font-size: 30px;
    }
    p{
      font-size: 20px;
    }
    .p1{
      font-weight: bolder;
    }

    /*组合写法oblique斜体*/
    .p2{
      font: oblique bolder 16px "楷体";
    }
  </style>
</head>
<body>

<h1>天骄战纪节选</h1>
<p class="p1">林寻眼眸一亮，擦拭掉额头汗水，长长吐了一口浊气：“终于看见有人栖居的地方了……”</p>

<p class="p2">他已经在这穷山恶水般的地方跋涉了七天之久，风餐露宿，以野果为食，一路上经历了许多凶险和磨难，好几次更是差点丧命在凶兽之口。</p>

<p>这时候能够看见一缕炊烟，虽然距离极远，可还是令林寻心中一振，原本疲惫无比的身躯重新振作起来。</p>

<p>
  Let me not to the marriage of true mindsAdmit impediments. Love is not loveWhich alters when it alteration finds,Or bends with the remover to remove:
</p>

</body>
</html>

文本标签

1、颜色 color rgb rgba

2、文本对齐方式 text-align = center

3、首行缩进 text-indent: 2em;

4、行高 line-height: 单行文字上下居中 line-height: height

5、装饰 text-decoration:

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1 {
            /*color: #f13b0b;*/
            color: rgba(0, 255, 255, 0.8); /*0.25是透明度*/
            text-align: center; /*文本居中*/
        }

        .p1 {
            text-indent: 2em; /*首行缩进两个字*/
            text-decoration: line-through; /*中划线*/
        }

        .p2 {
            text-decoration: underline; /*下划线*/
        }

        .p3 {
            text-decoration: overline; /*上划线*/
            background: aqua;
            height: 190px; /*文本高度*/
            line-height: 40px; /*行距*/
        }
        .p4 img,span{
            vertical-align: middle; /*参照互相中间对齐*/
        }
        a{
            text-decoration: none;      /*超链接去除下划线*/
        }
    </style>
</head>
<body>

<h1>天骄战纪节选</h1>
<p class="p1">林寻眼眸一亮，擦拭掉额头汗水，长长吐了一口浊气：“终于看见有人栖居的地方了……”</p>

<p class="p2">他已经在这穷山恶水般的地方跋涉了七天之久，风餐露宿，以野果为食，一路上经历了许多凶险和磨难，好几次更是差点丧命在凶兽之口。</p>

<p>这时候能够看见一缕炊烟，虽然距离极远，可还是令林寻心中一振，原本疲惫无比的身躯重新振作起来。</p>

<p class="p3">
    Let me not to the marriage of true mindsAdmit impediments. Love is not loveWhich alters when it alteration finds,Or
    bends with the remover to remove:
    Let me not to the marriage of true mindsAdmit impediments. Love is not loveWhich alters when it alteration finds,Or
    bends with the remover to remove:
    Let me not to the marriage of true mindsAdmit impediments. Love is not loveWhich alters when it alteration finds,Or
    bends with the remover to remove:
    Let me not to the marriage of true mindsAdmit impediments. Love is not loveWhich alters when it alteration finds,Or
    bends with the remover to remove:
</p>
<p class="p4">
    <img src="./images/1.png" height="200" width="200">
    <span>
        这是个头像
    </span>

</p>
<a href="">a标签默认有下划线</a>
</body>
</html>

$效果展示$

在这里插入图片描述

超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
      /*默认的颜色*/
      a{
        text-decoration: none;
        color: #000000;
      }
      /*鼠标悬浮的颜色*/
      a:hover{  /*伪类hover重点记忆*/
        color: aqua;
        font-size: larger;
      }
      /*鼠标按住未释放的颜色*/
      a:active{
        color: green;
        font-size: xxx-large;
      }
      a:visited{
          color: red;
      }
      /*文本阴影*/
      .p1{
          /*text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/
          text-shadow: #6fc6ff 10px 10px 2px;
      }
  </style>
</head>
<body>

<a href="#">
  <img src="images/1.png" alt="" height="200" width="200">
</a>
<p>
  <a href="#">码出高效:Java开发手册</a>
</p>

<p class="p1">
  <a href="#">作者:孤尽老师</a>
</p>

</body>
</html>

在这里插入图片描述

列表

$h t m l$

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link rel="stylesheet" href="CSS/style.css" type="text/css">
</head>
<body>
<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li><a href="#">AA</a>&nbsp;&nbsp;<a href="#">音箱1</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">BB</a>&nbsp;&nbsp;<a href="#">音箱2</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">CC</a>&nbsp;&nbsp;<a href="#">音箱3</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">DD</a>&nbsp;&nbsp;<a href="#">音箱4</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">EE</a>&nbsp;&nbsp;<a href="#">音箱5</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">FF</a>&nbsp;&nbsp;<a href="#">音箱6</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
    </ul>
</div>
</body>
</html>

$c s s$

#nav{		/*div标签*/
    width: 300px;
    background: aqua;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;   /*首行空一格字符*/
    line-height: 30px;
    background: #6fc6ff;
}
/*ul li*/
/*
list-style:
none 去掉原点
circle 空心圆
decimal 数字
square 正方形
*/
/*ul{*/
/*    background: aqua;*/
/*}*/
ul li{
    height: 30px;
    list-style: none;       /*列表就没有了黑点*/
    text-indent: 1em;
}
a{
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    color: #bb3e92;
}
a:hover{
    color: yellow;
    font-size: 18px;
}

在这里插入图片描述

背景

背景颜色

背景图片

用列表的代码

background: red url("../images/1.png") 270px 2px no-repeat;

background-image: url("../images/2.png");
background-repeat: no-repeat;
background-position: 230px 1px;

效果
在这里插入图片描述

渐变

渐变CSS

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

盒子模型

什么是盒子模型

在这里插入图片描述

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

边框

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*h1,ul,li,a,body{*/
        /*  margin: 0;      !*因为外边距默认初始有值(8),所以想要对准顶格,就要重新赋值*!*/
        /*  padding: 0;*/
        /*  text-decoration: none;*/
        /*}*/
        #box {
            /*border: 粗细, 样式, 颜色*/
            width: 300px;
            border: 1px solid red;
        }

        h2 {
            font-size: 16px;
            background-color: rgba(208,249,57,0.77);
            line-height: 30px;
            color: rgba(137, 78, 249, 0.77);
        }

        form {
            background: #3cbda6;
        }

        div:nth-of-type(1) > input {
            border: 3px solid #e50ec7;
        }

        div:nth-of-type(2) > input {
            border: 3px dashed red;
        }

        div:nth-of-type(3) > input {
            border: 3px dashed yellow;
        }
    </style>
</head>
<body>

<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名:</span>
            <input type="text">
        </div>
        <div>
            <span>密码:</span>
            <input type="text">
        </div>
        <div>
            <span>手机号:</span>
            <input type="text">
        </div>
    </form>
</div>

</body>
</html>

效果
在这里插入图片描述

边距

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--外边距的妙用:居中元素-->
    <style>
        #box {
            /*border: 粗细, 样式, 颜色*/
            width: 300px;
            border: 1px solid red;
            margin: 0 auto; /*margin外边距  写两个参数就是上下,四个参数是上下左右*/

        }

        h2 {
            font-size: 16px;
            background-color: rgba(208, 249, 57, 0.77);
            line-height: 30px;
            color: rgba(137, 78, 249, 0.77);
            margin: 0 1px;
        }
        form {
            background: #3cbda6;
        }
        input{
            border: 1px solid black;
        }
        div:nth-of-type(1){
            padding: 10px 2px;
            border: 1px solid black;
        }
    </style>
</head>
<body>

<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名:</span>
            <input type="text">
        </div>
        <div>
            <span>密码:</span>
            <input type="text">
        </div>
        <div>
            <span>手机号:</span>
            <input type="text">
        </div>
    </form>
</div>

</body>
</html>

圆角边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    左上 右上 右下 左下
    圆圈: 圆角 = 半径
    -->

    <style>
        div {
            width: 100px;
            height: 50px;
            /*border: 10px solid red;*/
            background: red;
            border-radius: 50px 50px 0 0;
        }
        img{
            border-radius: 320px;
        }
        body{
            background: black;
        }
    </style>
</head>
<body>
<div>
</div>
    <img src="images/1.png" alt="">
</body>
</html>

在这里插入图片描述

盒子阴影

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            img {
                border-radius: 320px;
                box-shadow: 10px 10px 100px yellow; /*有发光效果*/
            }

            body {
                background: black;
            }
        </style>
    </head>
    <body>
        <div style="width: 1000px;display: block;text-align: center">
            <img src="images/1.png" alt="">
        </div>
    </body>
</html>

在这里插入图片描述

浮动

标准文档流

块级元素：独占一行

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

行内元素：不独占一行

span a img strong ....

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

Display

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!-- display 显示
        block 块元素
        inline 行内元素
        inline-block 是块元素，又能内联在一行
        none 消失
        -->
        <style>
            div{
                width: 200px;
                height: 200px;
                border: 1px solid red;
                display: inline;
            }
            span{
                width: 200px;
                height: 200px;
                border: 1px solid red;
                /*display: block;*/
                display: inline-block;
            }
        </style>
    </head>
    <body>

        <div>div块元素</div>
        <span>span行内元素</span>

    </body>
</html>

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

display也是一种实现行内元素排列的方式，但是一般我们使用float

float

左右浮动
在这里插入图片描述

效果图

在这里插入图片描述

父级边框塌陷问题

clear

/*
clear: right 清除右侧浮动
clear: left  清除左侧浮动
clear: both  清除两侧浮动
clear: none
*/

解决方案:
1、增加父级边框高度

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

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

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

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

3、overflow

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #content{
                width: 200px;
                height: 150px;
                overflow: scroll;
                /*overflow: hidden;*/
            }
        </style>
    </head>
    <body>
        <div id="content">
            <img src="images/1.png" alt="">
            <p>往届竞赛回顾往届竞赛回顾往届竞赛回顾往届竞赛回顾往届竞赛回顾往届竞赛回顾</p>
        </div>

    </body>
</html>

简单测试：scroll超出边框的部分用滚动条实现, hidden 会把超出的部分隐藏
在这里插入图片描述

为了解决父级边框塌陷问题还可以通过overflow

在父级元素增加overflow
#father{
    border: 1px red solid;
    overflow: hidden;
}

这样无论怎么变换浏览器大小，都不会出现父级边框塌陷问题了

4、父类添加一个伪类：after 市面上最认可的解决方案

#father:after{
    content: '';    /*这里相当于添加一个div标签*/
    display: block;
    clear: both;
}

小结：

浮动元素后面加空div

优点：简单缺点：代码中尽量避免出现空标签
设置父元素的高度

优点：简单缺点：元素假设有固定的高度，就会被限制
overflow

优点：简单隐藏会缺失，或者出现滚动条，也是限制
父类添加一个伪类：after 市面上最认可的解决方案(推荐)

优点：没有副作用

对比

display

方向不可控
float

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

定位

相对定位

<!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;
                padding: 0;
            }

            #first {
                border: 1px dashed red;
                background: deeppink;
                position: relative; /*相对定位:上下左右*/
                top: -20px;
            }

            #second {
                border: 1px solid black;
                background: #6fc6ff;
                position: relative;
                left: -20px;
            }

            #third {
                border: 1px dashed black;
                background: aquamarine;
                position: relative;
                right: -20px;
                bottom: -20px;
            }
        </style>
    </head>
    <body>
        <div id="father">
            <div id="first">第1个盒子</div>
            <div id="second">第2个盒子</div>
            <div id="third">第3个盒子</div>
        </div>

    </body>
</html>

在这里插入图片描述

相对定位：position: relative;

相对于原来的位置，进行指定的偏移上top，下bottom，左left，右right，它任然在标准文档流中，它原来的位置会被保留。

练习

在这里插入图片描述

<!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: #e50ec7;
                line-height: 100px;
                text-align: center;
                color: white;   /*字体颜色*/
                display: block;
            }
            a:hover{
                background: #6fc6ff;
            }
            .a2,.a4{
                position: relative;
                top: -100px;
                right: -200px;
            }
            .a5{
                position: relative;
                top: -300px;
                right: -100px;
            }
        </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>

绝对定位

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

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

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

<!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;
                padding: 0;
                position: relative;
            }

            #first {
                border: 1px dashed red;
                background: deeppink;
            }

            #second {
                border: 1px solid black;
                background: #6fc6ff;
                position: absolute;
                right: -30px;
                top: 10px;
            }

            #third {
                border: 1px dashed black;
                background: aquamarine;
            }
        </style>
    </head>
    <body>
        <div id="father">
            <div id="first">第1个盒子</div>
            <div id="second">第2个盒子</div>
            <div id="third">第3个盒子</div>
        </div>

    </body>
</html>

在这里插入图片描述

固定定位

<!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;
            }
            div:nth-of-type(2){
                width: 50px;
                height: 50px;
                background: yellow;
                position: fixed;
                right: 0;
                bottom: 0;
            }
        </style>

    </head>
    <body>
        <div>div1</div>
        <div>div2</div>

    </body>
</html>

在这里插入图片描述

z-index

图层：就是多层图(字面意思)

<!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/夜空.png" alt=""></li>
                <li class="tipText">学习CSS</li>
                <li class="tipBg"></li>
                <li>时间:2021年10月21日17:02:26</li>
                <li>地点:地球</li>
            </ul>
        </div>
    </body>
</html>

#content{
    width: 426px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid red;
}
ul,li{
    padding: 0;
    margin: 0;
    list-style: none;  /*去除原点*/
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 426px;
    height: 25px;
    top: 200px;
}
.tipText{
    color: white;
    /*z-index: 999;   !*预设一个很高的层级,可以实现这个li在最上面*!*/
}
.tipBg{
    background: #6fc6ff;
    opacity: 0.5;   /*背景透明度*/
}

在这里插入图片描述

谁砍了我的二叉树

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS

目录什么是CSS快速入门CSS的3种导入方式选择器基本选择器层次选择器结构伪类选择器属性选择器(常用)美化网页元素span标签字体标签文本标签超链接伪类列表背景渐变盒子模型什么是盒子模型边框边距圆角边框盒子阴影浮动标准文档流Displayfloat父级边框塌陷问题对比定位相对定位绝对定位固定定位z-index什么是CSSCascading Style Sheet 层叠级联样式表CSS：表现（美化网页）字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动…快速入门css的优势:1、内容和
复制链接

扫一扫