CSS学习笔记（五）CSS 文本

最新推荐文章于 2023-01-20 14:06:14 发布

〔晴【天】º〕

最新推荐文章于 2023-01-20 14:06:14 发布

阅读量274

点赞数

分类专栏：前端学习文章标签： css html

本文链接：https://blog.csdn.net/qq_43625134/article/details/116852310

版权

前端学习专栏收录该内容

34 篇文章 1 订阅

订阅专栏

CSS 文本

文本颜色

color 属性用于设置文本的颜色。颜色由以下值指定：

颜色名 - 比如 “red”
十六进制值 - 比如 “#ff0000”
RGB 值 - 比如 “rgb(255,0,0)”

页面的默认文本颜色是在 body 选择器中定义的。

CSS 文本对齐

文本对齐
text-align 属性用于设置文本的水平对齐方式。

文本可以左对齐或右对齐，或居中对齐。

下例展示了居中对齐以及左右对齐的文本（如果文本方向是从左到右，则默认为左对齐；如果文本方向是从右到左，则默认是右对齐）：

<!DOCTYPE html>
<html>

<head>
    <style>
        h1 {
            text-align: center;
        }

        h2 {
            text-align: left;
        }

        h3 {
            text-align: right;
        }
    </style>
</head>

<body>

    <h1>标题 1（居中对齐）</h1>
    <h2>标题 2（左对齐）</h2>
    <h3>标题 3（右对齐）</h3>

    <p>上面的三个标题是居中、左和右对齐。</p>

</body>

</html>

结果：
在这里插入图片描述
当 text-align 属性设置为 “justify” 后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中）：

文本方向
direction 和 unicode-bidi 属性可用于更改元素的文本方向：

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

垂直对齐
vertical-align 属性设置元素的垂直对齐方式。
实例

img.top {
  vertical-align: top;
}

img.middle {
  vertical-align: middle;
}

img.bottom {
  vertical-align: bottom;
}

CSS 文字装饰

文字装饰
text-decoration 属性用于设置或删除文本装饰。

text-decoration: none; 通常用于从链接上删除下划线：
其他 text-decoration 值用于装饰文本：

h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

结果：
在这里插入图片描述
注释：建议不要在非链接文本加下划线，因为这经常会使读者感到困惑。

CSS 文本转换

文本转换
text-transform 属性用于指定文本中的大写和小写字母。

它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写：

<!DOCTYPE html>
<html>

<head>
    <style>
        p.uppercase {
        	/* 大写 */
            text-transform: uppercase;
        }

        p.lowercase {
        	/* 小写 */
            text-transform: lowercase;
        }

        p.capitalize {
        	/* 首字母大写 */
            text-transform: capitalize;
        }
    </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>

</body>

</html>

结果：
在这里插入图片描述

CSS 文字间距

文字缩进
text-indent 属性用于指定文本第一行的缩进：
实例

p {
  text-indent: 50px;
}

字母间距
letter-spacing 属性用于指定文本中字符之间的间距。

下例演示如何增加或减少字符之间的间距：
实例

h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: -3px;
}

结果：
在这里插入图片描述
行高
line-height 属性用于指定行之间的间距：

<!DOCTYPE html>
<html>

<head>
    <style>
        p.small {
            line-height: 0.7;
        }

        p.big {
            line-height: 1.8;
        }
    </style>
</head>

<body>

    <p>
        这是有标准行高的段落<br>
        大多数浏览器中的默认行高大概是 110% 到 120%。<br>
    </p>

    <p class="small">
        这是行高更小的段落。<br>
        这是行高更小的段落。<br>
    </p>

    <p class="big">
        这是行高更大的段落。<br>
        这是行高更大的段落。<br>
    </p>

</body>

</html>

结果：
在这里插入图片描述
字间距
word-spacing 属性用于指定文本中单词之间的间距。
实例

h1 {
  word-spacing: 10px;
}

h2 {
  word-spacing: -5px;
}

结果：
在这里插入图片描述
空白
white-space 属性指定元素内部空白的处理方式。

此例演示如何禁用元素内的文本换行：
实例

p {
  white-space: nowrap;
}

CSS 文本阴影

文本阴影
text-shadow 属性为文本添加阴影。

最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）

h1 {
  text-shadow: 2px 2px;
}

接下来，向阴影添加颜色（红色）：

h1 {
  text-shadow: 2px 2px red;
}

然后，向阴影添加模糊效果（5px）：

h1 {
  text-shadow: 2px 2px 5px red;
}

效果：
在这里插入图片描述

所有 CSS 文本属性

在这里插入图片描述

〔晴【天】º〕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS学习笔记（五）CSS 文本

CSS 文本文本颜色color 属性用于设置文本的颜色。颜色由以下值指定：颜色名 - 比如 “red”十六进制值 - 比如 “#ff0000”RGB 值 - 比如 “rgb(255,0,0)”页面的默认文本颜色是在 body 选择器中定义的。CSS 文本对齐文本对齐text-align 属性用于设置文本的水平对齐方式。文本可以左对齐或右对齐，或居中对齐。下例展示了居中对齐以及左右对齐的文本（如果文本方向是从左到右，则默认为左对齐；如果文本方向是从右到左，则默认是右对齐）：<
复制链接

扫一扫

专栏目录