什么是样式表
css是cascadingstylesheet的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
如何将样式表加入您的网页
你可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。例外请参阅important声明。
链入外部样式表文件(linkingtoastylesheet)
你可以先建立外部样式表文件(.css),然后使用html的link对象。示例如下:
<head>
<title>titleofarticle</title>
<linkrel=stylesheethref="http://www.dhtmlet.com/rainer.css"type="text/css">
</head>
而在xml中,你应该如下例所示在声明区中加入:
<?xml-stylesheettype="text/css"href="http://www.dhtmlet.com/rainer.css"?>>
定义内部样式块对象(embeddingastyleblock)
你可以在你的html文档的<html>和<body>标记之间插入一个<style>...</style>块对象。定义方式请参阅样式表语法。示例如下:
<html>
<styletype="text/css">
<!--
body{font:10pt"arial"}
h1{font:15pt/17pt"arial";font-weight:bold;color:maroon}
h2{font:13pt/15pt"arial";font-weight:bold;color:blue}
p{font:10pt/12pt"arial";color:black}
-->
</style>
<body>
请注意,这里将style对象的type属性设置为"text/css",是允许不支持这类型的浏览器忽略样式表单。
内联定义(inlinestyles)
内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下:
<pstyle="margin-left:0.5in;margin-right:0.5in">这一行被增加了左右的外补丁<p>
样式表语法(csssyntax)
selector{property:value}
参数说明:
selector--选择符
property:value--样式表定义。属性和属性值之间用冒号(:)隔开。定义之间用分号(;)隔开
继承的值(the'inherit'value)
每个属性都有一个指定的值:inherit。它的意思是:将父对象的值等同为计算机值得到。这个值通常仅仅是备用的。显式的声明它可用来强调。
选择符说明:
#表示选择id
.表示选择class
比如我有个<divid="test"></div>这时就得用#test{属性}来给id为test的div来制定样式
而<divclass="test"></div>则应该用.test{属性}来给其指定样式。
根据分辨率不同,调用不同的css文件
dotted;table-layout:fixed;border-top:#cccccc1pxdotted;border-left:#cccccc1pxdotted;border-bottom:#cccccc1pxdotted"cellspacing=0cellpadding=6width="95%"align=centerborder=0><scriptlanguage="javascript">
<!--
if(window.navigator.useragent.indexof("msie")>=1)
{
varie1024="";
varie800="";
varie1152="";
varieother="";
screenwidth(ie1024,ie800,ie1152,ieother)
}else{
if(window.navigator.useragent.indexof("firefox")>=1)
{
file://如果浏览器为firefox
varfirefox1024="";
varfirefox800="";
varfirefox1152="";
varfirefoxother="";
screenwidth(firefox1024,firefox800,firefox1152,firefoxother)
}else{
file://如果浏览器为其他
varother1024="";
varother800="";
varother1152="";
varotherother="";
screenwidth(other1024,other800,other1152,otherother)
}
}
functionscreenwidth(css1,css2,css3,css4){
if((screen.width==1024)&&(screen.height==768)){
setactivestylesheet(css1);
}else{
if((screen.width==800)&&(screen.height==600)){
setactivestylesheet(css2);
}else{
if((screen.width==1152)&&(screen.height==864)){
setactivestylesheet(css3);
}else{
setactivestylesheet(css4);
}}}
}
functionsetactivestylesheet(title){
document.getelementsbytagname("link")[0].href="style/"+title;
}
file://-->
</script>
解释:
varie1024="";
varie800="";
varie1152="";
varieother="";
引号里面分别填写,用户使用ie的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.
varfirefox1024="";
varfirefox800="";
varfirefox1152="";
varfirefoxother="";
引号里面分别填写,用户使用ff的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.
varother1024="";
varother800="";
varother1152="";
varotherother="";
引号里面分别填写,用户使用其他浏览器的时候并且分辨率为1024*768,800*600,1152*864要使用的css文件名.
不判断分辨率,只判断浏览器
应e.qiang提议,编如下代码。实现根据浏览器类型自动调用不同css。
代码:
<scriptlanguage="javascript">
<!--
if(window.navigator.useragent.indexof("msie")>=1)
{
file://如果浏览器为ie
setactivestylesheet("default.css");
}else{
if(window.navigator.useragent.indexof("firefox")>=1)
{
file://如果浏览器为firefox
setactivestylesheet("default2.css");
}else{
file://如果浏览器为其他
setactivestylesheet("newsky.css");
}
}
functionsetactivestylesheet(title){
document.getelementsbytagname("link")[0].href="style/"+title;
}
file://-->
</script>
解释:
如果浏览器为ie,则调用default.css
如果浏览器为firefox,则调用default2.css
如果浏览器为其他,则调用newsky.css
用法:放在<head></head>中即可。