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

Posted UDK_KL.

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS学习笔记——字体属性和文本属性相关的知识,希望对你有一定的参考价值。

目录

字体属性

字体

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

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

字体大小

选择器font-size: 20px;
  • px像素大小是网页最常用的单位
  • 不同浏览器默认大小不一样,尽量给出一个明确的字体大小

字体粗细

选择器font-weight: 属性值
属性说明
normal正常字体(number=400)
bold粗体
bolder比粗更粗
lighter细体
number100~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: 行高

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

以上是关于CSS学习笔记——字体属性和文本属性的主要内容,如果未能解决你的问题,请参考以下文章

九CSS字体属性与文本属性

css入门学习笔记

css入门学习笔记

如何更改文本的笔画粗细?

前端学习 -- Css -- 字体的几个属性学习

CSSCSS 文本样式 ② ( font 字体设置 | CSS 2.0手册使用 | font-weight 字体粗细设置 | font-style 字体斜体设置 | font 字体样式综合写法 )