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

Randy0528 2007-09-29 16:20 发表评论

文章来源:http://www.cnblogs.com/Randy0528/archive/2007/09/29/910887.html

转载于:https://www.cnblogs.com/xiaozhuoyun/articles/928032.html

[导入][转]常用CSS缩写语法总结相关推荐

  1. 常用CSS缩写语法总结

    使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #000000可以缩写为#000;#336699可以 ...

  2. 转载:常用CSS缩写语法总结

    使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #000000可以缩写为#000;#336699可以 ...

  3. 常用CSS与Flex布局、媒体查询、JS事件控制css、VUE对象语法、Gride布局(待补全) CSS权重 页面适配笔记本缩放

    css属性就是要用的多用的熟 知道的多 就像一本工具书 除了基础原理 剩下的就是知识面了 极力推荐MDN用过的人都说好~ 页面适配笔记本等自带缩放的场景 let t = window.devicePi ...

  4. HTML+css 基础语法

    title: HTML+css 基础语法 categories: HTML tags: [语法,HTML,css] 一.HTML 什是么网站? ​ 网站(Website)开始是指在因特网上根据一定的规 ...

  5. 【CSS基础语法】CSS基础语法知识学习笔记汇总

    CSS基础语法 前言 一.样式定义方式 1.html 2.css 二.选择器 1.html 2.css 三.颜色 1.html 2.css 四.文本 1.html 2.css 五.字体 1.html ...

  6. 【Hello CSS】第一章-CSS的语法与工作流

    作者:陈大鱼头 github: KRISACHAN 在上一篇[Hello CSS]的序章CSS起源中介绍了CSS的诞生原因以及发展历史,了解了CSS的存在意义.从正篇篇开始将会正式开始介绍CSS这门语 ...

  7. Emmet (ZenCoding) 缩写语法

    Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性. 元素 可以使用元素名(如 div 或者 p)来生成 HTML 标签.Emmet 没有预定义的有效元素名的集合,可以 ...

  8. css宋体代码_前端开发必备的CSS命名规范与常用CSS代码集合

    编辑 | web前端开发 来源 | web前端开发 我们在用html+css进行网页的排版布局时,经常会遇到CSS命名,如果是在团队多人协作开发时,团队里都会有自己的命名规范与要求. 但如果是自己在个 ...

  9. HTML-Label-框架-字符实体-全局属性-CSS基本语法结构

    HTML-Label-框架-字符实体-全局属性-CSS基本语法结构 1 回顾 1.1 列表 ul ol li dl dt dd 1.2 表格 table caption thead tfoot tbo ...

最新文章

  1. c中结构体的4种定义
  2. 变量的定义 声明和初始化和static
  3. 360金融产品总监赵鑫:互金产品经理应该关心这些东西
  4. oracle12数据库安装步骤,ORACLE RAC 12C(12.2.0.1)数据库软件安装步骤
  5. 基于bert模型的文本分类研究:“Predict the Happiness”挑战
  6. 将COM+ Events进行到底[转]
  7. 田刚院士:鼓励发展新型特色研究型大学
  8. unity, sceneview 中拾取球体gizmos
  9. iOS底层探索之Block(二)——如何解决Block循环引用问题?
  10. 【Oracle】Oracle通过表名查询触发器
  11. 关于在winform窗体中内嵌浏览器控件
  12. i40e驱动安装方法
  13. 《大数据之路:阿里巴巴大数据实践》-第1篇 数据技术篇 -第6章 数据服务
  14. 数学归纳法与递归推演
  15. JQuery仿百度有啊人气排行特效演示
  16. html实现手风琴轮播图,javascript经典特效分享 手风琴、轮播图、图片滑动
  17. Ocr 图文识别技术——基于百度云OCR技术学习与总结
  18. bm26 bm27 bm5
  19. 单片机看门狗工作原理
  20. 前端gitlab-ci打包流水线优化

热门文章

  1. java登陆界面连接数据库_java 登陆界面怎么写,连接数据库后
  2. 1091 Acute Stroke 需再做
  3. Java培训完可以应用在什么领域
  4. UI设计师培训入门都需要学习什么技术?
  5. 浏览器及时感知服务端数据变化的方式
  6. Piccure Plus 3.1中文汉化版,Piccure Plus 3.1破解版,模糊照片变清晰神器,让你不再害怕手抖了
  7. Element 2.6.0 发布,基于 Vue 2.0 的桌面端组件库
  8. 「深度」线下大数据正成为构建精准“用户画像”的最大助力
  9. [转]CentOS 5.5下FTP安装及配置
  10. C# 回发或回调参数无效