背景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
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;
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
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: 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
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;
background-position: 25% 75%;
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;
background-position: 0 0, center;
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;
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
text-shadow: 1px 1px 2px black;
text-shadow: #fc0 1px 0 10px;
text-shadow: 5px 5px #558abb;
text-shadow: white 2px 5px;
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/