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