css学习记录

2021/9/23 23:41:54

编程Tag： 选择器 css 学习记录 background color border position 1px

本文主要是介绍css学习记录，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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; /* 透明度*/
}

效果：

在这里插入图片描述

这篇关于css学习记录的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

css学习记录

1.什么是CSS

2.css规范

3.CSS的导入

4.选择器

4.1基本选择器

4.1.1 标签 选择器 标签名{}

4.1.2 类 选择器 .类名{}

4.1.3 ID 选择器 #id名{}

4.2层次选择器

1.后代选择器

2.子选择器

3.相邻弟弟选择器

4.通用选择器

4.3结构伪类选择器

4.4属性选择器

5.美化网页元素

5.1为什么要美化网页

5.2字体样式

5.3文本样式

5.4超链接伪类

5.5阴影

5.6列表

5.7背景

5.7渐变

6.盒子模型

1.什么是盒子模型

2.边框

3.内外边距

4.圆角边框

5.盒子阴影

7.浮动

1.display

2.float

3.父级边框塌陷问题

8.定位

1.相对定位

2.绝对定位

3. 固定定位fixed

4.z-index

相关编程文章

4.1.1 标签选择器标签名{}

4.1.2 类选择器 .类名{}