search

Home >Web Front-end >HTML Tutorial >css02_html/css_WEB-ITnose

css02_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 08:57:28913browse

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


Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css单列布局_html/css_WEB-ITnoseNext article：求大神赐教，为什么我的图片背景background-image设置没有效果_html/css_WEB-ITnose

Related articles

See more