美化网页元素

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 背景颜色
  1. 文本对齐方式
text-align 属性用于设置文本的水平对齐方式。

当 text-align 属性设置为 "justify" 后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的
  1. 文本方向
direction 和 unicode-bidi 属性可用于更改元素的文本方向：

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}
  1. 垂直对齐
vertical-align 属性设置元素的垂直对齐方式。
  1. 装饰
text-decoration 属性用于设置或删除文本装饰。

text-decoration: none; 通常用于从链接上删除下划线：
  1. 文本转换
text-transform 属性用于指定文本中的大写和小写字母。

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

p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}
  1. 文字缩进
text-indent 属性用于指定文本第一行的缩进：
  1. 字母间距
letter-spacing 属性用于指定文本中字符之间的间距。
  1. 行高
line-height 属性用于指定行之间

p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}
  1. 字间距
word-spacing 属性用于指定文本中单词之间的间距
  1. 空白
white-space 属性指定元素内部空白的处理方式

禁止文本换行
p {
  white-space: nowrap;
}
  1. 文本阴影
text-shadow 属性为文本添加阴影。

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