css教程之简写与手写应该什么时候使用
下面的css教程的速记实例- 一个是简洁和其他精确。一来存在了想为简便起见,而其他仍然坚定地保持透明。无论哪种方式,他们有他们的目的,优点和缺点,可以这么说。这个职位将照耀在两个简写符号和符号速记一些轻,而结论是最好用的哪种情况。
什么是速记属性?
速记属性是一个属性取值为其他集合的CSS属性。例如,我们可以指定为边框宽度,边框样式,并使用单独的边框属性边框颜色值。
基本上,
边界:1px的固体蓝色;
是一样的:
边框宽度:1px的;
边框风格:固体;
边框颜色:蓝色;
![](http://www.kokojia.com/Public/images/upload/article/2015-07/55b58556ee4c5.jpg)
这样,我们就不必单独声明个别属性值(这是多余的,时间和占用空间)。它也将重置声明,这东西可被利用的左出性能。
它是如何工作的?
就像前面提到的,我们写了一套速记其他属性值,顺序并不重要,如果以一种别样的shorthandare就像在边境的所有属性值。对于性质类似的像种边距值的,为了确实很重要。如果有疑问,顺时针切记!
现在,如果我们错过了什么,或者两个声明的属性?在上面的例子中,假设我们忽略边框样式。
边界:1px的蓝色;
![](http://www.kokojia.com/Public/images/upload/article/2015-07/55b5855ebabc8.jpg)
我们将无法看到的边界了,不是因为速记属性没有工作,但因为边框样式,我们离开了,得到了默认值none。这是速记属性得到了呈现方式。
边界:1px的无蓝色;
现在让我们丢弃了1px的边框宽度,并保持其他两个:
边框:蓝色实;
![](http://www.kokojia.com/Public/images/upload/article/2015-07/55b5856773146.jpg)
我们将能够看到边界,只能用厚宽度,这是因为边框宽度属性得到了默认值中。
边框:介质中的固体蓝色;
这个结论对我们来说,当一个属性值遗漏了一个速记声明,该属性采用其缺省值(即使它有覆盖分配给同以往任何值)。
如果有边框宽度:1px的;某处边界前一个元素:蓝色实;对于相同的,边框的宽度将是介质(默认值),而不是1像素。
另一件值得一提的是,我们不能使用的值,像继承,初始或取消,这是适用于所有的CSS属性,在速记符号。如果我们使用这些,浏览器将无法确切地知道哪些属性值应该代表的简写 - 整个宣言将被丢弃。
的所有财产
有一个简写属性,可以为所有的CSS属性的值。 CSS-宽值继承,初始和取消适用于所有的特性,因此这些都是由allproperty接受的唯一价值。
DIV {
所有:初始
}
这将使div元素沟所有CSS属性值它有,和重置他们每个人的默认值。
⚠警告
我们不要滥用全部财产。它可以在极少数情况下才会出现,当我们不能够触及我们希望这个属性应用到元素的任何先前的CSS代码的需要。
注意:CSS属性颜色取十六进制值与速记符号,如果十六进制值中的每一个色彩通道的两个数字是相同的。例如,背景:#445599;是一样的背景:#459 ;.
什么是手写的财产?
可以被包括在一个速记属性的个人属性称为普通写法的属性。一些例子为:背景图片,利润率左,动画持续时间等
我们为什么要使用它呢?
尽管速记的替代品方便,他们有一个缺点。还记得我们看到了如何速记覆盖任何遗漏属性的默认值不变的开始?这可能是一个问题,如果复位不希望的。
就拿字体速记属性为例。让我们把它用在H4元(其中有一个默认的浏览器样式字体重量:粗体)
字体:20px的“新信使”;
在上面的代码的简写,没有价值是那里的font-weight属性,因此该字体重量:大胆(浏览器默认样式)会由默认值字体的重量被覆盖:正常导致H4元素失去其大胆风格,这可能不是已意。
![](http://www.kokojia.com/Public/images/upload/article/2015-07/55b584e865997.jpg)
因此,对于上面的例子简单的两手写性质,字体大小andfont家庭是完美的。
此外,使用速记用于分配仅一个或两个属性值不是非常有用。为什么给浏览器的额外的工作来解释每一个属性(包括左外的)的简写,当只需要一个工作?
抛开生产,在发展阶段,一些开发商(尤其是新手)可能会发现使用普通符号容易得多比缩写更好的可读性和清晰度工作。
![](http://media02.hongkiat.com/css-shorthand-longhand-notations/long-vs-short-notations.jpg)
结论
如今具有快速编码的可能性(具有像埃米特工具的帮助)和微小,因此以上的css教程不需要在速记一个高可靠性,但在同一时间,这是一个很大的逻辑输入保证金:0;.上下文中,我们更喜欢我们的CSS代码符号会有所不同,我们所要做的就是找出什么符号将我们当效果最好。
css教程之简写与手写应该什么时候使用相关推荐
- 教程 | 基于LSTM实现手写数字识别
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达 基于tensorflow,如何实现一个简单的循环神经网络,完成手写 ...
- 电子邮件签名档 HTML 手写时的折腾(附 原创工具)
2019独角兽企业重金招聘Python工程师标准>>> 入职必修课 鄙人作为码农进厂开电脑的第一件正事就是 -- 在 Foxmail 客户端中设置自己公司的域名邮箱,并加上看起来还挺 ...
- 我做了一个手写春联小网页,祝大家虎年暴富
目录 前言 产品构思 设计 开发 手写春联:https://cl.xugaoyi.com/ 前言 虎年春节快到了,首先祝大家新年快乐,轻松暴富. 最近在网上经常看到生成春联的文章,不过这些小demo要 ...
- 辛星和您一起手写CSS气泡
上文中我公布了一篇手写导航条的博客,那么这一篇博客我将和大家一起手写气泡.那么什么是气泡呢?先给那些刚入门的童鞋一个截图,来更好的认识一下什么是气泡把: 这就是一个简单的气泡啦,那么它主要用来干什么呢 ...
- html编写气泡对话框,HTML+CSS入门 纯CSS手写圆角气泡对话框
本篇教程介绍了HTML+CSS入门 纯CSS手写圆角气泡对话框,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 嗯--我们设计师强烈要求一定要圆角!圆角的气泡对话框,不要那 ...
- 手写动画css jss_用手写笔生成CSS网格
手写动画css jss I've jumped into Stylus over the past few moths and I love it. I wouldn't say it's bett ...
- 什么相片可以两张弄成一张_手机修图教程 | 如何不着痕迹地给相片添加优雅手写字体?...
文章原创首发于头条号[影像派],版权所有,未经许可,不得转载. 请关注[影像派] 一 当看到一幅很景色优美的摄影作品,你是否想给它添加一小段抒情文字? 当拍到一些古味犹存的风景,你是否也会按捺不住诗兴 ...
- TensorFlow高阶 API: keras教程-使用tf.keras搭建mnist手写数字识别网络
TensorFlow高阶 API:keras教程-使用tf.keras搭建mnist手写数字识别网络 目录 TensorFlow高阶 API:keras教程-使用tf.keras搭建mnist手写数字 ...
- TensorFlow 2.0 快速上手教程与手写数字识别例子讲解
文章目录 TensorFlow 基础 自动求导机制 参数优化 TensorFlow 模型建立.训练与评估 通用模型的类结构 多层感知机手写数字识别 Keras Pipeline * TensorFlo ...
最新文章
- 给单片机焼写程序需要什么东西_单片机怎么烧写程序
- 2pin接口耳机_拆解报告:雷柏首款真无线耳机XS200
- opensource项目_Opensource.com 3月预览
- c语言编程车,C语言编程之自动类型转化
- 科技四巨头展望:战线***升级 软硬界限模糊
- codevs——2822 爱在心中
- 字节码指令之操作数栈管理指令
- 一阶系统开环传递函数表达式_带钢纠偏液压系统模糊PID 控制与仿真
- 使用服务器代替雷达信号处理,雷达数字信号处理解决方案
- socket php建立聊天室,PHP搭建socket聊天室
- 移动硬盘打开文件突然变得很卡
- php爬虫分析四六级情况
- Python淘宝爬虫
- jQuery源码中的“new jQuery.fn.init()”什么意思?
- sql end关键字
- 《全网首发》基于SEIR(SIR)对新冠肺炎的分析和预测
- 用matplotlib中的FuncAnimation()实现GDP世界排名动态图
- 查看UiPath许可证状态
- ps修改图片中的图片尺寸
- [开心学php100天]第六天:用php玩转页面(基础篇)
热门文章
- 怎么给黑白照片上色?这几个软件可以给黑白照片上色
- Mosaic-x5c-GPS北斗导航模块板卡GNSS RTK接收机数字化施工无人机机器人BD970-BD982-BD990
- 红黑树是什么?红黑树的作用?红黑树的调整?
- 强大的javascript
- codeforces 609F Frogs and mosquitoes 线段树+二分+multiset
- 基于SSM框架的校园二手交易平台实战记录(一)
- Newtek.LightWave3D.v11.6.2.Win32_64..MacOSX 3CD
- mysql emoji表情_Mysql支持emoji表情
- redis存储token
- 移动距离 JAVA题解