5日精通css样式表(个人总结).doc

5日精通css样式表第3日我们在第2天的CSS教程中学习了字体及控制 文字字符的方法.今天我们将学习这些字 符、单词和每行的内容之间是如何定位 的。我们将学会如何设定字与字之间、字 母之间的距离，以及行距（垂直间距）、 文字的对齐方式、边距、边框及浮动要素 等，列表如下： 字间距 字母间距 行高 文字对齐方式 垂直对齐方式 文字缩位 顶边距、左边距等 空格填充顶部、左边等等 边框宽度、颜色、样式等 浮动 清除 很显然，今天我们要学很多东西，所以我 们得抓紧时间。让我们开始吧！第1页：5日精通css样式表第3日第2页：css字间距及字母间距第3页：css行距 第4页：css文字对齐及缩行第5页：css边距及空格填充第6页：css边框第7页：css浮动要素 第8页：第3天的css练习第9页：复习css 第1天第2天第3天第4天第5天 第2页：css控制字间距和字母间距 下面要学习的CSS属性可以使你做到HTML标签 做不到的事情：控制字间距及字母间距。 字间距 利用字间距属性，你可以在字之间加入更 多的距离： H3 word-spacing: 1em 你所使用的参数值将加入任何浏览器的缺 省设置，你可以使用我们昨天谈到的任何 一种长度单位： in （英寸） cm （厘米） mm （毫米） pt （点数） pc （打字机字间距） em （ems） ex (x-height) px （象素） 以下为显示结果： Behold the power of cheese.如果你的浏览器不支持这种CSS属性，请 点击这里查看显示效果。 如果你看不到任何不同之处，则说明你的 浏览器不支持这种属性，只有MAC机用的IE 4能支持这种字间距设置。 字母间距 字母间距可以在IE 4中应用，但 Communicator不行，唉. H3 letter-spacing: 10px 字母间距的功能和字间距的很类似：其参 数值将被加入到浏览器的缺省设置中，你 可以使用上述任何一种长度单位。 如果你用的是IE 4，这里是一个例子： Behold the power of cheese.对于这两种属性，你都可以使用normal参 数。从而使其按照浏览器的原有缺省设置 显示。别沮丧，还有很多CSS属性可以在两种浏 览器上都可使用。下文中就是一个例子。 第1页：5日精通css样式表第3日第2页：css字间距及字母间距第3页：css行距 第4页：css文字对齐及缩行第5页：css边距及空格填充第6页：css边框第7页：css浮动要素 第8页：第3天的css练习第9页：复习css 第1天第2天第3天第4天第5天 第3页：css行距 行与行之间的距离最常用的称呼是行距， 而当网页设计者们发现他们能够控制行距 时最常用的称呼是Weee! 行高 行高简直是上帝发给人间的福音。利用CSS行高我们可以随心所欲地控制行与行之间的 垂直距离。 B line-height: 16pt 你所用的参数就是相邻两行的基准线（基 准线就是英文小写字母如x,a的下阶线， 但不包括诸如y,g等字母超过下阶线的部 分）之间的垂直距离。注意你所设定的参 数将完全代替浏览器的缺省参数。 Netscape Communitor和Internet Explorer在行之前加入行高参数。所以如 果你将参数设为10px，浏览器将把文字的 第1行以10px的高度显示。 有3种设定行高的方法： 数字 长度单位 比例 用数字设行距 B font-size: 12pt; line-height: 2 当你用数字设定行高的时候，浏览器将利 用字号来确定行距：它将字号乘以设定的 参数值。所以，在本例中，行高将是24点。 显示效果如下： Four score and seven years ago, the Web wasnt yet a glimmer in anyones eye. No one needed it, no one missed it. Eighty-seven years from now, what will people laugh at us for lacking?你还可以用小数设定参数值。 （你应该知道IE 3 不支持数字参数值， 在IE 3 中使用数字参数将出现大片文字 的互相重叠。） 用长度单位设定行距 B font-size: 12pt; line-height: 11pt 设定行高的另一种方法就是利用先前学过 的长度单位（em及pt是最常用的单位）， 以下为显示效果： Four score and seven years ago, the Web wasnt yet a glimmer in anyones eye. No one needed it, no one missed it. Eighty-seven years from now, what will people laugh at us for lacking?你既可以轻松地将行距缩小也可以将行距 放大。有了样式表，这一切都易如反掌！ 用比例设定行距 B font-size: 10pt; line-height: 140% 在本例中，行距是长度10points的140， 即14points。明白了吗？ 让文字互相重叠! 你可能会问这样的问题：如果行距太小的 话，文字岂不就重叠在一起了吗？是这样 的。我们来看看这个例子： B font-size: 28pt; line-height: 2pt 以下为显示效果: Whoa. Cool. Whoa 使用了浏览器的缺省行高设置。但Cool的行高很小所以它和第1行重叠 了。 （Communicator 和 Internet Explorer 对行高的诠释有所不同。 Communicator 将只是将文字的上半部分重叠一点，而IE 则将其全部重叠。）如果你计划将你的网页中的某些内容重叠 显示，行高设置还不是最佳的选择，因为 不同的浏览器对其的支持有差别。在第5 天的课程中我们将研究文字及图象布局的 最佳方式。第1页：5日精通css样式表第3日第2页：css字间距及字母间距第3页：css行距 第4页：css文字对齐及缩行第5页：css边距及空格填充第6页：css边框第7页：css浮动要素 第8页：第3天的css练习第9页：复习css 第1天第2天第3天第4天第5天 第4页：css文字对齐及缩行 现在我们谈谈CSS段落及图象的对齐和加入段落 缩行。 文字对齐 利用文字对齐属性，你可以控制段落的水平 对齐： H4 text-align: center 这项属性只用于整块的内容，如、 -、和 。 以下为各种选项： left指将要素左对齐，如本段所示。center指将要素居中，如本段所示。justify指将要素左右对齐，如本段所示。 top将要素顶部同最高的母体要素对齐。 bottom将要素的底部同最低的母体要 素对齐。 text-top将要素的顶部同母体要素文字 的顶部对齐。 text-bottom将要素的底部同母体要素 文字的底部对齐。 baseline将要素的基准线同母体要素的 基准线对齐。 middle将要素的中点同母体要素的中点 对齐。 sub将要素以下标的形式显示。 super将要素以 上标的形式显示。 第1页：5日精通css样式表第3日第2页：css字间距及字母间距第3页：css行距 第4页：css文字对齐及缩行第5页：css边距及空格填充第6页：css边框第7页：css浮动要素 第8页：第3天的css练习第9页：复习css 第1天第2天第3天第4天第5天 第5页：css边距及空格填充我们都知道可以用HTML设定边距，但你必 须使用表格，别无它法。而样CSS式表则. 快速定义边距 首先，我们应该了解样式表语言的术语， 以便我们理解正在谈什么。每一个整块的 要素或替代要素都包含在样式表生成器称 之为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 不支持空格填充属性）。 下面我们将探讨位于边距和空格填充之间 的边框。第1页：5日精通css样式表第3日第2页：css字间距及字母间距第3页：css行距 第4页：css文字对齐及缩行第5页：css边距及空格填充第6页：css边框第7页：css浮动要素 第8页：第3天的css练习第9页：复习css 第1天第2天第3天第4天第5天 第6页：css边框有几种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 可以使用的关键字参数值如下： solid double dotted dashed groove ridge inset outset 注意：Communiactor只支持其中的几种关 键字属性。第1页：5日精通css样式表第3日第2页：css字间距及字母间距第3页：css行距 第4页：css文字对齐及缩行第5页：css边距及空格填充第6页：css边框第7页：css浮动要素 第8页：第3天的css练习第9页：复习css 第1天第2天第3天第4天第5天 第7页：css浮动要素我们在网页中经常看到浮动的图象和表格，CSS只需 对一个标签使用ALIGN=left属性，文字就会 绕到浮动图象的右边继续显示。样式表对于浮动 要素有一个更为灵活的语法，也就是本篇中将要 谈到的主题。 （IE3和IE 4不支持本页中谈到的任何功能。如果 你使用IE 4，你将会看到一些奇怪的格式。） 浮动 浮动属性使你能将一个要素周围用文字包裹，不 仅仅是包裹图象，而且能包裹整块的文字。 H4 float: left 本标题文字为向左浮动。你可以看到这项CSS 规则应用于的文字。而本段内容则包裹在标 题文字的右下边，就象是用文字包裹图象时的效 果那样。你也可以使用向右浮动的参数值。 如果浮动要素周围的边距太小，你可以使用之前 学过的空格填充属性给它加大四周的空间（但似 乎使用边距会造成问题）。 清除 如果你想使一段文字包裹某一要素，而下一段文 字不包裹，你可以使用clear属性，很象HTML的 CLEAR属性的用法（例： CLEAR