CSS中常用的简写模式

一、font属性简写

  1. font-style:字体样式
    normal 默认值。浏览器显示一个标准的字体样式。
    italic 浏览器会显示一个斜体的字体样式。
    oblique 浏览器会显示一个倾斜的字体样式。
    inherit 规定应该从父元素继承字体样式。
  2. font-variant:字体异体
    normal 默认值。浏览器会显示一个标准的字体。
    small-caps 浏览器会显示小型大写字母的字体。
    inherit 规定应该从父元素继承 font-variant 属性的值。
  3. font-weight:字体粗细
    normal 默认值。定义标准的字符。
    bold 定义粗体字符。
    bolder 定义更粗的字符。
    lighter 定义更细的字符。
    • 100
    • 200
    • 300
    • 400
    • 500
    • 600
    • 700
    • 800
    • 900
    定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。
    inherit 规定应该从父元素继承字体的粗细。
  4. 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 属性的值。
  5. font-family:

    font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。也就是说,font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。

    有两种类型的字体系列名称:

    • 指定的系列名称:具体字体的名称,比如:"times"、"courier"、"arial" “微软雅黑” “仿宋”。
    • 通常字体系列名称:比如:"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"

    提示:使用逗号分割每个值,并始终提供一个类族名称作为最后的选择。

注意:请按上面的顺序写,属性中间用空格隔开,font-size和line-height只能通过斜杠/组成一个值,不能分开写,font-size和font-family属性是必须的。

二、border属性简写

  1. border-width:边框宽度
    thin 定义细的边框。
    medium 默认。定义中等的边框。
    thick 定义粗的边框。
    length 允许您自定义边框的宽度。
    inherit 规定应该从父元素继承边框宽度。
  2. 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 规定应该从父元素继承边框样式。
  3. border-color:边框颜色
    color_name 规定颜色值为颜色名称的边框颜色(比如 red)。
    hex_number 规定颜色值为十六进制值的边框颜色(比如 #ff0000)。
    rgb_number 规定颜色值为 rgb 代码的边框颜色(比如 rgb(255,0,0))。
    transparent 默认值。边框颜色为透明。
    inherit 规定应该从父元素继承边框颜色。

注意:请按顺序来,属性中间用空格隔开,而且border-style必须要。

三、background属性简写

  1. background-color 背景颜色
    color_name 规定颜色值为颜色名称的背景颜色(比如 red)。
    hex_number 规定颜色值为十六进制值的背景颜色(比如 #ff0000)。
    rgb_number 规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0))。
    transparent 默认。背景颜色为透明。
    inherit 规定应该从父元素继承 background-color 属性的设置。
  2. background-image 背景图片 需要就用url()插入图片地址 。
  3. 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 值。

  4. background-size 背景图片大小
    length

    设置背景图像的高度和宽度。

    第一个值设置宽度,第二个值设置高度。

    如果只设置一个值,则第二个值会被设置为 "auto"。

    percentage

    以父元素的百分比来设置背景图像的宽度和高度。

    第一个值设置宽度,第二个值设置高度。

    如果只设置一个值,则第二个值会被设置为 "auto"。

    cover

    把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

    背景图像的某些部分也许无法显示在背景定位区域中。

    contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
  5. background-repeat图片是否重复
    repeat 默认。背景图像将在垂直方向和水平方向重复。
    repeat-x 背景图像将在水平方向重复。
    repeat-y 背景图像将在垂直方向重复。
    no-repeat 背景图像将仅显示一次。
    inherit 规定应该从父元素继承 background-repeat 属性的设置。
  6. background-origin 图片定位规则
    padding-box 背景图像相对于内边距框来定位。
    border-box 背景图像相对于边框盒来定位。
    content-box 背景图像相对于内容框来定位。
  7. background-clip 背景绘制规则
    border-box 背景被裁剪到边框盒。
    padding-box 背景被裁剪到内边距框。
    content-box 背景被裁剪到内容框。
  8. background-attachment背景图片固定或滚动
    scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
    fixed 当页面的其余部分滚动时,背景图像不会移动。
    inherit 规定应该从父元素继承 background-attachment 属性的设置。

注意:顺序最好这样写,看的清楚。background-color和background-image的附加属性区分好。

猜你喜欢

转载自www.cnblogs.com/yuyezhizhi/p/10919772.html
今日推荐