5日精通样式表二

日期：2007年6月6日作者：查看:[大字体中字体小字体]

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

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

串接样式表的字体属性总结：
- 字模系列定义字体以何种字体显示字号使你可以利用points,pixels，
  关键字及其它尺寸单位控制文字的尺寸。字体风格用于斜体字显示。字重对字体加重显示的程度作全面的控制。字体参数（font-variant）将文字以小一半的尺寸大写显示。文字变形（text-transform）控制大写。
- 文字修饰（text-decoration）可以控制文字的多种细节的变化，如下划线、闪烁等等。
还需提到另外一项重要的属性，字体。字是一种将字号、行高度及字母系列一次义的快捷方式。例： LI { font: 12pt/16pt courier }

这条规则将<LI>文字设置为：尺寸12points，行高度 16points，（我们将在明天谈到该属性），字型采用Courier。

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

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

我们在第2天的教程中学习了字体及控制文字字符的方法.今天我们将学习这些字符、单词和每行的内容之间是如何定位的。我们将学会如何设定字与字之间、字母之间的距离，以及行距（垂直间距）、文字的对齐方式、边距、边框及浮动要素等，列表如下：
- 字间距字母间距行高文字对齐方式垂直对齐方式文字缩位顶边距、左边距等空格填充－顶部、左边等等边框－宽度、颜色、样式等浮动
- 清除
很显然，今天我们要学很多东西，所以我们得抓紧时间。让我们开始吧！
下面要学习的属性可以使你做到HTML标签做不到的事情：控制字间距及字母间距。

字间距 利用字间距属性，你可以在字之间加入更的距离：
你所使用的参数值将加入任何浏览器的缺设置，你可以使用我们昨天谈到的任何种长度单位：
- in （英寸） cm （厘米） mm （毫米） pt （点数） pc （打字机字间距） em （ems） ex (x-height)
- px （象素）
以下为显示结果：
如果你的浏览器不支持这种CSS属性，请点击这里查看显示效果。 如果你看不到任何不同之处，则说明你的览器不支持这种属性，只有MAC机用的IE4能支持这种字间距设置。 字母间距 字母间距可以在IE 4中应用，但Communicator不行，唉...
字母间距的功能和字间距的很类似：其参值将被加入到浏览器的缺省设置中，你以使用上述任何一种长度单位。如果你用的是IE 4，这里是一个例子：
对于这两种属性，你都可以使用normal参数。从而使其按照浏览器的原有缺省设置显示。

别沮丧，还有很多CSS属性可以在两种浏览器上都可使用。下文中就是一个例子。
行与行之间的距离最常用的称呼是行距，而当网页设计者们发现他们能够控制行距时最常用的称呼是"Weee!"

行高

行高简直是上帝发给人间的福音。利用行高我们可以随心所欲地控制行与行之间的垂直距离。
你所用的参数就是相邻两行的基准线（基准线就是英文小写字母如x,a的下阶线，但不包括诸如y,g等字母超过下阶线的部分）之间的垂直距离。注意你所设定的参数将完全代替浏览器的缺省参数。

Netscape Communitor和Internet EXPlorer在行之前加入行高参数。所以如果你将参数设为10px，浏览器将把文字的第1行以10px的高度显示。

有3种设定行高的方法：
- 数字长度单位
- 比例
用数字设行距
[1] [2] 下一页
5日精通样式表二相关文章：
·5日精通样式表二
5日精通样式表二相关软件

上一篇:[css] 简明教程样式表的编辑和浏览

下一篇:如何使用CSS来进行网页排版

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

5日精通样式表二

Behold the power of cheese.

Behold the power of cheese.

精品推荐

热点TOP10

特别推荐