02-CSS样式（文本，背景，边框样式，line-height和vertical-align的区别）
一、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，默认值为455；其中455对应于常规值(normal)，722对应于加粗值(bold)。
（CSS3 新增）
6.********@font-face 自定义引入字体
属性：
src：必需。定义字体文件的 URL。
font-stretch：可选。
定义如何拉伸字体。默认是 "normal"。
font-family:定义字体名字
****7.****text_shadow :文本阴影
二、文本样式
①.text-decoration ：文本装饰
属性值设置包括以下几种常见操作符。
下划线标记用于突出显示文本内容。
删除符号通过line-througt表示。
上划线标记用于强调或标注重点内容。
非装饰模式则表示文本不带任何格式修饰。
②.text-transform :文本大小写（针对英文段落）
属性值：小写：lowercase
大写：uppercase
只针对首字母大写：capitalize
③.text-indent :文本缩进
④.text-align :文本对齐
属性值：center 居中
right 右对齐
justify两端对齐
⑤.line-height ：定义行高
如需进一步调整，请告知具体需求
⑥.letter-spacing ：字之间的间距
⑦.word-spacing: 定义词间距 （针对英文）
with-space 设置元素空白显示方式 white-space 设置元素空白方式 /不换行/
overflow 控制文本溢出效果 direction 设置文本方向
word-warp 允许将无法分割的长单词拆分为多行显示 word-wrap break-word 可能在段落末尾留有空格
word-break ...... 等等 强制将过长的文字拆分为多个段落进行显示 word-break break-all 会让文字在段落末尾自动断行并开始下一行
三、CSS背景：
1.元素的背景属性：
- background 简化属性用于将背景设置在一个声明块中。
- background-attachment 背景图像是否固定或者随着页面滚动而移动的位置设置，默认值为 /fixed（当页面滚动时固定位置）。
- background-color 背景颜色设置。
- background-image 背景图像设置。
- background-position 背景图像起始位置参数设置。
- 左边/右边/居中/底部/顶部等几个参数可两两组合使用；如果仅指定一个参数，则第二个参数默认为 center（中心）。
- 水平和垂直方向的位置可分别指定百分比值（x% y%），其中左上角为 0% 0%，右下角为 100% 100%；若仅指定一个百分比，则另一个参数默认为 50%。
- background-repeat 设置背景图像重复方式或模式，默认情况下不会重复（no-repeat）。
2.CSS3新增的背景属性：
- background-size 控制背景图片的尺寸设置。
- 指定宽度与高度，并以像素或百分比表示。
- background-clip 确定绘制背景的区域范围。
- 将裁剪区域设为边框盒边界。
- 将裁剪范围限定在内边距框内。
- 将裁剪范围限定在内容框内。
- background-origin 通过位置基准点来确定背景图片的定位区域。
- 通过内边距框确定图像的位置基准点。
- 基于边框盒确定图像的位置基准点。
- 相对于内容框来定位背景图片的位置基准点。
四、CSS边框：
1.元素的边框属性：
- border 的简写属性用于将针对四个边的所有属性在一个声明中设置。
- border-width 的简写属性不仅用于为整个元素的所有边框设定宽度，
- 而且也允许单独为各个边框设定宽度。
- 常见的单位包括像素（px）和ems（em）。
- "thin" 表示细边框，
- 默认值是 "medium"，
- 而"thick" 则代表粗边框。
- border-style 的简写属性可用来设定整个元素所有边框的样式，
- 也可以单独为各个边缘设定各自的样式。
- 选择项包括：
- none 表示无边框设计，
- dotted 代表点状边缘，
- dashed 是虚线效果，
- solid 是实线风格，
- groove 表示3D凹槽边缘，
- ridge 是3D凸出边缘，
- inset 是3D内凹边缘，
- outset 是3D外凸边缘。
- border-color 的简写属性用于设定整个元素所有可见部分的颜色，
- 或者分别对四个边缘指定颜色。
- border-bottom 的简写属性用于将下边缘的所有相关参数合并在一个声明中。
- border-bottom-color 设置元素下边缘的颜色。
- border-bottom-style 可以设定下边缘的样式选项。
- border-bottom-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) |
- box-shadow: The box-shadow property enables the layering of one to multiple shadows on a bounding box.
- none: Setting to none will result in no shadow being generated.
- Parameters include horizontal offset, vertical offset, blur radius, padding, color, and inset (with outset as default).
练习：利用边框做一个带边框的三角形（课堂练习）
五、line-height和vertical-align
1、文本的基本概念：
- 字体大小（font-size）：指上下两条水平基准线之间的垂直间距。
- 行距参数（line-height）：上下相邻两行文字的起始基准线间的垂直间隔。
- 基准线（base line）：并非汉字文字的最底部线条，在英文字体中是字母"x"底部对应的水平基准面。
- 行高（line-height）：指连续多行文字中间垂直方向的位置间距。
2、font-size与line-height之间的关系
- 当font-size等于line-height时，行距 = line-height - font-size = 0；
- 当font-size大于line-height时，则会出现行距为负值，则两行重叠
- 当font-size小于line-height时，行距会变大
3、vertical-align
默认情况下，图片，按钮，文字和单元格都可以用vertical-align属性。
- 只有元素属于inline或是inline-block ，vertical-align属性才会起作用。
4、inline元素的空隙问题
- 垂直空隙
解决办法：
· vertical-align: middle;
· 给父容器设置 font-size:0;
水平空隙
解决办法：
· 通过注释代替空白节点
· 给父容器设置 font-size:0;