CSS --文本

CSS文本属性可以定义文本的外观,通过文本属性可以改变文本的颜色、字符间距、文本对齐、文本缩进等等。

1.规定字符间距

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <title> This is my HTML</title>
    <!-- 字符缩进 -->
    <style type="text/css">
        h1 {letter-spacing: -0.5em}
        h4 {letter-spacing: 10px}
    </style>
</head>
<body>
    <h1>字符缩进0.5em</h1>
    <h4>字符缩进10px</h4>
</body>
</html>

2.对齐文本

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <title> This is my HTML</title>
    <!-- 文本对齐 -->
    <style type="text/css">
        h1 {text-align: center;}
        h2 {text-align: left;}
        h3 {text-align: right;}
    </style>
</head>
<body>
    <h1>居中对齐</h1>
    <h2>左对齐</h2>
    <h3>右对齐</h3>
</body>
</html>

3.修饰文本(文字的顶部、中间、底部添加横线)

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <title> This is my HTML</title>
    <!-- 文本对齐 -->
    <style type="text/css">
        h1 {text-decoration: overline;}
        h2 {text-decoration: line-through;}
        h3 {text-decoration: underline;}
        h4 {text-decoration: blink;}
    </style>
</head>
<body>
    <h1>文字上面添加横线</h1>
    <h2>文字中间添加横线</h2>
    <h3>文字下面添加横线</h3>
    <h4>文字闪烁</h4>
</body>
</html>


你可能感兴趣的:(CSS --文本)