前端---css文字样式、背景

css文字样式

1、font-family 属性设置文本的字体系列。font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family：“宋体”。

2、font-size 属性设置文本的大小。

能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。

1.font-family: 指定字体样式
2.font-size:字体大小
3.font-style:指定文本的字体样式 属性：正常（normal） - 默认，正常显示文本 斜体(italic) - 以斜体字显示的文字 倾斜的文字(oblique)- 文字向一边倾斜
font-variant:以小型大写字体或者正常字体显示文本
属性：normal - 默认属性值，正常显示文本
small-caps -浏览器以小型大写字母显示
5.font-weight:指定字体粗细
属性：正常（normal） 加粗（bold）
6.@font-face 自定义引入字体
属性：
src：必需。定义字体文件的 URL。
font-stretch：可选。
定义如何拉伸字体。默认是 “normal”。
font-family:定义字体名字
text_shadow:文本阴影

文本样式

三级目录

1、text-decoration：文本装饰
属性值：下划线：underline
删除线：line-througt
上划线：overline
无装饰：none
2、text-transform:文本大小写（针对英文段落）
属性值：小写：lowercase
大写：uppercase
只针对首字母大写：`capitalize` 
3、text-indent:文本缩进

4、text-align:文本对齐
属性值：center 居中
right 右对齐
justify 两端对齐
5、line-height：定义行高
注意： 每个标签都有一个 display 属性，block 代表块级标签，
inline 代表行级标签，如果要给行级标签设置宽和高，必须先
转成块级标签
6、letter-spacing：字与字之间的间距
7、word-spacing:定义词间距 （针对英文）
8、text-indent:2em; 文本缩进2个字符 应用于p段落标签上
9、text-align: center; 文本居中
10、word-wrap: break-word; 文本换行 
11、 white-space: nowrap;  文本不换行

背景样式

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

background-size 规定背景图片的尺寸。
像素/百分比设置宽高
cover:把背景图像扩展至足够大，以使背景图像完全覆盖
背景区域。
contain 把图像图像扩展至最大尺寸，以使其宽度和高度

background-attachment: fixed;背景固定
background-origin:content-box; 背景盒模型定位默认从padding开始定位
background-clip 背景裁剪。
border-box 背景被裁剪到边框盒
padding-box 背景被裁剪到内边距框
content-box 背景被裁剪到内容框
background-origin 规定背景图片的定位区域
padding-box 背景图像相对与内边距框来定位。
border-box 背景图像相对于边框盒来定位。
content-box 背景图像相对于内容框来定位。

边框

border 简写属性，用于把针对四个边的属性设置在一个声明
border-width 简写属性，用于为元素的所有边框设置宽度，或
者单独地为各边边框设置宽度。
常用单位为像素(px)、em。
thin 细的边框。/medium 默认/thick 定义粗的边框。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-color 简写属性，设置元素的所有边框中可见部分的颜
色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一
个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。（任何方向的颜色宽度都可以设置）
border-radius 设置所有四个 border-radius 属性的简写属性

none 定义无边框。
dotted 定义点状边框
dashed 定义虚线
solid 定义实线。
groove 定义 3D 凹槽边框。
ridge 定义 3D 垄状边框。
inset 定义 3D inset 边框。
outset 定义 3D outset 边框。

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

阴影

实现阴影效果，一般是通过box-shadow属性来设置

box-shadow 向方框添加一个或多个阴影。
none： 无阴影。
阴影水平偏移值/阴影垂直偏移值/阴影模糊值/阴影外延
值/阴影的颜色/inset 内阴影(默认值为 outset)