您现在的位置: 365建站网 > 365学习 > css学习第三天

css学习第三天

文章来源:365jz.com     点击数:127    更新时间:2009-09-16 11:49   参与评论

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属性,很象HTMLCLEAR属性的用法(例: CLEAR=right)。

P { clear: left }

今天学习的可以比喻成两个模子,两个模块需要设置间距,进一步可以比喻成多个模子,多个模子需要设置行距,需要排版,需要对边框border,margin,padding进行设置

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (127人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------