CSS - 常见属性这篇文章详细介绍了CSS中与文本、字体、背景相关的属性。此外，还讨论了背景图片的设置、重复、大小、位

文本相关属性

text-decoration

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

可选值	说明
none	无装饰线
underline	下划线
line-through	中划线(删除线)
overline	上划线

text-transform

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

可选值	说明
capitalize	(使...首字母大写, 资本化的意思)将每个单词的首字符变为大写（注意是每个单词的首字母都转换为大写）
uppercase	(大写字母)将每个单词的所有字符变为大写
lowercase	(小写字母)将每个单词的所有字符变为小写
none	没有任何影响（默认值）

<style>
  .dv {
    text-transform: capitalize;
  }
</style>

<!-- output: My Name Is Klaus -->
<div class="dv">my name is klaus</div>

text-indent

text-indent用于设置第一行内容的缩进

单位可以是px也可以是em，一般设置为em

text-indent只会针对非行内元素生效

当text-indent的值为正数的时候，首行文本右移，当值为负数的时候，首行文本左移

.dv {
  font-size: 16px;
  /*
  	此时em就是font-size所设置的值，也就是字体的大小
  	2em ---> 16 * 2 ---> 首行缩进2个字符的距离
  */
  text-indent: 2em;
}

text-align

text-align: 用于设置行内级元素和行内块级元素在其块级父容器中的对齐方式

值	说明
left	左对齐 --- 默认值
right	右对齐
center	居中对齐
justify	两端对齐

text-align: justify

默认情况下, 当一个文本放不下的时候，并不会将这个单词拆分成2行进行显示，而是会把单词整体换行显示

而默认情况下文本的text-align的值为left 所以会导致右侧存在宽度不等的空白

当设置text-align的值为justify后

文本就会实现两端对齐 也就是文本是顶在两边的，原本的空格会被等分成每个单词之间的间隔

但是有一个是例外，那就是最后一行，它是不受justify值影响的

这是因为html最早是用来替换报纸内容的，而最后一行如果也实现两端对齐会不利于阅读

这也就是为什么只有一行的文本设置text-align:justify的时候，是无效果的

因为只有一行文本的时候，第一行文本同时也是最后一行文本

如果需要设置最后一行文本也实现相同的效果可以使用text-align-last属性

text-align-last属性的值和text-align属性的值是一致的

letter-spacing / word-spacing

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

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

cursor

cursor可以设置鼠标指针(光标)在元素上面时的显示样式

属性	值
auto	浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式默认值
default	由操作系统决定，一般就是一个小箭头
pointer	一只小手，鼠标指针挪动到链接上面默认就是这个样式
text	一条竖线，鼠标指针挪动到文本输入框上面默认就是这个样式
none	没有任何指针显示在元素上面

字体相关属性

font-size

font-size决定文字的大小

常用的设置:

具体数值+单位

px
浏览器默认字体大小是16px，最小是12px

font-size: 20px

em
1em的值为当前字体大小，如果当前没有设置字体大小的时候，那么就是其从父容器那边继承过来的字体大小

/* 浏览器默认大小为16px */
font-size: 2em /* 2 * 16(从父元素body继承过来的大小) = 32  */

/* 父容器的font-size的大小为20px  */

/* 子元素 */
font-size: 2em; /* 2 * 20 = 40px */
/* 
	因为在子元素上设置了自己的font-size
	所以对于子元素的width中的1em = 40px (也就是子元素的font-size)
*/
width: 2em; /*  2 * 2 * 20 = 80px */

百分比

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

font-family

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

可以设置1个或者多个字体名称;
浏览器会选择列表中第一个该计算机上有安装的字体
或者是通过 @font-face 指定的可以直接下载的字体

