CSS高级指南(CSS教程)

2005年11月02日 00:00 5990

CSS高级指南意在发挥CSS的极限,然而这些醒目的方法对中级用户的效果并不是马上就显现出来的。

现在,可能显得有些烦琐,我们来学习替换样式表,设置打印样式等等。


一、 显示属性──定义元素的显示属性

处理HTML元素最关键的一个窍门,没有任何特别的,就是理解他们是如何工作的。大部分页面都可以使用一点点的标签组合起来,你可以为每一个你选定的标签样式化。浏览器默认的可视化样式元素由变化的字体样式、边界、补白和,和重要的,显示类型。

最基本的显示类型是内联inline块block和清除none,他们分别可以用inline、blocknone的值赋予display属性来操作。

inline就如本身语义所明示的,显示随着行流动的元素。锚和强调元素都是传统的内联元素。

block使元素前后都有断行。标题和段落元素都是传统的块元素的例子。

none,嗯,不显示这个元素,听起来毫无用处,但于易用性考虑(请看亲和连接),改变样式表,或者高级的翻转效果都有很好的用途。

比如这个站点的默认原始版本,通过操纵一些传统的内联和块元素来适应设计。

h1 {
display: inline;
font-size: 2em;
}
#header p {
display: inline;
font-size: 0.9em;
padding-left: 2em;
}

这使得“htmldog.com”的标题和标签行可以并排,而不是一上一下,维护最优的易用性。

#navigation, #seeAlso, #comments, #standards {
display: none;
}

上述代码使用在打印样式中,用于“关闭”这些元素,比如,对于一个单一的页面导航通常是不必须的。

注意:display: nonevisibility: hidden不同之处在于display: none使元素完全是个死球,然而visibility: hidden虽不出现在内容中但保留着这个元素的流位置。比如,如果三段中的第二端设为display: none,第一段会直接到达第三段,而设为visibility: hidden的话,这个段落会有一个间隔。


表格

也许理解表格相关的显示属性值的最好方法是关心HTML表格。table是初始化的显示,你可以用trtd分别摹拟table-rowtable-cell值。

display属性走得更远,提供table-columntable-row-group、table-column-group、table-header-group、table-footer-grouptable-caption的值, 都是自描述的。这些值显而易见的好处是,你可以用列来构造表格,代替有偏见的row

最后,inline-table设置前后不断行的表格。

注意:对CSS表格失去控制的话,可能严重的损害你网页的亲和力(易用性)。HTML应该用来传达内容的,所以你有表格式数据的话,你应该用HTML表格来安排它们。使用CSS表格仅仅能给数据调调味,如果没有CSS的话完全不可读。十分不好。别走Michael Jackson的路。


其他显示类型

list-item也是自描述的,一般以列表的形式显示,使用在除li的HTML元素上。为了显示正确,使用这个显示类型的应该嵌套在ul或者ol元素内。

run-in使元素内联或块显示,取决于其父元素的的显示属性。在IE和基于Mozilla的浏览器中都不能工作。

campact也使元素内联或者块显示,同样取决于上下文。它也不能很好工作。

marker仅仅是与:before:after伪元素一起来定义content属性的值。content属性的自动值已经是marker,所以这只对覆盖掉前面的content的显示属性有用。


二、 页面布局──不用表格构建页面布局

用CSS 来布局很容易。如果你已经习惯用表格布局的话,起先会感觉比较困难。其实不难,只不过动机不同,并且在实践中更有意义。

你可以把这一页面的各个部分当作独立的版块来看待,无论你选择哪一块。你可以绝对或相对地用彼块取代此块。


定位

定位属性position用于定义一个元素是否absolute(绝对),relative(相对),static(静态),或者fixed(固定)。

static值是元素的默认值,它会按照普通顺序生成,就如它们在HTML的出现一般。

relative很像static,但可用top、right、bottom和left属性来偏移原始位置。

absolute使元素从HTML普通流中分离出来,并把它送到一个完全属于自己的定位世界。在这个稍微疯狂的世界,这个绝对的元素可以放置到任何地方,只要设置了top、right、bottomleft的值。

