text-decoration
-
text-decoration用于设置文字的装饰线
- decoration是装饰/装饰品的意思;
-
text-decoration有如下常见取值:
none
:无任何装饰线- 可以去除a元素默认的下划线
underline
:下划线overline
:上划线line-through
:中划线(删除线)
-
a元素有下划线的本质是被添加了text-decoration属性
<style>
div {
text-decoration: underline;
}
p {
text-decoration: overline;
}
h1 {
text-decoration: line-through;
}
/* 去除a标签原有的下划线 */
a {
text-decoration: none;
}
</style>
text-transform
- text-transform用于设置文字的大小写转换
- Transform单词是使变形/变换(形变);
- text-transform有几个常见的值:
capitalize
:(使首字母大写)将每个单词的首字符变为大写uppercase
:(大写字母)将每个单词的所有字符变为大写lowercase
:(小写字母)将每个单词的所有字符变为小写none
:没有任何影响
- 实际开发中用JavaScript代码转化的更多.
text-indent
text-indent
用于设置第一行内容的缩进
text-indent
: 2em; 刚好是缩进2个文字
em: 相对值,相对于父元素的值,2em表示相对于父元素的2倍
text-align(重要)
-
text-align
: 直接翻译过来设置文本的对齐方式; -
MDN
: 定义行内内容(例如文字)如何相对它的块父元素对齐; -
常用的值
- left:左对齐
- right:右对齐
- center:正中间显示
- justify:两端对齐
-
W3C中的解释:
text-align官方解释:它用作用于行内级元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div.text {
/* 文本居中 */
text-align: center;
}
div.img {
/* 图片居中 */
text-align: center;
}
div.block {
/* 给块级元素居中 无效*/
text-align: center;
}
div.content {
width: 300px;
height: 300px;
background-color: skyblue;
/* 块级元素居中 */
margin: 0 auto;
}
/*justify演示*/
p {
width: 300px;
background-color: orange;
text-align: justify;
}
</style>
</head>
<body>
<div class="text">我是div元素</div>
<div class="img">
<img src="../../images/diqiu.jpg" alt="地球">
</div>
<div class="block">
<div class="content">块级元素</div>
</div>
<p>
This CSS module defines properties for text manipulation and specifies their processing model. It covers line breaking, justification and alignment, white space handling, and text transformation. why
</p>
</body>
</html>
word/letter-spacing
letter-spacing
、word-spacing
分别用于设置字母、单词之间的间距
- 默认是0,可以设置为负数