02-03 CSS快速入门

css四种引入方式：
test.html:

p{
            color: gold;
            font-size: 20px;
        }

title.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--<style>-->        #插入式
        <!--p{-->
            <!--color: rebeccapurple;-->
            <!--font-size: 40px;-->
        <!--}-->

        <!--a{-->
            <!--text-decoration: dashed;-->
        <!--}-->
    <!--</style>-->

    <!--链接式-->
    <!--<link href="test1.css" rel="stylesheet">-->

    <!--导入式-->
    <style>
        @import "test1.css";
    </style>
</head>
<body>

<!--第一种引入方式-->
<!--<div style="color: red;background-color: beige">hello yuan </div>-->


<div>hello div</div>

<p>hello p</p>

<a href="">点我</a>
</body>
</html>

View Code

选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /**{*/          /*一号选择器
            /*color:red;*/
        /*}*/

        /*#little_P{*/      /*二号宝宝
            /*background-color: blue;*/
        /*}*/

        /*.PP{            !*三号宝宝*/
            /*color:fuchsia;*/
        /*}*/

    </style>
</head>
<body>
hello body

<div>hello div</div>
<p id = 'little_P'>pppppp</p>
<p class = "PP">ppp</p>
<p class = "PP">pp</p>
</body>
</html>

View Code

组合选择器：
1.块级元素可以包含内联元素但内联元素不能包含块级元素它只能包含
其他内联元素。
2.有几个特殊的块级元素只能包含内联元素不能包含块级元素
3.li内可以包含div
4.块级元素与块级元素并列内敛元素与内敛元素并列。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /**{*/          /*一号选择器
            /*color:red;*/
        /*}*/

        /*#little_P{*/      /*二号宝宝
            /*background-color: blue;*/
        /*}*/

        /*.PP{            !*三号宝宝*/
            /*color:fuchsia;*/
        /*}*/

        /*little_P,div.cuihua{        组合*/
            /*color:crimson;*/
        /*}*/

        /*.div1 div{*/
            /*color:sienna;*/
        /*}*/
        /*.div1 div>P{*/
            /*color:aqua;*/
        /*}*/

                /*.div1 + div{*/
             /*background-color: chartreuse;*/
         /*}*/


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


    </style>
</head>
<body>
hello body

<div class="cuihua">hello div</div>
<p id = 'little_P'>pppppp</p>
<p class = "PP">ppp</p>
<p class = "PP">pp</p>
<div1 class="div1">
    <div class="div2">
        <!--<a href = "">a</a>-->
        <p class="P">pphahahahha</p>
        <div3>woshi duv3 heihei</div3>
    </div>
</div1>
</body>
</html>

View Code

属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [alex]{
            color:green;
        }
        [alex="dasb"]{
            font-size:30px;
            /*font-family:"Time new roman"*/
        }
    </style>
</head>
<body>
<div>hello1</div>
<div alex="sb LI">alex</div>    /*attention space 
<div alex="dasb">div alex1</div>
<p alex="dasb">ppalex</p>
<div>hello1</div>

</body>
</html>

View Code

伪类：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

    a:link{
        color: red;
    }

    a:visited {
        color: blue;
    }
    a:hover {
        color: green;
    }
    a:active {
        color: yellow;
    }

    .box{
        width: 100px;
    }

        .top,.bottom{
            width: 100px;
            height: 100px;
            background-color: chartreuse;
        }

        /*.top:hover{*/
            /*background-color: red;*/
        /*}*/


        /*.box:hover .bottom{*/
            /*background-color: red;*/
        /*}*/

       .add:after{
           content: "欢迎加入前端学习";
           color: red;
       }
    </style>
</head>
<body>


    <a href="css_引入方式.html">hello-world</a>

   <div class="box">
         <div class="top"></div>
         <div class="bottom"></div>
   </div>


    <div class="add">hello yuan</div>
</body>
</html>

View Code

优先级：
所谓CSS优先级即是指CSS样式在浏览器中被解析的先后顺序
样式中的特殊性描述了不同规则的相对权重。它的基本规则是：
1.内联样式表中的权值最高 style=“”
2.统计选择符中的ID属性个数 #id
3.统计选择符中的class个数 .class
4.统计选择符号中HTML标签个数 p

附加说明：
1、纹内的样式优先级是1,0,0,0，所以始终高于外部定义.
这里文内样式指的是如<div style="color:red>blah</div>的样式
而外部定义指经由<link>或<style>卷标定义的规则
2. 有！important 声明的规则高于一切
3、如果声明冲突仍然比较优先权
4、如果优先权一样则按照源码中的顺序决定后来者居上
5.由继承而得到的样式没有specificity的计算它低于一切其他规则

