文本与字体

文本与字体

1. 文本属性

属性	描述
color	设置文本颜色
direction	设置文本方向。
letter-spacing	设置字符间距
line-height	设置行高
text-align	对齐元素中的文本
text-decoration	向文本添加修饰
text-indent	缩进元素中文本的首行
text-shadow	设置文本阴影
text-transform	控制元素中的字母
unicode-bidi	设置或返回文本是否被重写
vertical-align	设置元素的垂直对齐
white-space	设置元素中空白的处理方式
word-spacing	设置字间距

1-1 文本颜色

**Tips：**对于W3C标准的CSS：如果你定义了颜色属性，你还必须定义背景色属性 background-color

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

• 颜色的名称 - 如: red
• HEX 十六进制值 - 如: ＃FF0000
• 一个RGB值 - 如: RGB(255,0,0)
• 一个RGBA值-如: rgba(255,0,0,0.7)
  • Red 红、Green 绿、Blue 蓝、Alpha 透明度
  • R、G、B 的取值范围是：0~255；透明度的取值范围是 0~1
• HSL值-如: **hsl(120,100%,25%) **
• HSLA值-如: hsla(240,100%,50%,0.05) a 表示透明度：0=透明；1=不透明
  • 色相（Hue）表示色环（即代表彩虹的一个圆环）的一个角度。
    饱和度和明度由百分数来表示
  • 饱和度（saturation）是一个百分比值，0％ 表示灰色阴影，而 100％ 是全色
  • 亮度（lightness）也是百分比，0％ 是黑色，50％ 是既不明也不暗，100％是白色a 表示透明度：0=透明；1=不透明

/* 颜色名 */
h1 {
   
    color: red;
}

/* hex 16进制 */
h1 {
   
    color: #fff;
}

/* rgb */
h1 {
   
    color: rgb(255,0,0);
}

/* rgba */
h1 {
   
    color: rgba(255,0,0,0);
}

/* hsl */
h1 {
   
    color: hsl(120,100%,25%);
}

/* hsla */
h1 {
   
    color: hsl(120,100%,25%,0.05);
}

1-2 文本方向

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

• ltr：默认。文本方向从左到右
• rtl：文本方向从右到左。
• inherit：规定应该从父元素继承 direction 属性的值

h1 {
   
    /* 文本方向从左到右 */
    direction: ltr;
    direction: rtl;
    /* 文本方向从右到左 */
    unicode-bidi: bidi-override;