word-spacing与letter-spacing在文字编辑中的应用

转自: http://blog.onlygrape.com/word-spacing-letter-spacing/278

 

在对网页文本进行精细编辑时,需要应用到多方面的CSS属性设置,如垂直方向上的行距line-height,水平方向上的字距word-spacing和letter-spacing。word-spacing是指单词间隔,letter-spacing是指字母的间隔。下面我们来介绍下word-spacing与letter-spacing属性应用:


word-spacing属性:

语法:

word-spacing : normal | length

 

 

 

参数
normal : 默认间距
length :由浮点数字和单位标识符组成的长度值,允许为负值。请参阅长度单位
 
说明:
检索或设置对象中的单词之间插入的空格数。对于IE4+而言仅在MAC平台上可用。
对应的脚本特性为wordSpacing。请参阅我编写的其他书目。
 
示例:

div  {  word-spacing  :  10 ;   }
div 
{  word-spacing  :  10px ;   }


检索或设置对象中的单词之间插入的空格数。由浮点数字和单位标识符组成的长度值,允许为负值。

设置word-spacing为15px的情况:

DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“
>
< html  xmlns =”http://www.w3.org/1999/xhtml“ >
< head >
< meta  http-equiv =”Content-Type”  content =”text/html;  charset =gb2312″  />
< title > word-spacing与letter-spacing在文字编辑中的应用 title >
< style  type =”text/css” >
{ word-spacing : 15px ; }
style >
head >
< body >
< p >< href =”http://blog.onlygrape.com/”  target =”_blank” > CSS Web Design a > onlygrape 网站 建设 p >
body >
html >


由此我们看出,文字间的间隔并未增加,而词与词之间的间隔变为了15px.

 

letter-spacing属性:

语法:
letter-spacing : normal | length
 
参数:
normal :默认间隔
length :由浮点数字和单位标识符组成的长度值,允许为负值。请参阅长度单位
 
说明:
检索或设置对象中的文字之间的间隔。
该属性将指定的间隔添加到每个文字之后,但最后一个字将被排除在外。
对应的脚本特性为letterSpacing。请参阅我编写的其他书目。
 
示例:

div  { letter-spacing : 6px ;   }
div 
{ letter-spacing : 0.5pt ;   }


检索或设置对象中的文字之间的间隔。
该属性将指定的间隔添加到每个文字之后,但最后一个字将被排除在外。
可以调整单词中每个字母(汉字)间的距离。
普通的字与字之间的间距可以用这个来控制实现。   


设置letter-spacing为5px的情况:

DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“
>
< html  xmlns =”http://www.w3.org/1999/xhtml“ >
< head >
< meta  http-equiv =”Content-Type”  content =”text/html;  charset =gb2312″  />
< title > word-spacing与letter-spacing在文字编辑中的应用 title >
< style  type =”text/css” >
{ letter-spacing : 5px ; }
style >
head >
< body >
< p >< href =”http://blog.onlygrape.com/”  target =”_blank” > CSS Web Design a > onlygrape 网站 建设 p >
body >
html >


由此我们看出,单词间的间隔并未增加,而字母与字母,单个字与单个字之间的间隔变为了5px。

 

转载于:https://www.cnblogs.com/iswszheng/archive/2009/07/29/1525034.html

你可能感兴趣的:(xhtml)