CSS 文本

font

属性定义及使用说明

• font 简写属性在一个声明中设置所有字体属性。
• 可设置的属性是（按顺序）:

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

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

注意:line - height属性设置行与行之间的空间。

属性值

值	描述
font-style	规定字体样式，参阅：[font-style](https://www.runoob.com/cssref/pr-font-font-style.html）中可能的值，
font-variant	规定字体异体，参阅：[font-variant](https://www.runoob.com/cssref/pr-font-font-variant.html）中可能的值，
font-weight	规定字体粗细，参阅：[font-weight](https://www.runoob.com/cssref/pr-font-weight.html）中可能的值，
font-size/line-height	规定字体尺寸和行高，参阅：[font-size](https://www.runoob.com/cssref/pr-font-font-size.html）和 [line-height](https://www.runoob.com/cssref/pr-dim_line-height.html）中可能的值，
font-family	规定字体系列，参阅：[font-family](https://www.runoob.com/cssref/pr-font-font-family.html）中可能的值，
caption	定义被标题控件（比如按钮，下拉列表等）使用的字体，
icon	定义被图标标记使用的字体，
menu	定义被下拉列表使用的字体，
message-box	定义被对话框使用的字体，
small-caption	caption 字体的小型版本，
status-bar	定义被窗口状态栏使用的字体，

font-style

属性定义及使用说明

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

属性值

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

font-variant

属性定义及使用说明

• font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
• font-variant 属性主要用于定义小型大写字母文本。

属性值

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

font-weight

属性定义及使用说明

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

属性值

值	描述
normal	默认值，定义标准的字符，
bold	定义粗体字符，
bolder	定义更粗的字符，
lighter	定义更细的字符，
number	定义由粗到细的字符，400 等同于 normal，而 700 等同于 bold,
inherit	规定应该从父元素继承字体的粗细，

font-size

属性定义及使用说明

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

属性值

值	描述
xx-small x-small small medium large x-large xx-large	把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large，默认值：medium,
smaller	把 font-size 设置为比父元素更小的尺寸，
larger	把 font-size 设置为比父元素更大的尺寸，
length	把 font-size 设置为一个固定的值，
%	把 font-size 设置为基于父元素的一个百分比值，
inherit	规定应该从父元素继承字体尺寸，

font-family

属性定义及使用说明

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

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

• family-name - 指定的系列名称：具体字体的名称，比如：“times”,“courier”,“arial”
• generic-family - 通常字体系列名称：比如：“serif”,“sans-serif”,“cursive”,“fantasy”,"monospace

使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用;这个属性没有指示任何字体下载，因此，强烈推荐使用一个通用字体系列名作为后路。

注意：每个值用逗号分开。

注意：如果字体名称包含空格，它必须加上引号，在HTML中使用"style"属性时，必须使用单引号。

font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;

Bootstrap默认font-familt

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

属性值

值	描述
family-name**generic-family	用于某个元素的字体族名称或/及类族名称的一个优先表，默认值：取决于浏览器，
inherit	规定应该从父元素继承字体系列，

line-height

设置元素的高度，元素默认垂直居中。

属性值

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

color

属性定义及使用说明

Color属性指定文本的颜色。

属性值

颜色值可以使用以下几种方式来设置：

值	描述	实例
颜色的名称	颜色的名称，比如red, blue, brown, lightseagreen等，不区分大小写，	color:red; /* 红色 */ color:black; /* 黑色 */ color:gray; /* 灰色 */ color:white; /* 白色 */ color:purple; /* 紫色 */
十六进制	十六进制符号 #RRGGBB 和 #RGB（比如 #ff0000),“#” 后跟 6 位或者 3 位十六进制字符（0-9, A-F),	#f03 #F03 #ff0033 #FF0033 rgb(255,0,51) rgb(255, 0, 51)
RGB，红-绿-蓝（red-green-blue (RGB))	规定颜色值为 rgb 代码的颜色，函数格式为 rgb(R,G,B)，取值可以是 0-255 的整数或百分比，	rgb(255,0,51) rgb(255, 0, 51) rgb(100%,0%,20%) rgb(100%, 0%, 20%)
RGBA，红-绿-蓝-阿尔法（RGBa)	RGBa 扩展了 RGB 颜色模式，它包含了阿尔法通道，允许设定一个颜色的透明度，a 表示透明度：0=透明;1=不透明，	rgba(255,0,0,0.1) /* 10% 不透明 */ rgba(255,0,0,0.4) /* 40% 不透明 */ rgba(255,0,0,0.7) /* 70% 不透明 */ rgba(255,0,0, 1) /* 不透明，即红色 */
HSL，色相-饱和度-明度（Hue-saturation-lightness)	色相（Hue）表示色环（即代表彩虹的一个圆环）的一个角度，饱和度和明度由百分数来表示， 100% 是满饱和度，而 0% 是一种灰度， 100% 明度是白色， 0% 明度是黑色，而 50% 明度是"一般的",	hsl(120,100%,25%) /* 深绿色 */ hsl(120,100%,50%) /* 绿色 */ hsl(120,100%,75%) /* 浅绿色 */
HSLA，色相-饱和度-明度-阿尔法（HSLa)	HSLa 扩展自 HSL 颜色模式，包含了阿尔法通道，可以规定一个颜色的透明度， a 表示透明度：0=透明;1=不透明，	hsla(240,100%,50%,0.05) /* 5% 不透明 */ hsla(240,100%,50%, 0.4) /* 40% 不透明 */ hsla(240,100%,50%, 0.7) /* 70% 不透明 */ hsla(240,100%,50%, 1) /* 完全不透明 */

letter-spacing

属性定义及使用说明

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

属性值

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

outline

属性定义及使用说明

• outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
• outline简写属性在一个声明中设置所有的轮廓属性。
• 可以设置的属性分别是（按顺序）:outline-color, outline-style, outline-width
• 如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的。

属性值

值	描述
outline-color	规定边框的颜色，参阅：[outline-color](https://www.runoob.com/cssref/pr-outline-color.html）中可能的值，
outline-style	规定边框的样式，参阅：[outline-style](https://www.runoob.com/cssref/pr-outline-style.html）中可能的值，
outline-width	规定边框的宽度，参阅：[outline-width](https://www.runoob.com/cssref/pr-outline-width.html）中可能的值，
inherit	规定应该从父元素继承 outline 属性的设置，

white-space

属性定义及使用说明

white-space属性指定元素内的空白怎样处理。

属性值

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

word

word-break

属性定义及使用说明

• word-break属性指定非CJK脚本的断行规则。
• 提示:CJK脚本是中国，日本和韩国（“中日韩”）脚本。

语法

word-break: normal|break-all|keep-all;

值	描述
normal	使用浏览器默认的换行规则，
break-all	允许在单词内换行，
keep-all	只能在半角空格或连字符处换行，

word-spacing

属性定义及使用说明

• word-spacing属性增加或减少字与字之间的空白。
• 注意：负值是允许的。

属性值

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

word-wrap

属性值

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

语法

word-wrap: normal|break-word;

值	描述
normal	只在允许的断字点换行（浏览器保持默认处理）,
break-word	在长单词或 URL 地址内部进行换行，

text

text-align

属性定义及使用说明

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

属性值

值	描述
left	把文本排列到左边，默认值：由浏览器决定，
right	把文本排列到右边，
center	把文本排列到中间，
justify	实现两端对齐文本效果，
inherit	规定应该从父元素继承 text-align 属性的值，

text-decoration

属性定义及使用说明

• text-decoration 属性规定添加到文本的修饰，下划线，上划线，删除线等。
• text-decoration 属性是以下三种属性的简写：
  • text-decoration-line
  • text-decoration-color
  • text-decoration-style

语法

/*关键值*/
text-decoration: none;                     /*没有文本装饰*/
text-decoration: underline red;            /*红色下划线*/
text-decoration: underline wavy red;       /*红色波浪形下划线*/

/*全局值*/
text-decoration: inherit;
text-decoration: initial;
text-decoration: unset;

属性值

值	描述
none	默认，定义标准的文本，
underline	定义文本下的一条线，
overline	定义文本上的一条线，
line-through	定义穿过文本下的一条线，
blink	定义闪烁的文本，
inherit	规定应该从父元素继承 text-decoration 属性的值，

text-indent

属性定义及使用说明

• text-indent 属性规定文本块中首行文本的缩进。
• 注意：负值是允许的，如果值是负数，将第一行左缩进。

属性值

值	描述
length	定义固定的缩进，默认值：0,
%	定义基于父元素宽度的百分比的缩进，
inherit	规定应该从父元素继承 text-indent 属性的值，

text-justify

属性定义及使用说明

• text-justify属性指定文本对齐设置为"justify"的理据。
• 此属性指定应怎样对齐文本以及对齐间距。

语法

text-justify: auto|inter-word|inter-ideograph|inter-cluster|distribute|kashida|trim;

值	描述
auto	浏览器决定齐行算法，
none	禁用齐行，
inter-word	增加/减少单词间的间隔，
inter-ideograph	用表意文本来排齐内容，
inter-cluster	只对不包含内部单词间隔的内容（比如亚洲语系）进行排齐，
distribute	类似报纸版面，除了在东亚语系中最后一行是不齐行的，
kashida	通过拉伸字符来排齐内容，

text-overflow

属性定义及使用说明

text-overflow属性指定当文本溢出包含它的元素，应该发生什么。

语法

text-overflow: clip|ellipsis|string;

值	描述
clip	修剪文本，
ellipsis	显示省略符号来代表被修剪的文本，
string	使用给定的字符串来代表被修剪的文本，

text-shadow

属性定义及使用说明

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

语法

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

注意:text-shadow属性连接一个或更多的阴影文本，属性是阴影，指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来，已失时效的长度为0

值	描述
h-shadow	必需，水平阴影的位置，允许负值，
v-shadow	必需，垂直阴影的位置，允许负值，
blur	可选，模糊的距离，
color	可选，阴影的颜色，参阅 CSS 颜色值,

text-transform

属性定义及使用说明

text-transform 属性控制文本的大小写。

属性值

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