• CSS_v2

    /*
时间：2021/12/07
功能：CSS
目录: 
    一: 引入
    二: 选择器
        1 标签
        2 类
        3 层级
        4 id
        5 组
        6 伪类
    三: 属性
        1 布局
        2 文本
    四: 元素溢出
    五: 显示特性
    六: 盒子模型
*/

    一: 引入

    <!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>
        a{
            color: green;
        }

        div{
            width: 100px;
            width: 100px;
            background: orange;
        }
    </style>

    <!-- 外链式 -->
    <link rel="stylesheet" href="css/main.css">
    
</head>
<body>
    <!-- 行内式 -->
    <p style="color: red;"> 段落标签</p>
    <div>
        123
    </div>

    <!-- 内嵌式 -->
    <a href="http://www.bing.com">bing</a>
    <h1> 一级标题 </h1>

    <!-- 外链式 -->
    <h2> 二级标题 </h2>

</body>
</html>
    h2{
    color: skyblue;
}

    1 : 说明 文件 main.css

    二: 选择器
    　　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>
        /* 标签选择器 */
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p> hi </p>
    <p> hello </p>
</body>
</html>

    　　2 类

    <!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>
        /* 类选择器 */
        .myp{
            color: red;
        }
        .myby{
            background: blue;
        }
    </style>
</head>
<body>
    <p> xxx </p>
    <p class="myp"> 段落标签 1</p>
    <p class="myp myby"> 段落标签 2</p>
</body>
</html>

    　　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 div {
            color: green;
        }

        div .box{
            color: blue;
        }

        /* div div p{
            color: red;
        } */

        div p{
            color: aqua;
        }


    </style>

</head>
<body>
    <div>
        哈哈
    </div>

    <div>
        <div> 嘻嘻</div>
        <div class="box"> 哈哈</div>
        <div>
            <p> hi</p>
        </div>
    </div>
</body>
</html>

    　　4 id

    <!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>
        #myid1{
            color:blue;
        }
    </style>
</head>
<body>
    <p id="myid1"> 哈哈 </p>
    <p id="myid1"> 嘻嘻 </p>
</body>
</html>

    　　5 组

    <!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>
        /* 组选择器 */
        .box1, .box2, .box3{
            width: 100px;
            height: 100px;
        }

        /* 追加样式 */
        .box1{
            background: red;
        }
        .box2{
            background: gray;
        }
        .box3{
            background: blue;
        }
    
    </style>
</head>
<body>
    <div class="box1"> </div>
    <div class="box2"> </div>
    <div class="box3"> </div>
</body>
</html>

    　　6 伪类

    <!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>
</head>
<body>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: green;
        }
        /* 伪类选择器: 给其他选择器添加效果 */
        div:hover{
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>

</body>
    <div> 哈哈 </div>
</html>

    三: 属性
    　　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: 100px;
            height: 100px;
            background: green;
            /* 设置背景图片: 不重复显示 - 拉伸*/
            background: url("imgs/logo.png") no-repeat;

            /* 设置边框 */
            border-top: 5px solid red;
            border-left: 5px solid green;
            border-bottom: 5px solid pink;
            border-right: 5px solid orange;

            /* 设置浮动: left左浮动 right右浮动 */
            float: right;
        }

        .box1{
            width: 200px;
            height: 200px;
            background: blue; 
        }
        .box2{
            width: 50px;
            height: 50px;
            background: green;
        }   
        .box3{
            width: 50px;
            height: 50px;
            background: red;
        }              
    </style>
</head>
<body>
    <!-- 布局常用控件: div -->
    <div class="box"> 哈哈 </div>

    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>

    　　2 文本

    <!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>
        p{ 
            color: orange;                    /* 字体颜色 */
            font-size: 18px;                    /* 字体大小 */
            font-weight: bold;                  /* 字体加粗 */
            font-family: "Microsoft Yahei";     /* 字体格式 */
            background: blue;                 /* 字体背景 */
            text-decoration: underline;         /* 设置下划线: overline  line-through underline */
            line-height: 100px;                 /* 设置行高 */
            text-align: left;                   /* 设置水平方向 */
            text-indent: 30px;                  /* 文本缩进 */
        }

        /* 设置样式 : 指定范围 */
        span{
            color:tomato;
            font-size: 60px; 
        }

        h3{
            color:black;
        }

       

        a {
            /* 取消下划线 */
            text-decoration: none;
        }
                
    </style>


</head>
<body>
    <p> 东风夜放花千树。更吹落、星如雨。</p>

    <br> <br> <br>
    <h3>
        原件<span>888</span>，现价 
        <b style="color: red; font-size: 40px; text-decoration: underline;"> 499 </b>     
    </h3>
    
    <a href="http://www.bing.com"> 必应 </a>
    
</body>
</html>

    四: 元素溢出

    <!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>
        .box1{
            width: 100px;
            height: 100px;
            background: red; 
            overflow: auto; /* 设置溢出: visible(默认值-显示)  line-hidden(隐藏) auto(显示-滚动查看) */
        }

        .box2{
            width: 200px;
            height: 50px;
            background: green;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
            溢出
        </div>
    </div>
</body>
</html>

    五: 显示特性

    <!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>
        .display_none{
            width: 100px;
            height: 50px;
            background: gold;

            /* 元素隐藏 */
            display: none;
        }

        .box{
            /* 显示效果: 块元素转为行内元素; 和别的元素占一行 */
            /* 若想显示高度和宽度: 设置浮动*/
            display: inline;
            background: green;        
        }

        .link{
            /* 显示效果: 行内元素 -> 块元素; 单独占一行 */
            display: block;
            background: red;
        }
    </style>
</head>
<body>
    <div class="display_none"> 数据隐藏</div>

    <div class="box"> div .box </div>
    <div class="box"> div .box</div>

    <a href="#" class="link">first link</a>
    <a href="#" class="link">second link</a>
</body>
</html>

    六: 盒子模型

    <!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>
        .box1{
            width: 100px;   /* 内容宽度 */ 
            height: 200px;  /* 内容高度 */ 
            background: green;  
            padding-top: 10px;        /* 内间距 - 高 */ 
            padding-bottom: 20px;
            padding-left: 30px;
            padding-right: 15px;
            border: 5px solid blue; /* 边框 */
        }

        .box2{
            width: 50px;   
            height: 50px;  
            background: red;              
        }

        .box3{
            width: 50px;  
            height: 50px;  
            background: gray;
                      
        }

        .box4{
            width: 50px;  
            height: 50px;  
            background: brown;
            padding-top: 10px; 
            border: 10px solid rebeccapurple; 
            margin-top: 10px;    /* 外边距 */ 
        }

    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"> </div>
    </div>

    <div class="box3"></div>
    <div class="box4"></div>
</body>
</html>
  • 相关阅读:
    20145107《Java程序设计》第一周学习计划
    Java 问卷调查
    2020-2021-1 20209303 《Linux内核原理与分析》第九周作业
    2020-2021-1 20209303 《linux内核原理与分析》第八周作业
    2020-2021-1 20209303 《linux内核原理与分析》第七周作业
    2020-2021-1 20209303《Linux内核原理与分析》第六周作业
    2020-2021-1 20209303《Linux内核原理与分析》第五周作业
    2020-2021-1 20209303《Linux内核原理与分析》第四周作业
    2020-2021-1 20209303《Linux内核原理与分析》第三周作业
    2020-2021-1 20209303《Linux内核原理与分析》第二周作业
  • 原文地址：https://www.cnblogs.com/huafan/p/15658915.html
Copyright © 2020-2023  润新知