3.2 字间距及字母间距
字间距
利用字间距属性,你可以在字之间加入更的距离:
H3 { word-spacing: 1em }
你所使用的参数值将加入任何浏览器的缺设置,你可以使用我们昨天谈到的任何种长度单位:
- in (英寸)
- cm (厘米)
- mm (毫米)
- pt (点数)
- pc (打字机字间距)
- em (ems)
- ex (x-height)
- px (象素)
字母间距
字母间距可以在IE 4中应用,但Communicator不行,唉...
H3 { letter-spacing: 10px }
字母间距的功能和字间距的很类似:其参值将被加入到浏览器的缺省设置中,你以使用上述任何一种长度单位。
如果你用的是IE 4,这里是一个例子:
Behold the power of cheese.
对于这两种属性,你都可以使用normal参数。从而使其按照浏览器的原有缺省设置显示。
3.3 行距
行高
行高简直是上帝发给人间的福音。利用行高我们可以随心所欲地控制行与行之间的垂直距离。
B { line-height: 16pt }注意LINE是行的意思
有3种设定行高的方法:
- 数字
- 长度单位
- 比例
用数字设行距
B { font-size: 12pt;
line-height: 2 }
用长度单位设定行距
B { font-size: 12pt; line-height: 11pt }
用比例设定行距
B { font-size: 10pt; line-height: 140% }
让文字互相重叠!
你可能会问这样的问题:如果行距太小的话,文字岂不就重叠在一起了吗?是这样的。我们来看看这个例子:
B { font-size: 28pt; line-height: 2pt }
让文字互相重叠!
你可能会问这样的问题:如果行距太小的话,文字岂不就重叠在一起了吗?是这样的。我们来看看这个例子:
B { font-size: 28pt; line-height: 2pt }
以下为显示效果:
Whoa.
Cool.
3.4 文字对齐及缩行
文字对齐
利用文字对齐属性,你可以控制段落的水平对齐:
H4 { text-align: center }
垂直对齐
H4 { vertical-align: top }
垂直对齐可以使你控制文字或替代要素(比如图象)相对于其母体要素的的垂直位置。例如,如果你将一个2x2象素的GIF图象同其母体要素文字的顶部垂直对齐,则该GIF图象将在该行文字的顶部显示。
以下为各项参数:
- top将要素顶部同最高的母体要素对齐。
- bottom将要素的底部同最低的母体要素对齐。
- text-top将要素的顶部同母体要素文字的顶部对齐。
- text-bottom将要素的底部同母体要素文字的底部对齐。
- baseline将要素的基准线同母体要素的基准线对齐。
- middle将要素的中点同母体要素的中点对齐。
- sub将要素以下标的形式显示。
- super将要素以 上标的形式显示。
文字缩行
你想使段落缩行吗?(在Internet上呆一段时间之后,你可能已经忘了缩行是怎么一回事!)
P { text-indent: 2em }
3.5 边距及空格填充
快速定义边距
每一个整块的素或替代要素都包含在样式表生成器称为box的容器之内。box包括:
- 要素本身
- 围绕要素的空格填充(padding)
围绕空格填充的边框(border)边框颜色P { border-color: #666699 #FF边框样式
你还可以设定边框线的样式,例:
P { border-style: double; border-width: 3px }
0033 #000000 #FFFF99; border-width: 3px }
- solid
- double
- dotted
- dashed
- groove
- ridge
- inset
- outset
- 围绕边框的边距(空白-margin)
3.7 浮动要素
浮动(就是定位)
浮动属性使你能将一个要素周围用文字包裹,不仅仅是包裹图象,而且能包裹整块的文字。
H4 { float: left }
清除
如果你想使一段文字包裹某一要素,而下一段文字不包裹,你可以使用clear属性,很象HTML的CLEAR属性的用法(例: CLEAR=right)。
P { clear: left }
今天学习的可以比喻成两个模子,两个模块需要设置间距,进一步可以比喻成多个模子,多个模子需要设置行距,需要排版,需要对边框border,margin,padding进行设置