一、text-decoration属性(文本样式:下划线、删除线、上删除线):
1.下划线(underline):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本相关的属性</title>
<base target="_self">
<style type="text/css">
p{
text-decoration: underline;
}
</style>
</head>
<body>
<p>我是段落</p>
</body>
</html>
2.删除线(line-through):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本相关的属性</title>
<base target="_self">
<style type="text/css">
p{
text-decoration: line-through;
}
</style>
</head>
<body>
<p>我是段落</p>
</body>
</html>
3.上删除线(overline):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本相关的属性</title>
<base target="_self">
<style type="text/css">
p{
text-decoration: overline;
}
</style>
</head>
<body>
<p>我是段落</p>
</body>
</html>
4.无(none)
最主要的作用是:去掉超链接下面的下划线。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本相关的属性</title>
<base target="_self">
<style type="text/css">
.xxx{
text-decoration: none;
}
</style>
</head>
<body>
<a href="#">我是段落1</a>
<br>
<br>
<a href="#" class="xxx">我是段落1</a>
</body>
</html>
效果图:
二、text-align属性(文本水平对齐):
重要的值:center(居中)、left(居左)、right(居右)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字相关的属性</title>
<base target="_self">
<style type="text/css">
p{
text-align: center/left/right;
}
</style>
</head>
<body>
<p>我是段落</p>
</body>
</html>
三、text-indent(文本缩进):
1.
一个em等于一个字的距离,两个em(2em)就是两个字的距离。
text-indent:2em;意思是文本缩进两个字的距离。
2
也可以用px,一个px就是一个像素。
text-indent:100px;意思是文本缩进100个像素格。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字相关的属性</title>
<base target="_self">
<style type="text/css">
p{
text-indent: 2em;
}
</style>
</head>
<body>
<p>我是段落</p>
</body>
</html>