CSS学习记录08 - 技术栈

CSS文本颜色

文本颜色

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

颜色名-比如"red"
十六进制值-比如"#ff0000"
RGB值-比如："rgb（255,0,0)"等。

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

css 复制代码

body {
  color: blue;
}

文本颜色和背景色

举例：

css 复制代码

h1 {
  background-color: black;
  color: white;
}

CSS文本对齐

text-align 属性用于设置文本的水平对齐方式。文本可以左对齐或右对齐，或居中对齐。（如果文本方向是从左到右，则默认左对齐；如果文本方向是从右到左，则默认是右对齐）：

举例：

css 复制代码

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

当text-align 属性设置为"justify"后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的。

css 复制代码

div {
  text-align: justify;
}

文本方向

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

direction CSS属性用于设置文本、表格列和水平溢出的方向。对于从右到左书写的语言（如希伯来语或阿拉伯语），应将该属性设置为rtl ；对于从左到右书写的语言（如英语和大多数其他语言），则应将该属性设置为ltr。

该属性设置可以设置会计元素的文本方向，也可以设置右通过unicode-bidi属性创建的嵌入元素的方向。

unicode-bidi CSS属性和direction属性，决定如何处理文档中的双书写方向文本。unicode-bidi属性允许开发人员控制文本嵌入。

css 复制代码

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

垂直对齐

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

css 复制代码

img.top {
  vertical-align: top;
}

img.middle {
  vertical-align: middle;
}

img.bottom {
  vertical-align: bottom;
}

CSS文本装饰

text-decoration 属性用于设置或删除文本装饰。 text-decoration: none；通常用于从链接上删除下划线；

举例：

css 复制代码

a {
  text-decoration: none;
}

其他 text-decoration 值用于装饰文本:

css 复制代码

h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

CSS文本转换

text-transform 属性是用于指定文本中的大写和小写字母。它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写。

css 复制代码

p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}

CSS文字间距

文字缩进

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

css 复制代码

p {
  text-indent: 50px;
}

字母间距

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

css 复制代码

h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: -3px;
}

行高

line-height 属性用于指定行之间的间距：

css 复制代码

p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}

字间距

word-spacing 属性用于指定文本单词之间的间距。

css 复制代码

h1 {
  word-spacing: 10px;
}

h2 {
  word-spacing: -5px;
}

空白

white-space 属性指定元素内部空白的处理方式。此示例演示如何禁用元素内的文本换行：

css 复制代码

p {
  white-space: nowrap;
}

CSS文本阴影

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

举例：指定水平阴影（2px）和垂直阴影（2px）：

css 复制代码

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

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

css 复制代码

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

然后，向阴影添加模糊效果（5px):

css 复制代码

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

所有CSS文本属性

属性	描述
color	设置文本颜色。
direction	指定文本的方向 / 书写方向。
letter-spacing	设置字符间距。
line-height	设置行高。
text-align	指定文本的水平对齐方式。
text-decoration	指定添加到文本的装饰效果。
text-indent	指定文本块中首行的缩进。
text-shadow	指定添加到文本的阴影效果。
text-transform	控制文本的大小写。
text-overflow	指定应如何向用户示意未显示的溢出内容。
unicode-bidi	与 direction 属性一起使用，设置或返回是否应重写文本来支持同一文档中的多种语言。
vertical-align	指定文本的垂直对齐方式。
white-space	指定如何处理元素内的空白。
word-spacing	设置单词间距。

知识补充：

text-overflow属性规定当文本溢出包含元素时发生的事情。

CSS语法：

text-overflow: clip | ellipsis

css 复制代码

div.test
{
text-overflow:ellipsis;
}

值	描述
clip	修剪文本。
ellipsis	显示省略符号来代表被修剪的文本。