CSS（一） 引入方式 选择器 权重

Css（一）　　

Cascading Style Sheet　　层叠样式表

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　css注释方式/*  */

一、Css引入方式

　　1. 行间样式 style=" key:value; "

    <div style="width:100px;height:100px; background:yellow;"></div>

　　2.页面级css   即在 head 标签里 写 style 标签  里面写行间样式 (不推荐)

<style>
    body{
        background: green;
    }
</style>

　　

　　4.@import url()引入   同样 写在 Style 标签里面

<style>
    @import url(index.css);
</style>

　　冷门小姿势：　　必须写在Style标签第一行 才生效

　　　　　　　　　这种引入方式在 ie6 只能执行 31行   且等页面加载完才能加载 css

　　4. link 标签引入　　（最常用）

<link rel=”stylesheet” href=”index.css”/>

　　

二、 选择器

　　1.通配符选择器

*{}　　/*所有标签 包括 body   缺点 浪费型能*/

　　2.标签选择器 与 伪元素选择器

ul{　　/*标签选择器*/
    list-style-type: none;
}

span::before{　　/*伪元素选择器*/
    content:'这段在span前面'  /*这里content必须写  至少是 ‘’ 否则不会生效*/
}
span::after{
    content:'这段在span后面'
}

　　3.类选择器 与属性选择器

.wrapper{　　/*类选择器   class*/
    border: 1px solid pink;
}

[name='weibin']{　　/*属性选择器  多用于选择input*/
    background: red;
}

　　4.id选择器

#only{　　/*选择id是only的元素*/
    color:red;
}

　　5.后代选择器 （派生选择器）

.wrapper div{　　/*这里选择的是  wrapper 下的 所有div*/
    float: left;
}

　　6.子代选择器

.wrapper>div{　　/*这里选择是  wrapper 的所有 子级 的div   子级仅仅是一层嵌套关系的*/
    float: left;
}

　　7.并列选择器

div.box{background: pink}　　/*选出同时满足多个选择器 的元素     选择器间没有空隙*/

　　8.分组选择器

div,p,span{font-size:'14px'}　　/*同时编辑多个选择器选中的内容 减少Css冗余 选择器间 , 隔开 */

　　9.伪类选择器

/*链接伪类*/
a:link{}        /*用于尚未访问的链接*/
a:Visited{}    /*用于访问后的链接    类似于 看电视剧观看过的集数 变灰*/
/*动态伪类*/
a:hover{}        /*鼠标移入时*/
a：active{}    /*元素激活时*/
a:focus{}        /*聚焦时 */   

　　10.兄弟选择器

h1 + p {margin-top:50px;}　　/*h1和p 选择h1 下面的 p*/

三、权重值

选择器	权重
！important	∞
行间样式	1000
id	100
class、 属性、 伪类	10
标签、伪元素	1
通配符	0

父子选择器等   权重值 会加到一起     css 是层叠样式表  如果 后面的权重  相同或大于等于前面的权重  后面定义的样式 就会冲掉  前面定义的样式