常用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-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.w3cn.org/article/tips/2005/103.html
常用CSS缩写语法总结的更多相关文章
- 常用CSS缩写语法总结(转)
使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:#000000可以缩写为#000;#336699可以缩 ...
- 常用的CSS缩写语法一些方法小结
使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #000000可以缩写为#000;#336699可以 ...
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- 常用的ement语法
缩写语法: 介绍:Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性. 声明:第一次写博客大家多多关照,如有错误或者需要补充的请到评论里留言,谢谢大家! 快速生成htm ...
- emmet css 缩写
css 缩写 对于CSS语法,Emmet有许多用于属性的预定义代码段.例如,您可以扩展 m 缩写以获取margin: ;代码段. 要获取 margin: 10px;您可以简单地扩展m10缩写. 需要多 ...
- CSS基础语法(一)
目录 CSS基础语法(一) 一.CSS简介 1.CSS语法规范 2.CSS代码风格 二.CSS基础选择器 1.标签选择器 2.类选择器 3.id选择器 4.通配符选择器 5.总结 三.CSS字体属性 ...
- discuz内置常用CSS代码分析
CSS多IE下兼容HACK写法 所有 IE浏览器适用:.ie_all .foo { ... } IE6 专用:.ie6 .foo { ... } IE7 专用:.ie7 .foo { ... } IE ...
- 1.css的语法标准
css(Cascading Style Sheets),中文名称为层叠样式表,主要用于对html的样式设置. 在使用CSS的时候,要注意其优先级情况,优先级由下所示(数字越高,优先级越高): 浏览器缺 ...
- Emmet 语法大全(缩写语法/sublime 插件)
Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性. 元素 可以使用元素名(如 div 或者 p)来生成 HTML 标签.Emmet 没有预定义的有效元素名的集合,可以 ...
随机推荐
- HTTP缓存
本文是<HTTP权威指南>读书笔记 Web缓存是可以自动保存常见文档副本的设备.当Web请求抵达缓存时,如果本地在“已缓存”的的副本,就可以从本地存储设备而不是原始服务器中提取这个文档.使 ...
- linux常用命令-压缩解压命令
gzip [文件] 压缩后文件格式 .gz,这个命令只能压缩文件,不能压缩目录.并且这个命令压缩后不保留源文件 gunzip [文件] 或者 gzip -d [文件] 解压缩.gz的压缩文件 tar ...
- ArrayList和HashSet的Contains()方法(转)
来源: ArrayList和HashSet的Contains()方法 笔试题: package com.champion.test.exam; import java.util.ArrayList; ...
- Oracle:试图访问正在使用的事务临时表
处理步骤为 1.找到表ID select * from dba_objects where object_name like 'TPT_RPWORPA1_QRY' 2.通过表ID查找正在使用的事务 s ...
- 纯CSS弹出菜单(不支持IE6.0以下)
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- 总结初用erlang 时的遇到一些问题
算起来接触erlang 三个多月快四个月来,期间从零开始看书写erlang代码.修改RabbitMQ.业务开发.系统调优,总算是有点入门了. 最难受的是边学边修改RabbitMQ,开始真心的看不懂,不 ...
- 3 Git服务器搭建
1. 环境部署 系统环境:服务器端:CentOS 6.5 ,ip:192.168.56.1 客户端:CentOS 6.5 ,ip:192.168.56.101 软件版本:服务器端:源码编译安装,git ...
- Xcode7下模拟器输入文本无法显示系统键盘的解决办法
xcode7下的ios模拟器输入内容无法系统键盘,只能用电脑键盘输入内容,这样可能会对调试带来麻烦. 其实xcode7下的ios模拟器默认只能使用一种,要么是模拟器系统键盘,要么就是是电脑键盘.设置方 ...
- Android studio 英文——中文 翻译插件
TranslationPlugin 1.手动下载 TranslationPlugin ,在Android studio 中 2. 3. 4.选中文件,点击OK 5.设置快捷键 代号1 : 代号2 :
- 用DllImport引用的外部DLL文件如何通过clickonce发布
在.net中非托管代码或非COM组件的外部DLL文件只能用DllImport的方式使用,但是在clickonce方式发布时不会自动包含到发布清单中去,办法是在项目中先把外部DLL文件作为普通文件添加进 ...