css学习第三天

 

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进行设置