设为首页 加入收藏 网站首页
休闲娱乐
军事·社会百态·娱乐八卦·校园
体育·美女写真·幽默笑话·游戏
综合·在线视频·搞笑图片·灵异
两性生活
两性知识·性爱技巧
情色实录·两性图片
女性健康·同性之恋
电脑网络
网络编程·网页制作·软件教学
操作系统·图形图象·冲浪宝典
网络安全·邮件系统·认证考试
热点专题
芙蓉·真人漫画
72式·欲望都市
帅哥·人体彩绘
您现在的位置: 世纪中国 >> 网页制作 >> CSS教程 >> 教程正文
网页制作之常用CSS缩写语法总结
作者:中国图霸    教程来源:网络    点击数:    更新时间:2007-1-2

使用缩写可以帮助减少你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);

分类推荐
社会 社会 娱乐 军事 校园
幽默 体育 女性 专题
电脑 编程 网页 软件 系统
安全 图象 冲浪 认证
搞笑 人物 动物 物品 表情
签名 色图 漫画 奇闻
美女 明星 清纯 自拍 欧美
丝袜 卡通 性感 走光
两性 知识 性图 孕育 技巧
同性 单身 情感 实录
视频 写真 搞笑 MTV 翻唱
写实 片段 游戏 综艺
CSS教程热门文章
普通教程 CSS垂直树形下拉菜单
普通教程 CSS+JS实现的选项卡效果(html组
普通教程 用CSS做滑动效果的图片画廊
普通教程 用CSS设计高体验的表单显示效果
普通教程 网页制作之常用CSS缩写语法总结
普通教程 CSS实现导航条图片的翻转菜单
普通教程 CSS仿淘宝首页导航条按钮布局效
普通教程 超强,用CSS构建iframe效果
普通教程 完全CSS写的鼠标悬停tip效果
普通教程 对css滑动门技术的一些总结和归
普通教程 用CSS层叠样式表完成可以控制的
普通教程 常用CSS
普通教程 CSS+DIV网页特效欣赏:非常酷的
普通教程 CSS+DIV设计实例:纯CSS制作下
普通教程 CSS属性中Display与Visibility
普通教程 利用CSS控制打印
普通教程 内联CSS的background-image属性
普通教程 导航上用CSS标志当前页效果的实
普通教程 CSS的常用技巧放送
普通教程 XHTML+CSS兼容性解决方案小集

  广东广州海珠区 世纪网络工作室 版权所有 上海电信提供网络带宽
信箱: 9297659@qq.com 粤ICP备06113754号