分享
 
 
 

重见CSS

王朝html/css/js·作者佚名  2006-01-09
窄屏简体版  字體: |||超大  

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显示端的脚本。是相当重要的内容。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有