CSS新手笔记
1.CSS的定义由三部分构成:
1.基本语法机构:
选择器{
属性:值;
}
2.三个值作用:.
选择器作用: 选中标签对其进行样式美化
属性作用:对元素进行哪些样式美化
值作用:决定属性美化样式的程度
注意:css中的属性与html元素行内属性不是一个东西
2.基本选择器
通配选择器 选择文档中所有HTML元素,例:*{ margin:10px}
元素选择器 选择指定类型的HTML元素,例:div{width:100px.height:100px}
类选择器 选择指定class属性值为“class”的任意类型的任意多个元素;
类选择器必须添加 . 为前缀,例:.class{width:100px.height:100px}
ID选择器 选择指定ID属性值为“id”的任意类型元素 id 属性应该是唯一的
定义ID选择器必须添加 # 为前缀,#id{width:100px.height:100px}
关系型选择器 父子选择器:“>”,例:div>p{};
子孙选择器:“空格”,例: div span{}
兄弟选择器:普通兄弟“~”,+相邻兄弟“+”
属性选择器 元素[属性=值] 例如:input[name=login]
3.选择器优先级
1.优先级:
当创建的样式表越来越复杂时,一个标签的样式将会受到越来越多的影响,这种影响可能来自周围的标签,也可能来自其自身。
浏览器根据优先级来决定给元素应用哪个样式,而优先级仅由选择器的匹配规则来决定。
2.CSS选择器如何计算?
a.当CSS选择器权重相同,则最后的声明的CSS选择器覆盖靠前的 CSS。
b.CSS优先级是根据由每种选择器类型构成的级联字串计算而成的,它不是一个对应相应匹配表达式的权重值。
c.相同CSS表达式,在DOM结构中的距离是不会对元素优先级计算产生影响的。
3.CSS优先级顺序
优先级从上往下以及权重
行内样式 > 1000
id选择器 > 100
类选择器= 属性选择器 = 伪类选择器 > 10
标签选择器 = 伪元素选择器> 1
通配符>0
4.CSS 优先级规则:
a.选择器都有一个权值,权值越大越优先。
b.当权值相等时,后出现的样式表设置要优于先出现的样式表设置。
c.创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式。
d.继承的CSS 样式不如后来指定的CSS 样式。
e.在同一组属性设置中标有“!important”规则的优先级最大。
5.!import
为什么没有把!import放在优先级顺序中,因为官方认为!import和优先级没一点关系。
不建议使用!import:
a.绝不要在全站使用!import。
b.只在需要覆盖全站或外部 css(例如引用的 ExtJs 或者 YUI )的特定页面中使用 !important。
c.永远不要在你的插件中使用 !important。
d.要优先考虑使用样式规则的优先级来解决问题而不是 !important。
6.css的继承
css的继承特性指的是应用在一个标签上的那些 CSS 属性被传到其子标签上。看下面的 HTML 结构:
<div>
<p></p>
</div>
如果 <div>
有个属性 color: red,则这个属性将被 <p>
继承,即 <p>
也拥有属性 color: red。
7.错误的说法
在学习过程中,你可能发现给选择器加权值的说法,即 ID 选择器权值为 100,类选择器权值为 10,标签选择器权值为 1。
当一个选择器由多个 ID 选择器、类选择器或标签选择器组成时,则将所有权值相加,然后再比较权值,这种说法其实是有问题的。
比如一个由 11 个类选择器组成的选择器和一个由 1 个 ID 选择器组成的选择器指向同一个标签,按理说 110 > 100,应该应用前者的样式,然而事实是应用后者的样式。错误的原因是:选择器的权值不能进位。
还是拿刚刚的例子说明。11 个类选择器组成的选择器的总权值为 110,但因为 11 个均为类选择器,所以其实总权值最多不能超过 100, 你可以理解为 99.99,所以最终应用后者样式。