文本与字体

1. 文本属性

1-1 文本颜色

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

颜色是通过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; 
}

1-3 字符间距

letter-spacing 属性增加或减少字符间的空白（字符间距）

• normal：默认。规定字符间没有额外的空间
• length：定义字符间的固定空间（允许使用负值）
• inherit：规定应该从父元素继承 letter-spacing 属性的值

h1 {
    letter-spacing: 2px;
    /* 字符间距2px */
    
    letter-spacing: -2px;
    /* 字符间距-2px */
}

汉字的间隔调节也是用 letter-spacing 来实现的。

因为中文段落里字与字之间没有空格，因而 word-spacing 通常起不到调整间距的作用

/* 设置中文汉字之间的间距用 letter-spacing */
<h1>你好 中国</h1>

h1 {
    letter-sapcing: 20px;
}

1-4 行高

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

• normal：默认。设置合理的行间距
• number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距
• length：设置固定的行间距
• %：基于当前字体尺寸的百分比行间距
• inherit：规定应该从父元素继承 line-height 属性的值

h1 {
    /* 行高为200% 是字体尺寸的2倍 */
    line-height: 200%;
    
    /* 行高为字体尺寸 * 1.8 */
    line-height: 1.8;
        
    /* 行高为20px */
    line-height: 20px;
}

1-5 文本水平对齐

text-align 属性指定元素文本的水平对齐方式

• left ：把文本排列到左边。默认值：由浏览器决定
• right：把文本排列到右边
• center：把文本排列到中间
• justify： 使文本展开，改变单词之间的差距，使所有文本行的宽度相同。
• inherit：规定应该从父元素继承 text-align 属性的值

h1 {
    /* 左对齐|右对齐|居中对齐|文本行的宽度相同 */
    text-align: left|right|center|justify;
}

1-6 文本装饰

text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等

text-decoration 属性是以下三种属性的简写：

• text-decoration-line

  • none：默认值。规定文本修饰没有线条。
  • underline：规定文本的下方将显示一条线
  • overline：规定文本的上方将显示一条线
  • line-through：规定文本的中间将显示一条线
  • initial：设置该属性为它的默认值
  • inherit：从父元素继承该属性

h1 {
    text-decoration-line: none|underline|overline|line-through;
    /* 默认值没有文本装饰|下划线|上划线、删除线 */
}

• text-decoration-color 文本修饰的颜色 高版本浏览器支持
  • color：规定文本修饰的颜色
  • initial：设置该属性为它的默认值
  • inherit：从父元素继承该属性

h1 {
    text-decortion-color: color;
    /* 文本修饰的颜色 */
}

• text-decoration-style

  • solid 默认值。线条将显示为单线
  • double 线条将显示为双线
  • dotted 线条将显示为点状线
  • dashed 线条将显示为虚线
  • wavy 线条将显示为波浪线
  • initial 设置该属性为它的默认值
  • inherit 从父元素继承该属性

h1 {
    text-decortion-style: solid|double|dotted|dashed|wavy;
    /* 文本装饰样式 单实线|双实线|点状线|虚线|波浪线 */
}

text-decortion 语法

text-decortion: text-decortion-line text-decortion-color text-decortion-style;

1-7 文本缩进

text-indent 属性规定文本块中首行文本的缩进

负值是允许的。如果值是负数，将第一行左缩进

• length：定义固定的缩进。默认值：0
• %：定义基于父元素宽度的百分比的缩进
• inherit：定义基于父元素宽度的百分比的缩进

text-indent: length|百分比%|inherit;

h1 {
    /* 缩进20px 右缩进 */
    text-indent: 20px;
    
    /* 缩进父元素宽度的20% */
    text-indent: 20%;
    
    /* 缩进-20px 左缩进 */
    text-indent: -20px;
}

1-8 文本阴影

text-shadow 属性应用于阴影文本

• h-shadow：阴影与原始文本的水平偏移
• v-shadow：阴影与原始文本的垂直偏移
• blur：可选。模糊的距离半径
• color：可选。阴影的颜色

text-shadow 语法：

text-shadow: h-shadow v-shadow blur color;

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

1-9 文本大小写

text-transform CSS 属性指定如何将元素的文本大写。它可以用于使文本显示为全大写或全小写，也可单独对每一个单词进行操作

• none：默认。定义带有小写字母和大写字母的标准的文本
• capitalize：文本中的每个单词以大写字母开头
• uppercase：定义仅有大写字母
• lowercase：定义无大写字母，仅有小写字母
• inherit：规定应该从父元素继承 text-transform 属性的值

text-transform: none|capitalize|uppercase|lowercase|lowercase|inherit;

h1 {
    text-transform: capitalize;
    /* 首字母大写 */
}

1-10 文本垂直对齐

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

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐

允许指定负长度值和百分比值。这会使元素降低而不是升高

vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式

在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式

vertical-align: baseline|sub|super|top|text-top|middle|bottom|text-bottom|length|inherit;

h1 {
    vertical-align: 2px;
    /* 元素升高2px */
}

1-11 处理文本空白

white-space 属性用来设置如何处理元素中的空白

• normal：默认。空白会被浏览器忽略
• pre：空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标
• nowrap：文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止
• pre-wrap：保留空白符序列，但是正常地进行换行
• pre-line：合并空白符序列，但是保留换行符
• inherit：规定应该从父元素继承 white-space 属性的值

white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;

h1 {
    white-space: nowrap;
    /* 文本不换行 */
}

1-12 字间距

