使用缩写可以帮助减少你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 bold 1em/140% "Lucida Grande",sans-serif;

        font:font-style font-weight font-size/line-height font-family

注意,如果你缩写字体定义,至少要定义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);

转载于:https://www.cnblogs.com/mizzle/archive/2011/07/08/2100907.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. Emmet (ZenCoding) 缩写语法

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

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

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

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

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

  9. java emmt插件_Emmet缩写语法

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

最新文章

  1. TP5实现邮件发送(PHP 利用QQ邮箱发送邮件「PHPMailer」)
  2. 【CASS精品教程】CASS9.1等高线的绘制完整案例教程
  3. 链表之单链表约瑟夫问题(二)
  4. openshift使用_OpenShift v3:使用WildFly和MySQL的Java EE 7入门
  5. 生物计算机科学家,科学家开发细胞计算机 人体就是一台大型计算机
  6. 【glibc源码分析】--strcpy.c 字符串复制
  7. iOS面试总结(待完善)
  8. ADF开发遇到错误:JBO-26030 无法锁定记录,其他用户持有该锁
  9. TNS-12535: TNS: 操作超时_win7
  10. 打开IE窗口自动最大化效果
  11. 知识与智慧的区别是什么?
  12. 泰勒·斯威夫特(Taylor Swift)最好听歌曲专辑,喜欢的可以下载保存
  13. 金万维异速联服务器重装,金万维异速联服务器配置说明
  14. icem网格数和节点数_ansys中划分网格后,如何查看单元数和节点数
  15. word文件损坏打不开如何修复?
  16. 浏览器pdf朗读插件
  17. 从5.56*45mm NATO弹看塔科夫的数据严谨性
  18. 三子棋游戏(呆呆详解版)
  19. 【报告分享】2020吃货人群图鉴-Mob研究院(附下载)
  20. 计算机基础:源代码如何被计算机执行

热门文章

  1. ASP.NET Core 2.0 : 九.从Windows发布到CentOS的跨平台部署
  2. SOA之(2)——SOA架构基础概念与设计框架
  3. 用UltraISO制作支持windows 7的U盘启动盘
  4. mac terminal vim delete key
  5. applet打包的MANIFEST.MF配置
  6. 话里话外:按单制造(MTO II)企业的资源瓶颈是怎么形成的?
  7. SendDlgItemMessage
  8. mysqld启动报错
  9. Python工具 | 4个好用的开源 Python 下载器
  10. 搭建rtx服务并客户端登录