文字相关
text-decoration(常用)
- text-decoration用于设置文字的装饰线
有如下常见取值
- none：无任何装饰线
✓ 可以去除a元素默认的下划线
- underline：下划线
- overline：上划线
- line-through：中划线（删除线）
a元素有下划线的本质是被添加了text-decoration属性
text-transform(一般)
text-transform用于设置文字的大小写转换,Transform单词是使变形/变换(形变);
取值如下
- capitalize：(使…首字母大写, 资本化的意思)将每个单词的首字符变为大写
- uppercase：(大写字母)将每个单词的所有字符变为大写
- lowercase：(小写字母)将每个单词的所有字符变为小写
- none：没有任何影响
text-indent(一般)
text-indent用于设置第一行内容的缩进
text-indent: 2em; 刚好是缩进2个文字
18c81ac86e7.png
text-align(重要)
◼ text-align: 直接翻译过来设置文本的对齐方式;
◼ MDN: 定义行内内容（例如文字）如何相对它的块父元素对齐;
◼ 常用的值
- left：左对齐
- right：右对齐
- center：正中间显示
- justify：两端对齐
W3C中的解释:
18c81ada588.png
不仅文字可以设置,图片也可以设置,具体是针对行内标签,对块级标签无效
letter-spacing、word-spacing(一般)
◼ letter-spacing、word-spacing分别用于设置字母、单词之间的间距
- 默认是0，可以设置为负数
font-size(重要)
决定文字的大小
- 具体数值+单位
✓ 比如100px
✓ 也可以使用em单位(不推荐)：1em代表100%，2em代表200%，0.5em代表50%
-
百分比
✓ 基于父元素的font-size计算，比如50%表示等于父元素font-size的一半
font-family (重要, 不过一般仅设置一次)
font-family用于设置文字的字体名称
- 可以设置1个或者多个字体名称;
- 浏览器会选择列表中第一个该计算机上有安装的字体;
- 或者是通过 @font-face 指定的可以直接下载的字体。
18c81b275b0.png
font-weight(重要)
◼ font-weight用于设置文字的粗细（重量）
◼ 常见的取值:
◼ 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ：每一个数字表示一个重量
◼ normal：等于400
◼ bold：等于700
◼ strong、b、h1~h6等标签的font-weight默认就是bold
font-style(一般)
◼ font-style用于设置文字的常规、斜体显示
◼ normal：常规显示
◼ italic(斜体)：用字体的斜体显示(通常会有专门的字体)
◼ oblique(倾斜)：文本倾斜显示(仅仅是让文字倾斜)
◼ em、i、cite、address、var、dfn等元素的font-style默认就是itali
font-variant(了解)
◼ font-variant可以影响小写字母的显示形式
- variant是变形的意思;
◼ 可以设置的值如下
- normal：常规显示
- small-caps：将小写字母替换为缩小过的大写字母
line-height(常用)
◼ line-height用于设置文本的行高
◼ 行高可以先简单理解为一行文字所占据的高度
◼ 行高的严格定义是：两行文字基线（baseline）之间的间距
◼ 基线（baseline）：与小写字母x最底部对齐的线
18c81b47757.png
注意区分height和line-height的区别
- height：元素的整体高度
- line-height：元素中每一行文字所占据的高度
◼ 应用实例：假设div中只有一行文字，如何让这行文字在div内部垂直居中
-
让line-height等同于height
18c81b53f4c.png
font
◼ font是一个缩写属性
- font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写;
- font-style font-variant font-weight font-size/line-height font-family
◼ 规则:
- font-style、font-variant、font-weight可以随意调换顺序，也可以省略
- /line-height可以省略，如果不省略，必须跟在font-size后面
-
font-size、font-family不可以调换顺序，不可以省略
18c81b5caf0.png
网友评论