CSS(CascadingStyleSheets,层叠样式表)指的是一系列的CSS样式。样式定义了HTML元素的显示规则(如字体、颜色、尺寸等)。
CSS的最新标准为CSS.1,CSS标准还在制定和发展中。
内容与表现早期的HTML中,仅有h*p等基本的元素,它们不仅描述了页面的内容,还决定了内容的外观表现。开发人员开始不断地向HTML中添加新的标签(如bcenter等),用来实现更丰富的外观表现。这些新的标签带来了更丰富的样式,却使网页变得杂乱和臃肿,难以修改和维护。
为了解决HTML内容和表现关联较强的问题(耦合),开发人员将HTML内容的表现部分独立出来,以样式表的形式来定义HTML内容的表现。
使用样式在网页中使用样式,有三种方法:
1.内联样式为元素定义style属性,即可使用内联样式:
p段落的文本显示为红色/p
内联样式只对当前的元素有效。
.内部样式在head元素内定义style标签,并在其中添加样式规则:
style p{ color:red; }//当前页面中的所有段落中的文本均显示为红色/style
在内部样式中,可以为当前页面中的任意元素定义样式规则。
.外部样式外部样式的规则记录在一个.css文件中,并通过head元素中的link元素引入到网页中:
linkrel="stylesheet"href="main.css"/
在外部样式中,可以为所有引用该样式文件的页面中的任意元素定义样式规则。
注意:
建议所有的样式规则都写在外部样式表中,这种方式有许多益处:
所有样式都在独立的文件中,方便修改和查找外部样式表可以被多个HTML文档引用,其中的样式可以在多个页面共享在HTML中可以简单地切换外部样式文件(网站改版或换肤功能)层叠、优先权与继承HTML元素同时被多组CSS指定了样式,称为层叠。
//style.cssp{ color:red;}//index.html...linkrel="stylesheet"href="style.css"/style p{ color:yellow; }/style...psometext/p
这段代码中的p元素同时受到三组颜色属性的控制,它的文本会是什么颜色呢?
在多组样式同时作用于一个元素时,会依据优先权来选择应用哪一个样式的规则。
网页中同时存在的样式可能有三类,共5组:
浏览器默认样式网页定义的样式(包括内联样式、内部样式和外部样式)用户自定义样式(通过custom.css或通过浏览器插件设置的样式)参考:userstylesheet
优先权从高到低依次为:
用户自定义样式内联样式内部样式外部样式浏览器默认样式附加规则:
同一个style属性中,同一个内部或外部样式中的相同或不同样式组中,后定义的样式规则优先权高如果页面通过link元素引用了多个外部样式文件,最后引用的样式文件优先权高内部样式和外部样式的位置?import引入的样式?继承是来自面向对象的概念,CSS中的继承有如下特点:
外部元素(父元素,祖先元素)中定义的样式规则会同时应用于内部元素(子元素,后代元素)子元素中定义的样式规则会取代父元素中定义的同一规则语法规则CSS规则的语法如下:
selector{ declaration1; declaration; ... declarationN;}
上面的代码称为一条CSS规则。每个规则分为两个部分:
选择器选择器通过一系列的规则,指定了应用当前样式规则的目标元素。声明列表列表中包含了一系列的样式声明。样式声明列表需要包含在{}中。样式声明由属性和值两部分组成:
property:value;
属性名和属性值通常为小写字母,每条样式声明都必须以;结尾。
CSS注释的语法如下:
/*CSS单行注释*/
注释可以是单行的,也可以是多行的。
/**CSS*多行注释*/颜色和单位
参考:css_colorcss_units
选择器参考:css_selectors
样式属性参考:css_properties