CSS学习笔记——字体属性和文本属性

Posted 2021-06-15 UDK_KL.

目录

• 字体属性
• • 字体
  • 字体大小
  • 字体粗细
  • 字体样式
  • 字体复合属性
• 文本属性
• • 文本颜色
  • 文本对齐
  • 文本装饰
  • 文本缩进
  • 行间距

字体属性

字体

选择器{font-family:"字体名称";}

div{font-family:Arial,"Microsoft YaHei",Arial}

• 注意：
  1. 多个字体要用逗号分隔
  2. 名称为词组的字体要用单引号包括
  3. 多个字体可以提高兼容性，优先使用第一个能应用的字体，若都不能应用则使用浏览器默认字体

字体大小

选择器{font-size： 20px;}

• px像素大小是网页最常用的单位
• 不同浏览器默认大小不一样，尽量给出一个明确的字体大小

字体粗细

选择器{font-weight: 属性值}

属性	说明
normal	正常字体（number=400）
bold	粗体
bolder	比粗更粗
lighter	细体
number	100～900 不需要单位（最常使用）

字体样式

选择器{font-style: 属性值}

属性值	说明
normal	默认值
italic	斜体

• 最常用于让斜体的标签<em,i>改为正常字体

字体复合属性

选择器
{
	font: font-style font-weight font-size/line-height font-family
	font: 属性值1 属性值2 ...
}

• 字体属性顺序不能变
• 不需要的属性可以省略但是font-size/line-height属性和font-family不能省略

文本属性

文本颜色、行间距、对齐等

文本颜色

选择器{color:颜色}

作用	属性值
预定义的颜色	red, blue, green, pink等
十六进制颜色表示法	#FF0000, #FF6600
RGB代码	rgb(255,0,0)

文本对齐

• 水平对齐

  text-align

  选择器{text-align: 属性值}
  

  属性值	作用
  left	左对齐（默认）
  right	右对齐
  center	居中对齐

文本装饰

选择器{text-decoration: 属性值}

属性值	说明
none	没有装饰（默认）
underline	下划线
overline	上划线
line-through	删除线

文本缩进

段落首行缩进

选择器{text-indent: 数值px/em }

em：相对单位，当前元素的一个文字大小

行间距

包含上下间距

选择器{line-height: 行高}

行高由文子高度和上下两部分间距组成