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 是层叠样式表  如果 后面的权重  相同或大于等于前面的权重  后面定义的样式 就会冲掉  前面定义的样式

上一篇:使用MySQL-Proxy读写分离时的注意事项


下一篇:js监听用户思否在当前页面