码迷，mamicode.com
首页 > Web开发 > 详细

day13 前端之CSS

时间：2017-12-16 14:44:00      阅读：162      评论：0      收藏：0      [点我收藏+]

标签：http   sadd   position   font   --   top   relative   UI   背景   

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>
    <!--css的引入方式2-->
    <!--<style>-->
        <!--div {-->
            <!--color: lightslategrey;-->
            <!--font-size: 32px;-->
        <!--}-->
    <!--</style>-->

    <!--css的引入方式3-->
    <link rel="stylesheet" href="03%20yuan.css">
</head>
<body>

<!--css的引入方式1-->
<!--<p style="color: red">一个p标签</p>-->



<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>

<!--<div class="c1">-->
    <!--<p class="c3">P1</p>-->
    <!--<p>P3</p>-->
    <!--<div>-->
        <!--<span class="c3">span</span>-->
    <!--</div>-->
<!--</div>-->
<!--<span>span</span>-->
<!--<p class="c3">P2</p>-->
<!--<p class="c3">P3</p>-->


<hr>


<!--<span>span2</span>-->
<!--<div class="d1">DIV</div>-->
<!--<span class="d1">span</span>-->

<hr>

<!--<div class="c1 c2">DIV</div>-->


<hr>

<!--<div>DIV</div>-->
<!--<span>span</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>
        [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="c1"></div>-->
<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-width: 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

day13 前端之CSS

标签：http   sadd   position   font   --   top   relative   UI   背景   

原文地址：http://www.cnblogs.com/huangtiandi001/p/8046306.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！