知识点导航
* CSS初步认识
1.整体感知
2.常见属性
* CSS基础选择器
1.标签选择器
2.id 选择器
3.类选择器
* CSS高级选择器
1.后代选择器
2.交集选择器
3.并集选择器
4.通配符 *
* CSS3部分选择器
1.儿子选择器 ( IE7开始兼容 )
2.序选择器 ( IE8开始兼容 )
3.下一个兄弟选择器 ( IE7开始兼容 )
* CSS的继承性和层叠性
1.继承性
2.层叠性（权重初识）
一、CSS初步认识<p>
HTML 超文本标记语言 从 语义 的角度描述页面 结构
CSS 层叠样式表 从 审美 的角度描述页面 样式
JS JavaScript 从 交互 的角度描述页面 行为
-
CSS整体感知
css 是 cascading style sheet 层叠式样式表的简写
<head>
<style type="text/css">
选择器{
k:v;
k:v;
}
</style>
</head>`
前期书写css的地方为 style 标签，包裹在 head 内，从代码中可以看出，css 也是纯文本文件
注意
css对换行不敏感，对空格也不敏感，但是 冒号和分号不能省略
-
CSS常见属性<p>
字体颜色
color: red;
字体大小
font-size: 40px;
背景颜色
background-color: blue;
加粗
font-weigh: bold;
不加粗
font-weigh: normal;
斜体
font-style: italic;
不斜体
font-style: normal
下划线
text-decoration: underline;
无下划线
text-decoration: none;
二、CSS基础选择器<p>
css主要的两部分知识点：
1. 选择器 （怎么选）
2. 属性 （长啥样）
1.标签选择器<p>
<style type="text/css">
span{
color: red
}
</style>
<h1><span>红色</span></h1>
通过标签的类型来选中标签，所有的标签都可以是标签选择器,它选中的是页面上所有这种类型的标签，所以经常用来描述“共性”，无法描述“个性”
2.id 选择器<p>
<p>我是段落 1</p>
<p>我是段落 2</p>
<p id ="para3">我是段落 3</p>
<style type="text/css">
#para3 { color: red }
</style>
id 选择器的选择符是 “#”
每个标签都有 id 这个属性，表示这个标签的名字
id 命名规范
1.只能有字母，数字，下划线
2.必须以字母开头
3.不能和标签同名
4.大小写敏感
5.不能重名
3.类选择器<p>
<p>我是段落 1</p>
<p class="special">我是段落 2</p>
<p>我是段落 3</p>
<p class="special">我是段落 4</p>`
<style type="text/css">
.special { color: red }
</style>
类选择器的选择符是 “ . ”
任何标签都可以有 class 属性，这个属性可以重复
说明
1.class 属性可以重复（id 属性不可以）
2.同一个标签可以同时属性多个类，用空格隔开
<p class="special traditional strict">我是段落 2</p>
到底用 class 还是 id 呢？
css 一般情况下尽量使用 class， 除非极特别情况下需要使用 id，因为 id 一般是给 js 用的
三、CSS高级选择器<p>
1.后代选择器<p>
<style type="text/css">
div p{
color: red;
}
</style>
后代选择器的选择符是 空格“ ”
不仅仅是儿子，是所有的后代
2.交集选择器<p>
交集
<style type="text/css">
h3.special{
color: red;
}
</style>
交集选择器的选择符是 “选择器.选择器”
中间是英语的句号“.”, 具体可以参考数学中交集的写法
书写规范
1.尽量不要连续交集 （div.special.span ）
2.一般都是以标签开头 （div.special ）
3.并集选择器（分组选择器）<p>
<style type="text/css">
h3,special{
color: red;
}
</style>
并集选择器的选择符是 “选择器,选择器”
中间为英文的逗号“,”
4.通配符 * <p>
* 表示所有的元素
*{
}
标签越多，效率越低，故一般不使用通配符
四、CSS3部分选择器<p>
1.儿子选择器
div>p{
}
儿子选择器的选择符是大于号“父类选择器>儿子选择器”
只能选择儿子，不能选择孙子及之后的后代
IE7开始兼容，IE6不兼容
2.序选择器
ul li:first-child{
}
ul li:last-child{
}
IE8开始兼容，IE6、7不兼容
如果要兼容IE6、7,则可以通过给第一个和最后一个添加class 属性来达到序选择器的效果
3.下一个兄弟选择器
div+p{
}
下一个兄弟选择器的选择符是加号“兄弟选择器+下一个兄弟选择器”
选中下一个兄弟的选择器
IE7开始兼容，IE6不兼容
五、CSS的继承性和层叠性
-
继承性
当设置自己的某一些属性时，自己的后代默认也设置了的这些属性，这就是继承性
哪些属性能继承？
*关于文字样式的都能继承（color、text-开头的、line-开头的、font-开头的）
*关于盒子的，定位的，布局的属性都不能继承
-
层叠性
css处理冲突的能力，也就是选择器权重的计算，没有任何兼容问题
计算权重的一个大前提：选中了该标签，如果没有选中特定标签，权重永远为 0
选择器权重计算方式（前提：选中了该标签）
*核心公式：id 的数量，类的数量，标签的数量
*id 权重 > 类的权重 > 标签的权重
*255个标签等于一个类名，无实战意义，几乎等于不进位
*若权重一样，谁后写听谁的
*继承不影响权重，即若未选中标签，权重永远为0
*若没有选中标签，就近原则
权重总结：
1.先看选择器有没有选中指定标签，如果选中了，那么以（id 数，类数，标签数）来计算权重，谁打听谁的；如果权重一样，那么谁后写听谁的
2.如果没有选中，那么权重为0，就近原则
网友评论