weeksky weeksky
有我的地方,就有爱的存在!
关注数: 0 粉丝数: 18 发帖数: 1,462 关注贴吧数: 6
定位[CSS技术手册] 绝对定位--------------------------------------------------------------------------------定位(左边和顶部) 定位属性将是网虫们打开幸福之门的钥匙: H4 { position: absolute; left: 100px; top: 43px }这项CSS规则让浏览器将 的起始位置精确地定在距离浏览器左边100象素,距离其顶部43象素的位置,请观看代码的执行效果。 注意这里唯一设置了的是左边和顶部,也就说,文字将从左到右,从上到下载入浏览窗口。 左边和顶部属性很直观,左边(left)设定要素距浏览器窗口左边的距离,顶部(top)设定距离浏览器窗口顶部的距离。 设定这些距离时,你可以使用所学过的各种度单位或比例值。使用比例值时,比例值的是相对于母体要素的尺寸。 你可以定位什么呢?任何东西!段落、单词、GIF和JPEG图象、QUICKTIME电影等等相对定位--------------------------------------------------------------------------------绝对定位使你能精确地定位要素在页面的独立位置,而不考虑页面其它要素的定位设置。相对定位指你所定位的要素的位置相对于在文件中所分配的位置。例: I { position: relative; left: 40px; top: 10px } 请点击查看代码的执行效果 相对定位的关键在于定位了的要素的位置是相对于它通常应在的位置进行定位。如果你停止使用相对定位,则文字的显示位置将恢复正常。范例。 使用相对定位时要小心,否则容易将页面弄得非常乱。 除了相对定位和绝对定位,你还可以使用static(静止)参数值。它的使用方法同普通HTML中的定位方法,不能附加特殊的定位设置。 还不错吧?下面我们将学习如何控制定位了的要素。
控制背景图象[CSS技术手册] 控制背景图象--------------------------------------------------------------------------------你不仅可以将图象放在要素后面,你还可以精确地控制背景图象的各项设置。你可以决定是否及如何将其平铺,背景图象应该滚动还是保持固定,及将其放在什么位置。朋友,这是真的! 背景重复(background-repeat) 背景图象通常是平铺在背景上的,对吗?错。利用这项CSS属性,你可以控制是否将其平铺。 P { background-repeat: no-repeat; background-image: url(background.gif) }上述规则应用于整个段落。我们以前用过的GIF图象出现在文字后面,但由于我们应用了不重复图象(no-repeat)规则,所以该图象不会重复平铺在整个段落后面,它只显示一幅单独的图象。如果你只想让图象垂直或者水平方向平铺,你以使用repeat-x将其水平平铺,用repaet-y将其垂直平铺。而repeat参数值则将图象从水平和垂直两个方向平铺。固定背景(background-attachment)在HTML中,背景图象通常会随页面的滚动而一起滚动。但利用CSS的固定背景(background)属性,你可以建立不滚动的背景图象,页面滚动时,背景图象可以保持固定。 BODY { background-attachment: fixed; background-image: url(15/stuff3a/background.gif) }这里是一个例子,你可以看到页面滚动时,背景仍保持固定。(注意:Communicator不支持这项属性,IE可以。) 该属性只用于页面背景,即标签内设定的背景图象。 其参数有两种选择: scroll指背景图象随文字内容一起滚动,即通常所见的方式。 fixed指文字滚动时,背景图象保持固定。 背景定位(background-position)你可以设定将背景插在什么位置显示。 P { background-position: center bottom; background-image: url (background.gif) }当上述CSS规则应用于本段文字时,背景图象将在本段的中下部开始显示并向右平铺。如果你看不到上述的显示效果,则说明你所使用的浏览器是Communicator,它不支持背景定位。设定位置的3种方法: 关键字参数(Keyword values) 关键字设定方法简便易用: top将背景图象同前景要素的顶部对齐。 bottom将其同前景要素的底部对齐。 left将其同左边对齐。 right将其同右边对齐。 center将其水平居中(如果使用在另一关键字前面)或垂直居中(如果用在另一关键字后面)。 长度参数 长度参数可以使用你对背景图象的位置作出更精确的控制。你可以设定水平和垂直定位起点,例: P { background-position: 70px 10px; background-repeat: repeat-y; background-image: url(background.gif) }本段显示了上述规则的执行效果。IE支持这种属性,将GIF图象设置在从左上角起水平70象素,垂直10象素的位置。由于我设置了 background-repeat: repeat-y,GIF图象将在文字后垂直平铺。你可以使用我们以前学过的任何一种长度单位,例如pixels, points, inches, ems等。 (IE 3不支持长度单位显示这种效果)比例值(Percentage values) 你还可以使用比例值设定背景图象的位置,例: P { background-position: 75% 50%; background-image: url (background.gif) } 当这条CSS规则应用于本段时,背景图象从水平距离段落右端70%,垂直距离段落顶部50%的位置显示。如果你重新调整浏览器窗口的尺寸,使得段落的显示尺寸变化,背景图象的位置也相应发生变化。在本段上不会发生这样的变化,因为本段的尺寸是固定的,不会随着窗口尺寸的调整而变化。
边框[CSS技术手册] 边框--------------------------------------------------------------------------------有几种样式表属性可以将网页要素周围加上边框。(注意:IE 3和IE 4不支持任何边框属性。) 顶边框宽度,底边框宽度,左边框宽度和右边框宽度你可以控制整个边框的宽度,也可以分别控制每一边的边框宽度: H4 { border-top-width: 2px; border-bottom-width: 5px; border-left-width: 1px; border-right-width: 1px }以下是上述CSS规则的显示结果: 你还可以给替代要素加上边框,很好玩,是吧?你无须给一个要素的每一边都加上边框。你可以使用上述任何一种长度单位设定边框宽度,也可以使用内置关键字设定宽度: 本段文字的顶边框宽度参数值为thin。本段文字的顶边框宽度参数值为medium。本段文字的顶边框宽度参数值为thick。如果你想使边框四面应用相同的宽度,很简单,使用border-width标签就可一次完成,例: IMG { border-width: 1in }边框颜色 例: P { border-color: green; border-width: 3px }本段文字显示上述代码的执行效果。你可以使用浏览器认可的颜色或者直接使用RGB参数值,例: H4 { border-color: #FF0033; border-width: thick }如果你想使边框的四边显示不同的颜色,你可以在设置中分别列出各种颜色: P { border-color: #666699 #FF0033 #000000 #FFFF99; border-width: 3px }浏览器将第1种颜色理解为顶边框的颜色参数值,第2种颜色为右边框,然后是底边框,然后是左边框。 本段文字显示上述代码的执行效果。注意: Communicator 不能识别多色彩,在Communicator中,你只能使用一种颜色。(如果你使用多色彩,Communicator很有可能用蓝色显示整个边框。我们也对此感到莫名其妙)如果不使用边框颜色属性,则边框将以要素自身的颜色显示边框颜色。 边框样式你还可以设定边框线的样式,例: P { border-style: double; border-width: 3px } 可以使用的关键字参数值如下: soliddoubledotteddashedgrooveridgeinsetoutset 注意:Communiactor只支持其中的几种关键字属性。
边距及空格填充[CSS技术手册] 边距及空格填充--------------------------------------------------------------------------------我们都知道可以用HTML设定边距,但你必须使用表格,别无它法。而样式表则......快速定义边距 首先,我们应该了解样式表语言的术语,便我们理解正在谈什么。每一个整块的素或替代要素都包含在样式表生成器称为box的容器之内。box包括: 要素本身 围绕要素的空格填充(padding) 围绕空格填充的边框(border) 围绕边框的边距(空白-margin) 图示如下: 你可以分别控制空格填充、边框和边距,如我们即将做的。顶边距、底边距、左边距和右边距这4项属性可以使你控制一个要素的四周的边距。如下: H4 { margin-top: 20px; margin-bottom: 5px; margin-left: 100px; margin-right: 55px }你可以看到,每一个边距都可以有不同的置。或者你可以设置一个边距,然后让览器用缺省设置设定其它的几个边距。可以将边距应用于文字和替代要素(如象)。 设定边距参数值最明显的方法是利用长度位:px(象素)、pt(点数)等。你也可以用比例值设定边距。以下是几个例子: 顶边距 底边距 左边距和右边距 将边距值设为负值,你就可以将两个要素叠在一起,例:Booksare mind food上例中, "are mind food" 的底边距为-55象素,右边距为60象素。 使用负值使要素重叠的的缺陷是不同的浏器对其处理方式不同。比如,在显示上例子时,不同的4种主要浏览器(Communicator for PC, Communicator for Mac, IE for PC, IE for Mac)对文字重叠的程度不同。 另一个缺陷是你不能完全控制位于底部的内容,而且不同的浏览器对其显示也不同。例如, Communicator总是将图象显示在文字的上部。 IE似乎是将个要素按照其载入浏览器窗口的顺序显示各要素。 换句话说,如果你打算将几个要素叠放在一起,就不要对边距使用负值。今天的教程将教你如何叠放个要素。 浏览器对该属性的支持方面还应注意以下几点: 当你在IE 3中使用标尺单位(如英寸和厘米)时,IE 3有时会加大底边距。同样,有些HTML标签可以适用底边距,有些则不能, IE 4有时在对替代要素(如图象)设定左边距时会出现问题,你可以将图象包在一个 中,然后给 设定样式。 顶空格填充,底空格填充,左空格填充和右空格填充空格填充的作用类似于边距控制,你可以设定一个要素的前后左右的空格填充的尺寸。 H4 { padding-top: 20px; padding-bottom: 5px; padding-left: 100px; padding-right: 55px }你可以使用任何一种长度单位或比例值设定空格填充。其使用方法同边距的属性。 但是空格填充不能使用负值(而且,IE 3不支持空格填充属性)。
文字的特殊效果[CSS技术手册] 2.5 文字的特殊效果--------------------------------------------------------------------------------下面你将发现其它一些有关字体的样式表属性,你可以将其加入到你的工具箱中。字体参数(font-variant)这时一种挺简单的属性,你可以将正常文字缩小一半尺寸后大写显示。 H2 { font-variant: small-caps }很不幸,Communicator或者Internet Explorer目前都不支持这项属性。IE 4有些靠近这种标准,但它只是将字体以正常的大写形式显示。希望IE5.0能支持这项属性。文字变形(text-transform) 这项属性可以使你轻而易举地控制字母写。基本代码: B { text-transform: uppercase }以下为所有可用的参数: uppercase 使所有字母大写显示,例: This sentence serves as an example. lowercase使所有字母小写显示,例: This sentence serves as an example. capitalize 使每个单词的第1个字母大写显示,例:This sentence serves as an example. none 使所有继承的文字变形参数被忽略,文字将以正常形式显示。例:This sentence serves as an example. (注意:IE 3不支持文字变形)如果你的浏览器不支持上述显示效果,请点击这里查看显示效果。文字修饰(text-decoration)几十年以来(不管怎么说,反正很长的一段时间以来),所有链接了的文字在浏览器中都以下划线的形式显示,对这种事实我们都无计可施。我认为这种形式效果很难看,女士们先生们,现在我们有解决办法了:文字修饰(text-decoration)。 其基本语法如下: B { text-decoration: underline }大部分的选项使得文字变得难以阅读: underline 给文字下划线,例:these words. overline给文字上划线,例:these words. line-through给文字划出删除线,例:these words. blink是你在恶梦中常常看到的--文字在闪烁,例:these words. none使得上述效果都不会发生。 (注意:Communicator不支持上划线,IE 4不支持文字闪烁,IE 3对这些都不支持。)如果你的浏览器不支持这些CSS属性,请点击这里查看显示效果。none参数非常有用,你可以使链接的文字不以下划线的形式显示。具体做法: A:link { text-decoration: none }A:active { text-decoration: none }A:visited { text-decoration: none }思考以下这些为http://tieba.baidu.com/mo/q/checkurl?url=&urlrefer=9180cb13d9162ef0a654c461202e5314http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fwww.webmonkey.com%2F&urlrefer=b5b449d268f6ffee00a2f536c1814bb9 以下是显示结果: This text is a link, but not underlined!如果你的浏览器不支持这种CSS属性,请点击这里查看显示效果。 你不仅可以消除链接的下划线,而且你还可以利用这3条属性使用CSS的其它属性,比如,你可以使得为被访问过的链接以12points的Arial加重字体显示,而访问过的链接以10points尺寸的Times斜体字显示。这个世界可以由你自由塑造,可惜呀,可惜!并不是所有的浏览器都支持这项属性。Communicator支持带文字修饰(text-decoration)的预定义分类,但对其它属性非常挑剔。IE 3不支持A:active(而MAC不支持A:visited),IE 4支持全部这些属性。尽管有这些局限,但至少你比以前有了更多的可能性!这都要感谢CSS的创作者...
加重显示和斜体字的所有方式 2.4 加重显示和斜体字的所有方式--------------------------------------------------------------------------------利用CSS加入斜体字非常简单,而且我们对于加重字体还有很多选择。字体风格 字体风格用来控制斜体字的属性,非常漂亮又非常简单: H3 { font-style: italic }当浏览器接到应用斜体字的指令后,它将用户的机器中寻找安装的斜体字版本,果不存在斜体字,浏览器将生成一种。常,就是指将正常的字体倾斜显示。如果一种字体的名称为Oblique,而不是Italic,浏览器就会使用oblique作为字体风格的参数。字体风格的第3种参数是normal,它将取消斜体字风格,将字体以正常形式显示。 字重 加重风格可以关闭或打开,利用字重属性,可以创造出一系列新的加重字体。 P { font-weight: bold }这是字重最常见的应用方式,而normal属性也可以取消加重字体,将字体以正常形式显示。你还可以用数值100,200,...900。正常的非加重体的字体值为400,900是最加重的字体参数值。Web浏览器将决定每一参数值的实际显示。要显示这些例子的效果,你必须安装相应的字库,并且你的系统还得支持CSS: Arial Verdana Eras 而且你的用户的机器也必须安装相同的字而且其系统支持CSS的这些参数值。(IE 3对此均不支持)。最后,你还可以给字重加上lighter和bolder参数,当然前提是所使用的字体已经赋予了某种级别的加重字体属性。在已有属性级别上,浏览器将使字体的显示相应地更加重一些(bolder)或更轻一些(lighter)。(注意:IE 3或Netscape Communicator都不支持lighter或bolder参数。)
按照字体名称调用字体[CSS技术手册] 按照字体名称调用字体--------------------------------------------------------------------------------第1个问题:你如何指示浏览器显示你希望的字体?仅仅在字模后面键入字体的名称就行了吗?很可惜,事情还不是这么简单,字体在各个操作平台之上叫的名称可能会有变化。比如,Courier在MAC机上叫做COurier New。在一台机器上可能叫Italic的字体在另一台机器上可能就叫做Oblique。你仔细研究之后会发现更多的这样的例子。所以,我们称呼一种字体的名称并不一定就是计算机对这种字体的名称。而你必须确定使你所用的字体名称就是计算机所以的字体名称。那么你怎么确定计算机对一种字体的确切名称是什么呢?这取决于于计算机所用的操作平台。 Windows的用户:使用应用软件比如word中的字体菜单中所列出的确切的字体名称。 Mac机用户:不要相信应用软件给你列出的字体名称。而应该打开你的system folder,按照其中对字体的拼写在你的样式表中使用字体名称。 字模系列字模系列就是CSS中称呼一种字体的名称属性。其基本语法如下: H2 { font-family: helvetica,impact, sans-serif }这里是Web浏览器阐释样式表的规则:首先在列表中寻找字体的名称(helvetica),如果在该计算机中安装了这种字体,就使用它。如果没有安装,则移向下一种字体(impact),如果这种字体也没有安装,则移向第3种字体(sans-serif)。sans-serif字体参数是浏览器可以依据的最后一种参数,它告诉浏览器使用任何一种缺省sans-serif字体(或许就是Arial)。以下为你所用浏览器的实际显示结果: CSS font control is peachy.如果你的浏览器不支持CSS属性,请点击这里查看其显示效果。你可以在列表中加入任何种字体名称。当你对一种字体在不同的操作平台上的名称没有把握时,这样做无疑是一种好办法。注意:浏览器更倾向于认可小写的名称。当然,只用你对所有项目都进行了测试,就不会有问题。每次将一种generic字体作为最后的选项列在字体列表中是一种很好的做法。你可以选择以下几种: serif (也可能是 Times) sans-serif (也可能是 Arial或者 Helvetica) cursive (也可能是 Comic Sans) fantasy (也可能是 Ransom) monospace (也可能是 Courier) (注意:Netsacpe Communicator不支持Cursive或者fantasy)其它字体名称诀窍: 如果一种字体的名称不只一个单词,如Gill Sans,在你的CSS代码中用引号包含该字体的名称。 BODY { font-family: "gill sans", "new baskerville", serif }行内加入的CSS规则,使用单引号: Text goes here.如果你将CSS规则的说明组合在一起,而其中又包含字模系列,将字模系列列在最后,例: H2 { color: red; margin: 10px; font-family: times, serif }有时候,如果字模系列没有列在最后一条,IE 3 会忽略整个一条CSS规则,很莫名其妙,但却是真的。利用字模系列属性,你可以按照字体名称调用字体,而且在使用 标签时将拥有更大的灵活性。
精通CSS样式[技术手册] 用HTML制作网页就象是用画笔绘制一幅图画。只有那些对网页制作痴迷而执着的人才可能精确地实现预定的结果,这并不是正确的工具和灵活性就可以实现的。任何使用过HTML一个多星期的人都知道HTML是一种非常好的网页制作工具。所以有时候我们不得不制作体积相当大的GIF图象以获得想要的字体和布局。同样,有时候也不得不使用各种表格标签和隐藏的空格GIF图象以使页面的布局能达到预想的目的。的确有些荒唐。我们的编码实在是太复杂了,GIF用量越来越多,而我们的页面变得比英吉利海峡还要宽,互联网有限的带宽怎么可能通过这么宽的信息呢?这种设计并不是网页设计的最佳形式。但是,1996年底的时候悄悄诞生了一种叫做样式表(stylesheets)的技术。全称应该是串接样式表(Cascading Stylesheets-简称CSS)这位HTML的表弟向世人保证:将对布局、字体、颜色、背景和其它文图效果实现更加精确的控制。只通过修改一个文件就改变页数不定的网页的外观和格式。 在所有浏览器和平台之间的兼容性。 更少的编码、更少的页数和更快的下载速度。 除了还不能全面支持我们常用的大多数浏器之外,CSS在实现其它承诺方面作得相当出色。CSS在改变我们制作样式表的方法。它为大部分的网页创新奠定了基石。之后的5天,我们将漫游样式表的世界。你将学到样式表的基本知识并将其应用于你的网页中。你还将学到如何处理字体、图文、色彩、背景及定位等的详细技巧。今天,我们先浏览一下样式表的基本内容。第1个问题;样式表能为我们做什么?
1 下一页