fixed的行为也很像absolute,但参考于浏览器窗口相对于页面而放置绝对的元素,所以,理论上,当页面滚动的时候,固定元素完全保持在浏览器视区中。为什么说理论上的?不为别的,在Mozilla和Opera中工作得很好,但IE不会。


用绝对定位布局

你可以用绝对定位来创建一个传统两列布局,只要在HTML中使用如下面的类似规则:

<div id="navigation">
<ul>
<li><a href="this.html">This</a></li>
<li><a href="that.html">That</a></li>
<li><a href="theOther.html">The Other</a></li>
</ul>
</div>
<div id="content">
<h1>Ra ra banjo banjo</h1>
<p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
<p>(Ra ra banjo banjo)</p>
</div>

并且应用如下的CSS:

#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}
#content {
margin-left: 10em;
}


你将看到,长度为10em的导航条被设置在左边。因为导航是绝对定位的,对页面的其他部分的流动不会有任何影响,所以所需要做的只是把内容区域的左边界宽度设置为与导航条宽度一样就可以了。

实在是太容易了!然而你并不受这个两列方法的限制。用精明的定位,你可以布置你所如你所需的更多的块。比如,你需要增加第三列,你可以为HTML增加“navigation2”块并且应用如下CSS:

#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}
#navigation2 {
position: absolute;
top: 0;
right: 0;
width: 10em;
}
#content {
margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */
}

绝对定位元素的唯一副作用是,因为它们生活自己的世界里,没有办法精确决定它们在哪儿结束。如果你使用上面的例子在一个少导航和多内容区域,没有什么问题,但是,特别是使用长度和宽度的相对值时,你经常得放弃在下面放置任何事物如脚注的希望。如果你真的要做,与其绝对定位它们,不如浮动它们。


浮动

浮动将移动一个元素到同一线上的左边或者右边,而周围也会有内容浮动。

浮动经常用在定位一个页面内的小型的元素(在本站的原始默认CSS中HTML初级指南和CSS初级指南的“下一页”连接就是浮动到右边的。同样参阅伪元素中的:first-letter例子),但同样可以用在更大的块中,比如导航列。

拿下面的HTML例子,你可以应用随后的CSS:

#navigation {
float: left;
width: 10em;
}
#navigation2 {
float: right;
width: 10em;
}
#content {
margin: 0 10em;
}


如果你不希望下一个元素环绕浮动对象,你可以使用clear(清除)属性。clear: left将清除左边元素,clear: right将清除右边元素,而clear: both会清除左边和右边。所以,举个例子,你需要一个页面脚注,你可以用id“footer”为HTML增加一个块,然后使用如下的CSS:

#footer {
clear: both;
}


嗯,你已经搞定了。一个脚注会出现在所有列的下边,不管任何一个列有多长。

注意:我们已经大体上介绍了地位和浮动,着重强调了页面的“大”块,但请记住,这些方法也可以用在这些块内的任何元素。综合定位、浮动、边界、补白和边框,你可以再现任何的版式设计,在布局方面,没有CSS完成不了表格所能完成的的事情。使用表格布局的唯一理由是你试图适应古老的浏览器。这也是CSS实际上显示其先进的地方──在文件大小上,高易用性的页面只相当基于表格的页面的一小部分。

三、 at规则──导入样式表、不同媒体类型的样式、指定样式表的字符集和内嵌字体

at(@)规则把CSS规则都注入了一个压缩胶囊中,并且应用到指定的某些事物中。喔。


导入

导入import at规则将吞入另外的样式表。比如,如果你需要把另外的样式表的样式添加到现有的,你可以这样做:

@import url(addonstyles.css);


这经常用来取代连接CSS到HTML中的<link>标签,本质上就是一个内部样式表的形式,看起来像这样:

<style type="text/css" media="all">@import url(monkey.css);</style>


这样做的好处是,一些老浏览器如Netscape 4.x不接受at规则,进而不连接样式表,从而,如果你有良好结构的标记,只剩下朴素功能的HTML(尽管没有样式)。


媒体类型

媒体media at规则将把内容应用到指定的媒体,比如打印。比如

@media print {
body {
font-size: 10pt;
font-family: times new roman, times, serif;
}
#navigation {
display: none;
}
}


媒体类型可以是:

