2021-09-13

美化网页元素

span标签

重点要突出的字凸显出来

 <style>
    #title{
      font-size:50px;
    }
  </style>
  
 <span id="title">Java</span>

字体样式

• font-family 字体

衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
草书字体（Cursive）- 模仿了人类的笔迹。
幻想字体（Fantasy）- 是装饰性/俏皮的字体。

• font-style 指定斜体文本

normal - 文字正常显示
italic - 文本以斜体显示
oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）

• font-variant

以 small-caps 字体（小型大写字母）显示文本
nomal表示正常

• font-size 设置文本的大小

绝对尺寸：
将文本设置为指定大小
不允许用户在所有浏览器中更改文本大小（可访问性不佳）
当输出的物理尺寸已知时，绝对尺寸很有用


相对尺寸：
设置相对于周围元素的大小
允许用户在浏览器中更改文本大小
注释：如果您没有指定字体大小，则普通文本（如段落）的默认大小为 16px（16px = 1em）

文本样式

1. 颜色

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

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

background-color 背景颜色

2. 文本对齐方式

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

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

3. 文本方向

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

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

4. 垂直对齐

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

5. 装饰

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

text-decoration: none; 通常用于从链接上删除下划线：

6. 文本转换

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

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

p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}

7. 文字缩进

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

8. 字母间距

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

9. 行高

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

p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}

10. 字间距

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

11. 空白

white-space 属性指定元素内部空白的处理方式

禁止文本换行
p {
  white-space: nowrap;
}

12. 文本阴影

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

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