• CSS常用属性


    CSS引用说明

    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <title>标题</title>
            <!--css外部引用-->
            <link rel="stylesheet" href="css/common.css" />
    
            <!--css内部引用-->
            <style>
                <!--标签中class名为logo时使用‘.’-->
                .logo{
                    background-color: blue;
                    font-size: 18px;
                    border: 1px solid #fff;
                }
                <!--标签中所有id名为alex时使用‘#’-->
                #alex{
                    background-color: yellow;
                    font-size: 18px;
                    border: 1px solid #fff;
                    }
                <!--对所有div、a标签生效-->
                div,a{
                    color: red;
                    }
                <!--对所有a标签下的div标签生效-->
                a div{
                    color: red;
                    }
                <!--对所有类型为text的input标签生效-->
                input[type='text']{
    
                }
            </style>
            
        </head>
    
        <body>
            <!--css标签内引用-->
            <div style="background-color: red">123</div>
            <div class="logo">456</div>
    
            <div id="alex">789</div>
    
        </body>
    </html>

    常用属性示例

    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <title>标题</title>
            <style>
                .logo{
                    background-color: red;
                    font-size: 18px;
                    border: 1px solid #fff;
                }
    
                .logo a,.logo p{
                    background-color: aqua;
                    font-size: 50px;
                }
            </style>
            
        </head>
    
        <body>
            <div class="logo">
                <div>div标签</div>
                <a>a标签</a>
                <p>p标签</p>
            </div>
    
    
        </body>
    </html>
    1.html
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <title>标题</title>
            <style>
                .logo{
                    top: 9px;
                    left: 18px;
                    width: 18px;
                    height: 16px;
                    background: url("img/1.png") 0 -58px no-repeat ;
    
                }
    
            </style>
            
        </head>
    
        <body>
            <div class="logo"></div>
    
    
        </body>
    </html>
    2.html
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <title>标题</title>
    
        </head>
    
        <body>
            <div style="border: 1px solid red;">hello</div><br/>
            <div style="border: 1px dotted red;">hello</div><br/>
    
            <div style="border: 1px solid red;height: 70px;background-color: red">
                <div style="border: 1px dotted blue;height: 30px;margin-top: 30px;background-color: blue"></div>
            </div>
    
            <div style="border: 1px solid red;height: 70px;background-color: red">
                <div style="border: 1px dotted blue;height: 30px;padding-top: 30px;background-color: gray">hello</div>
            </div>
        </body>
    </html>
    3.html
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <title>标题</title>
        </head>
    
        <body>
            <!--设置float属性后,要让父div能自适应float块的高度,需添加一个子元素并设置clear属性
                或者父div添加overflow和zoom属性-->
            <div style="overflow: hidden;zoom: 1">
                <div style="background-color: red;float: left; 20%">div1</div>
                <div style="background-color: gray;float: left; 80%">div2</div>
    
                <div style="clear:both"></div>
            </div>
        </body>
    </html>
    4.html
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <title>标题</title>
        </head>
    
        <body>
            <!--
            position:relative、absolute、fixed <br/>
            fixed:固定标签位置
            relative/absolute总是成对出现
            -->
            <!--
            <div style="position: fixed;height: 45px; 100%;background-color: red;top: 0px"></div>
    
            <div style="margin-top: 50px">
                <div style=" 200px;background-color: gray;position: fixed;top: 50px;bottom:0">left</div>
                <div style="margin-left: 220px;">
                    <p>123456</p><p>123456</p><p>123456</p><p>123456</p>
                    <p>123456</p><p>123456</p><p>123456</p><p>123456</p>
                    <p>123456</p><p>123456</p><p>123456</p><p>123456</p>
                    <p>123456</p><p>123456</p><p>123456</p><p>123456</p>
                    <p>123456</p><p>123456</p><p>123456</p><p>123456</p>
                    <p>123456</p><p>123456</p><p>123456</p><p>123456</p>
                    <p>123456</p><p>123456</p><p>123456</p><p>123456</p>
                    <p>123456</p><p>123456</p><p>123456</p><p>123456</p>
                    <p>123456</p><p>123456</p><p>123456</p><p>123456</p>
                    <p>123456</p><p>123456</p><p>123456</p><p>123456</p>
                    <p>123456</p><p>123456</p><p>123456</p><p>123456</p>
                    <p>123456</p><p>123456</p><p>123456</p><p>123456</p>
                    <p>123456</p><p>123456</p><p>123456</p><p>123456</p>
                    <p>123456</p><p>123456</p><p>123456</p><p>123456</p>
                </div>
            </div>
            -->
    
            <div style="position: relative; 500px;height: 200px;background-color:gray ">
                <div style=" 20px;height: 20px;
                position: absolute;left: 0;top: 0;bottom: 0;background-color: red">
                </div>
            </div>
        </body>
    </html>
    5.html
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <title>标题</title>
        </head>
    
        <body>
            <img src="img/2.jpg">
            <!--透明度属性:opacity,值的范围:0-1-->
            <img src="img/2.jpg" style="opacity: 0.5">
        </body>
    </html>
    6.html
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="content-type" content="text/html;charset=utf-8">
            <title>标题</title>
            <style>
                .shade{
                    position: fixed;
                    top: 0;
                    right:0;
                    bottom: 0;
                    left: 0;
                    background-color: #333;
                    opacity: 0.6;
                }
                .delete{
                    position: fixed;
                    top: 50%;
                    left: 50%;
                    width: 400px;
                    height: 200px;
                    background-color: white;
                    margin-left: -200px;
                    margin-top: -100px;
                }
                .hide{
                    display: none;
                }
            </style>
        </head>
    
        <body>
    
            <table>
                <tr>
                    <th>IP</th>
                    <th>编辑</th>
                </tr>
                <tr>
                    <td>1.1.1.1</td>
                    <td>删除</td>
                </tr>
                <tr>
                    <td>2.2.2.2</td>
                    <td>删除</td>
                </tr>
                <tr>
                    <td>3.3.3.3</td>
                    <td>删除</td>
                </tr>
            </table>
    
            <!--遮罩层-->
            <div class="shade"></div>
    
            <!--删除层-->
            <div class="delete">
                <div>提示</div>
                <div>确定要删除吗?</div>
                <div>
                    <input type="button" value="确定">
                    <input type="button" value="取消">
                </div>
            </div>
        </body>
    </html>
    7.html
  • 相关阅读:
    洛谷 P2920 [USACO08NOV]时间管理Time Management
    湖南测试 1
    洛谷 P1824 进击的奶牛
    4、map 和 tuple
    -_-#【Better JS Code】插入迭代值
    -_-#【JS】defer / async
    -_-#【JS】HTML5 API
    【jQuery】jQuery API 过 一 遍
    ♫【函数】函数声明 / 函数表达式
    -_-#【Mac】命令
  • 原文地址:https://www.cnblogs.com/MacoLee/p/5888959.html
Copyright © 2020-2023  润新知