day13 前端之CSS

zoukankan html css js c++ java

day13 前端之CSS

CSS引入方式

<!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">
    <title>Title</title>
    
    
        
            
            
        
    

    
    <link rel="stylesheet" href="03%20yuan.css">
</head>
<body>




<p>一个p标签1</p>
<p>一个p标签2</p>
<p>一个p标签3</p>

<div>DIV</div>
<a href="">click</a>
<div>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">
    <title>Title</title>
    <style>
        /* 1 标签选择器*/
        /*p{*/
            /*color: red;*/
        /*}*/

        /* 2 id选择器*/
        /*#p3 {*/
            /**/
        /*}*/

        /* 3 class选择器*/
        /*.c1{*/
            /*font-size: 32px;*/
        /*}*/

        /*4 通配选择器*/
        /**{*/
            /*background-color: red;*/
        /*}*/
    </style>
</head>
<body>

<p class="c1">p1</p>
<p>p2</p>
<p id="p3">p3</p>
<p class="c1">p4</p>

</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">
    <title>Title</title>
    <style>
        /*后代选择器*/
       /*.c1 .c3{*/
            /*color: red;*/
        /*}*/

        /*子代选择器*/
        /*.c1>.c3{*/
            /**/
        /*}*/

        /*毗邻选择器*/
        /*.c1+p{*/
            /*color: palevioletred;*/
        /*}*/

        /*兄弟选择器*/
        /*.c1~p{*/
            /*color: goldenrod;*/
        /*}*/

        /* 与条件选择器 */
        /*span.d1{*/
            /*background-color: palevioletred;*/
        /*}*/

        /*class可以拥有多个值，每个值通过空格隔开*/
        /*.c1{*/
            /*color: rebeccapurple;*/
        /*}*/

        /*.c2{*/
            /*background-color: lightslategrey;*/
        /*}*/

        div,span{
            color: red;
            font-size: 32px;
            background-color: lightslategrey;
            font-weight: 300;
        }

    </style>
</head>
<body>


    
    
    
        
    





<hr>





<hr>



<hr>




</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">
    <title>Title</title>
    <style>
        [egon='e']{
            color: red;
        }
    </style>
</head>
<body>

<div egon="egg">egg</div>
<span egon="egg">egg</span>
<div egon="alex">egg2</div>
<div alex="32">alex</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">
    <title>Title</title>
    <style>
        span{
            color: royalblue;
            width: 300px;
            height: 300px;
            background-color: lightslategrey;
        }

        span:hover{
            color: red;
        }

        .s1,.s2{
            width: 100px;
            height: 100px;
        }
        .s1{
            background-color: grey;
        }
        .s2{
            background-color: rosybrown;
        }
        .outer{
            border: 1px solid red;
        }

        .outer:hover .s1{
            background-color: royalblue;
        }

        .outer:before{
            content: "hello world";
            color: red;
        }
    </style>
</head>
<body>

<span>hello world</span>

<hr>
<div class="outer">
    <div class="s1"></div>
    <div class="s2"></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">
    <title>Title</title>

    <style>
        /*.p1{*/
            /*color: lightslategrey;*/
        /*}*/
        /*#p1{*/
            /*color: darkblue;*/
        /*}*/
        /*p{*/
            /*color: goldenrod;*/
        /*}*/

        /*##########优先级#############*/

       /*.c2 p{*/
           /*color: red;*/
       /*}*/

       /*.c1 .c2 .c3 p{*/
           /*color: goldenrod;*/
       /*}*/

      /*.c1 .c2 .c3 .c4{*/
          /*color: palevioletred;*/
      /*}*/

      /*.c4{*/
          /*color: saddlebrown!important;*/
      /*}*/

     /*###############与字体相关的样式：继承##################*/
         .outer {
             color: green;
         }

        body{
            font-size: 16px;
            color: red;
        }
    </style>
</head>
<body>

<p class="p1" id="p1">this is P</p>

<div class="c1">
    <div class="c2">
        <div class="c3">
            <p class="c4" id="d1" style="color: green">P2</p>
        </div>
    </div>
    <p>P1</p>
</div>

<hr>
<div class="outer">
    <p>PPP</p>
    <span>span</span>
