字间距、词间距的使用

您所在的位置:网站首页 css间距 字间距、词间距的使用

字间距、词间距的使用

2024-02-15 08:01| 来源: 网络整理| 查看: 265

今天我们接着分享文本样式的内容。

 

letter-spacing字母间距:

 

在css中,我们可以使用letter-spacing属性定义字间距。

 

语法:

 

 

letter-spacing:像素值;

 

我们一般都是使用像素值为单位的。

 

示例代码:

 

 

    letter-spacing          #p1 { letter-spacing:0px;}      #p2 { letter-spacing:5px;}      #p3 { letter-spacing:10px;}         

I like Coding.我喜欢编程。

    

I like Coding.我喜欢编程。

    I like Coding.我喜欢编程。

 

letter-spacing控制的是字间距,每一个中文文字算作一个“字”,而每一个英文字母也算作一个“字”,这个需要大家留心记住。

 

 

word-spacing属性:

 

用于定义单词之间的距离,我们通常使用像素值作为单位。

 

语法:

 

 

word-spacing:像素值;

 

示例代码:

​​​​​​​

      word-spacing         #p1 { word-spacing:0px;}      #p2 { word-spacing:10px;}      #p3 { word-spacing:20px;}      

I like Coding.我 喜欢编程。

  

I like Coding.我 喜欢编程。

    I like Coding.我 喜欢编程。

  

 

定义词间距,以空格为基准进行调节。如果多个单词被连在一起,则被视为一个单词;如果汉字被空格分隔,此时word-spacing属性有效。

 

 

 

 

文本样式的总结:

 

text-decoration,下划线、删除线、顶划线

text-transform,文本变形,大小写

font-variant,英文文本变为小型的大写字母

text-indent,段落文本缩进

text-align,文本水平对齐方式

line-height,行高

letter-spacing,字距

word-spacing,词距

 

text-decoration属性值:none,underline,line-through,overline。

 

text-transform属性值:none,uppercase,lowercase,capitalize。

 

font-variant属性值:normal,small-caps。

 

text-indent属性值:像素值;

 

text-align属性值:left,center,right。

 

line-height属性值:像素值;

 

letter-spacing属性值:像素值;

 

word-spacing属性值:像素值;

 

 

 

 

 

图片



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3