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 是层叠样式表 如果 后面的权重 相同或大于等于前面的权重 后面定义的样式 就会冲掉 前面定义的样式
CSS（一） 引入方式 选择器 权重
原文地址：http://www.cnblogs.com/96weibin/p/7827910.html