css样式 1.选择器 2.操作

1.css语法结构

css 语法结构   ：head标签里面加上<style>标签 
选择器{属性名1：属性值1；属性值2：属性值2}

2.css三种引入方式: 1.link标签引入外部文件 2.head内直接写样式 3.行内定义style样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <link rel="stylesheet" href="mycss.css">-->
<!--    <style>-->
<!--        p {-->
<!--            color: red;-->
<!--        }-->
<!--    </style>-->
</head>
<body>
<p style="color: orange">上海这个地方就像希腊神话里的魔女道 好好的人来了  也会变成畜生</p>
</body>
</html>

3.如何查找标签

1.基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        标签选择器
        /*div{*/
        /*    color: gold;*/
        /*}*/
    /*  类选择器  */
    /*    .c1 {*/
    /*        color:blue;*/
    /*    }*/
    /*    id选择器*/
    /*    #d1{*/
    /*        color: red;*/
    /*    }*/
    /*    通用选择器*/
        *{
          color: gold;
        }


    </style>
</head>
<body>
<div class="c1">32号为你服务
    <span>div内部span</span>
</div>
<p>来宾三位</p>
<div>23号为您精诚服务</div>
<span>花花头牌出场</span>
<p id="d1">贵宾一位 楼上请</p>
<span>喵喵出来接待</span>
<h1>h1</h1>
<h2>h2</h2>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*div{*/
        /*    color: gold;*/
        /*}*/
    /*  类选择器  */
    /*    .c1 {*/
    /*        color:blue;*/
    /*    }*/
    /*    id选择器*/
    /*    #d1{*/
    /*        color: red;*/
    /*    }*/
    /*    通用选择器*/
        *{
          color: gold;
        }


    </style>
</head>
<body>
<div class="c1">32号为你服务
    <span>div内部span</span>
</div>
<p>来宾三位</p>
<div>23号为您精诚服务</div>
<span>花花头牌出场</span>
<p id="d1">贵宾一位 楼上请</p>
<span>喵喵出来接待</span>
<h1>h1</h1>
<h2>h2</h2>
</body>
</html>

View Code

2.组合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后代选择器*/
      /*  div span{
            color: gold;
        }*/
        /*儿子选择器*/
        /*  div > span{*/
        /*      color: blue;*/
        /*  }*/
        /* 毗邻选择器*/
        /*div + span{*/
        /*    color: gold;*/
        /*}*/

        /*弟弟选择器*/
        div ~ span{
            color: brown;
        }
    </style>
</head>
<body>
<span></span>
<span></span>
<div>
    <span>div内部第一个span</span>
    <p>div内部的p
        <span>div内部的p内部的span</span>
    </p>
    <span>div内部的最后一个span</span>
    <span style="color: red">外部span<span>内部span</span></span>
</div>
<span>div下面的span</span>
<span>div下面的span</span>

<div>弟弟救我
    <p>龙儿我来了</p>
</div>
<span>帮你解毒</span>

</body>

View Code

3.属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*属性选择器 [] 凡是username属性的*/
        /*[username]  {*/
        /*background-color: gold;*/
        /*}*/
        /*[username = 'jason']{*/
        /*    background-color: blue;*/
        /*}*/
        input[username = 'jason']{
            background-color: aqua;
        }
    </style>

</head>
<body>
<input type="text" username="jason">
<input type="text" username="sean">
<input type="text" username = 'owen'>
<p username ='tank'>数据库的刷卡司机</p>
<div username = 'oscar'>奥斯卡</div>
<span username = 'jason'> pp </span>
</body>
</html>

View Code

4.分组嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       /*div,p,span{*/
       /*    color: blue;*/
       /*}*/
       /* .c1,#d1,p{*/
       /*     color: gold;*/
       /* }*/
        .c1 h1{
            color: red;
        }


    </style>
</head>
<body>
<div class="c1">快要下课了 我好饿 好饿 好饿 我真的好饿
    <h1>我是h标签</h1>

</div>
<span id="d1">快要下课了 我好饿 好饿 好饿 我真的好饿</span>
<p>快要下课了 我好饿 好饿 好饿 我真的好饿</p>
</body>
</html>

View Code

5.伪类选择器 a标签 hover visited input 标签聚焦 a:visited input:focus

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link{
            color: aqua;
        }
        a:hover{
            color:black;
        }
        a:active{
            color:green;
        }
        a:visited{
            color:gray;
        }

        input:focus{
            background-color: darkgreen;
        }

    </style>
</head>
<body>
<a href="https://www.baidu.com">点我1</a>
<a href="https://www.luffycity.com">点我2</a>
<a href="https://www.sogo.com">点我2</a>
<a href="https://www.google.com">点我2</a>

</body>
</html>

View Code

6. 伪元素选择器给文本前后加内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:before{
            content: '弄撒类';
            color: red;
        }
        p:after{
            content: '?';
            color: blue;
        }
    </style>
</head>
<body>
<p>今天26号</p>
</body>
</html>

　参考博客：https://www.cnblogs.com/Dominic-Ji/p/10474769.html　

4.样式操作

1.选择器优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <style>-->
<!--        p {-->
<!--            color: red;-->
<!--        }-->
<!--    </style>-->
<!--    <link rel="stylesheet" href="mycss.css">-->
    <style>
        /*.c1 {*/
        /*    color: blue;*/
        /*}*/
        /*p {*/
        /*    color: deeppink;*/
        /*}*/
        #d1 {
            color: red;
        }
    </style>
