css学习记录

2024-04-06 18:35:08

1.什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS：表现（美化网页）

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

2.css规范

3.CSS的导入

4.选择器

4.1基本选择器

优先级不遵循就近原则，固定的：id选择器 > class选择器 > 标签选择器

4.1.1 标签选择器标签名{}

4.1.2 类选择器 .类名{}

4.1.3 ID 选择器 #id名{}

4.2层次选择器

1.后代选择器

某个元素的后面包含的所有的东西

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

2.子选择器

只有一代

3.相邻弟弟选择器

4.通用选择器

4.3结构伪类选择器

4.4属性选择器

5.美化网页元素

5.1为什么要美化网页

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .aa{
          color:red;
          font-size:50px;
        }
    </style>
</head>
<body>
我爱<span class="aa">java</span>
</body>
</html>

5.2字体样式

5.3文本样式

1.颜色

color ： rgb rgba

2.文本对齐方式

text-align:center

3.首行缩进

text-indent:2em;

4.行高 单行文字上下居中

line-height:

5.装饰

5.4超链接伪类

5.5阴影

5.6列表

list-style:
      none  去掉圆点
      circle   空心圆
      decimal  数字
      square   正方形  
*/
ul li{
    font-weight: 30px;
    list-style: none;
    text-indent: 1em;
}

效果：

5.7背景

背景颜色背景图片

<style>
        div{
            width: 500px;
            height: 600px;
            border:1px solid red;
            background-image: url("../image/body.jpg");
        }
        #div1{
            background-repeat: repeat-x; /* 平铺 */
        }
        #div2{
            background-repeat: repeat-y;/* 竖铺 */
        }
        #div3{
            background-repeat: no-repeat;/* 不铺 */
        }
    </style>

红色圈起来的两个的作用是一样的

5.7渐变

网站https://www.grabient.com/

可以在这个网站上copy css的代码

6.盒子模型

1.什么是盒子模型

margin：外边距

padding：内边距

border：边框

2.边框

2.1边框的粗细

2.2边框的颜色

2.3边框的样式

3.内外边距

margin+border+padding+内容宽度

<style>
      #aa{
          width: 280px;
          border: 1px solid red;
          margin: auto;
      }
      h2{
          background: aqua;
          text-align: center;
          margin: auto;
      }
      form{
          background-color: sandybrown;
          
      }
      div:nth-of-type(1) input{
          border: 1px solid rgb(10, 10, 10);
      }
      div:nth-of-type(2) input{
          border: 1px dashed rgb(238, 10, 10);
      }
      div:nth-of-type(3) input{
          border: 1px solid rgb(40, 18, 236);
      }
    </style>
</head>
<body>
    <div id="aa">
        <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>

4.圆角边框

效果

5.盒子阴影

box-shadow: 10px 10px 10px yellow;

前两个参数是阴影出现的位置，第3个是透明度或者说是模糊度，最后一个是阴影的颜色

7.浮动

1.display

2.float

float：right/left；

3.父级边框塌陷问题

clear

解决方法：

1.增加父级元素的高度

2.添加一个空的div标签，清除浮动

<div class="aa"></div>

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

3.在父级元素中增加一个overflow

overflow:hidden;

4.父类添加一个伪类：after**（推荐使用）**

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

8.定位

1.相对定位

相对定位 position：relative；
相对于自己原来的位置进行指定的偏移，相对定位任然在标准文档流中，原来的位置会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 相对定位 position
    相对于自己原来的位置进行偏移
    -->
    <style>
        div{
            margin: 20px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid black;
        }
        #first{
            background-color: greenyellow;
            border: 1px dashed gray;
            position: relative;
            top: -40px;
            left: 30px;
        }
        #second{
            background-color: hotpink;
            border: 1px dashed rgb(224, 37, 37);
        }
        #third{
            background-color: lightskyblue;
            border: 1px dashed rgb(82, 16, 235);
            position: relative;
            bottom: -50px;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="first">第一个盒子</div>
        <div id="second">第二个盒子</div>
        <div id="third">第三个盒子</div>
    </div>
</body>
</html>

1.1相对定位的例子

实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            line-height: 100px;
            text-align: center;
            color: white;
            background-color: pink;
            display: block;
            border-radius: 10px;
        }
        a:hover{
            background-color: rgb(38, 208, 238);
        }
        .a2,.a4{
            position: relative;
            left: 200px;
            top: -100px;
        }
        
        .a5{
            position: relative;
            left: 100px;
            top: -300px;
        }
    </style>
</head>
<body>
   <div id="box">
       <a class="a1" href="#">链接1</a>
       <a class="a2" href="#">链接2</a>
       <a class="a3" href="#">链接3</a>
       <a class="a4" href="#">链接4</a>
       <a class="a5" href="#">链接5</a>
   </div>
</body>
</html>

效果图

2.绝对定位

position：absolute；

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            margin: 20px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid black;
        }
        #first{
            background-color: greenyellow;
            border: 1px dashed gray;
        }
        #second{
            background-color: hotpink;
            border: 1px dashed rgb(224, 37, 37);
            position: absolute;
            right: 30px;
        }
        #third{
            background-color: lightskyblue;
            border: 1px dashed rgb(82, 16, 235);
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="first">第一个盒子</div>
        <div id="second">第二个盒子</div>
        <div id="third">第三个盒子</div>
    </div>
</body>
</html>

3. 固定定位fixed

position：fixed;

4.z-index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/Demo08.css">
</head>
<body>
    <div id="d1">
        <ul>
            <li><img src="../image/a.jpg" alt=""></li>
            <li class="a1">宇宙无敌，李二狗</li>
            <li class="a2"></li>
            <li>时间：2020-8-1</li>
            <li>地点：重庆工商大学派斯学院</li>
        </ul>
    </div>
</body>
</html>

#d1{
    width: 1024px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 50px;
    line-height: 70px;
    border: 2px solid black;
}
ul,li{
    padding: 0;
    margin: 0;
    list-style: none;
}
d1 ul{
    position: relative;
}
.a1, .a2{
    position: absolute;
    width: 1024px;
    height: 80px;
    bottom: -620px;
}
.a1{
    color: white;
    z-index: 999;
    text-align: center;
}
.a2{
    background: black;
    opacity: 0.5; /* 透明度*/
}

效果：

码农公寓