css语法

CSS

　　选择器：找到想控制的标签

　　操作：渲染和布局（属性）

css的引入方式：层叠样式表

<!--css的引入方式1-->    行内式
<p style="background: gray;color: red">这是一个p标签</p>

<!--css的引入方式2-->  在文件头 head里面加style   嵌入式
<style>
    div {
        color: lightseagreen;
        font-size: 32px;  
    }
</style>

<!--css的引入方式3-->   链接式
<link rel="stylesheet" href="cxn.css">  #在文件头 head里面
标签样式放在cxn.css 里面引入

4 导入式   主要使用链接式

<style type="text/css">

@import"mystyle.css"; 此处要注意.css文件的路径

</style>　

选择器：

　　基本选择器：

/*标签选择器*/
p{
    color: red;
}
/*id选择器*/ id=p3
#p3{
    background: green;
}
/*class（类）选择器*/ class=c1   

class可以拥有多个值，每个值以空格隔开，如<span class="d1 d2">span</span> 则既可以拥有d1的样式，又可以拥有d2的样式


.c1{
    font-size: 32px;
}
/*通配选择器,所有标签 */
*{
    background-color: lightseagreen;
}

层级选择器：

/*后代选择器 空格表示后代（子孙等等）*/
<style>
    .c1 .c3{
        color: #1cb7fd;
    }
</style>
/*子代选择器 用>表示 c1下边的儿子叫c3的*/
<style>
    .c1>.c3{
        color: gray;
    }
</style>

/*毗邻选择器 （紧挨着）以+表示*/
<style>
.c1+p{
    color: yellow;
}
</style>
/*兄弟选择器(不需要紧挨着)以~表示 */
<style>
    .c1~p{
        color: red;
    }
</style>

<style>
    span{
        color: red;
    }
</style>

/*多元素选择器 span标签，且class=d1*/
<style>
    span.d1{
        color: green;
    }
</style>

属性选择器

[]属性选择器语法 如下：span标签里属性 egon=egg 的标签 
 ^='e' 以e开头 
 <!-- *='e' 包含e
    
    <style>
        span[egon^='egg']{
            color: red;
        }
    </style>

</head>
<body>

<div egon="egg">egg</div>
<span egon="egg">egg span</span>
<div egon="egg1">egg1</div>
<div alex="32">alex</div>


hover应用

<style>
    span{
        color: royalblue;
    }
    /*span标签悬浮的时候变红色*/
    span:hover{
        color: red;
    }

    .s1,.s2{
         100px;
        height: 100px;
    }
    .s1{
        background-color: gray;
    }
    .s2{
        background-color: #33bb00;
    }
    .s2:hover{
     background-color: white;
    }
    .outter{
        border: 1px solid red;
    }

    .outter:hover .s1{
        background-color:blue;
    }
    .outter:before{
        content: 'helloword';
        color: red;
    }

</style>

<span>hello word</span>
<div class="outter">
<div class="s1"> </div>
<div class="s2"></div>