/*
  font-family 一般设置在body元素上，或者设置在reset.css或base.css中，然后在HTML中进行引入
  也就是说font-family只要设置一次就可以了，后边的元素只要从其父元素继承font-family属性即可
  这样可以保证这个网页中的字体是一致
*/
body {
  /*
  1. 多个字体之间使用逗号进行分割
  2. 如果第一个字体无法使用，会使用第二个字体，以此类推
  3. 如果所有的字体都无法使用的时候，那么浏览器就会使用默认字体
  （但是因为不同系统的默认字体不一致，因此导致网页的展示风格不可控，所以不推荐使用默认字体）
  4. 如果字体之间有空格 类似于Microsoft YaHei, 推荐使用引号进行包裹
  （1. 单引号和双引号无所谓 2. 不使用引号进行包裹也不会出错，但是推荐使用引号进行包裹以表示是一个整体）
  5. 对于中文字体，推荐使用Unicode编码格式来表示，虽然也可以用其对应中文表示，而如果使用Unicode表示字体的时候必须使用引号进行包裹
  6. 最后的sans-serif 表示的是浏览器默认非衬线字体（因为使用非衬线字体，阅读体验会更好，所以一般使用非衬线字体进行托底）
  */
  font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
}

windows默认的字体是微软雅黑

mac和ios默认字体是 平方-简

android 默认字体是 思源黑体

但是绝大多数的android字体有自己的默认字体，如小米的默认字体就是小米兰亭

font-weight

font-weight用于设置文字的粗细(权重)

常见的取值:

100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 :每一个数字表示一个重量
normal:等于400
bold:等于700
理论上font-weight可以取的值为1~1000中的任意一个值，可以是非整数（如124），也可以是小数(123.32)

详见mdn , 但是当font-weight的值为非整数或为小数的时候，浏览器兼容性并不是很好，部分浏览器会将其转换为

100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900中的某一个值后再进行解析，所以并不推荐进行设置

font-style

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

值	说明
normal	常规显示 --- 默认值
italic(斜体)	用字体的斜体显示 --- 在绝大多数字体库中有字体在加粗，倾斜时候的字体样式，当设置值为`italic`的时候，会自动去对应的字体库中应用对应字体所对应的斜体样式
oblique(倾斜)	文本倾斜显示 --- 直接将字体倾斜一定的角度

font-variant

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

值	说明
normal	常规显示 --- 默认值
small-caps	将小写字母替换为缩小过的大写字母 --- 也就是将字母转换为大写但是字体大小依旧是小资字母所对应的字体大小

line-height

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

为文本设置对应的行高可以避免文本和文本之间变得紧凑，有助于提升用户的阅读体验

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

而行高的严格定义是:两行文字基线(baseline)之间的间距

基线(baseline): 与小写字母最底部对齐的线 ---- 所以行高一般是以英文字符为基准进行计算的

底线距离顶线的距离被称之为行距
对于一行文本，顶线距离文本最上边的距离恒等于底线距离文本最小边的距离且两者之和恒等于行距

也就是一行文本的 上边距 恒等于一行文本的 下边距

因此当line-height === height的时候，可以实现文本垂直居中对齐

当然这也是line-height实现文本垂直居中对齐的局限性

使用line-height只能实现单行文本元素的垂直居中对齐

line-height ---- 元素中每一行文字所占据的高度

height --- 元素的整体高度
在一个容器中，只有有了内容，才会存在line-height

所以如果某一个容器，在没有任何内容的情况下，即使设置了行高，行高也不会生效
当line-height的值被设置为数值的时候，其表示的是当前font-size的倍数
```
font-size: 16px;
/* line-height最终的值为 2 * 16 = 32px  */
line-height: 2
```

对于任何一个文本

我们都可以看到在文本的上边和下边默认都有一定的间距，这些间距是由上下边距造成的

不是由于padding造成的，因为我们可以通过设置line-height来模拟上下边距的效果

但是他们又一个本质区别，行高是内容的一部分，所以其可以被选中

但是padding本身不是content的一部分，所以其不可以被选中

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

也就是如果使用font进行属性简写的时候，必须要有2个属性，也就是font-size和font-family

背景相关属性

background-image

background-image用于设置元素的背景图片

background-image会盖在background-color上

我们可以设置多个背景图，设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面

注意:如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的

background-repeat

background-repeat用于设置背景图片是否要平铺

值	说明
repeat	平铺 --- 默认值 --- x轴和y轴都进行平铺
no-repeat	不平铺
repeat-x	只在`水平方向`平铺
repeat-y	只在`垂直平方`向平铺

