[导入][转]常用CSS缩写语法总结
使用缩写可以帮助减少你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);
文章来源:http://www.cnblogs.com/Randy0528/archive/2007/09/29/910887.html
转载于:https://www.cnblogs.com/xiaozhuoyun/articles/928032.html
[导入][转]常用CSS缩写语法总结相关推荐
- 常用CSS缩写语法总结
使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #000000可以缩写为#000;#336699可以 ...
- 转载:常用CSS缩写语法总结
使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #000000可以缩写为#000;#336699可以 ...
- 常用CSS与Flex布局、媒体查询、JS事件控制css、VUE对象语法、Gride布局(待补全) CSS权重 页面适配笔记本缩放
css属性就是要用的多用的熟 知道的多 就像一本工具书 除了基础原理 剩下的就是知识面了 极力推荐MDN用过的人都说好~ 页面适配笔记本等自带缩放的场景 let t = window.devicePi ...
- HTML+css 基础语法
title: HTML+css 基础语法 categories: HTML tags: [语法,HTML,css] 一.HTML 什是么网站? 网站(Website)开始是指在因特网上根据一定的规 ...
- 【CSS基础语法】CSS基础语法知识学习笔记汇总
CSS基础语法 前言 一.样式定义方式 1.html 2.css 二.选择器 1.html 2.css 三.颜色 1.html 2.css 四.文本 1.html 2.css 五.字体 1.html ...
- 【Hello CSS】第一章-CSS的语法与工作流
作者:陈大鱼头 github: KRISACHAN 在上一篇[Hello CSS]的序章CSS起源中介绍了CSS的诞生原因以及发展历史,了解了CSS的存在意义.从正篇篇开始将会正式开始介绍CSS这门语 ...
- Emmet (ZenCoding) 缩写语法
Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性. 元素 可以使用元素名(如 div 或者 p)来生成 HTML 标签.Emmet 没有预定义的有效元素名的集合,可以 ...
- css宋体代码_前端开发必备的CSS命名规范与常用CSS代码集合
编辑 | web前端开发 来源 | web前端开发 我们在用html+css进行网页的排版布局时,经常会遇到CSS命名,如果是在团队多人协作开发时,团队里都会有自己的命名规范与要求. 但如果是自己在个 ...
- HTML-Label-框架-字符实体-全局属性-CSS基本语法结构
HTML-Label-框架-字符实体-全局属性-CSS基本语法结构 1 回顾 1.1 列表 ul ol li dl dt dd 1.2 表格 table caption thead tfoot tbo ...
最新文章
- c中结构体的4种定义
- 变量的定义 声明和初始化和static
- 360金融产品总监赵鑫:互金产品经理应该关心这些东西
- oracle12数据库安装步骤,ORACLE RAC 12C(12.2.0.1)数据库软件安装步骤
- 基于bert模型的文本分类研究:“Predict the Happiness”挑战
- 将COM+ Events进行到底[转]
- 田刚院士:鼓励发展新型特色研究型大学
- unity, sceneview 中拾取球体gizmos
- iOS底层探索之Block(二)——如何解决Block循环引用问题?
- 【Oracle】Oracle通过表名查询触发器
- 关于在winform窗体中内嵌浏览器控件
- i40e驱动安装方法
- 《大数据之路:阿里巴巴大数据实践》-第1篇 数据技术篇 -第6章 数据服务
- 数学归纳法与递归推演
- JQuery仿百度有啊人气排行特效演示
- html实现手风琴轮播图,javascript经典特效分享 手风琴、轮播图、图片滑动
- Ocr 图文识别技术——基于百度云OCR技术学习与总结
- bm26 bm27 bm5
- 单片机看门狗工作原理
- 前端gitlab-ci打包流水线优化
热门文章
- java登陆界面连接数据库_java 登陆界面怎么写,连接数据库后
- 1091 Acute Stroke 需再做
- Java培训完可以应用在什么领域
- UI设计师培训入门都需要学习什么技术?
- 浏览器及时感知服务端数据变化的方式
- Piccure Plus 3.1中文汉化版,Piccure Plus 3.1破解版,模糊照片变清晰神器,让你不再害怕手抖了
- Element 2.6.0 发布,基于 Vue 2.0 的桌面端组件库
- 「深度」线下大数据正成为构建精准“用户画像”的最大助力
- [转]CentOS 5.5下FTP安装及配置
- C# 回发或回调参数无效