今天我们接着分享文本样式的内容。
letter-spacing字母间距:
在css中,我们可以使用letter-spacing属性定义字间距。
语法:
letter-spacing:像素值;
我们一般都是使用像素值为单位的。
示例代码:
<html>
<head>
<title>letter-spacing</title>
<style type="text/css">
#p1 { letter-spacing:0px;}
#p2 { letter-spacing:5px;}
#p3 { letter-spacing:10px;}
</style>
</head>
<body>
<p id="p1">I like Coding.我喜欢编程。</p>
<p id="p2">I like Coding.我喜欢编程。</p>
<p id="p3">I like Coding.我喜欢编程。</p>
</body>
</html>
letter-spacing控制的是字间距,每一个中文文字算作一个“字”,而每一个英文字母也算作一个“字”,这个需要大家留心记住。
word-spacing属性:
用于定义单词之间的距离,我们通常使用像素值作为单位。
语法:
word-spacing:像素值;
示例代码:
<html>
<head>
<title>word-spacing</title>
<style type="text/css">
#p1 { word-spacing:0px;}
#p2 { word-spacing:10px;}
#p3 { word-spacing:20px;}
</style>
</head>
<body>
<p id="p1">I like Coding.我 喜欢编程。</p>
<p id="p2">I like Coding.我 喜欢编程。</p>
<p id="p3">I like Coding.我 喜欢编程。</p>
</body>
</html>
定义词间距,以空格为基准进行调节。如果多个单词被连在一起,则被视为一个单词;如果汉字被空格分隔,此时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属性值:像素值;