background-size

background-size用于设置背景图片的大小

值	说明
auto	默认值, 以背景图本身大小显示
contain	保持图片宽高比，缩放背景图，较长的一边铺满元素，可能出现没有被背景图覆盖的白底
cover	保持图片宽高比，缩放背景图，较短的一边铺满元素，以完全覆盖铺满元素, 可能背景图片部分看不见
`<percentage>`	百分比，相对于背景区(background positioning area)
`<length>`	具体的大小，比如100px

.box {
  /*
  	设置背景的宽度为20px，高度自适应
  	可以用在将图片设置为背景的时候，只设置宽度，让高度自适应
  */
  background-size: 20px auto;
}

background-position

background-position用于设置背景图片在水平、垂直方向上的具体位置

可以设置具体的数值比如 20px 30px
水平方向还可以设值:left、center、right
垂直方向还可以设值:top、center、bottom
如果只设置了1个方向，另一个方向默认是center

background-attachment

background-attachment决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动

值	说明
scroll	此关键属性值表示`背景相对于元素本身固定，而不是随着它的内容滚动`
local	此关键属性值表示`背景相对于元素的内容固定`。如果一个元素拥有滚动机制，`背景将会随着元素的内容滚动`
fixed	此关键属性值表示`背景相对于视口固定`。`即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动`

background

background是一系列背景相关属性的简写属性

.box {
  width: 300px;
  height: 300px;
  /*
  background: <background-image> || <background-color> || <background-position>/<background-size> <background-repeat> <background-attachment>
  1. background的任意属性都是可以省略的，且没有顺序要求
  2. background-size可以省略，如果不省略，background-size必须紧跟在background-position的后面，且以/进行分割
  */
  background: url(./images/avatar.jpg) #f00 top/contain no-repeat scroll;
}

background-image vs img

如果该图片是网页的重要组成部分，比如广告图片、LOGO图片、文章配图、产品图片，那么推荐使用img标签
如果该图片只是为了美化网页，没有该图片并不影响网页的整体阅读，此时推荐使用background-image

补充

溢出隐藏

单行文本溢出隐藏

.box {
  /* 给容器一个宽度, 这样文本才有可能溢出*/
  width: 300px;
  height: 300px;
  border: 1px solid red;
  /* 禁止文本换行 */
  white-space: nowrap;
  /* 溢出隐藏 */
  overflow: hidden;
  /* 文本溢出使用省略号 */
  text-overflow: ellipsis;
}

多行文本溢出隐藏

.box {
  width: 300px;
  border: 1px solid red;

  /* 设置溢出隐藏 和 溢出的时候，显示省略号 */
  overflow: hidden;
  text-overflow: ellipsis;

  /*
	  将盒子的渲染方式设置为-webkit-box（弹性伸缩盒子）
  	ps: -webkit-box是flex布局的前身
  */
  display: -webkit-box;

  /* 设置需要显示多少行文本 */
  -webkit-line-clamp: 2;

  /* 容器的排列方式为 垂直排布 */
  -webkit-box-orient: vertical;
}

使用border绘制三角形

border主要是用来给盒子增加边框的, 但是在开发中我们也可以利用边框的特性来实现一些形状

.box {
  width: 100px;
  height: 100px;
  background-color: purple;
  /* 默认情况下，边框颜色会盖在背景色上 */
  border: 50px solid red;
  /* 对于浏览器而言，各个边框的位置和大小会尽可能的均分 */
  border-right-color: green;
  border-bottom-color: yellow;
  border-left-color: orange;
}

如果我们将border宽度设置成宽度的50%，并将盒子的类型设置为border-box的时候，

盒子的四条边就会变成三角形

此时如果我们将其中三边的边框设置为transparent

就可以使用border绘制出一个三角形

.box {
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  border: 50px solid transparent;
  border-top-color: red;
  transform: rotate(180deg);
  transform-origin: center 25px;
}

其实我们可以利用border或者CSS的特性我们可以做出很多图形，具体可以参考CSS Tricks上的文章