* all──每一个太阳下、上、周围、里面的所有媒体类型。
* aural──语音合成器。
* handheld──手持设备。
* print──打印机。
* projection──投影仪。
* screen──电脑屏幕。

还可以使用braille(布莱叶点字)、embossed(压印)、tty(终端)和tv(电视)。


字符集

字符集charset at规则设置一个外部样式的字符编码,它应该出现在样式的顶端,大致如此:@charset "ISO-8859-1";


字体外观

字体外观font-face at规则用来详细描述一个能嵌入CSS的外部字体。

它必须一个font-family的字体可以参考的描述符,值可以是系统已经存在的字体名称(这种情况发生时会覆盖掉该字体),也可以是全新的名字。为了嵌入一个字体,需用使用src描述符。字体外观at规则的其他描述符是使用该字体的一些条件,比如,在at规则里面增加一条font-weight: bold样式,如果font-weight属性也设置了boldfont-familysrc将应用该规则到带有font-family属性的选择符。

使用字体外形at规则看起来像这样:

@font-face {
font-family: somerandomfontname;
src: url(somefont.eot);
font-weight: bold;
}
p {
font-family: somerandomfontname;
font-weight: bold;
}


这将使somefont.eot这个字体应用到段落里(如果p选择符没有设置成font-weight: bold的话就不会)。

注意:现在内嵌字体的支持度还算凑合。基于Mozilla的浏览器不支持,并且也没有最近的计划显示它会支持。仅Internet Explorer似有一定程度上的支持,但也没有直接得方法。为了在IE中嵌入字体,你需要使用微软的WEFT软件,它会把一个TrueType字体转换成一个压缩的OpenType字体(这也值嗯嗯在指定的URI上使用)。因为有限的(也相当复杂)的兼容性,最好不要使用没有适合的可替换系统字体的内嵌字体。


页面

页面page at规则用于页式(分页)媒体,是一个把样式应用到打印媒体的先进方法。它定义页面块的盒状模型(见边界和补白)扩展因此你可以定义一个独立页面的尺寸和表现。

应用page at规则有许多约定,比如没有补白和边界,我们也没有谈论电脑屏幕──点(pixel)和em作为单位是不可以的。

可以使用很多指定属性,比如尺寸size,可以设置为portrait(竖排格式)、landscape(横排格式)、auto(自动)或者一个高度。marks属性也可以用来定义裁剪标志。

@page {
size: 15cm 20cm;
margin: 3cm;
marks: cross;
}

页式媒体的伪类

有三个伪类被用来指定与page at规则相结合,用如此形式:@page :pseudo-class { stuff }

:first应用到页式媒体的第一页。

:left:right分别用于左边和右边的页面。这可以用来指定左边或者右边页面一个更大的边界。

还有其他更多的小方面指定页面at规则,比如页面分隔符和命名页面,但鉴于这个at规则很难在任何浏览器上工作,你可能在浪费时间在阅读这些东西上面。虽然还有更妙的主意……

四、 伪元素──样式化首字、首行和为元素前后放置内容

伪元素(pseudo elements)跟伪类一样吮吸选择符,使用selector:pseudoelement { property: value; }的形式。有四个吮吸器。


首字和首行

首字first-letter 伪元素应用到元素的第一个字,而首行first-line则是元素的顶行。你可以,比如,创建一个首行粗体和首字下沉的段落,像这样:


p:first-letter {

font-size: 3em;

float: left;

}

p:first-line {

font-weight: bold;

}



前和后

before和后after伪元素与内容content属性用于元素的两边,在不更改HTML的情况下改变内容的两边事物。

内容属性的值可以open-quote(开引号)、close-quote(闭括号)、no-open-quote(无开括号)、no-close-quote(无闭括号),任何附上引号的字符串或者图片,使用url(imagename)


blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}
li:before {
content: "POW: "
}
p:before {
content: url(images/jam.jpg)
}


注意:听起来不错吧,dunnit?嗯,有太多太多的东西(唉,一声叹息),大多数用户不能够看到前后的效果,因为IE被它们所困扰。懒洋洋……(以上文字版权归原作者所有)

相关链接:CSS初级指南    CSS中级指南