</head>
<body>
<!--<p style="color: aqua">今天周五啦 马上就要放假了</p>-->
<!--1.选择器相同  引入方式不同    就近原则-->
<p id="d1" class="c1" style="color: yellow">今天周五啦 马上就要放假了</p>
<!--2.选择器不同  引入方式相同-->
</body>
</html>

View Code

2.宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
             200px;
            height: 400px;
            background-color: #4e4e4e;
        }
        /*span是行内标签 没有作用*/
        span {
             200px;
            height: 400px;
        }
    </style>
</head>
<body>
<div>
    效率第一
</div>
<span>
    坚持就是胜利
</span>
</body>
</html>

View Code

3.字体属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            font-family: 'Consolas', 'Deja Vu Sans Mono', 'Bitstream Vera Sans Mono', monospace;
            font-size: 48px;
            font-weight: lighter;     /*lighter 变细  bound 变粗*/
            /*color: yellow;*/
            /*color: #ffffff;*/
            /*color: rgb(255,103,0);*/
            color: rgba(255,103,0,0.4);
        }
    </style>
</head>
<body>
<p>床上明月光 ...how are you I am fine thankyou</p>
</body>
</html>

View Code

4.文字属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            /*text-align: justify;*/
            /*text-decoration: underline;*/
            /*text-decoration: overline;*/
            text-decoration: line-through;
            font-size: 16px;
            text-indent: 32px;
        }
        a {
            text-decoration: none;
            color: yellow;
        }
    </style>
</head>
<body>
<p>大的萨达是快乐的境况撒娇的煎熬是两块多</p>
<a href="">点我有你好看~</a>
</body>
</html>

View Code

