CSS总结之背景和文字属性

背景background属性

注意：没有被背景图片覆盖的背景区域仍然会显示用background-color属性设置的背景颜色。此外，如果背景图片设置了透明或者半透明属性，衬在背景图片后面的背景色也会显示出来。

属性	说明	参数
background-color	定义背景颜色	颜色值或关键字"transparent"
background-image	定义背景图片	url(‘http://’);在绘制时，图像以 z 方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。
background-clip	设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。	border-box背景延伸至边框外沿（但是在边框下层）。padding-box背景延伸至内边距（padding）外沿。不会绘制到边框处。content-box背景被裁剪至内容区（content box）外沿。text 背景被裁剪成文字的前景色。
background-origin	规定了指定背景图片background-image 属性的原点位置的背景相对区域.	border-box背景图片的摆放以border区域为参考padding-box背景图片的摆放以padding区域为参考content-box背景图片的摆放以content区域为参考
background-repeat	定义背景图片是否重复以及其重复方式	默认值为repeat，即图像沿着x轴和y轴平铺，还可以指定沿着x轴平铺rpeat-x，沿着y轴平铺repeat-y，或者不平铺no-repeat，继承父元素该属性设置inherit。space 图像会尽可能得重复, 但是不会裁剪. 第一个和最后一个图像会被固定在元素(element)的相应的边上, 同时空白会均匀地分布在图像之间. background-position属性会被忽视, 除非只有一个图像能被无裁剪地显示. 只在一种情况下裁剪会发生, 那就是图像太大了以至于没有足够的空间来完整显示一个图像.round 随着允许的空间在尺寸上的增长, 被重复的图像将会伸展(没有空隙), 直到有足够的空间来添加一个图像. 当下一个图像被添加后, 所有的当前的图像会被压缩来腾出空间. 例如, 一个图像原始大小是260px, 重复三次之后, 可能会被伸展到300px, 直到另一个图像被加进来. 这样他们就可能被压缩到225px.
background-attachment	定义背景图片是否跟随内容滚动	fixed 背景相对于视口固定，local背景相对于元素的内容固定。scroll背景相对于元素本身固定
background-size	设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸	cover 值尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁），可能背景图片部分看不见。contain 尽可能的缩放背景并保持图像的宽高比例（图像不会被压缩），可能背景区部分空白。auto
background-position	定义背景图片的水平位置和垂直位置	关键字 center，用来居中背景图片。关键字 top, left, bottom, right 中的一个。用来指定把这个项目放在哪一个边缘。
background	可以用一条样式定义各种背景属性

background-clip

/* Keyword values */
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

/* Global values */
background-clip: inherit;
background-clip: initial;
background-clip: unset;

background-attachment

/* 关键 属性值 */
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

/* 全局 属性值 */
background-attachment: inherit;
background-attachment: initial;
background-attachment: unset;

background-size

/* 关键字 */
background-size: cover
background-size: contain

/* 一个值: 这个值指定图片的宽度，图片的高度隐式的为auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto

/* 两个值 */
/* 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto

/* 逗号分隔的多个值：设置多重背景 */
background-size: auto, auto     /* 不同于background-size: auto auto */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain

/* 全局属性 */
background-size: inherit;
background-size: initial;
background-size: unset;

background-image

background-image:
  linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
  url('https://mdn.mozillademos.org/files/7693/catfront.png');

background

background: content-box radial-gradient(crimson, skyblue);
background: no-repeat url("../../media/examples/lizard.png");
background: left 5% / 15% 60% repeat-x url("../../media/examples/star.png");
background: center / contain no-repeat url("../../media/examples/firefox-logo.svg"),
            #eee 35% url("../../media/examples/lizard.png");

background-position

/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* <percentage> values */
background-position: 25% 75%;

/* <length> values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* Multiple images */
background-position: 0 0, center;

/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

/* Global values */
background-position: inherit;
background-position: initial;
background-position: unset; 

CSS字体属性

字体属性	说明	参数
font-family	定义文本的字体系列	math显示数学相关字符字体fangsong,fantasy,serif
font-size	定义文本的字体尺寸	如：20px em = 希望得到的像素大小 / 父元素字体像素大小
font-variant	定义是否以小型大写字母的字体显示文本	默认为normal，一旦设置为small-caps，将所有小写字母变为大写。
font-style	定义文本的字体是否是斜体	默认值为norma，当设置为italic，显示斜体
font-weight	定义字体的粗细	只提供normal 和 bold 两种值。
font	可以一条样式定义各种字体属性

文本属性	说明	参数
color	文本颜色
direction	文本方向或者书写方向	ltr默认属性。可设置文本和其他元素的默认方向是从左到右。rtl可设置文本和其他元素的默认方向是从右到左。
letter-spacing	字符的间距
line-height	文本的行高
text-align	文本的水平对齐方式属性,设置元素中文本的水平方式	值有left，right，center，inherit。
text-decoration	给文本添加修饰效果	值有underline为添加下画线，overline添加上画线，line-through添加删除线，blink添加闪烁的效果,none无如何修饰,inherit。
text-indent	定义文本的首行缩进方式，默认值为0
text-shadow	为文本添加阴影效果	https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-shadow
text-transform	切换文本的大小写	capitalize这个关键字强制每个单词的首字母转换为大写uppercase这个关键字强制所有字符被转换为大写。lowercase这个关键字强制所有字符被转换为小写。none这个关键字阻止所有字符的大小写被转换。
white-space	设置如何处理元素内的空白	https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space
word-spacing	定义单词之间的距离

text-shadow

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black; 

/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px; 

/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;

/* color | offset-x | offset-y */
text-shadow: white 2px 5px;

/* offset-x | offset-y
/* Use defaults for color and blur-radius */
text-shadow: 5px 10px;

css尺寸属性	说明
width	设置元素的宽度
min-width	设置元素的最小宽度
max-width	设置元素的最大宽度
height	设置元素的高度
min-height	设置元素的最小高度
max-height	设置元素的最大高度

css列表属性表：

属性	说明
list-style-image	设置列表项标记样式为图像，none/inherit/url
list-style-position	设置列表项标记的位置，inside/outside/inherit
list-style-type	设置列表项标记的类型
list-style	可以用一条样式定义各种列表属性

list-style-type

值	说明
disc	实心圆
circle	空心圆
square	方块
decimal	数字
low-roman	小写罗马数字
upper-roman	大写罗马数字
low-alpha	小写字母
upper-alpha	大写字母
none	无标记
nherit	继承父元素的该设置

css表格属性表：

表格属性	说明	参数
border-collapse	设置是否合并表格边框	collapse相邻的单元格共用同一条边框separate默认值。每个单元格拥有独立的边框
border-spacing	设置相邻单元格边框之间的距离	https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-spacing
caption-side	设置表格标题的位置	top标题会出现在表格的上方。bottom标题会出现在表格的下方。left 标题会出现在表格的左侧。
empty-cells	设置是否显示表格中空单元格上的边框和背景	show边框和背景正常渲染。与普通元素一样。hide边框和背景被隐藏
table-layout	设置用于表格单元格列宽的设置方式	https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout

参考链接：https://blog.csdn.net/qq_36232611/article/details/105133381
https://developer.mozilla.org/zh-CN/docs/Web/CSS/