css02

最新推荐文章于 2025-09-06 09:26:50 发布
转载最新推荐文章于 2025-09-06 09:26:50 发布 · 55 阅读
0 ·
CC 4.0 BY-SA版权
原文链接：https://my.oschina.net/u/1169079/blog/614162
文章标签：
#python
2019独角兽企业重金招聘Python工程师标准>>>
<!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>
转载于:https://my.oschina.net/u/1169079/blog/614162