5.背景属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*div {*/
        /*    background-color: black;*/
        /*    color: white;*/
        /*}*/
        .c1 {
             400px;
            height: 400px;
            /*background-color: gray;*/
            /*background-image: url("111.png");*/
            /*background-repeat: no-repeat;  !*不平铺*!*/
            /*!*background-repeat: repeat-x;  *!*/
            /*!*background-repeat: repeat-y;*!*/
            /*background-position: 100px 10px; !*第一个调节左右  第二个调节上下*!*/


            /*支持简写*/
            background: center center url("111.png") yellow  no-repeat ;

        }
    </style>
</head>
<body>
<!--<div>-->
<!--    大空间的凯撒件打开-->
<!--</div>-->
<div class="c1"></div>
</body>
</html>

View Code

6.边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            /*border-style: dotted;  !*样式*!*/
            /*border-color: red;  !*边框颜色*!*/
            /*border- 10px;  !*边框粗细*!*/
            /*border-left: solid;*/
            /*border-right: dashed;*/
            /*border-top: dotted;*/
            /*border-bottom: solid;*/
            /*border-left-color: deeppink;*/
            /*边框有四边 每一边都可以设置独有的样式 颜色 粗细*/

            /*简写*/
            border: solid 3px red;  /*只要把参数写进去就可以  不需要考虑顺序*/
        }
        div {
            height: 500px;
             500px;
            border: 3px solid red;
        }
        span {
            height: 200px;
             200px;
            border: 5px solid green;
        }
    </style>
</head>
<body>
<p>
    看的撒科技大厦考虑到金卡圣诞节快乐撒娇
</p>

<div>sakljdkasd</div>
<span>hdsakljdklsad</span>

</body>
</html>

View Code

7.画圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            height: 150px;
             150px;
            border-radius: 50%;
            background-image: url("111.png");
            background-repeat: no-repeat;
            border: 5px solid green;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

View Code

8.display 属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<div style="height: 50px; 50px;background-color: red;display: inline">-->
<!--    sadiasd-->
<!--</div>-->
<!--<div style="height: 50px; 50px;background-color: green;display: inline">-->
<!--    sajdsad-->
<!--</div>-->
<!--<span style="background-color: red;height: 100px; 100px;display: inline-block">span</span>-->
<!--<span style="background-color: green;height: 100px; 100px;display: inline-block">span</span>-->
<!--inline-block能够让一个标签即有快二级标签可以设置长宽的特点 又有行内标签在一行展示的特点-->
<div>div1</div>
<!--<div style="display: none">div2</div>-->
<div style="visibility:hidden">div2</div>
<div>div3</div>

<!--display: none隐藏标签 并且标签所占的位置也要让出来-->


</body>
</html>

View Code

9.盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;  /*取消body标签自带的8px的外边距*/
        }
        /*div {*/
        /*    border: 5px solid red;*/
        /*}*/
        .c1 {
            height: 100px;
             100px;
            background-color: red;
            /*margin-bottom: 50px;*/
            /*margin-left: 100px;*/
            /*margin: 20px;  !*上下左右*!*/
            /*margin: 20px 40px;  !*第一个是上下   第二个是左右*!*/
            /*margin: 20px 40px 60px;  !*上   左右   下*!*/
            /*margin: 20px 40px 60px 80px;  !*上  右 下 左  顺时针*!*/
            /*margin: 0 auto;  !*水平居中*!*/


        }
        .c2 {
            margin-top: 20px;
            height: 100px;
             100px;
            background-color: green;
        }
        .c3 {
            border: 3px solid black;
            height: 400px;
             400px;
            /*padding-top: 20px;*/
            /*padding-left: 40px;*/
            /*padding: 20px;*/
            padding: 20px  40px;
            /*padding: 20px;*/
            /*padding: 20px;*/
            /*padding跟margin简写规律一致*/

        }
        p {
            margin: 0;
        }
        ul {
            padding-left: 0;
        }
    </style>

</head>
<body>
<!--<div>啥都卡死的十大科技打卡</div>-->
<!--<div class="c3">-->
<!--   <div class="c1" id="d1"></div>-->
<!--&lt;!&ndash;    <div class="c2" id="d2"></div>&ndash;&gt;-->
<!--</div>-->


<p>sakjdsadslad</p>
<p>sakjdsadslad</p>
<p>sakjdsadslad</p>
<p>sakjdsadslad</p>
<p>sakjdsadslad</p>


<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>

</body>
</html>

View Code

