一、font属性简写
- font-style:字体样式
normal 默认值。浏览器显示一个标准的字体样式。 italic 浏览器会显示一个斜体的字体样式。 oblique 浏览器会显示一个倾斜的字体样式。 inherit 规定应该从父元素继承字体样式。 - font-variant:字体异体
normal 默认值。浏览器会显示一个标准的字体。 small-caps 浏览器会显示小型大写字母的字体。 inherit 规定应该从父元素继承 font-variant 属性的值。 - font-weight:字体粗细
normal 默认值。定义标准的字符。 bold 定义粗体字符。 bolder 定义更粗的字符。 lighter 定义更细的字符。 - 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。 inherit 规定应该从父元素继承字体的粗细。 - font-size/line-height:字体大小和行高
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
把字体的尺寸设置为不同的尺寸,从 xx-small 到 xx-large。
默认值:medium。
smaller 把 font-size 设置为比父元素更小的尺寸。 larger 把 font-size 设置为比父元素更大的尺寸。 length 把 font-size 设置为一个固定的值。 % 把 font-size 设置为基于父元素的一个百分比值。 inherit 规定应该从父元素继承字体尺寸。 normal 默认。设置合理的行间距。 number 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。 length 设置固定的行间距。 % 基于当前字体尺寸的百分比行间距。 inherit 规定应该从父元素继承 line-height 属性的值。 - font-family:
font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。也就是说,font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。
有两种类型的字体系列名称:
- 指定的系列名称:具体字体的名称,比如:"times"、"courier"、"arial" “微软雅黑” “仿宋”。
- 通常字体系列名称:比如:"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"
提示:使用逗号分割每个值,并始终提供一个类族名称作为最后的选择。
注意:请按上面的顺序写,属性中间用空格隔开,font-size和line-height只能通过斜杠/组成一个值,不能分开写,font-size和font-family属性是必须的。
二、border属性简写
- border-width:边框宽度
thin 定义细的边框。 medium 默认。定义中等的边框。 thick 定义粗的边框。 length 允许您自定义边框的宽度。 inherit 规定应该从父元素继承边框宽度。 - border-style:边框样式
none 定义无边框。 hidden 与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。 dotted 定义点状边框。在大多数浏览器中呈现为实线。 dashed 定义虚线。在大多数浏览器中呈现为实线。 solid 定义实线。 double 定义双线。双线的宽度等于 border-width 的值。 groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。 ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。 inset 定义 3D inset 边框。其效果取决于 border-color 的值。 outset 定义 3D outset 边框。其效果取决于 border-color 的值。 inherit 规定应该从父元素继承边框样式。 - border-color:边框颜色
color_name 规定颜色值为颜色名称的边框颜色(比如 red)。 hex_number 规定颜色值为十六进制值的边框颜色(比如 #ff0000)。 rgb_number 规定颜色值为 rgb 代码的边框颜色(比如 rgb(255,0,0))。 transparent 默认值。边框颜色为透明。 inherit 规定应该从父元素继承边框颜色。
注意:请按顺序来,属性中间用空格隔开,而且border-style必须要。
三、background属性简写
- background-color 背景颜色
color_name 规定颜色值为颜色名称的背景颜色(比如 red)。 hex_number 规定颜色值为十六进制值的背景颜色(比如 #ff0000)。 rgb_number 规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0))。 transparent 默认。背景颜色为透明。 inherit 规定应该从父元素继承 background-color 属性的设置。 - background-image 背景图片 需要就用url()插入图片地址 。
- background-position 背景图片位置
- top left
- top center
- top right
- center left
- center center
- center right
- bottom left
- bottom center
- bottom right
如果您仅规定了一个关键词,那么第二个值将是"center"。
默认值:0% 0%。
x% y% 第一个值是水平位置,第二个值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。
如果您仅规定了一个值,另一个值将是 50%。
xpos ypos 第一个值是水平位置,第二个值是垂直位置。
左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。
如果您仅规定了一个值,另一个值将是50%。
您可以混合使用 % 和 position 值。
- background-size 背景图片大小
length 设置背景图像的高度和宽度。
第一个值设置宽度,第二个值设置高度。
如果只设置一个值,则第二个值会被设置为 "auto"。
percentage 以父元素的百分比来设置背景图像的宽度和高度。
第一个值设置宽度,第二个值设置高度。
如果只设置一个值,则第二个值会被设置为 "auto"。
cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。 - background-repeat图片是否重复
repeat 默认。背景图像将在垂直方向和水平方向重复。 repeat-x 背景图像将在水平方向重复。 repeat-y 背景图像将在垂直方向重复。 no-repeat 背景图像将仅显示一次。 inherit 规定应该从父元素继承 background-repeat 属性的设置。 - background-origin 图片定位规则
padding-box 背景图像相对于内边距框来定位。 border-box 背景图像相对于边框盒来定位。 content-box 背景图像相对于内容框来定位。 - background-clip 背景绘制规则
border-box 背景被裁剪到边框盒。 padding-box 背景被裁剪到内边距框。 content-box 背景被裁剪到内容框。 - background-attachment背景图片固定或滚动
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。 fixed 当页面的其余部分滚动时,背景图像不会移动。 inherit 规定应该从父元素继承 background-attachment 属性的设置。
注意:顺序最好这样写,看的清楚。background-color和background-image的附加属性区分好。