知识点导航
* CSS初步认识
1.整体感知
2.常见属性
* CSS基础选择器
1.标签选择器
2.id 选择器
3.类选择器
* CSS高级选择器
1.后代选择器
2.交集选择器
3.并集选择器
4.通配符 *
* CSS3部分选择器
1.儿子选择器 ( IE7开始兼容 )
2.序选择器 ( IE8开始兼容 )
3.下一个兄弟选择器 ( IE7开始兼容 )
* CSS的继承性和层叠性
1.继承性
2.层叠性(权重初识)
一、CSS初步认识
HTML 超文本标记语言 从 语义 的角度描述页面 结构
CSS 层叠样式表 从 审美 的角度描述页面 样式
JS JavaScript 从 交互 的角度描述页面 行为
-
CSS整体感知
css 是 cascading style sheet 层叠式样式表的简写
`
前期书写css的地方为 style 标签,包裹在 head 内,从代码中可以看出,css 也是纯文本文件
注意
css对换行不敏感,对空格也不敏感,但是 冒号和分号不能省略
-
CSS常见属性
字体颜色
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基础选择器
css主要的两部分知识点:
1. 选择器 (怎么选)
2. 属性 (长啥样)
1.标签选择器
红色
通过标签的类型来选中标签,所有的标签都可以是标签选择器,它选中的是页面上所有这种类型的标签,所以经常用来描述“共性”,无法描述“个性”
2.id 选择器
我是段落 1
我是段落 2
我是段落 3
id 选择器的选择符是 “#”
每个标签都有 id 这个属性,表示这个标签的名字
id 命名规范
1.只能有字母,数字,下划线
2.必须以字母开头
3.不能和标签同名
4.大小写敏感
5.不能重名
3.类选择器
我是段落 1
我是段落 2
我是段落 3
我是段落 4
`
类选择器的选择符是 “ . ”
任何标签都可以有 class 属性,这个属性可以重复
说明
1.class 属性可以重复(id 属性不可以)
2.同一个标签可以同时属性多个类,用空格隔开
我是段落 2
到底用 class 还是 id 呢?
css 一般情况下尽量使用 class, 除非极特别情况下需要使用 id,因为 id 一般是给 js 用的
三、CSS高级选择器
1.后代选择器
后代选择器的选择符是 空格“ ”
不仅仅是儿子,是所有的后代
2.交集选择器
交集选择器的选择符是 “选择器.选择器”
中间是英语的句号“.”, 具体可以参考数学中交集的写法
书写规范
1.尽量不要连续交集 (div.special.span )
2.一般都是以标签开头 (div.special )
3.并集选择器(分组选择器)
并集选择器的选择符是 “选择器,选择器”
中间为英文的逗号“,”
4.通配符 *
* 表示所有的元素
*{
}
标签越多,效率越低,故一般不使用通配符
四、CSS3部分选择器
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,就近原则