背景属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            color: rgba(22, 46, 122,0.8);

            font-size:20px;
            font-weight: 900;
            font-style:italic;

            background-color: aliceblue;
            /*background-image: url("haha.jpg");*/
        }
        . back{
            width:800px;
            height:800px;
            background-image: url("haha.jpg");
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>
</head>
<body>
<p>独在异乡为异客
每逢佳节倍思亲</p>
<div>
    class back
</div>
</body>
</html>

View Code

文本属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            text-transform: capitalize;
            word-spacing: 20px;
            letter-spacing: 10px;
            text-indent: 150px;
            height: 100px;
            background-color: aquamarine;
            text-align: center;
            /*line-height: 100px;*/
        }
    </style>
</head>
<body>


<div>介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性介绍文本属性</div>


<div>hello world hello world hello world hello world hello world hello world hello world</div>
</body>
</html>

View Code

列表属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div2,p,a,span{
             width: 100px;
             height: 100px;
        }

         .div2{
             background-color: yellow;
             /*display: inline;*/
             display: none;
         }

        p{
             background-color: red;
            /*display: inline;*/
         }

        span{
             background-color: palevioletred;
             display: inline-block;
         }
        a{
             background-color: green;
             display: inline-block;
         }
        .outer{
            word-spacing: -8px;
        }
    </style>
</head>
<body>


<div class="div2">divvvvv</div>
<p>pppppp</p>


<div class="outer">
    <span>spannnnnn</span>
    <a href="#">click</a>
</div>


</body>
</html>

View Code

内外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .div1{
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
            border: 40px solid rebeccapurple;
            /*padding: 40px;*/
            /*margin: 20px;*/
            /*margin-bottom: 40px;*/
            /*margin: 10px 20px 30px 40px;*/
            /*margin-top: 30px;*/
            /*margin-bottom:40px;*/
        }

        .div2{
            width: 200px;
            height: 200px;
            background-color: lightblue;
            /*border: 20px solid red;*/
            /*padding: 5px;*/
            /*margin-top: 40px;*/
        }
        /*.outer{*/
            /*height: 1000px;*/
            /*background-color: aquamarine;*/
            /*!*border: 1px red solid;*!*/
            /*!*padding: 1px;*!*/
            /*overflow: hidden;*/
        /*}*/

        /*.outer2{*/
            /* 1000px;*/
            /*height: 1500px;*/
            /*background-color: firebrick;*/
        /*}*/
        /*body{*/
            /*border: 2px solid darkcyan;*/
            /*margin: 0px;*/
        /*}*/
    </style>
</head>
<body>

<!--<div class="outer2">-->
<!---->
    <!--<div class="outer">-->

    <div class="div1">hello div1</div>
    <div class="div2"></div>
        <!--<span>uuu</span><span>ooo</span>-->
<!--</div>-->
<!--</div>-->

</body>
</html>

View Code

浮动：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 100px;
            height: 100px;
            background-color: beige;
            float: left;

        }
         .div2{
            width: 200px;
            height: 100px;
            background-color: rebeccapurple;
             float: left;
             clear: left;

        }
         .div3{
            width: 100px;
            height: 200px;
            background-color: green;
            float: left;
            clear: right;

        }
         .div4{
            width: 200px;
            height: 200px;
            background-color: yellow;
           float: left;
        }

    </style>
</head>
<body>


<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>

</body>
</html>



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style type="text/css">
         * {
             margin:0;padding:0;
         }

        .container{
            border:1px solid red;
            width:300px;
            overflow: hidden;
        }
        #box1{
            background-color:green;
            width:100px;
            height:100px;
            float: left;
        }
        #box2{
            background-color:deeppink;
            float:right;
            width:100px;
            height:100px;
        }
         #box3{
             background-color:pink;
             height:40px;
         }

        .clearfix:after{
            content:"";
            display: block;
            clear: both;
        }
</style>
</head>
<body>

        <div class="container">
                <div id="box1">box1 向左浮动</div>
                <div id="box2">box2 向右浮动</div>
        </div>
        <div id="box3">box3</div>
</body>
</body>
</html>

View Code

定位属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        /**{*/
            /*margin: 0px;*/
        /*}*/

        .div1{
            width: 200px;
            height: 100px;
            background-color: beige;


        }
         .div2{
            width: 200px;
            height: 100px;
            background-color: rebeccapurple;
            position: relative;
             position: absolute;
            left: 100px;
            top:  100px;


        }
         .div3{
            width: 200px;
            height: 200px;
            background-color: green;
             /*position: relative;*/
             /*top:-100px;*/
             /**/



        }
         .div4{
            width: 200px;
            height: 200px;
            background-color: yellow;

        }

        .outer{
            position: relative;
        }
        .returnTop{
            width: 80px;
            height: 50px;
            position: fixed;
            bottom: 20px;
            right: 5px;
            background-color: gray;
            color: white;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>

<div style="height: 200px;background-color: aqua"></div>
<div class="outer">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
</div>

<div style="height: 2000px;background-color: darkgoldenrod"></div>

<div class="returnTop">返回顶部</div>


</body>
</html>

View Code