给大家带来CSS教程:汇总CSS属性的缩写
结构清晰，容易被搜索引擎搜索到，天生优化了seo网页制造poluoluo文章简介：高效的css写法中的一条就是利用简写。经由过程简写可让你的CSS文件更小，更容易读。而懂得CSS属性简写也是前端开辟工程师的基础功之一。
高效的css写法中的一条就是利用简写。经由过程简写可让你的CSS文件更小，更容易读。而懂得CSS属性简写也是前端开辟工程师的基础功之一。明天我们体系地总结一下CSS属性的缩写。
色采缩写
色采的缩写最复杂，在色采值用16进制的时分，假如每种色彩的值不异，就能够写成一个：
1color：#113366能够简写为
1color：#136一切用到16进制色采值的中央都可使用简写，好比background-color、border-color、text-shadow、box-shadow等。
盒子巨细
这里次要用于两个属性：margin和padding，我们以margin为例，padding与之不异。盒子有高低摆布四个偏向，每一个偏向都有个外边距：
1234margin-top:1px;margin-right:1px;margin-botton:1px;margin-left:1px;这四个值能够缩写到一同：
1margin:1px1px1px1px;缩写的按次是上->右->下->左。顺时针的偏向。绝对的边的值不异，则能够免却：
1234margin:1px;//四个偏向的边距不异，同等于margin:1px1px1px1px;margin:1px2px;//高低边距都为1px，摆布边距均为2px，同等于margin:1px2px1px2pxmargin:1px2px3px;//右侧距和右边距不异，同等于margin:1px2px3px2px;margin:1px2px1px3px;//注重，这里固然高低边距都为1px，可是这里不克不及缩写。边框(border)
border是个对照天真的属性，它有border-width、border-style、border-color三个子属性。
color：#1133660color：#1133661它能够依照width、style和color的按次简写：
1color：#1133663有的时分，border能够写的更复杂些，有些值能够免却，可是请注重哪些是必需的，你也能够测试一下：
color：#1133664color：#1133665经由过程下面的代码能够懂得到，border默许的宽度是3px，默许的色采是black——玄色。border的缩写中border-style是必需的。
同时，还能够对每条边接纳缩写：
1234color：#1133667还能够对每一个属性接纳缩写：
color：#1133660color：#1133669outline
outline相似border，分歧的是border会影响盒模子，而outline不会。
color：#113366011能够缩写为：
113一样，outline的简写中，outline-style也是必需的，别的两个值则可选，默许值和border不异。
背景(background)
background是最经常使用的简写之一，它包括以上司性：
color：#113366415background的简写能够年夜年夜的进步css的效力：
117background的简写也有些默许值：
119background属性的值不会承继，你能够只声明个中的一个，别的的值会被使用默许的。
font
font简写也是利用最多的一个，它也是誊写高效的CSS的办法之一。
font包括以上司性：
color：#1360color：#1361font的各个属性也都有默许值，记着这些默许值绝对来讲对照主要：
color：#1360color：#1363现实上，font的简写是这些简写中最必要当心的一个，稍有忽略就会形成一些意想不到的成果，以是，良多人其实不同意利用font缩写。
不外这里恰好有个小手册，信任会让你更好的了解font的简写：
列表款式
大概人人用的最多的一条关于列表的属性就是：
1color：#1365它会扫除一切默许的列表款式，好比数字大概圆点。
list-style也有三个属性：
color：#1133660color：#1367list-style的默许属性以下：
1color：#1369必要注重的是，假如list-tyle中界说了图片，那末图片的优先级要比list-style-type高，好比：
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属性的写法在这两个扫瞄器的差别更年夜，你要誊写大批的公有属性：
1234112342呃，是否是你已看的目炫了？这只是要完成左上角不是圆角，别的三个角都是圆角的情形。以是关于border-radius，神飞激烈倡议利用缩写：
color：#113366012344如许就复杂了良多。PS:不幸的是，最新的Safari(4.0.5)还不撑持这类缩写…(thanks@fireyy)
就总结这么多，另有别的的能够缩写的属性吗？接待人人提出一同会商。
</p>
搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。 这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。 这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。 时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上 dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。 Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。 直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。 我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。 难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.
页:
[1]