|
|||
|
|||
发布时间:2009.04.20 新闻来源:互联网 | |||
CSS是DHTML的基础,CSS用于设定HTML元素在页面上的显示风格,而CSS-P则是CSS的一个扩展,它可用来控制HTML元素在网页上或者说在窗口的位置。下面的两个链接提供了CSS和CSS-P详尽的技术手册: W3C CSS-Positioning Builder.com's CSS Guide 在本课程中,将会反复地对CSS进行介绍。 使用DIV标签 使用CSS-P,主要依靠< div >标签来实现,当你把HTML内容放在< div >标签里时,可以称它为:“DIV块”, “DIV 元素”, “CSS-layer”,或者简单的称之为“layer”。 使用DIV标签的方法和其他标签没有什么两样: < div > HTML内容 < /div > 纯粹使用< DIV >标签而不加任何CSS内容,其效果与用< P >< /P >是一样的。 但当把CSS放进DIV标签中以后,我们就可以指定HMTL元素显示在屏幕上的具体位置,可以在某一位置上画出方形或线,或者指定文字在某一个块中如何显示。首先要做的,是给这个DIV元素(即层)加上一个唯一的ID标识(ID的作用类似于为这个层起个名字)。 < div id="abc" > 加一个ID号 < /div > 层的ID可以随意设定,可由字母、数字和下划线组成,但必须以字母起头。 你可以用以下两种方法来实现CSS: 嵌入式CSS: 嵌入式是最常用的方法, < div id="abc" style="this is style" > 内嵌式CSS < /div > 外部样式表: 使用外部引入方法的结果是一样的,只不过它在书写上要相应的复杂一点。 < style type="text/css" > < !-- -- > < /style > < div id="abc" > 引用外部样式表 < /div > 跨浏览器CSS属性: 我们的目标是使Netscape和IE两者都能对所写出的DHTML顺利工作,我们对书写的CSS属性有些限制。一般来说,以下属性是由W3C进行过定义的标准。 position 定义如何放置DIV,"relative"是指DIV与其他HTML元素的相对位置;"absolute"则是指DIV在窗口中的绝对定位。这一课中我们主要是讲“absolute”。 left 左边距(相对于窗口的像素宽) top 顶部边距 width 层宽 height 层高 所有DIV中的HTML元素都在这个限定的宽与高里面。 clip 为DIV定义可见部份,格式为:clip(top,right,bottom,left) visibility 隐藏或显示DIV块,它的值为"visible", "hidden", "inherit"(默认值)。 z-index DIV在页面上显示的层次。 background-color DIV的背景色。在Netscape中该属性显示为文字的背景色。 layer-background-color Netscape浏览器中DIV的背景色。 background-image DIV的背景图,在Netscape中该属性显示为文字下面的背景图像。 layer-background-image Netscape中DIV的背景图像。 CSS的语法与HTML有所不同,使用“:”来分离属性和值,用“;”来分开各种不同的属性。 position: absolute; 在设置CSS属性时你有较大的灵活性。你不必定义所有的CSS属性,你可以把所要定义的属性写在一行里,也可以分开几行来写,或是在每个属性之间空开一段距离。大小的值为pixel(像素),在CSS中可以简写为“px”。 内部CSS例子: < div id="abc" style="position: absolute; 外部CSS例子: < style type="text/css" > < div id="abc" > ;*******************************************[url=] [/url] <DIV>称 为区隔标记。作用:设定字、画、表格等的摆放位置。当你把文字,图象,或其他的放在 DIV 中,它可称作为“DIV block”,或“DIV element”或“CSS-layer”,或干脆叫“layer”。而中文我们把它称作“层次”。所以当你以后看到这些名词的时候,你就知道它们是指一 段在 DIV 中的 HTML。 <DIV>应用于 Style Sheet(式样表)方面会更显威力,它最终目的是给设计者另一种组织 能力,有 Class ; Style ; title ; ID 等属性,将会于【Style Sheet】一节才作详述,这处只介绍 一个属性设定。
当我们使用 CSS-P 的时候, 我们主要把它用在 DIV(division)tag 上。当你把文字,图象,或其他的放在 DIV 中,它可称作为“DIV block”,或“DIV element”或“CSS-layer”,或干脆叫“layer”。而中文我们把它称作“层次”。所以当你以后看到这些名词的时候,你就知道它们是指一 段在 DIV 中的 HTML。 Cross-Browser CSS 性质: position 决定 DIV tag 是如何放置的。“relative”意思是DIV的位置是相对于其他 tag 的,而“absolute”是说 DIV tag 的位置是相对于它所在的窗口。 绝对定位: ● 3.定位单元的控制 (width、height、visiblility) 除了控制定位单元的左上角位置,你还可以控制单元的宽度和高度,及单元在页面的可视性。 宽度:定位了的要素在页面上显示时仍然会从左到右一直显示。利用宽度属性就可以设定字符向右流动的限制,即设定要素的宽度。 高度:理论上讲,高度应该和宽度的设置类似,只不过是在垂直方向上: 可视性:利用CSS,你可以隐藏要素,使其在页面上看不见。这条属性对于定位了的和未定位的要素都适用。 visible 使要素可以被看见 ;*************************************************** 三、样式表的放置 作 者 : 阿文 样式表放在不同的地方,产生作用的范围也不同。大致来说,样式表分为内联样式表和外联样式表,即有页面内放置、外部引用、外部导入三种方式。 1 、内联样式表 我们前一课所举的例子,实际上就是一个内联样式表,把样式表规则放在 < HEAD> 和 < /HEAD> 的中间,从而使样式表对整个当前 HTML 页面产生作用。 内联样式表还包括一种直接插入方式,即单独指定 HMTL 页面中某一个标志,规定其风格样式,可以写为: < Table style=" font-size:10pt; color:blue"> 定义该表格内的字符大小为 10pt ,颜色为蓝色。 2 、外部样式表 编制一个网站的分类页面,其风格往往是相同的或说是类似的,每次都在 < HEAD> 和 < /HEAD> 中插入相同的繁琐复杂的样式表规则,显然不是我们的愿望。 写一个样式表,以期实现于各风格相同的不同页面,这一点即可借助于引入外部样式表来实现。并且当外部样式表被更改时,各引用该样式表的 HTML 页面风格也随之发生变化,而不需要手工一个个去更改。 外部样式表是指建立一个完全独立的文本文件,其扩展名为 .css ,文件内容则输入样式表信息,除去任何相关的 HTML 语言。 例如在外部样式表中输入:
有两种办法可以实现引用外部样式表。 (一)使用 < LINK> 标记链接外部样式表 用以下语句来实现外部样式表的链接: < LINK REL=STYLESHEET HREF="example.css"> HREF 中应包含路径信息,这里所指是该样式表文件与 HTML 文档在同一目录下。 一个 HTML 文档中可以引用多个外部样式表,例如: < LINK REL=STYLESHEET HREF="example.css"> < LINK REL=STYLESHEET HREF="style/other.css"> 首先链接的 example.css 作为该文档缺省样式表,当样式定义产生冲突时,应当首先满足前者。 (二)使用 @IMPORT 导入样式表信息 使用 @import 命令用以把外部样式表信息导入页面中,它是存在于在 < STYLE> 和 < /STYLE> 标记中的。例如: < STYLE TYPE="text/css">
这三种方法可以混合使用,即能够在一个页面中,同时使用这三种方法,不过,当样式表信息规则 一多,就比较容易产生冲突。比如在引用的数个样式表信息中都有关于对 H1 标题的设定,那么以哪一个为主呢?这时就看哪一个样式表被引用在前,它就是具有第一优先权的。因此我们在处理
|
|||
![](../images/bgTop.gif)
![成为地区最专业的网站建设服务商 我们的口号](/images/slogan-home.gif)
北京上海天津重庆河北山西河南辽宁吉林黑龙江内蒙古江苏山东安徽浙江福建湖北湖南广东广西江西海南贵州云南西藏陕西甘肃青海宁夏新疆四川成都绵阳平武安县江油梓潼三台盐亭南充西充南部阆中营山蓬安仪陇达川遂宁广安泸州宜宾内江西昌雅安康定阿坝德阳广汉什邡绵竹中江广元巴中松潘马尔康马尔康九寨沟峨眉山黄龙郫县新都福州杭州宁波新疆长春南京张家界长沙中山深圳珠海佛山东莞三亚贵阳南宁太原南昌海口合肥龙岩西宁汕头湛江更多城市...