一些CSS属性允许使用一串值代替许多属性,值使用空格分开。
margin,pdding和border-width允许合并 margin-top-width, margin-right-width, margin-bottom-width等等,形式像这样:property:top right bottom left;逆时针顺序。
所以下面的:
p {
border-top-width: 1px;
border-right-width: 5px;
border-bottom-width: 10px;
border-left-width: 20px;
}
可以写成:
p {
border-width: 1px 5px 10px 20px;
}
border-width,border-color,border-style同样可以合并到一起,例如:
p {
border: 1px red solid;
}
(同样可以运用到border-top,border-right等等)
如果只使用两个值(比如margin: 1em 10em;),第一个值包括顶部和底部,第二个值包括左右。
字体属性同样可以使用font属性合并。
p {
font: italic bold 1em/1.5 courier;
}
(上面"/1.5"是 line-height的值)
把它们总结在一起,试下下面的代码:
p {
font: 1em/1.5 "Times New Roman", times, serif;
padding: 3em 1em;
border: 1px black solid;
border-width: 1px 5px 5px 1px;
border-color: red green blue yellow;
margin: 1em 5em;
}
推荐大家使用缩写形式,促进CSS代码的精简、优化!
分享到:
相关推荐
css3属性选择器,背景缩写 css3属性选择器,背景缩写 css3属性选择器,背景缩写
background 简写属性,作用是将背景属性设置在一个声明中。 background-attachment 背景图像是否固定或者随着页面的其余部分滚动。Scroll随文滚动 background-color 设置元素的背景颜色。 background-image 把...
在书写css过程中尽量简写css属性,有助于写出高效整洁的css,本文将常用的一一列出,需要的朋友可以参考下
千锋Web前端教程_29_CSS属性的简写
主要介绍了CSS属性简写和选择器的优先级问题,是CSS入门学习中的基础知识,需要的朋友可以参考下
calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的border、margin、pading、font-size、width和height等属性设置动态值。 怎么使用 calc()可以使用数学运算中的简单加(+)、...
font字体缩写字体缩写是针对字体样式的缩写形式,包含字体、字号等属性,使用方法如下: font:font-style font-variant font-weight font-size line-height font-family
简写属性。用于把所有用于列表的属性设置于一个声明中。 list-style-image 将图象设置为列表项标志。 list-style-position 设置列表中列表项标志的位置。 list-style-type 设置列表项标志的类型。 1 指定列表符号的...
5.字体的复合属性(简写方式 节约代码) body { font: font-style font-weight font-size/line-height font-family; } 不能更换顺序 属性间以空格隔开 不需设置的属性可以省略(取默认值) font-size font-...
相关CSS缩写文章:CSS代码缩写实例以及CSS缩写原因总结 CSS缩写6个图例总结margin margin-top:1px; margin-right:1px; margin-bottom:1px; margin-left:1px; 代码简化为:margin:1px margin-top:1px; margin...
CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写。CSS 简写的最大好处就是能够显著减少CSS文件的大小,优化网站整体性能,更加容易阅读。 下面介绍常见的CSS简写规则: 一、盒子大小 这里...
简写属性是用于同时给多个属性赋值的属性。比如font是一个简写属性,可以用于设置多种字体属性。它指定了font-style、font-weight、font-size、font-height以及font-family。 font: italic bold 18px/1.2 ...
5.6.4 背景属性的缩写 5.6.5 页面文本的样式 5.6.6 链接的样式 5.7 布局的基础 5.7.1 布局页面的步骤 5.7.2 使用ID 还是Class 5.7.3 控制内容显示的display 属性 5.7.4 控制内容显示的visibility 属性 5.7.5 使用...
布局过程中总是离不开css的属性,在书写过程中高手与新手的区别是很大的,本文整理了一些常见css属性的缩写及全写对比,喜欢的朋友可以收藏下
利用CSS的Expression自定义属性来实现表格的OnMouseOver 特效 需要掌握的八个CSS布局技巧 用css实现链接经过时显示浮动图片背景的效果 自适应大小的CSS圆角盒子 div+css实现Firefox和IE6兼容的垂直居中...
3.2.3 实验2——属性的缩写形式 3.2.4 实验3——边框与背景 3.3 内边距(padding) 3.4 外边距(margin) 3.5 盒子之间的关系 3.5.1 HTML与DOM 3.5.2 标准文档流 3.5.3 div ...
规定至少以下两项CSS动画属性,可以实现动画效果: 动画名称 animation-name 动画时长 animation-duration 可以使用简写属性animation同时设置动画名称和动画时长 2 第一步:设置动画规则 第二步:选择器绑定动画...