CSS中的属性缩写

原创 2007年09月23日 13:16:00

Font 字体缩写 

font: font-style | font-variant | font-weight | font-size | line-height | font-family

例: p{font:italic normal bold 12pt/18pt 宋体;}
          不需要的参数可以用 normal 代替,因为CSS中各个属性的值写法并不是都相同,因此直接去掉某个参数不会影响顺序与值的关系.
          本例中12pt/18pt指的是font-size字号与line-height行高,使用反斜杠分割因为font-size与line-height的值有可能使用同一计量单位,为了保证CSS对两个值所对应的属性一致,必须使用反斜杠来分割两个数值.

padding margin(上左下右)

margin: margin-top | margin-right | margin-bottom | margin-left
padding:padding-top | padding-right | padding-bottom | padding-left

p{margin:20px;} 单独使用一个参数,将表示P对象周围的外边距都为20px.
p{margin:20px 10px;}使用两个参数是非常特殊的写法,表示对上下或者左右的样式控制,当前样式表示p对象的上下边距为20px,而左右边距为10px.
p{margin:20px 10px 100px;}使用3个参数表示上边距为20px,左右边距为10px,下边距为100px.
p{margin:120px 20px 10px 80px;}4个参数则是margin属性的完整写法表示 top:120px right:20px bottom:10px left:80px

padding与margin设置方法完全相同

Border边框缩写

border: border-width | border-style | color
border-top(top,right,bottom,left):border-width | border-style | color
border-width(width,color,style):top | right | bottom | left

list缩写

list-style: list-style-type | list-style-position | list-style-image

例: ul{list-style:disc outside none;}

background背景缩写

background: background-color | background-image | background - repeat | background-attachment | background-pasition

例: #content{background:#EDEDED url(img/bg.gif) no-repeat 30% 20px;}

css font的简写规则

一、字体属性主要包括下面几个 font-family,font-style,font-variant,font-weight,font-size,font font-family(字体族)...
  • u012054869
  • u012054869
  • 2016年09月02日 20:34
  • 1473

CSS的属性缩写

CSS字体属性: .mydiv { font-family:Verdana, Geneva, sans-serif; font-size:12px; font-weight:bold; line...
  • l402398703
  • l402398703
  • 2013年05月17日 01:49
  • 1099

css 常用属性缩写

使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #000000可以缩写为#000;#33669...
  • zgh33073364
  • zgh33073364
  • 2015年01月04日 18:00
  • 121

HTML5基础加强css样式篇(animation简写,控制多个动画,动画帧简写)(三十二)

1.animation简写例子: .box { /* .box 默认样式 */ margin: 2...
  • u010853130
  • u010853130
  • 2017年04月05日 16:01
  • 553

CSS中的各种缩写

摘要 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。 css缩写的主要规则如下: 颜色 color 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #000000可以缩写为#000...
  • myweishanli
  • myweishanli
  • 2013年08月11日 23:16
  • 638

CSS中的clear属性

首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流。如下图:              可以看出,即使div1的宽度很小,页面中一行可以容下div1...
  • zhll3377
  • zhll3377
  • 2014年04月14日 08:45
  • 4512

css 参考属性大全

动画属性 属性 描述 CSS @keyframes 定义一个动画,@keyframes定义的动画名称用来被animation-name所使用。 ...
  • wuxiaopeng_1986
  • wuxiaopeng_1986
  • 2016年05月24日 21:41
  • 581

jQuery教程之css() - 获取元素的一个或多个css属性值

获取一个属性值获取一个属性值时,直接传入这个属性的名字即可。例如我们要获取li这个元素的宽度,那么可以这样获取:var liWidth = $('li').css('width') ;console....
  • phoooob
  • phoooob
  • 2016年11月16日 10:08
  • 4195

关于css属性的优先级详细探索

本文解释部分css样式优先级的细节问题。涉及外联,内嵌,内联,和脚本能不同赋值方式。...
  • cc2293260
  • cc2293260
  • 2016年03月10日 16:00
  • 797

vue.js - 模板语法之缩写

vue.js - 模板语法之缩写
  • u012860063
  • u012860063
  • 2017年02月23日 11:16
  • 2923
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS中的属性缩写
举报原因:
原因补充:

(最多只允许输入30个字)