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

转载于:https://www.cnblogs.com/zjfazc/archive/2012/07/06/2579924.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. Emmet (ZenCoding) 缩写语法

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

  5. HTML+css 基础语法

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

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

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

  7. c++标准模板库STL【快速查找】【最全】【常用】【语法】

    c++标准模板库STL[快速查找][最全][常用][语法] c标准模板库STL快速查找最全常用语法         vector- 变长数组         set-内部自动有序且不含重复元素     ...

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

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

  9. mysql怎样查表的模式_mysql常用基础操作语法(四)--对数据的简单无条件查询及库和表查询【命令行模式】...

    1.mysql简单的查询:select 字段1,字段2... from tablename; 如果字段那里写一个*,代表查询所有的字段,等同于指定出所有的字段名,因此如果要查询所有字段的数据,一般都是 ...

最新文章

  1. 超车新势力齐聚港股,谁主沉浮?
  2. c++ 三次多项式拟合_非线性回归模型(一)--多项式回归
  3. gzip、bzip2和tar
  4. vi编辑器的学习使用(十三)
  5. 华为OJ平台——放苹果(典型整数划分问题)
  6. STL源码剖析 数值算法 heap算法
  7. idea 批量导入包
  8. HTML5 device access 设备访问
  9. Javascript:结合canvas、a标签根据url下载图片到本地
  10. 史上最全最新手机号码号段大全
  11. BT下载4K电影、视频
  12. 2022-08-22 步进电机驱动程序
  13. 国际奥林匹克运动会是怎么来的?
  14. 基于pytorch的OCR识别库
  15. 新手如何第一次编写 “Hello World“ Windows 驱动程序 (KMDF)
  16. tensorflow框架下,多进程model.predict(x)无响应/暂停/无输出
  17. 说说越婢加术汤(黄煌)
  18. java 多阶矩阵求逆_求N阶矩阵的逆矩阵 java
  19. MySQL:使用SQL语句删除所有索引
  20. 关于css中line-height(行高)设置无效的问题

热门文章

  1. Office 2010 体验系列之Outlook使用
  2. ES6学习笔记第一章
  3. u-boot编译连接分析
  4. POJ 1830.开关问题(高斯消元)
  5. LeetCode 1111. 有效括号的嵌套深度
  6. Shuffling Machine (20)
  7. 问题 A: 编写函数:比较三个数大小 (Append Code)
  8. C++递归或非递归实现n的阶乘
  9. java扶贫,基于jsp的扶贫网站-JavaEE实现扶贫网站 - java项目源码
  10. ping下主服务器mysql_mysql主从同步配置