网站（十二）CSS设置文本样式

最新推荐文章于 2024-04-11 20:24:06 发布

KeithAlexander

最新推荐文章于 2024-04-11 20:24:06 发布

阅读量222

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/KeithAlexander/article/details/80969375

版权

学习笔记专栏收录该内容

38 篇文章 0 订阅

订阅专栏

CSS设置文本样式

对齐文本：Text-align
- center
- left
- right
文本方向：Direction
- ltr
- rtl
指定字母间距：
- Letter-spacing
- word-spacing
- line-height
首行缩进：Text-indent
文本装饰：Text-decoration
- underline：下划线
- overline：上划线
- line-through：中划线
文本大小写转换：Text-transform
- capitalize：首字母大写
- uppercase：全大写
- lowercase：全小写
字体名称：Font-family
字体大小：Font-size
字体样式：Font-style
- oblique：倾斜字体
- italic：斜体字
指定字母是否以小型大写字母显示：Font-variant：small-caps
设置字体粗细：Font-weight：100~900,bold,bolder
创建文本阴影：Text-shadow：水平阴影距离，竖直阴影距离，模糊程度，颜色

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CreateTextStyle</title>
    <style type="text/css">
        .Servant{
            text-align: center;
            /*direction: rtl;*/
            letter-spacing: 10px;
            word-spacing: 100px;
            line-height: 100px;
            /*text-indent: 50px;*/
            text-decoration: underline;
            text-transform: uppercase;
        }
    </style>
</head>

<body>
<p class="Servant">My dear Saber</p>
<br>
<p class="Servant">My dear Caster</p>
</body>

</html>

Result

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CreateWordStyle</title>
    <style type="text/css">
        .Servant{
            text-align: center;
            font-family: serif;
            font-size: 40px;
            font-style: oblique;
            font-weight: bolder;
            text-shadow: 10px 10px 1px #CCCCCC;
        }
        .Master{
            font-variant: small-caps;
            text-align: center;
        }
    </style>
</head>

<body>
    <p class="Servant">Saber</p>
    <p class="Master">Wemia</p>
</body>

</html>