<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h1{
text-align: center;
text-decoration: overline;
}
h2{
text-decoration: line-through;
}
h3{
text-decoration: underline;
}
h4{letter-spacing: 0.125rem;}
h5{letter-spacing:-0.1875rem;}
div.ex1{direction: rtl;}
p.date{text-align: right;}
p.main{
text-align: justify;
text-indent:35px;
}
p.uppercase{text-transform: uppercase;}
p.lowercase{text-transform: lowercase;}
p.capitalize{text-transform: capitalize;}
p.small{line-height: 70%;}
p.big{line-height: 200%;}
p.tip{color: #fc5100;}
a{text-decoration: none;}
img.top{vertical-align: text-top;}
img.bottom{vertical-align: text-bottom;}
</style>
</head>
<body>
<h1>CSS text-align实例</h1>
<p class="date">2015年3月14日</p>
<p class="main">“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</p>
<p><b>注意：</b>重置浏览器窗口查看"justify"是如何工作的：</p>
<p class="tip">1.当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）</p>
<p class="tip">2.text-decoration为none 设置为链接没下划线：<a href="//www.baidu.com/">baidu</a></p>
<h1>3.text-decoration: overline文字装饰为上划线</h1>
<h2>text-decoration: line-through;文字装饰为删除线</h2>
<h3>text-decoration: underline文字装饰为下划线</h3>
<p class="tip">4.控制文本中的字母用text-transform属性</p>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
<p class="tip">5.text-indent属性是设置段落首行缩进 见首例文本段落，在.main类中；禁用换行是white-space：nowrap</p>
<p class="tip">6.letter-spacing设置了字母间距、word-spacing设置单词之间距离</p>
<h4>标题4设置了字母间距：hello world</h4>
<h5>标题5设置了字母间距：hello world</h5>
<p class="tip">7.行间距用line-height设置</p>
<p>
这是标准行高<br>
这是标准行高<br>
这是标准行高<br>
</p>
<p class="small">
这是更小行高段落<br>
这是更小行高段落<br>
这是更小行高段落<br></p>
<p class="big">
这是更小行高段落<br>
这是更小行高段落<br>
这是更小行高段落<br></p>
<p class="tip">8.文本的书写方向，这是默认方向</p>
<div class="ex1">这些文本的书写方向，一块一块的，从右往左。</div>
<p class="tip">9.内部文字图像的垂直对齐</p>
<p>一个<img src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="baidu" width="250" height="100">默认对齐的图像</p>
<p>一个<img class="top" src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="baidu" width="250" height="100">text-top对齐的图像</p>
<p>一个<img class="bottom" src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="baidu" width="250" height="100">text-bottom默认对齐的图像</p>
</body>
</html>
源码在资源里免费获取，直接下载即可～
后面会继续更新新的内容，有html5，css3，JavaScript的应用实例，喜欢的请关注哦