常用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缩写语法总结相关推荐
- [导入][转]常用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 ...
- 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 ...
- java emmt插件_Emmet缩写语法
缩写语法 Emmet 使用类似于 CSS 选择器的语法描述元素在生成的文档树中的位置及其属性. 元素 可以使用元素名(如 div 或者 p)来生成 HTML 标签.Emmet 没有预定义的有效元素名的 ...
最新文章
- TP5实现邮件发送(PHP 利用QQ邮箱发送邮件「PHPMailer」)
- 【CASS精品教程】CASS9.1等高线的绘制完整案例教程
- 链表之单链表约瑟夫问题(二)
- openshift使用_OpenShift v3:使用WildFly和MySQL的Java EE 7入门
- 生物计算机科学家,科学家开发细胞计算机 人体就是一台大型计算机
- 【glibc源码分析】--strcpy.c 字符串复制
- iOS面试总结(待完善)
- ADF开发遇到错误:JBO-26030 无法锁定记录,其他用户持有该锁
- TNS-12535: TNS: 操作超时_win7
- 打开IE窗口自动最大化效果
- 知识与智慧的区别是什么?
- 泰勒·斯威夫特(Taylor Swift)最好听歌曲专辑,喜欢的可以下载保存
- 金万维异速联服务器重装,金万维异速联服务器配置说明
- icem网格数和节点数_ansys中划分网格后,如何查看单元数和节点数
- word文件损坏打不开如何修复?
- 浏览器pdf朗读插件
- 从5.56*45mm NATO弹看塔科夫的数据严谨性
- 三子棋游戏(呆呆详解版)
- 【报告分享】2020吃货人群图鉴-Mob研究院(附下载)
- 计算机基础:源代码如何被计算机执行