</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">
    <title>Title</title>

    <style>
        p{
            color: #EE4000;
            background-color: lightslategrey;
            text-align: justify;
            font-weight: 100;
            font-style: italic;
        }
        a{
            text-decoration: none;

        }

        div{
            color: green;
        }

        .c1{
            width: 200px;
            height: 200px;
            background-color: lightslategrey;
            text-align: center;

        }

        .btn{
            width: 50px;
            height: 100px;
            background-color: darkgray;
            font-size: 32px;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>

<p>hello world</p>

<div><a href="">click</a></div>

<div class="c1">DIV</div>

<div class="btn"> > </div>
</body>
</html>

文本操作之verticle-align

<!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">
    <title>Title</title>
    <style>
        img{
            vertical-align: -200px;
        }
    </style>
</head>
<body>

<div><img src="qq.png" alt=""><b>egon</b></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">
    <title>Title</title>
    <style>
        .c1{
            border:1px solid red;
            width: 100%;
            height: 500px;
            /**/

            /*background-image: url("a.png");*/
            /*background-repeat:no-repeat;*/
            /*background-position: center center;*/

            /*简写方式*/
            background: no-repeat url("a.png") center ;
        }
           .c2{
            border:1px solid green;
            width: 40px;
            height: 40px;

            background: no-repeat url("egon.jpg") -198px -82px ;
        }

    </style>
</head>

<body>


<div class="c2"></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">
    <title>Title</title>
    <style>
        .c1{
            width: 300px;
            height: 200px;
            background-color: darkgray;

            /*border- 12px;*/
            /*border-color: #EE4000;*/
            /*border-style: dashed;*/

            /*border-radius: 80%;*/

            /*border: 1px solid red;*/
            border-right: 1px solid red;;
        }

        ul{
            list-style: none;
            padding: 0;
        }
    </style>
</head>
<body>

<div class="c1"></div>

<ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
</ul>

</body>
</html>

Display属性

<!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">
    <title>Title</title>

    <style>
        span{
            background-color: lightslategrey;
            width: 200px;
            height: 200px;
            /*将标签声明为块级标签*/
            display: block;

        }
          .c1{
            background-color: greenyellow;
            width: 200px;
            height: 200px;
              /*将标签声明为内联标签*/
            display: none;
              /*visibility: hidden;*/

        }
         .c2{
            background-color: firebrick;
            width: 200px;
            height: 200px;

        }

    </style>
</head>
<body>

<span>span</span>
<div class="c1">DIV1</div>
<div class="c2">DIV2</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">
    <title>Title</title>
    <style>
        .c1,.c2,.c3{
            width: 100px;
            height: 100px;
            display: inline-block;
            margin-left: -6px;

        }
        .c1{
            background-color: #EE4000;
        }
        .c2{
            background-color: green;
        }
        .c3{
            background-color: lightslategrey;
        }
    </style>
</head>
<body>

<span class="c1">1</span>
<span class="c2">2</span>
<span class="c3">3</span>

</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">
    <title>Title</title>

    <style>

        body{
            margin: 0;
        }
        .c1{
            width: 200px;
            height: 200px;
            /*padding: 100px 100px 20px;*/
            /*padding-top: 100px;*/
            padding: 100px;
            background-color: lightslategrey;
            border: 10px solid red;
            margin-bottom: 80px;
        }
         .c2{
            width: 200px;
            height: 200px;
            padding: 5px;
            background-color: darkseagreen;
            margin-top: 50px;

        }

        .c3{
            margin-right: 100px;
            background-color: goldenrod;
        }
        .c4{
            margin-left: 200px;
            background-color: saddlebrown;
        }
    </style>
</head>
<body>

<div class="c1">111</div>
<div class="c2">222</div>
<hr>
<span class="c3">1111</span>
<span class="c4">2222</span>

</body>
</html>

Margin的居中应用

<!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">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        .header{
            width: 100%;
            height: 445px;
            background-color: #336699;
            overflow: hidden;
        }

        .headerCon{
            width: 80%;
            height: 45px;
            background-color: goldenrod;
            margin: 0px auto;
        }
    </style>
</head>
<body>

<div class="header">
    <div class="headerCon">hello world</div>
</div>

</body>
</html>

Float属性

<!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">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        .c1,.c2,.c3{

            height: 100px;

        }
        .c1{
            background-color: #EE4000;
            width: 100px;
            float: left;

        }
        .c2{
            background-color: green;
            width: 200px;
            float: left;

        }
        .c3{
            background-color: lightslategrey;
            width: 300px;
            float: right;
        }
    </style>
</head>
<body>

<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>

</body>
</html>

Position属性

<!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">
    <title>Title</title>
    <style>
        .c1{
            width: 100%;
            height: 2000px;
            background-color: darkgray;
        }

        .btn{
            width: 120px;
            height: 50px;
            background-color: #336699;
            text-align: center;
            line-height: 50px;
            color: white;

            position: fixed;
            /*right: 20px;*/
            /*bottom: 20px;*/
            /*left: 20px;*/
            /*top: 10px;*/
            left: 50%;
            top: 50%;
            margin-top: -25px;
            margin-left: -60px;
        }
    </style>
</head>
<body>

<div class="c1"></div>

<div class="btn">返回顶部</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">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        .c1,.c2,.c3{

            height: 200px;
            width: 200px;

        }
        .c1{
            background-color: #EE4000;

        }
        .c2{
            background-color: green;
            /*相对定位*/
            position: absolute;
            left: 200px;
            top: 200px;

        }
        .c3{
            background-color: lightslategrey;

        }

        .parent{
            position: relative;
        }
    </style>
</head>
<body>

<div class="c1"></div>
<div class="parent">
    <div class="c2"></div>
</div>
<div class="c3"></div>

</body>
</html>

老师博客地址：

http://www.cnblogs.com/yuanchenqi/articles/6856399.html

查看全文

相关阅读:
python 网络爬虫（三）
python 网络爬虫（二）
python 网络爬虫（一）
python 爬虫原理
 (转)栈的生长方向
 CRC校验
 extern关键字
 E
The Super Powers UVA
V

原文地址：https://www.cnblogs.com/huangtiandi001/p/8046306.html

最新文章
HDU
CF#511-C Enlarge GCD（gcd）
CF-346A Alice and Bob （gcd）
Network UVA
HDU
UVA
POJ
codeForces #577 (div.2)
高阶函数
 函数作用域