10.浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;  /*取消body标签自带的8px的外边距*/
        }
        /*div {*/
        /*    border: 5px solid red;*/
        /*}*/
        .c1 {
            height: 100px;
             100px;
            background-color: red;
            /*margin-bottom: 50px;*/
            /*margin-left: 100px;*/
            /*margin: 20px;  !*上下左右*!*/
            /*margin: 20px 40px;  !*第一个是上下   第二个是左右*!*/
            /*margin: 20px 40px 60px;  !*上   左右   下*!*/
            /*margin: 20px 40px 60px 80px;  !*上  右 下 左  顺时针*!*/
            /*margin: 0 auto;  !*水平居中*!*/


        }
        .c2 {
            margin-top: 20px;
            height: 100px;
             100px;
            background-color: green;
        }
        .c3 {
            border: 3px solid black;
            height: 400px;
             400px;
            /*padding-top: 20px;*/
            /*padding-left: 40px;*/
            /*padding: 20px;*/
            padding: 20px  40px;
            /*padding: 20px;*/
            /*padding: 20px;*/
            /*padding跟margin简写规律一致*/

        }
        p {
            margin: 0;
        }
        ul {
            padding-left: 0;
        }
    </style>

</head>
<body>
<!--<div>啥都卡死的十大科技打卡</div>-->
<!--<div class="c3">-->
<!--   <div class="c1" id="d1"></div>-->
<!--&lt;!&ndash;    <div class="c2" id="d2"></div>&ndash;&gt;-->
<!--</div>-->


<p>sakjdsadslad</p>
<p>sakjdsadslad</p>
<p>sakjdsadslad</p>
<p>sakjdsadslad</p>
<p>sakjdsadslad</p>


<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>

</body>
</html>

View Code

浮动的简单应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;  /*取消body标签自带的8px的外边距*/
        }
        /*div {*/
        /*    border: 5px solid red;*/
        /*}*/
        .c1 {
            height: 100px;
             100px;
            background-color: red;
            /*margin-bottom: 50px;*/
            /*margin-left: 100px;*/
            /*margin: 20px;  !*上下左右*!*/
            /*margin: 20px 40px;  !*第一个是上下   第二个是左右*!*/
            /*margin: 20px 40px 60px;  !*上   左右   下*!*/
            /*margin: 20px 40px 60px 80px;  !*上  右 下 左  顺时针*!*/
            /*margin: 0 auto;  !*水平居中*!*/


        }
        .c2 {
            margin-top: 20px;
            height: 100px;
             100px;
            background-color: green;
        }
        .c3 {
            border: 3px solid black;
            height: 400px;
             400px;
            /*padding-top: 20px;*/
            /*padding-left: 40px;*/
            /*padding: 20px;*/
            padding: 20px  40px;
            /*padding: 20px;*/
            /*padding: 20px;*/
            /*padding跟margin简写规律一致*/

        }
        p {
            margin: 0;
        }
        ul {
            padding-left: 0;
        }
    </style>

</head>
<body>
<!--<div>啥都卡死的十大科技打卡</div>-->
<!--<div class="c3">-->
<!--   <div class="c1" id="d1"></div>-->
<!--&lt;!&ndash;    <div class="c2" id="d2"></div>&ndash;&gt;-->
<!--</div>-->


<p>sakjdsadslad</p>
<p>sakjdsadslad</p>
<p>sakjdsadslad</p>
<p>sakjdsadslad</p>
<p>sakjdsadslad</p>


<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>

</body>
</html>

View Code

