css缩写总结

 

常用CSS缩写语法总结

2009-05-20 10:39

使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。 css缩写的主要规则如下： 颜色 16进制的色彩值，如果每两位的值相同，可以缩写一半，例如： #000000可以缩写为#000; #336699可以缩写为#369; 盒尺寸 通常有下面四种书写方法: property:value1; 表示所有边都是一个值value1； property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3 property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left 方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下： margin:1em 0 2em 0.5em; 边框(border) 边框的属性如下： border-width:1px; border-style:solid; border-color:#000; 可以缩写为一句：border:1px solid #000; 语法是border:width style color; 背景(Backgrounds) 背景的属性如下： background-color:#f00; background-image:url(background.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:0 0; 可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0; 语法是background:color image repeat attachment position; 你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为： color: transparent image: none repeat: repeat attachment: scroll position: 0% 0% 字体(fonts) 字体的属性如下： font-style:italic; font-variant:small-caps; font-weight:bold; font-size:1em; line-height:140%; font-family:"Lucida Grande",sans-serif; 可以缩写为一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif; 注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。 列表(lists) 取消默认的圆点和序号可以这样写list-style:none; , list的属性如下: list-style-type:square; list-style-position:inside; list-style-image:url(image.gif); 可以缩写为一句：list-style:square inside url(image.gif); CSS Length Units Reference 长度单位 Length Units 长度单位 CSS Version 版本 Compatibility 兼容性 Description 简介 相对长度单位 Relative Length Units em CSS1 IE4+ , NS4+ 相对于当前对象内文本的字体尺寸 ex CSS1 IE4+ , NS4+ 相对于字符 “ x ” 的高度。通常为字体高度的一半 px CSS1 IE3+ , NS4+ 像素（Pixel） 绝对长度单位 Absolute Length Units pt CSS1 IE3+ , NS4+ 点（Point） pc CSS1 IE3+ , NS4+ 派卡（Pica）。相当于我国新四号铅字的尺寸 in CSS1 IE3+ , NS4+ 英寸（Inch） cm CSS1 IE3+ , NS4+ 厘米（Centimeter） mm CSS1 IE3+ , NS4+ 毫米（Millimeter） 单位换算：1in = 2.54cm = 25.4 mm = 72pt = 6pc 说明：这种颜色是CSS2标准单位。这种颜色是IE建议样式表单位。这种颜色是NS私有单位。这种颜色是目前尚无浏览器支持的单位。 CSS Font Properties 字体属性 -------------------------------------- Font Properties 属性 CSS Version 版本 Compatibility 兼容性 Inherit From Parent继承性 Description 简介 -------------------------------------- font CSS1/CSS2 IE4+ , NS4+ 有 复合属性。设置或检索对象中的文本特性 color CSS1 IE4+ , NS4+ 有 检索或设置对象的文本颜色 font-family CSS1 IE4+ , NS4+ 有 设置或检索用于对象中文本的字体名称序列 font-size CSS1 IE4+ , NS4+ 有 设置或检索对象中的字体尺寸 font-size-adjust CSS2 NONE 有 设置或检索用于对象中文本的字体名称序列是否强制使用同一尺寸 font-stretch CSS2 NONE 有 设置或检索用于对象中文本的文字是否横向的拉伸变形 font-style CSS1 IE4+ , NS4+ 有 设置或检索对象中的字体样式 font-weight CSS1 IE4+ , NS4+ 有 设置或检索对象中的文本字体的粗细 text-decoration CSS1 IE4+ , NS4+ 无 检索或设置对象中的文本的装饰，如下划线、闪烁等 text-underline-position IE专有属性 IE5.5+ 有 设置或检索text-decoration属性定义的下划线的位置 text-shadow CSS2 NONE 无 设置或检索对象中文本的文字是否有阴影及模糊效果 font-variant CSS1 IE4+ , NS6+ 有 设置或检索对象中的文本是否为小型的大写字母 text-transform CSS1 IE4+ , NS4+ 有 检索或设置对象中的文本的大小写 line-height CSS1 IE4+ , NS4+ 有 检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离 letter-spacing CSS1 IE4+ , NS6+ 有 检索或设置对象中的文字之间的间隔 word-spacing CSS1 IE4+ , NS6+ 有 检索或设置对象中的单词之间插入的空格数。对于IE4+而言仅在MAC平台上可用 说明：这种颜色是CSS2标准属性。这种颜色是IE建议样式表属性。这种颜色是NS私有属性。这种颜色是目前尚无浏览器支持的属性。 Font ---------- 语法： font : font-style || font-variant || font-weight || font-size || line-height || font-family font : caption | icon | menu | message-box | small-caption | status-bar 参数： 该属性是复合属性。第一种声明方式请参阅各参数对应的属性。 第二种声明方式中的参数属于CSS2。 caption : 使用有标题的系统控件的文本字体（如按钮，菜单等） icon : 使用图标标签的字体 menu : 使用菜单的字体 message-box : 使用信息对话框的文本字体 small-caption : 使用小控件的字体 status-bar : 使用窗口状态栏的字体 说明： 设置或检索对象中的文本特性。该属性是复合属性。 第一种声明方式参数必须按照如上的排列顺序。每个参数仅允许有一个值。忽略的将使用其参数对应的独立属性的默认值。 对于如何使用用户端系统可能没有的字体，可以参阅@font-face规则。 对应的脚本特性为font。请参阅我编写的其他书目。 示例： p { font: italic small-caps 600 12pts/18pts 宋体; } p { font: italic small-caps 600 12pts/150% Courier; } p { font: italic small-caps 600 12pts/1.5 Courier; } p { font: italic small-caps 600 12pts/18pts Courier; } p { font: /18pts serif; } p { font: oblique 100 24pts; } H1 { font: 15pt/17pt bold "Arial" normal } Color ---------- 语法： color : color 参数： color : 　指定颜色。请参阅颜色单位和附录：颜色表 说明： 检索或设置对象的文本颜色。无默认值。 注意，用颜色名称指定color不被一些浏览器接受。 对应的脚本特性为color。请参阅我编写的其他书目。 示例： div {color: #345456; } div { color: rgb(100,14,200); } div {color: menu; } div {color: red; } font-family 语法： font-family : name font-family : cursive | fantasy | monospace | serif | sans-serif 参数： name : 字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格，则应使用引号括起 第二种声明方式使用所列出的字体序列名称。如果使用fantasy序列，将提供默认字体序列 说明： 设置或检索用于对象中文本的字体名称序列。 默认值由浏览器确定。 序列可包含嵌入字体字体。请参阅@font-face规则。 对应的脚本特性为fontFamily。请参阅我编写的其他书目。 示例： div.fixedwidth { font-family: Courier, "Courier New", monospace } font-size 语法： font-size : absolute-size | relative-size | length 参数： absolute-size : 根据对象字体进行调节。xx-small | x-small | small | medium | large | x-large | xx-large relative-size : 相对于父对像中字体尺寸进行相对调节。使用成比例的em单位计算。larger | smaller length : 百分数 | 由浮点数字和单位标识符组成的长度值，不可为负值。其百分比取值是基于父对象中字体的尺寸。请参阅长度单位 说明： 设置或检索对象中的字体尺寸。 默认值为absolute-size的medium值。 对应的脚本特性为fontSize。请参阅我编写的其他书目。 示例： p { font-style: normal; } p { font-size: 12px; } p { font-size: 20%; } font-size-adjust ---------- 语法： font-size-adjust : none | number 参数： none : 允许字体序列中每一字体遵守它的自己的尺寸 number : 为字体序列中所有字体强迫指定同一尺寸 说明： 设置或检索用于对象中文本的字体名称序列是否强制使用同一尺寸。 目前IE5.5尚不支持此属性。 对应的脚本特性为fontSizeAdjust。请参阅我编写的其他书目。 示例： p { font-family: arial, courier; font-size-adjust: none; } p { font-family: verdana, courier; font-size-adjust: .56; } font-stretch ---------- 语法： font-stretch : normal | narrower | wider | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded 参数： normal : 不应用拉伸变形 narrower : 使用比当前设置的值导致字体宽度更小的值 wider : 使用比当前设置的值导致字体宽度更大的值 说明： 设置或检索用于对象中文本的文字是否横向的拉伸变形。 改变是相对于浏览器显示的字体的正常宽度的。 目前IE5.5尚不支持此属性。 对应的脚本特性为fontStretch。请参阅我编写的其他书目。 示例： p { font-stretch: wider; } p { font-stretch: ultra-expanded; } font-style ---------- 语法： font-style : normal | italic | oblique 参数： normal : 正常的字体 italic : 斜体。对于没有斜体变量的特殊字体，将应用oblique oblique : 倾斜的字体 说明： 设置或检索对象中的字体样式。 对应的脚本特性为fontStyle。请参阅我编写的其他书目。 示例： p { font-style: normal; } p { font-style: italic; } p { font-style: oblique; } font-weight ---------- 语法： font-weight : normal | bold | bolder | lighter | number 参数： normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置 bold : 粗体。相当于number为700。也相当于b对象的作用 bolder : IE5+　特粗体 lighter : IE5+　细体 number : IE5+　100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 说明： 设置或检索对象中的文本字体的粗细。 作用由用户端系统安装的字体的特定字体变量映射决定。系统选择最近的匹配。也就是说，用户可能看不到不同值之间的差异。 对应的脚本特性为fontWeight。请参阅我编写的其他书目。 示例： span { font-weight:800; } text-decoration ----------- 语法： text-decoration : none || underline || blink || overline || line-through 参数： none : 　无装饰 blink : 　闪烁 underline : 　下划线 line-through : 　贯穿线 overline : 　上划线 说明： 检索或设置对象中的文本的装饰。 有href特性的a，以及u，ins对象默认值为underline 。 对象strike，s，del，默认值是line-through。 没有文本的对象此属性不会作用。 对应的脚本特性为textDecoration。请参阅我编写的其他书目。 示例： div { text-decoration : underline; } div { text-decoration : underline overline; } text-underline-position ---------- 语法： text-underline-position : below | above 参数： below : 　在文本下面 above : 　在文本上面 说明： 设置或检索text-decoration属性定义的下划线的位置。 对应的脚本特性为textUnderlinePosition。请参阅我编写的其他书目。 示例： p { text-underline-position: above; text-decoration: underline; } text-shadow ---------- 语法： text-shadow : color || length || lenth|| opacity 参数： color : 　指定颜色。请参阅颜色单位和附录：颜色表 length : 　由浮点数字和单位标识符组成的长度值。可为负值。第一个length指定阴影的水平延伸距离。第二个length指定阴影的垂直延伸距离。请参阅长度单位 opacity : 　由浮点数字和单位标识符组成的长度值。不可为负值。指定模糊效果的作用距离。如果你仅仅需要模糊效果，将前两个length全部设定为0。请参阅长度单位 说明： 设置或检索对象中文本的文字是否有阴影及模糊效果。 可以设定多组效果，方式是用逗号隔开。 可以被用于伪类:first-letter和 :first-line。 目前IE5.5尚不支持此属性。 对应的脚本特性为textShadow。请参阅我编写的其他书目。 示例： p { text-shadow: 0px 0px 20px yellow, 0px 0px 10px orange, red 5px -5px; } p:first-letter { font-size: 36px; color: red; text-shadow: red 0px 0px 5px; } font-variant 语法： font-variant : normal | small-caps 参数： normal : 正常的字体 small-caps : 小型的大写字母字体 说明： 设置或检索对象中的文本是否为小型的大写字母。 对应的脚本特性为fontVariant。请参阅我编写的其他书目。 示例： span { font-variant: small-caps; } text-transform ---------- 语法： text-transform : none | capitalize | uppercase | lowercase 参数： none : 　无转换发生 capitalize : 　将每个单词的第一个字母转换成大写，其余无转换发生 uppercase : 　转换成大写 lowercase : 　转换成小写 说明： 检索或设置对象中的文本的大小写。 对应的脚本特性为textTransform。请参阅我编写的其他书目。 示例： div { text-transform : uppercase; } line-height 语法： line-height : normal | length 参数： normal : 　默认行高 length : 　百分比数字 | 由浮点数字和单位标识符组成的长度值，允许为负值。其百分比取值是基于字体的高度尺寸。请参阅长度单位 说明： 检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。 如行内包含多个对象，则应用最大行高。此时行高不可为负值。 对应的脚本特性为lineHeight。请参阅我编写的其他书目。 示例： div {line-height:6px; } div {line-height:10.5; } letter-spacing 语法： letter-spacing : normal | length 参数： normal : 　默认间隔 length : 　由浮点数字和单位标识符组成的长度值，允许为负值。请参阅长度单位 说明： 检索或设置对象中的文字之间的间隔。 该属性将指定的间隔添加到每个文字之后，但最后一个字将被排除在外。 对应的脚本特性为letterSpacing。请参阅我编写的其他书目。 示例： div {letter-spacing:6px; } div {letter-spacing:0.5pt; } word-spacing ---------- 语法： word-spacing : normal | length 参数： normal : 　默认间距 length : 　由浮点数字和单位标识符组成的长度值，允许为负值。请参阅长度单位 说明： 检索或设置对象中的单词之间插入的空格数。对于IE4+而言仅在MAC平台上可用。 对应的脚本特性为wordSpacing。请参阅我编写的其他书目。 示例： div { word-spacing : 10; } div { word-spacing : 10px;