一些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代码的精简、优化!
分享到:
相关推荐
DIVCSS网页布局实例:十步学会用CSS建站.pdf
HTML5+CSS3网页设计实例教程实例源代码
本教程多以实例形式循序渐进讲解,实例涉及到哪些关键点或难点就讲解什么,较少讲解概念。因为概念这些东西很难说明白,或者说明白你也不一定能听懂,听懂了也不一定能理解。所以把概念留给大家以后再深入研究。有...
css+div 实例全程教学代码!对于初学者,里面的代码很精辟!.
网页学习的绝佳资料。关于CSS布局的实例教程。包含全部代码。
CSS网页设计标准教程书-中实例。包括10多个不同网站的实例,遵循web2.0标准布局实例
几个漂亮网站首页的源码(全),学习css和自己设计网页的一大助力。
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件(如:`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作) HTML静态网页设计...
css+div的实例网页,从中可以充分地了解到网页时如何布局的。
本文里面, 我们为大家介绍介绍两个CSS代码精简工具和相关的一些CSS代码精简教程. 尽管通常一个CSS文件占用不了什么带宽, 但之于网页设计, 在不影响整个网页构架与功能的情况下, 网页文件越小越好. 因为更小的网页...
本程序 CSS代码格式化 可以将压缩过的CSS代码格式化成易读代码。 CSS代码压缩,可以将CSS文件的代码压缩得非常小,便于网上传输。 总之本程序是网站优化必备工具,也是优秀前端设计师的必备工具。
CSS实例代码,分章节层次介绍 介绍详细而具体
DIVCSS网页布局实例:十步学会用CSS建站[整理].pdf
DIV+CSS布局:CSS浮动float属性详解 不解释
div+css网页标准布局实例,超级牛!
百分比显示效果css代码,非常不错!值得下载哦!
CSS禅意花园!附带源代码!绝对详尽!可以快速的提高自己的网页水平!
HTML CSS JAVASCRIPT标准教程 实例版_0
CSS代码-使用50个CSS按钮 样式源代码(超炫丽)的源代码 ——学习参考资料:仅用于个人学习使用!
用DIV+CSS布局网页的一个实例HTML代码! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/