css

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.元素的宽度以及高度都是可以设置的