text文本样式二

text-transform样式用于将元素的字母全都变成大小

text文本样式二_第1张图片

 letter-spacing设置字符之间的间距

text文本样式二_第2张图片

<html>

<head>
<style type="text/css">
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
style>
head>

<body>
<h1>This is header 1h1>
<h4>This is header 4h4>
body>

html>

 

 

 text文本样式二_第3张图片

 

word-spcing用来设置单词之间的距离

是用空格来识别单词之间有无距离

text文本样式二_第4张图片

<html>
<head>
<style type="text/css">
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
style>
head>

<body>
<p class="spread">This is some text. This is some text.p>
<p class="tight">This is some text. This is some text.p>
body>
html>

 

 text文本样式二_第5张图片

 

 

 text-indent首行缩进

可以用em来设置两个字符的大小

text文本样式二_第6张图片

<html>
<head>
<style type="text/css">
p {text-indent: 1cm}
style>
head>

<body>
<p>
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
p>
body>

html>

 

 

text文本样式二_第7张图片

 

你可能感兴趣的:(text文本样式二)