word-spacing 属性增加或减少字与字之间的空白

• normal：默认。定义单词间的标准空间
• length：定义单词间的固定空间
• inherit：规定应该从父元素继承 word-spacing 属性的值

word-spacing: normal|length|inherit;

letter-spacing 这个样式使用在英文单词时，是设置字母与字母之间的间距

如果想设置英文单词之间的间距，可以使用 word-spacing 来实现

/* 设置英文单词之间的间距用 word-spacing */
<h1>word spacing</h1>

h1 {
    word-spacing: 20px;
}

2. 字体属性

2-1 font

font 简写属性在一个声明中设置所有字体属性

font-size 和 font-family 的值是必需的。如果缺少了其他值，默认值将被插入

可设置的属性是（按顺序）：

• font-style：字体样式
• font-variant：设置小型大写字母的字体显示文本
• font-weight ：字体粗细
• font-size/line-height ：字体大小/字体行高
• font-family：字体系列

/* 默认值 */
font：italic small-caps bold 12px arial,sans-serif

font: font-style|font-variant|font-weight|font-size/line-height|font/family;

2-2 字体系列

font - family 属性指定一个元素的字体

font-family 可以把多个字体名称作为一个"回退"系统来保存。如果浏览器不支持第一个字体，则会尝试下一个

CSS 定义了 5 个常用的字体名称: serif, sans-serif, monospace, cursive,和 fantasy

有两种类型的字体系列名称：

• family-name - 指定的系列名称，推荐使用系列名称
• generic-family - 通常字体系列名称

font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;

2-3 字体大小

font-size 属性用于设置字体大小

把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large

绝对值字体大小

• xx-small
• x-small
• small
• medium：默认
• large
• x-large
• xx-large

相对父元素字体大小

• smaller：把 font-size 设置为比父元素更小的尺寸
• larger：把 font-size 设置为比父元素更大的尺寸

长度值

• length：把 font-size 设置为一个固定的值

百分比

• %：把 font-size 设置为基于父元素的一个百分比值
• inherit：规定应该从父元素继承字体尺寸

/* <absolute-size>，绝对大小值 */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
 
/* <relative-size>，相对大小值 */
font-size: larger;
font-size: smaller;
 
/* <length>，长度值 */
font-size: 12px;
font-size: 0.8em;
 
/* <percentage>，百分比值 */
font-size: 80%;
 
font-size: inherit;

2-4 字体样式

font-style 属性指定文本的字体样式

• normal：默认值。浏览器显示一个标准的字体样式
• italic：浏览器会显示一个斜体的字体样式
• oblique：浏览器会显示一个倾斜的字体样式
• inherit：规定应该从父元素继承字体样式

font-style: normal|italic|oblique|inherit;

2-5 设置小型大写字母

font-variant 属性设置小型大写字母的字体显示文本

所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小

• normal：默认值。浏览器会显示一个标准的字体
• small-caps：浏览器会显示小型大写字母的字体
• inherit：规定应该从父元素继承 font-variant 属性的值

font-variant: normal| small-caps|inherit;

2-6 字体的粗细

font-weight 属性设置文本的粗细

• normal：normal
• bold： 定义粗体字符
• bolder：定义更粗的字符
• lighter：定义更细的字符
• 100 - 900：定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold
• inherit：规定应该从父元素继承字体的粗细

font-weight: normal|bold|bolder|lighter|100-900|inhert;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WoCgF2Gd-1649348307409)(C:\Users\阿匪\AppData\Roaming\Typora\typora-user-images\image-20211028214352499.png)]

3. css 长度单位

CSS 有几种表示长度的不同单位，对于某些 CSS 属性，允许使用负的长度

许多 CSS 属性接受“长度”值，诸如 width、margin、padding、font-size 等

长度单位有两种类型：绝对单位和相对单位

3-1 绝对单位

绝对长度单位是固定的，不会因为其他元素的尺寸变化而变化

绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）

像素或许被认为是最好的"设备像素"，而这种像素长度和你在显示器上看到的文字屏幕像素无关。px 实际上是一个按角度度量的单位。

96px = 6em = 1in = 2.54cm = 25.4mm = 12pc = 72pt

3-2 相对单位

相对长度单位没有一个固定的度量值，而是由其他元素尺寸来决定的相对值

3-3 单位换算

px : 像素

• 一个像素
• 对于 屏幕显示，它通常表示 一个设备像素(点)。然而，对于打印机和高分辨率屏幕，一个CSS像素 意味着 多个设备像素。
• 1px = 1英寸的1/96 = 1in / 96

**cm : 厘米 **

• 1厘米。1cm= 96 px / 2.54≈ 38px。

mm : 毫米

• 一毫米。1mm = 1cm / 10 ≈ 3.8px.(一厘米的 十分之一)

in : 英寸

• 一英寸。 1in = 2.54cm = 96px.

**pc : 派卡 **

• 12 点 活字 (1 pc 等于 12 点)
• 1pc = 12pt = 1in / 6 = 96px / 6 = 16px
• 派卡(Pica)，绝对长度单位。相当于 我国 新四号铅字的尺寸
• 铅字: 用铅、锑、锡合金铸成的 印刷或打字 用的活字

**pt : 点 **

• 磅（1/72 英寸）
• 1pt= 1in / 72.
• 点(Point)，指设备 能控制显示的 最小 物理单位，显示器上 一个个的点
• 从屏幕 在工厂生产出的那天起，它上面 设备像素点 就固定不变了，和 屏幕尺寸大小 有关