文本相关的属性

来源：互联网发布：人工智能视觉识别编辑：程序博客网时间：2024/05/22 14:17

一、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（文本缩进）：

一个em等于一个字的距离，两个em（2em）就是两个字的距离。

text-indent:2em;意思是文本缩进两个字的距离。

也可以用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>

0 0