02-CSS样式（文本，背景，边框样式，line-height和vertical-align的区别）

本文链接：https://blog.csdn.net/qq_41067077/article/details/136928559

一、css文字样式

1.font-family:指定字体样式

2.font-size:字体大小
px、em（针对父字体大小）、（px/16=em） %、

3.font-style:指定文本的字体样式
属性：正常（normal） - 默认，正常显示文本
斜体(italic) - 以斜体字显示的文字
倾斜的文字(oblique)- 文字向一边倾斜
（和斜体非常类似，但不太支持）

4.font-variant:以小型大写字体或者正常字体显示文本
属性：normal - 默认属性值，正常显示文本
small-caps -浏览器以小型大写字母显示

5.font-weight:指定字体粗细
属性：正常（normal）加粗（bold）
100—900（400相当于normal/700相当于bold）

（CSS3 新增）

6.@font-face 自定义引入字体
属性：
src：必需。定义字体文件的 URL。
font-stretch：可选。
定义如何拉伸字体。默认是 "normal"。
font-family:定义字体名字

7.text_shadow:文本阴影

二、文本样式

①.text-decoration：文本装饰

属性值：下划线：underline
   删除线：line-througt
   上划线：overline
   无装饰：none

②.text-transform:文本大小写（针对英文段落）

属性值：小写：lowercase
大写：uppercase
只针对首字母大写：`capitalize`

③.text-indent:文本缩进

④.text-align:文本对齐

属性值：center 居中
right 右对齐
justify两端对齐

⑤.line-height：定义行高

注意：每个标签都有一个display属性，block代表块级标签，inline代表行级标签，如果要给行级标签设置宽和高，必须先转成块级标签

⑥.letter-spacing：字之间的间距

⑦.word-spacing:定义词间距（针对英文）

熟悉：
    with-space:设置元素空白方式 white-space: nowrap;/*不换行*/
    overflow:设置文本溢出效果direction:设置文本方向
    word-warp:允许对长的不可分割的单词进行分割转换至下一行 word-wrap: break-word;可能产生留白
    word-break......等等,强制分割 word-break: break-all;

三、CSS背景：

1.元素的背景属性：

background 简写属性，作用是将背景属性设置在一个声明中。
- background-attachment 背景图像是否固定或者随着页面的其余部分滚动。scroll默认值。/fixed 当页面的其余部分滚动时，背景图像不会移动。
- background-color 设置元素的背景颜色
- background-image 把图像设置为背景。
- background-position 设置背景图像的起始位置。
  - left/right/center/bottom/top 这几个属性值可以两两组合使用，如果只规定了一个关键词，那么第二个值将时"center"。
  - x% y% 第一个值是水平位置，第二个值是垂直位置;左上角是0% 0% 右上角是 100% 100%;如果仅规定了一个值，另一个值是50%。
- background-repeat 设置背景图像是否及如何重复。repeat/repeat-x/repeat-y/no-repeat

2.CSS3新增的背景属性：

background-size 规定背景图片的尺寸。
- 像素/百分比设置宽高
- cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
- contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
background-clip 规定背景的绘制区域。
- border-box背景被裁剪到边框盒
- padding-box 背景被裁剪到内边距框
- content-box 背景被裁剪到内容框
background-origin 规定背景图片的定位区域。
- padding-box 背景图像相对与内边距框来定位。
- border-box 背景图像相对于边框盒来定位。
- content-box 背景图像相对于内容框来定位。

四、CSS边框：

1.元素的边框属性：

border 简写属性，用于把针对四个边的属性设置在一个声明
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
- 常用单位为像素(px)、em。
- thin细的边框。/medium 默认/thick 定义粗的边框。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
- none 定义无边框。
- dotted 定义点状边框
- dashed 定义虚线
- solid 定义实线。
- groove 定义 3D 凹槽边框。
- ridge 定义 3D 垄状边框。
- inset 定义 3D inset 边框。
- outset 定义 3D outset 边框。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。

2.CSS3新增的边框属性：

border-radius 设置所有四个 border-radius 属性的简写属性。

* 同时设定四个角的圆角。
** 分别设定左上右下、左下右上圆角。
*** 分别设定左上、左下右上、右下圆角。
**** 分别设定左上、右上、右下、左下圆角。
- border-top-left-radius 左上角圆角边框。
- border-top-right-radius 右上角圆角边框。
- border-bottom-right-radius 右下角圆角边框。
- border-bottom-left-radius 左下角圆角边框。

border-image 设置所有 border-image属性的简写属性。

值	描述
border-image-source	用在边框的图片的路径
border-image-slice	图片边框向内偏移。
border-image-width	图片边框的宽度
border-image-outset	边框图像区域超出边框的量。
border-image-repeat	图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)