CSS标签类型和样式表继承与优先级

标签类型

块级标签

什么是块级标签：在html中<div>、 <p>、h1~h6、<form>、<ul> 和 <li>就是块级元素

块级标签三特点：

一个块级元素独占一行
元素的高度、宽度、行高以及顶和底边距都可设置。
元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度

行内元素

行内元素：在html中<a>、<span>、<br>、<i>、<em>、<strong>、<label>等等属于行内元素

行内元素三大特点：

和其他元素都在一行上；
元素的高度、宽度、行高及顶部和底部边距不可设置；
元素的宽度就是它包含的文字或图片的宽度，不可改变（废话）。

行内块（内联元素）

行内块元素：html 中<img>、<input>标签就是这种内联块状标签

特点：内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点

元素的转换

块元素转行内元素

display:inline(内联)

转为内联元素之后设置宽高就无效了。

行内元素转内联元素

display:block(块元素)

display:inline-block(行内块)，既可以一行现实，又可以定义宽高

CSS三大特性

层叠性，继承性，优先级

层叠性

所谓层叠性是指多种CSS样式的叠加。例如，当使用内嵌式CSS样式表定义<p>标记字号大小为12像素，链入式定义<p>标记颜色为红色，那么段落文本将显示为12像素红色，即这两种样式产生了叠加。

<p class="box1 box2"></p>可以这样写多个类，但是这里的box1和box2顺序并不影响优先级，之和box1和box2在样式表中声明的先后有关。

继承性

所谓继承性是指书写CSS样式表时，子标记会继承父标记的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。

注意：

恰当地使用继承可以简化代码，降低CSS样式的复杂性。但是，如果在网页中所有的元素都大量继承样式，那么判断样式的来源就会很困难，所以对于字体、文本属性等网页中通用的样式可以使用继承。例如，字体、字号、颜色、行距等可以在body元素中统一设置，然后通过继承影响文档中所有文本。
所有字相关的都可以继承，比如：color、text-系列、font-系列、line-系列、cursor
并不是所有的CSS属性都可以继承，例如，下面的属性就不具有继承性：边框、外边距、内边距、背景、定位、元素宽高属性。
所有盒子相关的属性都不能继承。 a标签 h1 标签不会实现继承

优先级

内联样式最大，内联样式的优先级最高。

ID选择器的优先级，仅次于内联样式。

类选择器优先级低于ID选择器

标签选择器低于类选择器。

权重会叠加：定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
所有都相同时，声明靠后的优先级大。
CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

行内样式 > 页内样式 > 外部引用样式 > 浏览器默认样式

important > 内联 > ID > 伪类|类 | 属性选择 > 标签 > 伪对象 > 通配符 > 继承

CSS伪类

:link伪类将应用于未被访问过的链接。IE6不兼容，解决此问题，直接使用a标签。

:hover伪类将应用于有鼠标指针悬停于其上的元素。在IE6只能应用于a连接，IE7+所有元素都兼容。

:active伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等。

:visited伪类将应用于已经被访问过的链接

:focus伪类将应用于拥有键盘输入焦点的元素。

顺序问题：LoVe HAte原则。

背景background

background-color:设置背景颜色

background-image:设置背景图片

background-repeat: 设置背景平铺 one-repeat repeat-x repeat-y

background-postion: 设置背景位置 left,right,center,top,bottom

background-attachment: 设置背景是否固定

背景连写：没有先后顺序，都是可选的