css02_html/css_WEB-ITnose-tutoriel HTML-php.cn

css02_html/css_WEB-ITnose
WBOY
Libérer： 2016-06-21 08:57:28
original
898 Les gens l'ont consulté
<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title></title></head><style type="text/css">    /*        “*”代表所有元素，一般情况下会提前定义全局选择符    */    * {        color: pink;        font-size: 12px;        border: 1px solid blue;    }    /*类选择符链：只有同时出现 www dreamdu com的类才可以使用*/    .www.dreamdu.com {        color:blue;    }    /*一一个元素可以有多个类选择符*/    .dreamdu-red    {        color:red;    }    p.dreamdu-12px    {        font-size:12px;    }    p.dreamdu-bold    {        font-weight:bold;    }    #btw{        border: 2px;        width: auto;        /*定义边框宽度*/        border-top-width: 10px;        border-right-width: 5px;        border-left-width: 2px;        border-bottom-width: 7px;        /*定义边框颜色*/        border-top-color: #006486;        border-right-color: #F8AE11;        border-left-color: #3080CB;        border-bottom-color: #464646;        /*定义边框样式*/        border-right-style: solid;        border-left-style: double;        border-bottom-style: dashed;        border-top-style: groove;        /*border属性 是以上几个属性的集合 但是他也分为 top,right,left bottom*/        /**border: border-width border-style border-color;*/    }    #mg{        border-style: solid;        border-color: red;        /*margin:表示外边框外面可以有一层补白，他可以把块级元素分开，边外补白定义了围绕某种元素的空白*/        margin-top: 10px;    }    #pdp{        border-style: solid;        border-color: #3080CB;        margin-top: 10px;        /*padding:表示一个边框的的内部补白区，边内补白*/        padding-left: 40px;        /*相对于当前对象单位，相对长度单位可以随着当前为本属性进行调整*/        font-size: 2em;        /*相对百分比*/        width: 10%;    }    h1:before{        /**/        content: "test";        display: inline;    }    h1:after{        content: "背景";    }    /*    选择符是从上往下执行的，并向下覆盖属性        选择符1，选择符2{            color:red;        }    */    h2{        color: #3080CB;    }    h1,h2,h3{        color: #FF0000;        border-style: solid;    }    /*只要是 p 被 div包含时候，无论p是他的什么子类，还是孙类 只要是后裔就行*/    div p{        font-size: 40px;        color: saddlebrown;    }    /*定义某一个或某一类元素的子类样式，仅仅限于子类*/    #son>p{        color: #FF0000;    }    #brother+p{        color: #FF0000;    }    /*属性选择器表示具有某种属性的选择器*/    /*表示具有type属性的input元素*/    input[type]{        color: #FF0000;    }    /*表示input标签某一个类的,某一个值*/    input[class='cd']{        color: #3080CB;    }    /*表示匹配input标签中class属性中其中具有某一个值的元素*/    input[class~='cd']{        color: #3080CB;    }    /*表示匹配input标签class属性值为cd或者跟在cd后面的链接符是-的*/    input[class|='cd']{        color: #3080CB;    }    /*表示匹配input标签class属性值中以cd开头的所有元素*/    input[class^='cd']{        color: #3080CB;    }    /*表示匹配input标签class属性值中以cd结尾的所有元素*/    input[class$='cd']{        color: #3080CB;    }    /*表示匹配input标签class属性值中具有cd值的所有元素*/    input[class*='cd']{        color: #3080CB;    }</style><!--标签元素等级之间是有继承关系的，或兄弟关系的--><!--祖类元素--><body>    <p class="dreamdu-bold dreamdu-12px dreamdu-red">梦之都 红色12px的粗体</p>    <!--父类元素-->    <h1>dfafa</h1>    <h2>dsfaf</h2>    <h3>dsfafsdaf</h3>    <!--父类元素-->    <div id="btw">        <!--子类元素-->        <span>            <!--孙类元素-->            <p id="p">在乎</p>        </span>    </div>    <div id="mg">        <p id="pdp">在乎</p>    </div>    <div id="son">        <div>            <p>在乎地方</p>        </div>        <p>你是</p>    </div>    <div>        <span id="brother">fafa</span>        <p>兄弟</p>        <p>隔离</p>    </div>    <input type="text">    <input></body></html>
Copier après la connexion