CSS基础语法

e度空间

2020-02-20

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="refresh" content="5"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css基础</title>
    <!-- 引入css的方法 可以引入多个css文件-->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- 在style标签里面编写css样式 -->
    <style>
        /* 1 首先我们来弄一个绿色的背景 */
        body{
            background-color: green;
        }

        /* 2 了解css选择器*/
        /* 通用选择器   所有文字30px加粗*/
        *{
            font-size:30px; 
            font-weight: bold;
        }

        /* 元素选择器 */
        h1{
            color: red;
        }
        h2{
            color:blue;
        }
        h3{
            color:yellow;
        }


        /* 类选择器  标签上面的class属性*/
        .div{
            width: 200px;
            height: 200px;
            background: red;
        }
        /* 挨着 */
        .div1.div2{
            width: 200px;
            height: 200px;
            background-color:blue;
        }
        p.div5{
            color:white;
        }
        /* 不挨着 */
        .div3 .div4{
            width: 200px;
            height: 200px;
            background-color:pink;
        }
        p .div6{
            color:blue;
            font-size: 50px;
        }

        /* ID选择器 */
        #app{
            width: 300px;
            height: 300px;
            background-color:yellow;
        }


        /* 属性选择器 */
        /* 简单属性选择器  有这个属性就成*/
        h1[class]{
            color:yellow;
        }
        /* 具体属性选择器 有这个属性还得和设置的相等*/
        input[type=text]{
            color:red;
        }

        /*3、部分属性选择器 了解即可 没有DEMO

        [class ~="b"] 选择class属性值在用空格分隔的词列表中包含词语"b"的所有元素
        　　例如：class="ab"不满足[class ~="b"]，而class="a b"或class="b"满足

        [class |="b"] 选择class属性值等于b或以b-开头的所有元素
        　　例如：class="ab"或class="ab-"不满足[class |="a"]，而class="a"或class="a-"满足

        [class ^="b"] 选择class属性值以"b"开头的所有元素
        [class $="b"] 选择class属性值以"b"结尾的所有元素
        [class *="b"] 选择class属性值包含"b"的所有元素*/

        /* 分组选择器  */
        span,em{
            color:red;
        }
        /* 后代选择器 */
        ul li {
            color:white;
        }
        /* 兄弟选择器 */
        h5 + h6{
           color:blue;
        }
        /* 伪类选择器 */
        #pse_class:hover{
            color:black;    
        }
        /* 伪元素选择器 */
        .after:after{
            content: "123";
        }
    </style>
</head>
<body>
    <!-- 1 行间样式  直接把样式写到标签里面 如果在div标签重写多个style属性,只识别第一个-->
    <div style="width: 500px;height: 500px;border:10px solid red;" style="background-color: yellow;">
        行间样式DEMO
    </div>


    <!-- 2 选择器 -->
    <h1>红色文字</h1>
    <h2>蓝色文字</h2>
    <h3>绿色文字</h3>

    <div class="div">红色背景200*200</div>
    <!-- 挨着 -->
    <div class="div1 div2">蓝色背景200*200</div>
    <!-- 不挨着 -->
    <div class="div3">
        <div class="div4">粉色背景200*200</div>
    </div>

    <p class="div5">白色文字</p>

    <p>
        <div class="div6">绿色文字(这个很奇怪没生效我们以后解释)</div>
    </p>

    <div id="app">
        ID选择器 黄色背景300*300
    </div>

    <!-- 属性 -->
    <h1 class="app">
            简单属性选择器        黄色文字
    </h1>

    
    <input type="text" value="红色">
    <input type="numnber" value="默认颜色">

    <br>

    <!-- 分组 -->
    <span>红色span</span>
    <em>红色em</em>

    <!-- 后代 -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

    <!-- 兄弟选择器 -->
    <h5>H5</h5>
    <h6>H6</h6>

    <!-- 伪类选择器 -->
    <span id="pse_class">鼠标移入到此</span>

    <!-- 伪元素选择器 -->
    <div class="after"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>权重问题</title>
    <style>
        /* 1、内联样式 -> 1,0,0,0  style="color:red"

        　　2、ID属性值 -> 0,1,0,0    id="app"

        　　3、类属性值、属性选择或伪类 -> 0,0,1,0  class="app"

        　　4、元素或伪元素 -> 0,0,0,1  <span></span>

        　　5、结合符和通配选择器 -> 0,0,0,0 */

        .test {    /*权重:0,0,1,0*/
            color:red;
        }
        #app{      /*权重:0,1,0,0*/
            color:blue;
        }

        /* 不进位 */
        .a.b.c.d.e.f.g.h.i.j.k.l{  /*权重:0,0,12,0*/
            width: 500px;
            height: 500px;
            border:1px solid red;
            background-color: red;
        }
        #box{ /*权重:0,1,0,0*/
            background: yellow;
        }

        .important{
            width: 500px;
            height: 500px;
            border:1px solid red;
            color:red !important;
        }

        #important{
            color:blue;
        }
    </style>
</head>
<body>
    <span id="app" class="test">
        由于  0,1,0,0  > 0,0,1,0  所以显示文字为蓝色
    </span>


    <div class="a b c d e f g h i j k l" id="box">
        由于  0,1,0,0  > 0,0,12,0  所以显示文字为蓝色
        但是.a.b.c.d.e.f.g.h.i.j.k.l 设置的其他样式 width:500px等仍然可以正常显示
    </div>

    <div class="important" id="important" style="color:green">
        文字颜色是红色
        !important 权重最高
        style 权重  1,0,0,0
        id 权重 0,1,0,0
    </div>
</body>
</html>

css css选择器 css样式