你的位置:首页 > 网页设计

[网页设计]CSS知识总结(六)


CSS常用样式

 

4.段落样式

  1)行高

    控制段落内每行高度

    line-height : normal | length

  例子 源代码:

/* CSS代码 */.normal{  line-height:normal;}.length{  line-height:30px;}

<!-- HTML代码 --><body>  <p class="normal">这是正常的行高<br>这是正常的行高<br>这是正常的行高</p>  <p class="length">这是30px的行高<br>这是30px的行高<br>这是30px的行高</p></body>

  效果:

这是正常的行高
这是正常的行高
这是正常的行高

这是30px的行高
这是30px的行高
这是30px的行高

   

  如果在一个元素中有一行文字,而行高等于元素的高度,那么这一行文字就会垂直居中。

  *注意是一行文字,而且先要把浏览器原有的内外边距干掉。

  例子 源代码:

/* CSS代码 */*{  margin:0;  padding:0;}.box{  width:100px;  height:100px;  line-height:100px;  border:1px solid #000;}

<!-- HTML代码 --><body>  <div class="box">    <p>这是一行文字</p>  </div></body>

  效果:

 

 

   2)段落缩进

    控制段落的首行缩进

    text-indent : length

  例子 源代码:

/* CSS代码 */.indent{  text-indent:2em;}

<!-- HTML代码 --><body>  <p class="normal">这里没有首行缩进</p>  <p class="indent">这里首行缩进了2em</p></body>

 效果:

这里没有首行缩进

这里首行缩进了2em



 

   3)段落对齐

    控制段落对齐方式,不但是文本,对象中的其它inline或inline-block元素也能够被text-align进行对齐方式的设置。

    text-align : left | right | center | justify

  例子 源代码:

/* CSS代码 */.box2{  width:300px;  border:1px solid #000;}.left{  text-align:left;}.center{  text-align:center;}.right{  text-align:right;}

<!-- HTML代码 --><body>  <div class="box2">    <p class="left">左对齐文本</p>    <p class="center">居中对齐文本</p>    <p class="right">右对齐文本</p>  </div></body>

   效果:

左对齐文本

居中对齐文本

右对齐文本




 

  4)文字间距

    控制段落的文字间的距离

    letter-spacing : normal | length

  例子 源代码:

/* CSS代码 */.normal{  letter-spacing:normal;}.length{  letter-spacing:10px;}

<!-- HTML代码 --><body>  <p class="normal">这是默认的文字间距</p>  <p class="length">这是10px的文字间距</p></body>

  效果:

这是默认的文字间距

这是10px的文字间距



 

  5)文字溢出

    控制文本内容溢出部分的样式

    text-overflow : clip | ellipsis

    clip : 当内联内容溢出块容器时,将溢出部分裁切掉。

    ellipsis : 当内联内容溢出块容器时,将溢出部分替换为(...)。

    因为text-overflow只是用来说明文字溢出时用什么方式显示,所以还需要定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),这样才能实现溢出文本被裁切或是显示省略号的效果。

   例子 源代码:

/* CSS代码 */.clip,.ellipsis{  width:150px;  border:1px solid #000;  white-space:nowrap;  overflow:hidden;}.clip{  text-overflow:clip;}.ellipsis{  text-overflow:ellipsis;}.clip:hover,.ellipsis:hover{  text-overflow:inherit;  overflow:visible;}

<!-- HTML代码 --><body>  <p>当你把光标移动到一下文本上,就能看到全部文本。</p>  <div class="clip">这里使用的是"text-overflow:clip"</div>  <div class="ellipsis">这里使用的是"text-overflow:ellipsis"</div></body>

   效果:

当你把光标移动到一下文本上,就能看到全部文本。

这里使用的是"text-overflow:clip"

这里使用的是"text-overflow:ellipsis"


 

  6)段落换行

    控制内容超过容器的边界时是否换行 (一般用于英文和URL地址)

    word-wrap : normal | break-word

    normal : 允许内容顶开或溢出指定的容器边界。浏览器默认处理

    break-word : 内容将在边界内换行。如果需要,单词内部允许换行。

  例子 源代码:

/* CSS代码 */  .break{    width:300px;    border:1px solid #000;    word-wrap:break-word;  }

<!-- HTML代码 --><body>  <div class="break">我的博客:http://www.cnblogs.com/mossbaoo/</div></body>

  效果:(URL地址会另外换行)

我的博客:http://www.cnblogs.com/mossbaoo/