内嵌样式(inlineStyle) :是写在Tag里面的,内嵌样式只对所有的Tag有效。
<P style="font-size:20pt; color:red">AAAA</p>
这个Style定义<p></p>里面的文字是20pt字体,字体颜色是红色。
内部样式(internal Style Sheet):是写在HTML的<head></head>里面的,内部样式只对所在的网页有效。
<HTML>
<HEAD>
<STYLE type="text/css">
H1.mylayout {border-width:1; border:solid; text-align:center; color:red}
</STYLE>
</HEAD>
<BODY>
<H1 class="mylayout"> 这个标题使用了Style。</H1>
<H1>这个标题没有使用Style。</H1>
</BODY>
</HTML>
外部样式表(External Style Sheet):如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。
<HEAD>
<link href="../asdocs/css_tutorials/home.css" rel="stylesheet"type="text/css">
</HEAD>
CSS第一个字母,是Cascading,意为串联。它是指不同来源的样式(Styles)可以合在一起,形成一种样式。
样式(Styles)的优先级依次是内嵌(inline), 内部(internal),外部(external),浏览器缺省(browserdefault)。
假设内嵌(Inline)样式中有font-size:30pt,而内部(Internal)样式中有font-size:12pt,那么内嵌(Inline)式样式就会覆 盖内部(Internal)样式。
Style为内嵌样式
runtimeStyle 运行时的样式!如果与style的属性重叠,将覆盖style的属性!
currentStyle 代表了在全局样式表、内嵌样式和 HTML 标签属性中指定的对象格式和样式。
当指定了runtimeStyle,那么当前显示的样式以runtimeStyle为准,如果取消了runtimeStyle,那么当前显示样式就恢复到currentStyle的样式。
ComputedStyle 计算样式可以通过document.defaultView.getComputedStyle()方法获取,该方法返回一个CSSStyleDeclaration对象,其中包含当前元素的所有计算样式。该方法接受两个参数,第一个目标元素,第二个是伪元素字符串(例如”:after”),可以是null,使用方法如下(仍以上面的html为例):
var ele = document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(ele,null);
alert(computedStyle.width);//"100px"
alert(computedStyle.backgroundColor);//"red" | "rgb(255,0,0)" 等(看浏览器实现)
alert(computedStyle.border);//在某些浏览器中可能是"1px solid black"
computedStyle.width = "200px";//错误
上面对于css中用短线(‘-’)连接的属性无法直接访问,需要通过Pascal命名规范来访问,不过有些属性无法访问(稍后介绍)。其中border由于是复合属性所以部分浏览器中无法访问,不过可以使用相应的borderTopWidth等细化属性来访问。最后引发错误是因为计算样式是只读的。如果需要修改样式貌似只能通过DOM元素的style属性进行修改。但是IE不支持getComputedStyle()方法,不过IE给每个拥有style属性的元素实现了currentStyle(CSSStyleDeclaration对象)属性,可以获取到计算样式。使用方法更简单:
//将上面的document.defaultView.getComputedStyle(ele,null)改为:
var computedStyle = ele.currentStyle;
不过对于css中的float属性,由于JavaScript将float作为保留字,所以不能将其用作属性名,因此有了替代者,在IE中是”styleFloat”,而在FireFox、Safari、Opera和Chrome中则是”cssFloat”。
所以基于兼容性的考虑可以将样式操作改为如下形式:
//element:需要获取样式的目标元素;name:样式属性
function getStyle(element,name){
var computedStyle;
try{
computedStyle = document.defaultView.getComputedStyle(element,null);
}catch(e){
computedStyle = element.currentStyle;
}
if(name != "float"){
return computedStyle[name];
}
else{
return computedStyle["cssFloat"] || computedStyle["styleFloat"];
}
}
//element:需要设置样式的目标元素;name:样式属性;value:设置值
function setStyle(element,name,value){
if(name != "float"){
element.style[name] = value;
}
else{
element.style["cssFloat"] = value;
element.style["styleFloat"] = value;
}
}
上面的代码可以跨浏览器实现操作某个元素的css。当然你可以使用jQuery的css(name,value)函数来更方便的实现以上操作。
CSS Properties To JavaScript ReferenceConversion
CSS Property | JavaScript Reference |
background | background |
background-attachment | backgroundAttachment |
background-color | backgroundColor |
background-image | backgroundImage |
background-position | backgroundPosition |
background-repeat | backgroundRepeat |
border | border |
border-bottom | borderBottom |
border-bottom-color | borderBottomColor |
border-bottom-style | borderBottomStyle |
border-bottom-width | borderBottomWidth |
border-color | borderColor |
border-left | borderLeft |
border-left-color | borderLeftColor |
border-left-style | borderLeftStyle |
border-left-width | borderLeftWidth |
border-right | borderRight |
border-right-color | borderRightColor |
border-right-style | borderRightStyle |
border-right-width | borderRightWidth |
border-style | borderStyle |
border-top | borderTop |
border-top-color | borderTopColor |
border-top-style | borderTopStyle |
border-top-width | borderTopWidth |
border-width | borderWidth |
clear | clear |
clip | clip |
color | color |
cursor | cursor |
display | display |
filter | filter |
font | font |
font-family | fontFamily |
font-size | fontSize |
font-variant | fontVariant |
font-weight | fontWeight |
height | height |
left | left |
letter-spacing | letterSpacing |
line-height | lineHeight |
list-style | listStyle |
list-style-image | listStyleImage |
list-style-position | listStylePosition |
list-style-type | listStyleType |
margin | margin |
margin-bottom | marginBottom |
margin-left | marginLeft |
margin-right | marginRight |
margin-top | marginTop |
overflow | overflow |
padding | padding |
padding-bottom | paddingBottom |
padding-left | paddingLeft |
padding-right | paddingRight |
padding-top | paddingTop |
page-break-after | pageBreakAfter |
page-break-before | pageBreakBefore |
position | position |
float | styleFloat |
text-align | textAlign |
text-decoration | textDecoration |
text-decoration: blink | textDecorationBlink |
text-decoration: line-through | textDecorationLineThrough |
text-decoration: none | textDecorationNone |
text-decoration: overline | textDecorationOverline |
text-decoration: underline | textDecorationUnderline |
text-indent | textIndent |
text-transform | textTransform |
top | top |
vertical-align | verticalAlign |
visibility | visibility |
width | width |
z-index | zIndex |