简单的说,css简写就是在等效的前提下,把多句css代码简化成一句。在我看来,简写css的好处有三:一是写起来方便(就像键盘快捷键);二是简化代码;三是帮助你熟悉和深刻理解css。
闲话少说,书归正传。能够简写的css属性主要有以下几个:
font
简写:
font:italic small-caps bold 12px/1.5em arial,verdana;
等效于:
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:arial,verdana;
顺序:font-style | font-variant | font-weight | font-size | line-height | font-family
(注:简写时,font-size和line-height只能通过斜杠/组成一个值,不能分开写。)
background
简写:
background:#fff url(bg.gif) no-repeat fixed left top;
等效于:
background-color:#fff;
background-image:url(bg.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left top;
顺序:background-color | background-image | background-repeat | background-attachment | background-position
margin & padding
简写:
margin:1px 0 2em -20px;
等效于:
margin-top:1px;
margin-right:0;
margin-bottom:2em;
margin-left:-20px;
顺序:margin-top | margin-right | margin-bottom | margin-left
padding的简写和margin完全一样。
border
简写:
border:1px solid #000;
等效于:
border-width:1px;
border-style:solid;
border-color:#000;
顺序:border-width | border-style | border-color
这三句也是简写,等于是把四边的样式合而为一了。(关于四边的问题,下文有详细说明)
border-top / border-right / border-bottom / border-left
简写:
border-top:1px solid #000;
等效于:
border-top-width:1px;
border-top-style:solid;
border-top-color:#000;
(和border一样)
list-style
简写:
list-style:square outside url(bullet.gif);
等效于:
list-style-type:square;
list-style-position:outside;
list-style-image:url(bullet.gif);
顺序:list-style-type | list-style-position | list-style-image
关于四边
有很多样式都涉及到了四边的问题,这里统一说明。
四边的简写一般如下:
padding:1px 2px 3px 4px;
等效于:
padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:4px;
顺序:top | right | bottom | left
不论是边框宽度,还是边框颜色、边距等,只要css样式涉及四边,顺序通通都是“上右下左”(顺时针方向)。
如果四边的值省略一个,只写三个:
padding:1px 2px 3px;
则等效于:
padding-top:1px;
padding-right:2px;
padding-bottom:3px;
padding-left:2px;
(省略的“左”值等于“右”)
如果四边的值省略两个:
padding:1px 2px;
则等效于:
padding-top:1px;
padding-right:2px;
padding-bottom:1px;
padding-left:2px;
(省略的“下”值等于“上”)
如果只有一个值:
padding:1px;
则等效于:
padding-top:1px;
padding-right:1px;
padding-bottom:1px;
padding-left:1px;
关于css简写就先写到这里,大家有什么问题欢迎与我交流。
分享到:
相关推荐
background 简写属性,作用是将背景属性设置在一个声明中。 background-attachment 背景图像是否固定或者随着页面的其余部分滚动。Scroll随文滚动 background-color 设置元素的背景颜色。 background-image 把...
3 css font的简写的方法 4 css行高line height的介绍 5 parent和opener的区别 6 $ document ready和window onload的区别 7 css如何清除浮动 8 SqlTransaction事务的用法 9 extjs中apply和applyIf 10 asp net如何在...
CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 如何将样式表加入您的网页: 你可以用以下三种方式将样式表加入您的网页...
继承性,是CSS的基本特性,说明该属性值是否会对当前引用元素的内嵌子元素具有影响力。继承性对于CSS布局具有重要参考价值。 百分比,说明该属性取值为百分比,或者使用相对单位时,如em等,如何计算值,更通俗说,...
CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 如何将样式表加入您的网页: 你可以用以下三种方式将样式表加入您的网页...
CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 如何将样式表加入您的网页: 你可以用以下三种方式将样式表加入您的网页...
DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。...
很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!...2、没声明DOCTYPE ①DOCTYPE是document type(文档类型)的简写,在web设计中用来说明
CSS padding(填充)是一个简写属性,定义元素边框与元素内容之间的空间,即上下左右的内边距。 padding(填充) 当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充。 单独使用 ...
16.6 为表单组件添加说明标签 330 16.7 创建密码框 332 16.8 创建电子邮件框、搜索框、电话框和URL 框 332 16.9 创建单选按钮 336 16.10 创建复选框 337 16.11 创建文本区域 338 16.12 创建选择...
下一个这是一个旨在了解更...” 作为“ grid-template-row”和“ grid-template-column”的简写。免责声明设计不是我自己的。 该设计由Jonas Schmedtmann于2017年拥有和创建。我已被允许在商业和个人用途中使用该设计。
说明这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算;因此,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他...
rcs是重命名css选择器的缩写 为什么? 较长CSS选择器(例如main-menu__item--disabled )可以增加文件大小。 使用此rcs-core可以很容易地重命名选择器,从而减小文件大小。 通过缩短CSS文件中CSS选择器,可以节省...
说明 该属性是一个简写属性,涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素,所以在普通的 HTML 和 XHTML 中只能用于 li 元素,不过实际上它可以应用到任何元素,并由
说明:RGBA(R,G,B,A) 取值:R:红色值。正整数 | 百分数G:绿色值。正整数 | 百分数B:蓝色值。正整数 | 百分数A:Alpha透明度。取值0~1之间。 下面是用rgba() 设置50%透明度的白色. CSS Code复制内容到剪贴板 p...
它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX...
CSS缩写在 , 和SASS文件中也得到了扩展。 在此处下载插件: 。安装在 下载插件。 打开NetBeans IDE(6.9.1或更高版本),然后转到“工具”>“插件” 。 选择选项卡已下载,单击添加插件...,然后搜索已下载的nbm...
CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 如何将样式表加入您的网页: 你可以用以下三种方式将样式表加入您的网页...
CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 如何将样式表加入您的网页: 你可以用以下三种方式将样式表加入您的...