CSS-文本基础记录
2016-07-29 01:36
295 查看
1.文本对齐方式
<!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>对齐方式</title>
<style>
h1{
text-align:center}
p.data{
text-align:right}
p.xc{
text-align:justify}
</style>
</head>
<body>
<h1 class="h1">text-align</h1><br />
<p class="data">2016-7-28</p>
<p class="xc">“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</p>
</body>
</html>
2.文本格式
<!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>文本格式</title>
<style>
body{
color:#FF0000}/*文本颜色*/
h1{
color:#33FF00}/*标题1颜色*/
p.xc{
color:#0033CC}/*段落颜色*/
</style>
</head>
<body>
<h1>标题1</h1>
swxcfeedfd
<p class="xc">段落</p>
</body>
</html>
3.文本修饰
<!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>文本修饰</title>
<style>
h1{
text-decoration:overline}
h2{
text-decoration:line-through}
h3{
text-decoration:underline}
</style>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
</body>
</html>
4.文本修饰
<!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>文本转换</title>
<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
p.xc{text-indent:50px;}
</style>
</head>
<body>
<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="xc">This is some text.</p>
</body>
</html>
<!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>对齐方式</title>
<style>
h1{
text-align:center}
p.data{
text-align:right}
p.xc{
text-align:justify}
</style>
</head>
<body>
<h1 class="h1">text-align</h1><br />
<p class="data">2016-7-28</p>
<p class="xc">“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</p>
</body>
</html>
2.文本格式
<!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>文本格式</title>
<style>
body{
color:#FF0000}/*文本颜色*/
h1{
color:#33FF00}/*标题1颜色*/
p.xc{
color:#0033CC}/*段落颜色*/
</style>
</head>
<body>
<h1>标题1</h1>
swxcfeedfd
<p class="xc">段落</p>
</body>
</html>
3.文本修饰
<!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>文本修饰</title>
<style>
h1{
text-decoration:overline}
h2{
text-decoration:line-through}
h3{
text-decoration:underline}
</style>
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
</body>
</html>
4.文本修饰
<!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>文本转换</title>
<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
p.xc{text-indent:50px;}
</style>
</head>
<body>
<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="xc">This is some text.</p>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS基础：text-overflow:ellipsis溢出文本显示省略号的详细方法
- 【css基础】文本对齐，水平对齐，垂直对齐
- 【CSS基础】琐碎记录<二>
- [看书][CSS精粹（第2版）]第二章 文本样式和基础知识
- 【笔记-前端】div+css排版基础，以及错误记录
- CSS学习记录（基础）
- Css3之基础-6 Css 文本格式化(字体属性，文本属性)
- 【CSS基础】琐碎记录<一>
- 【CSS基础】琐碎记录
- [学习记录][css]文本属性
- Css基础学习一：字体，文本，颜色，背景，边框，边距
- CSS基础:text-overflow:ellipsis溢出文本显示省略号的详细方法
- CSS基础:text-overflow:ellipsis溢出文本的显示样式
- 【CSS基础】琐碎记录
- CSS基础：text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程
- CSS基础：text-overflow:ellipsis溢出文本显示省略号的详细方法
- CSS学习笔记（1）CSS基础语法/字体/文本
- CSS基础：text-overflow:ellipsis溢出文本显示省略号的详细方法_CSS教程
- 【CSS基础】琐碎记录<三>
- CSS基础:text-overflow:ellipsis溢出文本的显示样式