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);
CSS常用语法缩写的更多相关文章
- 好程序员web前端分享css常用属性缩写
好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...
- 《网页设计基础——CSS常用语法》
网页设计基础--CSS常用语法 一.注释: 例如: /* 在此处书写注释 */ 二.清除浏览器默认设置: 例如: *{ /* 全局声明 */ margin: 0; padding: ...
- CSS 常用语法与盒模型分析
CSS基础知识 CSS规则由两个主要的部分构成:选择器,以及一条或者多条声明 selector { property: value; property: value; ... property: va ...
- css常用语法续集
1 设置字体 body{font-familly:“宋体”} 2 可以使用下面代码设置网页中文字的字号为12像素,并把字体颜色设置为#666(灰色): body{font-size:12px;c ...
- css 常用语法
1.禁止某个元素内的任何选中操作: .classname{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: no ...
- css基础语法二(常用文本与背景属性)
[CSS常用文本属性] 1. 字体.字号类:① font-weight: 字体粗细. bold-加粗.normal-正常.lighter-细体 也可以使用100-900数值,400表示normal,7 ...
- Css常用的技巧
一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读. 具体内容请浏览:CSS常用缩写语法 二.明确定义单位,除非值为0. 忘记定义尺寸的单位是CSS新手普遍的错误.在HTML中 ...
- CSS基础语法(一)
目录 CSS基础语法(一) 一.CSS简介 1.CSS语法规范 2.CSS代码风格 二.CSS基础选择器 1.标签选择器 2.类选择器 3.id选择器 4.通配符选择器 5.总结 三.CSS字体属性 ...
- “一键”生成HTML——Emmet插件常用语法
Emmet是一款文本编辑器/IDE的插件,用来快速生成复杂的HTML代码,只要掌握一些常用的语法(类似于CSS选择器),就可以减少重复编码的工作(主要是懒).我个人惯用的是sublime,因此下文介绍 ...
随机推荐
- mysql char varchar
摘自:http://dev.mysql.com/doc/refman/5.6/en/char.html In contrast to CHAR, VARCHAR values are stored a ...
- “3+3”看华为云FusionInsight如何引领“数据新基建”持续发展
摘要:一个统一的现代化的数据基建需要三类架构来实践三种不同的应用场景. 近期,美国知名科技企业风投机构A16Z总结出一套通用的技术架构服务,分为以下三种场景. 一.数据基建架构全景 数据流向显示,左侧 ...
- orphan sockets
orphan sockets 介绍一下什么是 orphan sockets,简单来说就是该 socket 不与任何一个文件描述符相关联.例如,当应用调用 close() 关闭一个链接时,此时该 soc ...
- epoll源码解析翻译------说使用了mmap的都是骗子
本文地址 //https://www.cnblogs.com/l2017/p/10830391.html //https://blog.csdn.net/li_haoren select poll e ...
- Cisco思科模拟器路由器各个端口IP地址的配置及路由协议RIP的配置 入门详解 - 精简归纳
Cisco思科模拟器路由器各个端口IP地址的配置及路由协议RIP的配置 入门详解 - 精简归纳 JERRY_Z. ~ 2020 / 11 / 21 转载请注明出处!️ 附: 交流方式: ️ ️ ️ Q ...
- centos6 安装和配置PHP 7.0
2015年12月初PHP7正式版发布,迎来自2004年以来最大的版本更新.PHP7最显著的变化就是性能的极大提升,已接近Facebook开发的PHP执行引擎HHVM.在WordPress基准性能测试中 ...
- Navicat总是提示主键不存在问题
Windows 和 Linux:打开navicat > 找到工具 > 点击选项- > 外观 > 点击数据 & 网格 > 取消勾选显示主键警告 > 确定. M ...
- 还不懂java类加载机制的,建议看下这份阿里技术官总结的笔记!
类加载机制 把class文件加载到内存,并对数据进行校验,准备,解析,初始化,形成可以被虚拟机直接使用的字节码 类加载的时机(触发类的初始化) 使用new关键字实例化对象 读取一个类的静态代码块 使用 ...
- 用过MindManager后才知道思维导图原来这么简单
哈喽大家好!时间过得真是太快了,一眨眼这一年就接近尾声了,相信我们都度过了不平凡但十分充足的一年,不知道大家在2020年中有没有令自己满意的收获呢? 相信大家各自都有精彩的收获,我们不妨把它们总结一下 ...
- 听法国设计师大卫·维森特讲述他与CorelDRAW的渊源
在这次采访中,我们采访了法国插画家兼平面设计师大卫·维森特(David Vicente),他的特殊风格与Old-School美学,尤其是疯狂摇滚派有着密切的联系.在他精心制作的插图中,充满了细节和强烈 ...