CSS(层叠样式表)用来规定HTML文档的呈现形式(外观和格式排版)。
CSS定义和应用样式CSS由一条或多条以分号隔开的样式声明组成,每条声明包含着一个CSS属性和该属性的值,二者用冒号隔开。CSS样式示例:
background-color:white;color:gy
其中包含:
样式声明:background-color:white属性:background-color值:white内嵌样式p
文档内嵌样式!DOCTYPEhtmlhtmlhead title/titlestyletype="text/css" p{ background-color:white; color:gy; } /style/headbody pIlikeHTML./p/body/html
其中p为选择器,声明被包含在花括号中。
外部样式表文件style.css:
p{ background-color:white; color:gy;}
导入外部样式表:
!DOCTYPEhtmlhtmlhead title/title linkl="stylesheet"type="text/css"hf="style.css"/headbody pIlikeHTML./p/body/html
如果不同的样式表使用了相同的选择器,得以应用的是后面导入的样式。
从其他样式表中导入样式从style1.css中导入:
import"style1.css";p{ background-color:white; color:gy;}import语句必须位于样式表顶部,可以导入多个样式表。声明样式表的字符编码charset用于声明样式表使用的字符编码。在样式表中可以出现在import之前的语句只有charset。charset"UTF-8";import"style1.css";p{ background-color:white; color:gy;}样式的层叠和继承浏览器根据层叠和继承来确定显示一个元素时各种样式属性采用的值。定义样式的方法,除了元素内嵌、文档内嵌、外部样式表之外还有两个来源:
浏览器样式用户样式样式层叠浏览器显示元素CSS属性时的次序:
元素内嵌样式文档内嵌样式外部样式用户样式浏览器样式重要样式调整层叠次序把样式属性值标记为重要(important),可以改变正常的层叠次序。
!DOCTYPEhtmlhtmlhead title/titlestyletype="text/css" p{ background-color:white; color:gy!important; } /style/headbody pIlikeHTML./p/body/html
拥有!important标识的属性浏览器会优先考虑。
根据具体程度和定义次序解决同级样式冲突如果多条定义于同一层次的样式应用于同一个元素,而且他们都包含浏览器要看的CSS属性。为了判断该用哪一个值,浏览器会评估两条样式的具体程度:
样式的选择器中id值的数目选择器中其他属性和伪类的数目选择器中元素名和伪元素的数目如果同一个样式属性出现在具体程度相当的几条样式中,浏览器会选择后面的样式来显示。
继承如果浏览器在直接相关的样式找不到具体的属性,就会求助于继承机制,使用氟元素的样式属性值。
颜色可以用以下方法来规定CSS中的颜色:
十六进制色#RRGGBB:其中的RR(红色)、GG(绿色)、BB(蓝色)十六进制整数规定了颜色的成分。所有值必须介于0与FF之间。RGB颜色:rgb(d,gen,blue)RGBA颜色:rgba(d,gen,blue,透明度alpha)HSL颜色:hsl(色调hue,饱和度saturation,亮度lightness)HSLA颜色:hsla(hue,saturation,lightness,alpha)预定义/跨浏览器颜色名长度绝对长度这类单位是现实世界中的度量单位。
相对长度相对单位的测量要依托其他类型的单位。
CSS允许用算式作值,算式包含在关键字calc后的括号之中:
p{ font-size:20pt; width:calc(80%-20px);}
测试CSS支持情况