清除浮动带来的影响

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        #d1 {
            border: 3px solid black;

        }
        .c1 {
            height: 100px;
             100px;
            background-color: red;
            float: left;
        }
        .c2 {
            height: 100px;
             100px;
            background-color: green;
            float: left;
        }
        .c3 {
            height: 150px;
             100px;
            background-color: orange;
            float: left;
        }
        .clearfix:after {
            content: " ";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
<div id="d1" class="clearfix">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3">
        sadkjajsdasjd
    </div>
</div>
</body>
</html>

View Code

11.溢出属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        #d1 {
            border: 3px solid black;

        }
        .c1 {
            height: 100px;
             100px;
            background-color: red;
            float: left;
        }
        .c2 {
            height: 100px;
             100px;
            background-color: green;
            float: left;
        }
        .c3 {
            height: 150px;
             100px;
            background-color: orange;
            float: left;
        }
        .clearfix:after {
            content: " ";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
<div id="d1" class="clearfix">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3">
        sadkjajsdasjd
    </div>
</div>
</body>
</html>

View Code

12.原型头像示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
            background-color: antiquewhite;
        }
        .c1 {
            height: 100px;
             100px;
            border-radius: 50%;
            border: 5px solid white;
            /*background-image: url("111.png");*/
            /*background-repeat: no-repeat;*/
            overflow: hidden;
            opacity: 0.4;
        }
        img {
            max- 100%;
        }
    </style>
</head>
<body>
<div class="c1">
    <img src="111.png" alt="">
</div>
</body>
</html>

View Code

13.定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        .c1 {
            height: 100px;
             100px;
            background-color: red;
            /*position: static;  !*默认值*!*/
            position: relative;  /*相对定位*/
            left: 100px;
            top: 100px;
        }
        .c2 {
            height: 50px;
             100px;
            background: green;
            position: relative;
        }
        .c3 {
            position: absolute;
            height: 200px;
             200px;
            background-color: orange;
            left: 100px;
            top: 50px;
        }
        .cc {
            height: 50px;
             100px;
            background-color: #4e4e4e;
            color: white;
            position: fixed;
            bottom: 20px;
            right: 20px;
        }
    </style>
</head>
<body>
<!--<div class="c1"></div>-->
<!--<div class="c2">-->
<!--    <div class="c3">空空的 什么都没有...</div>-->
<!--</div>-->
<div style="height: 1000px;background-color: red"></div>
<div style="height: 1000px;background-color: green"></div>
<div style="height: 1000px;background-color: orange"></div>
<div class="cc">回到顶部</div>
</body>
</html>

View Code

14.脱离文档流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            background-color: red;
            height: 50px;
             50px;
            /*position: relative;*/
        }
        .c2 {
            background-color: green;
            height: 50px;
             50px;
            /*position: absolute;*/
            position: fixed;
            bottom: 20px;
            right: 20px;
        }
        .c3 {
            background-color: orange;
            height: 50px;
             50px;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>

View Code

15.z-index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .modal {
            background-color: #808080;
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            z-index: 999;
            opacity: 0.4;
        }
        .form {
            background-color: white;
            height: 200px;
             100px;
            position: fixed;
            top: 50%;
            left: 50%;
            z-index: 1000;
            margin-top: -100px;
            margin-left: -50px;
        }
    </style>
</head>
<body>
<div>我是最底下的那个</div>
<div class="modal"></div>
<div class="form"></div>
</body>
</html>

View Code

16.透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            background-color: rgba(128,128,128,0.4);
        }
        .c2 {
            background-color: rgb(128,128,128);
            opacity: 0.4;
        }
    </style>
</head>
<body>
<div class="c1">阿萨德撒大家都</div>
<div class="c2">阿萨德撒大家都</div>
</body>
</html>

View Code

相关阅读:
HTTP POST GET 本质区别详解
 本人完成的代码生成器，请多提些建议
 .net实现控件视图状态ViewState
专门用于微信公众平台的Javascript API导言
 [学习笔记]验证上传文件后缀名类型
 专门用于微信公众平台的Javascript API
1个月成为HTML5前端工程师
 js中用正则表达式过滤特殊字符, 校验所有输入域是否含有特殊符号
 SharePoint 2010 根据不同的用户权限显示不同的导航
 （原创）Sharepoint webpart中调用web service报错
原文地址：https://www.cnblogs.com/bigbox/p/12103591.html