CSS 层叠样式表
CSS 概述
[if !supportLists]· [endif]CSS 指层叠样式表(CascadingStyleSheets)
[if !supportLists]· [endif]样式定义如何显示 HTML 元素
[if !supportLists]· [endif]样式通常存储在样式表中
[if !supportLists]· [endif]把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
[if !supportLists]· [endif]外部样式表可以极大提高工作效率
[if !supportLists]· [endif]外部样式表通常存储在CSS 文件中
[if !supportLists]· [endif]多个样式定义可层叠为一
CSS 语法
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
子元素选择器:子选择器使用了大于号(>), 主要用于选择指定标签元素的第一代子元素 后代(包含)选择器(使用空格)主要用于选择定义标签元素下的后代元素 注意:后代选择器与子元素选择器的区别:子元素选择器仅是指它的直接后代(第一代子元素)。而后代选择器是作用于所有子后代元素 总结:>作用于元素的第一代后代 空格作用于元素的所有后代 通用选择器:它是功能最强大的一个选择器(*)号指定,它的作用是用来匹配html中所有的标签元素
分组选择器:当你想为html中多个标签设置同一个样式的时候,就可以使用分组选择器
CSS的继承性
CSS的某些样式是具有继承性的,什么是继承呢?继承是一种规则,它允许样式不仅可以应用于某个特定的html标签元素,而且应用于其后代。
CSS具特殊性
有的时候我们为同个元素设置了不同的CSS样式,那么元素会启用哪一个CSS样式
最终会显示green,是因为游览器是根据权值来判断使用哪一种css样式
权值的规则:
1.标签的权值为1
2.类选择器的权值为10
3.ID选择器的权值最高为100
p{color:red;} ----------1
p span{color:green;}------2
p span.warning{color:purple;}---------12
#footer .note p{color:yellow}-----111
CSS具有层叠性
就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重原样式存在的时候,会根据这些css样式的前后顺序来决定,处于最后面的css的样式会被应用
CSS具有重要性
p{
color:red!important;
}
元素的分类
在html中标签元素会分为三种不同的类型:块级元素、内联元素(行内元素) 、内联块元素
1.块级元素常用的元素:
...
2.行内元素:
块级元素在CSS中可以设置为:display:block
特点:
1.每个块级元素都会从新的一行开始,并且其后的元素也是另起一行。
2.元素的宽度以及高度还有行是可以设置的。
3.元素的宽度在不设置的情况下,是它本身容器的100%
内联元素(行内元素)在中可以设置为:display:inline
特点:
1.和其它的元素都在一行显示
2.其宽度以及高度是不可以设置的
3.元素的宽度就是它包含的文字和图片的宽度,是不可以改变的
内联块级元素CSS的设置方式:inline-block就是同时具有内联元素、块级元素的特点
特点:
1.和其它的元素都是在同一行上来显示
2.元素的宽度以及高度都是可以设置的