日期:2014-04-28  浏览次数:20586 次

下面是一个小练习。
以下的练习将帮助你尝试练习串接样式表的一些属性。你的任务:只使用HTML和样式表复制这张样式表实例,记住,你必须有4.0版的浏览器,以便使实例显示效果正常。

完成之后,想想有没有其它方法作出同样的效果。
今天我们探索了字体的奇妙世界:字型、字号、加重显示、斜体字、大写、下划线等等。利用传统的HTML你的确也可以作很多事情,但不是所有事,而且也达不到样式表对字体的控制程度。

串接样式表的字体属性总结:

  • 字模系列定义字体以何种字体显示字号使你可以利用points,pixels
    关键字及其它尺寸单位控制文字的尺寸。 字体风格用于斜体字显示。 字重对字体加重显示的程度作全面的控制。 字体参数(font-variant)将文字以小一半的尺寸大写显示。 文字变形(text-transform)控制大写。
  • 文字修饰(text-decoration)可以控制文字的多种细节的变化,如下划线、闪烁等等。

还需提到另外一项重要的属性,字体。字是一种将字号、行高度及字母系列一次义的快捷方式。例: LI { font: 12pt/16pt courier }

这条规则将<LI>文字设置为:尺寸12points,行高度 16points,(我们将在明天谈到该属性),字型采用Courier

使用字体属性时,必须设定字号和字型,但可以选择是否设定行高度。设定的顺序必须严格按照例子中的顺序。

这只是我们探索CSS众多属性的开始。明天我们将更深入研究字体属性及图文和布局。

我们在第2天的教程中学习了字体及控制文字字符的方法.今天我们将学习这些字符、单词和每行的内容之间是如何定位的。我们将学会如何设定字与字之间、字母之间的距离,以及行距(垂直间距)、文字的对齐方式、边距、边框及浮动要素等,列表如下:

  • 字间距 字母间距 行高 文字对齐方式 垂直对齐方式 文字缩位 顶边距、左边距等 空格填充-顶部、左边等等 边框-宽度、颜色、样式等 浮动
  • 清除

很显然,今天我们要学很多东西,所以我们得抓紧时间。让我们开始吧!
下面要学习的属性可以使你做到HTML标签做不到的事情:控制字间距及字母间距。

字间距 利用字间距属性,你可以在字之间加入更的距离:

    H3 { word-spacing: 1em }

你所使用的参数值将加入任何浏览器的缺设置,你可以使用我们昨天谈到的任何种长度单位:

  • in (英寸) cm (厘米) mm (毫米) pt (点数) pc (打字机字间距) em emsex (x-height)
  • px (象素)

以下为显示结果:

    Behold the power of cheese.

如果你的浏览器不支持这种CSS属性,请点击这里查看显示效果。 如果你看不到任何不同之处,则说明你的览器不支持这种属性,只有MAC机用的IE4能支持这种字间距设置。 字母间距 字母间距可以在IE 4中应用,但Communicator不行,唉...

    H3 { letter-spacing: 10px }

字母间距的功能和字间距的很类似:其参值将被加入到浏览器的缺省设置中,你以使用上述任何一种长度单位。 如果你用的是IE 4