CSS属性

1.最基础的CSS属性

font-size 文字大小
color 前景色(文字颜色)
background-color 背景色
width 宽度
height 高度

background-color决定背景色

color属性用来设置文本内容的前景色

包括文字、装饰线、边框、外轮廓等的颜色

2.CSS文本属性

2.1 text-decoration(常用)

text-decoration 用于设置文字的装饰线

text-decoration有如下常见取值:

• none：无任何装饰线

• 可以去除a元素默认的下划线

• underline：下划线

• overline：上划线

• line-through：中划线（删除线）

2.2 text-transform(一般)

text-transform用于设置文字的大小写转换

text-transform有几个常见的值:

• capitalize：(使…首字母大写)将每个单词的首字符变为大写

• uppercase：(大写字母)将每个单词的所有字符变为大写

• lowercase：(小写字母)将每个单词的所有字符变为小写

• none：没有任何影响

2.3 text-indent(一般)

• text-indent用于设置第一行内容的缩进
• text-indent: 2em 刚好是缩进2个文字

2.4 text-align(重要)

text-align: 定义行内内容（例如文字）如何相对它的块父元素对齐

常用的值

• left：左对齐

• right：右对齐

• center：正中间显示

• justify：两端对齐

2.5 letter-spacing、word-spacing(一般)

letter-spacing、word-spacing分别用于设置字母、单词之间的间距

• 默认是0，可以设置为负数

3.CSS字体属性

3.1 font-size(重要)

font-size 决定文字的大小

常用的设置

• 具体数值+单位

• 比如100px

• 也可以使用em单位(不推荐)：1em代表100%，2em代表200%，0.5em代表50%

• 百分比

• 基于父元素的font-size计算，比如50%表示等于父元素font-size的一半

3.2 font-family (重要, 不过一般仅设置一次)

font-family用于设置文字的字体名称

• 可以设置1个或者多个字体名称

• 浏览器会选择列表中第一个该计算机上有安装的字体

• 或者是通过 @font-face 指定的可以直接下载的字体

3.3 font-weight(重要)

font-weight 用于设置文字的粗细（重量）

常见的取值:

• 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ：每一个数字表示一个重量

• normal：等于400

• bold：等于700

strong、b、h1~h6等标签的font-weight默认就是bold

3.4 font-style(一般)

font-style用于设置文字的常规、斜体显示

• normal：常规显示

• italic(斜体)：用字体的斜体显示(通常会有专门的字体)

• oblique(倾斜)：文本倾斜显示(仅仅是让文字倾斜)

  em、i、cite、address、var、dfn等元素的font-style默认就是italic

3.5 font-variant(了解)

font-variant可以影响小写字母的显示形式

• variant是变形的意思;

可以设置的值如下

• normal：常规显示

• small-caps：将小写字母替换为缩小过的大写字母

3.6 line-height(常用)

line-height用于设置文本的行高

• 行高可以先简单理解为一行文字所占据的高度

行高的严格定义是：两行文字基线（baseline）之间的间距

• 基线（baseline）：与小写字母x最底部对齐的线

注意区分height和line-height的区别

• **height：**元素的整体高度
• line-height：元素中每一行文字所占据的高度

应用实例：假设div中只有一行文字，如何让这行文字在div内部垂直居中

• 让line-height等同于height

3.7 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不可以调换顺序，不可以省