仓酷云

标题: 给大家带来CSS教程:汇总CSS属性的缩写 [打印本页]

---

作者: 愤怒的大鸟    时间: 2015-1-15 23:20
标题: 给大家带来CSS教程:汇总CSS属性的缩写
结构清晰，容易被搜索引擎搜索到，天生优化了seo

网页制造poluoluo文章简介：高效的css写法中的一条就是利用简写。经由过程简写可让你的CSS文件更小，更容易读。而懂得CSS属性简写也是前端开辟工程师的基础功之一。
高效的css写法中的一条就是利用简写。经由过程简写可让你的CSS文件更小，更容易读。而懂得CSS属性简写也是前端开辟工程师的基础功之一。明天我们体系地总结一下CSS属性的缩写。

色采缩写

色采的缩写最复杂，在色采值用16进制的时分，假如每种色彩的值不异，就能够写成一个：

1. 1

复制代码

1. color：#113366

复制代码

能够简写为

1. 1

复制代码

1. color：#136

复制代码

一切用到16进制色采值的中央都可使用简写，好比background-color、border-color、text-shadow、box-shadow等。
盒子巨细

这里次要用于两个属性：margin和padding，我们以margin为例，padding与之不异。盒子有高低摆布四个偏向，每一个偏向都有个外边距：

1. 1234

复制代码

1. margin-top:1px;margin-right:1px;margin-botton:1px;margin-left:1px;

复制代码

这四个值能够缩写到一同：

1. 1

复制代码

1. margin:1px1px1px1px;

复制代码

缩写的按次是上->右->下->左。顺时针的偏向。绝对的边的值不异，则能够免却：

1. 1234

复制代码

1. margin:1px;//四个偏向的边距不异，同等于margin:1px1px1px1px;margin:1px2px;//高低边距都为1px，摆布边距均为2px，同等于margin:1px2px1px2pxmargin:1px2px3px;//右侧距和右边距不异，同等于margin:1px2px3px2px;margin:1px2px1px3px;//注重，这里固然高低边距都为1px，可是这里不克不及缩写。

复制代码

边框(border)

border是个对照天真的属性，它有border-width、border-style、border-color三个子属性。

1. color：#1133660

复制代码

1. color：#1133661

复制代码

它能够依照width、style和color的按次简写：

1. 1

复制代码

1. color：#1133663

复制代码

有的时分，border能够写的更复杂些，有些值能够免却，可是请注重哪些是必需的，你也能够测试一下：

1. color：#1133664

复制代码

1. color：#1133665

复制代码

经由过程下面的代码能够懂得到，border默许的宽度是3px，默许的色采是black——玄色。border的缩写中border-style是必需的。
同时，还能够对每条边接纳缩写：

1. 1234

复制代码

1. color：#1133667

复制代码

还能够对每一个属性接纳缩写：

1. color：#1133660

复制代码

1. color：#1133669

复制代码

outline

outline相似border，分歧的是border会影响盒模子，而outline不会。

1. color：#1133660

复制代码

1. 11

复制代码

能够缩写为：

1. 1

复制代码

1. 13

复制代码

一样，outline的简写中，outline-style也是必需的，别的两个值则可选，默许值和border不异。
背景(background)

background是最经常使用的简写之一，它包括以上司性：

1. color：#1133664

复制代码

1. 15

复制代码

background的简写能够年夜年夜的进步css的效力：

1. 1

复制代码

1. 17

复制代码

background的简写也有些默许值：

1. 1

复制代码

1. 19

复制代码

background属性的值不会承继，你能够只声明个中的一个，别的的值会被使用默许的。
font

font简写也是利用最多的一个，它也是誊写高效的CSS的办法之一。
font包括以上司性：

1. color：#1360

复制代码

1. color：#1361

复制代码

font的各个属性也都有默许值，记着这些默许值绝对来讲对照主要：

1. color：#1360

复制代码

1. color：#1363

复制代码

现实上，font的简写是这些简写中最必要当心的一个，稍有忽略就会形成一些意想不到的成果，以是，良多人其实不同意利用font缩写。
不外这里恰好有个小手册，信任会让你更好的了解font的简写：

登录/注册后可看大图

列表款式

大概人人用的最多的一条关于列表的属性就是：

1. 1

复制代码

1. color：#1365

复制代码

它会扫除一切默许的列表款式，好比数字大概圆点。
list-style也有三个属性：

1. color：#1133660

复制代码

1. color：#1367

复制代码

list-style的默许属性以下：

1. 1

复制代码

1. color：#1369

复制代码

必要注重的是，假如list-tyle中界说了图片，那末图片的优先级要比list-style-type高，好比：

1. 12340

复制代码

这个例子中，假如img.gif存在，则不会显现后面设置的circle标记。
PS:实在list-style-type有良多种很有效的款式，感乐趣的同砚能够参考一下：https://developer.mozilla.org/en/CSS/list-style-type
border-radius(圆角半径)

border-radius是css3中新到场的属性，用来完成圆角边框。这个属性今朝欠好的一点儿是，各个扫瞄器对它的撑持分歧，IE尚不撑持，Gecko(firefox)和webkit(safari/chrome)等需分离利用公有前缀-moz-和-webkit-。更让人纠结的是，假如单个角的border-radius属性的写法在这两个扫瞄器的差别更年夜，你要誊写大批的公有属性：

1. 12341

复制代码

1. 12342

复制代码

呃，是否是你已看的目炫了？这只是要完成左上角不是圆角，别的三个角都是圆角的情形。以是关于border-radius，神飞激烈倡议利用缩写：

1. color：#1133660

复制代码

1. 12344

复制代码

如许就复杂了良多。PS:不幸的是，最新的Safari(4.0.5)还不撑持这类缩写…(thanks@fireyy)
就总结这么多，另有别的的能够缩写的属性吗？接待人人提出一同会商。
</p>
搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。

---

作者: 海妖    时间: 2015-1-17 21:57
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

---

作者: 只想知道    时间: 2015-1-24 12:02
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

---

作者: 愤怒的大鸟    时间: 2015-2-1 10:31
时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

---

作者: 莫相离    时间: 2015-2-7 05:47
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

---

作者: 小女巫    时间: 2015-2-21 00:46
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

---

作者: 小魔女    时间: 2015-3-6 19:53
直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

---

作者: admin    时间: 2015-3-13 08:21
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

---

作者: 谁可相欹    时间: 2015-3-20 18:22
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

---

欢迎光临 仓酷云 (http://ckuyun.com/)

Powered by Discuz! X3.2