知识屋：更实用的电脑技术知识网站
知识屋 手机游戏 手机软件 电脑软件 最近更新 手机端
冒险村物语 英雄无敌3塔防 驾考家园手游 我的小家破解版 业力汉堡商店
cah职工e家 智能安全管控 易慧 iedukids学习中 闪背
亿彩文本文件批 文件自动分类器（ Win8激活信息备
LOL手游国服和外 LOL手游日服怎么 怎么注册LOL手游 2020双十一活动
所在位置：首页 > 站长园地  > 站长入门

DIV+CSS网页布局技巧实例4：使用css缩写

发表时间：2012-08-07来源：网络

使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，css缩写的主要规则如下：

颜色

16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：
#000000可以缩写为#000;#336699可以缩写为#369;

注意:在同一个CSS配置节中，不要交错使用全写和缩写的颜色配置，在系统资源极低时，会导致浏览器渲染失败。

盒尺寸

通常有下面四种书写方法:

  • 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);

（免责声明：文章内容如涉及作品内容、版权和其它问题，请及时与我们联系，我们将在第一时间删除内容，文章内容仅供参考）
收藏

上一篇：网站切图的一些技巧

下一篇：DIV+CSS网页布局技巧实例15：用正确的顺序指定链接的样式

知识阅读

软件推荐

更多 >

游戏推荐

更多 >

精选栏目

热门推荐

  • 人气文章
  • 最新文章
  • 下载排行榜
  • 热门排行榜

手机游戏

手机软件

电脑软件

猜你喜欢

城市 智能 家居 福利 美女 壁纸 截图 照片 修图 新闻 八卦 免费 农业 司机 会议 物流 资源 拍摄 下载 美图 手机 宠物 计算机 服务 汽车 二手 程序员 短视频 播放器 影视 动漫 停车 江浙沪 地铁 公交 抖音 舞蹈 征信 母婴 低息 分期 钱包 区块链 360 投注 彩票 借贷 网贷 借钱 抢票 吃货 购物 WIFI 导航 运动 健康

本站所有软件来自互联网，版权归原著所有。如有侵权，敬请来信告知，我们将及时撤销。

知识屋 www.zhishiwu.com 更实用的电脑技术知识网站

苏ICP备14019037号-7

联系我们