CSS有些年头了。网页设计中,不可缺少,统一web各元素的利器。也是DOM的产物。
script 和 style 一个动,一个静,修饰web的document,让整个web更加生动。让可编程性、可交互性成为可能。
废话不讲,以前知道的CSS无非就是几个字体啊、颜色什么的修饰。一般人也都仅仅用到这些。
微软对其疯狂扩展,让整个DOM文档的任何部分都可以修饰,IE5以后,基本Mozilla与其不兼容,所以当时也懒得摸索他了。
如今看来,对于整个互联网 95%的人都是用IE浏览,针对低级用户更是100%,而且mozilla也慢慢在靠近IE的各个样式。现在要做BS程序的表现层,为了程序更加灵活,不得不重新翻MSDN,看CSS样式库。还真有很多以前没注意。
重见CSS吧。MSDN的web development 详细得不能再详细了。
如下,我将用粗俗易懂的话将自我觉得对写程序有用的部分归纳一下。
1 位置
文档内声明:生命周期只有这个文档,修饰范围也只有这个文档,对于写程序统一整个网站的风格,意义不大,对于特殊页面设计有用。
<HTML>
<HEAD>
<TITLE>>HTML 4.0 CSS Style Class Example</TITLE>
<STYLE TYPE="text/css">
声明
</STYLE>
……
外连文件:通过指定样式库描述文本文件,Web的相对路经或绝对路经,整个网站,近似的页面,使用统一的样式库,对分离显示效果和代码,很有用处
<HTML>
<HEAD>
<TITLE>Calling an External CSS Style Sheet Example</TITLE>
<LINK rel="stylesheet" href="Mystyles.css" type="css/text">
</HEAD>
……
2:书写标准
h1 {
font:bold italic 20px georgia, times new roman, times, serif;
margin-top:20px;
background: transparent;
}
h2 {
}
HTML element{attribute:value;}
修饰对象:h1,h2,他的描述用{}包含
每个修饰用分号隔开,或者换行即可,但简易标准化,分号+换行,
如果在一行里面描述,如特殊html标签中指定样式 <div style="font:bold;background:transparent;">分号分隔即可。
修饰属性与修饰内容之间,用分号分隔。
具体修饰对象,有什么修饰属性,可以参见MSDN
如,想了解TD的style属性
直接查找到td的说明页面:TD Element | td Object
Styles栏目:
Style attribute:就是CSS中,TD的修饰属性(定语)
Style property:是不同的属性(性质),一提倒property,就应该联想到,这是程序中可动态指定的,这里描述的正式可用script指定的属性名称。也可以用外部程序,对DOM中的对象进行指定,也都是property。
element.Style.Property=value;
特别注意这个地方,attribute和property经常名字不同,所以写程序时用到的 obj.style.property=xxx;和css中描述的样式 attribute:yyy 要特别注意名字
查MSDN即可。
3:修饰标签的类型
1)HTML标签样式的指定
对指定的HTML标签进行统一修饰。如<P><BODY><TD>之类的,进行修饰
H1 {text-align:center; color:red;} 就对整个文档的H1标签包含的内容进行修饰
标签名{attibute:value;}
这种样式一般用来做默认样式指定,特殊的修饰如下:
2)对使用此类型的对象进行修饰
网页中某标签中,对其类型进行修饰,使用Class=classname,如<span class=myspan>
此时,IE会到样式库中匹配.myspan的样式指定给这个span中包含的内容。
.类别名{attribute:value;}
程序可动态指定其类别,达到改变效果的目的
如<span style="s1" onmouseout="this.className='s1'" onmouseover="this.className='s2'"></span>
此处对象当响应鼠标在上面的事件时,引用s2样式,离开时,引用s1样式.
onmouseout,onmouseover等事件响应,也可以统一集成到样式库中修饰,这就是后面要讲的Style的behavior属性和htc(html组件库)
所以,这种修饰对写程序来说最常用.
3)对指定对象进行修饰
如想修饰名字为 myid的对象的样式,<span id=myid>
可以在样式库中指定:#myid,对所有id=myid的对象进行修饰
#对象ID{attribute:value;}
这对修饰统一类型元素时也比较常用.
4)样式库的命名空间 NameSpace(我理解的)
想想,上面2)描述的类别指定,为什么用.?
常常见到:
table.mystyle{attribute:value;}
.mystyle{attibute:value;}
有何不同,在<table class=myctyle>,应用的是table.mystyle
而<div class=mystyle>用的则是.mystyle,对整个body有效.
#mydiv p{attribute:value;}
#mydiv a:link{attribute:value;}
指明ID=mydiv的部分的独立有效空间
5) A属性,4态修饰
a{}
a:link {}
a:visited {}
a:hover {}
a:active{}
我觉得这样,既可以增强可读性,也很好在一个文档中扩展。
4:使用
文档中,默认样式通过上述样式库中的1)类指定。
通过指定class来按类指定样式
通过id来通过对象ID指定样式
5:几个细节
样式库中使用外部文件,如图片,指定背景图片
background-image:url(sUrl); //Location of the background image, where sUrl is an absolute or relative URL
应用的是相对于当前css文件的URL,而不是应用此css的网页的相对路经。
behavior:url(sBehavior ); 此类型中,相关的动态响应代码,行为?
动态应用脚本: object.style.behavior [ = sBehavior ]
如下3中类型的sBehavior:
url(sLocation) Script implementation of a Dynamic HTML (DHTML) behavior, where sLocation is an absolute or relative URL.
url(#objID) Binary implementation of a DHTML behavior, where objID is the ID attribute specified in an object tag.
url(#default#behaviorName) Microsoft® Internet Explorer default behavior, identified by its
sLocation中就可以是相对的HTC组件,HTML Components,可以把统一类型的对象的相关脚本,封装在一起,通过样式库来指定。这些脚本当然是web显示端的脚本。是相当重要的内容。