这是网易微专业之《前端工程师》的第二篇学习笔记，讲CSS的简写和分开写的问题，什么是简写呢，就是多个属性值按照顺序一行写，那要遵循什么样的顺序写呢？每种写法都有什么含义呢？什么是分开写呢？就是多个属性分开命名着写，看到这里你也许可能还不是很明白，没关系，我们往下面看吧！
01.前言-CSS语法
CSS的语法一般是这样的，选择器{属性名：属性值；}我们要介绍的就是有时候需要这样写：选择器{属性名：属性值 ...多个属性值}，多个属性值之间使用空格隔开。什么是属性名呢，比如，背景background、边框border之类的，属性值就是给属性名定一个值，比如边框border定一个长宽值等，就是这个意思。
02. CSS的4个简写
（一） background 简写属性在一个声明中设置所有的背景属性:
background-color
background-image
background-repeat
background-origin
background-clip
background-attachment
background-position
例如：
background: #444444 url(image.png) no-repeat fixed top;
其中
（1） background-repeat：定义背景图片是否重复；值如下
background-repeat：repeat|repeat-x|repeat-y|no-repeat|inherit（从父元素继承）//背景图片是否重复；
（2）background-origin：定义背景图片的起始点
background-origin:border-box|padding-box|content-box;
这个起始点决定了background-position的值从哪里开始偏移，默认background-origin的值是padding-box，就是从padding的框开始偏移，border-box表示从border的框开始偏移，content-box表示从内容的框边角处开始偏移。IE6、IE7、IE8不支持这个属性。
（3）background-clip：规定背景的绘制区域
background-clip:border-box|padding-box|content-box;
background-clip的默认值是border-box，意思是背景绘制在border内，padding-box就是背景绘制在padding内，content-box就是背景绘制在内容区内。IE6、IE7、IE8不支持这个属性。
（4） background-attachment：定义背景图片随滚动轴的移动方式；值如下
background-attachment：scroll | fixed | local；
如果值是scroll就是背景图片随着滚动轴不滚动，如果是local的话，则是背景图片随滚动轴滚动，一般特效中的视觉差特效就是利用local这个属性做的。
（5） background-position：定义背景图像的起始位置；值如下
background-position：x% y%（百分比）|top left之类的|xpx ypx（具体数值）；
注意：比如设置了background-position：top；如果仅规定了一个关键词，那么第二个值将默认是"center"。又比如设置了background-position：30px；仅规定了一个值，纳闷另一个值将是50%。
设置background-position的时候需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。
（二）border 简写属性在一个声明设置所有的边框属性:
border-width
border-style
border-color
例如：
border:1px solid red;
其中
（1） border-style：定义边框样式，包括有这几种样式：点状、实线、双线、虚线，值如下
border-style：dotted|solid|double|dashed;
（三）font 简写属性在一个声明中设置所有字体属性:
font-style
font-variant
font-weight
font-size/line-height
font-family
例如:
font:italic bold 12px/20px arial,sans-serif;
font这个综合属性，连写的时候必须写字号和定义什么字体这两个属性值，如果只是font:12px；这样写是没效果的，必须写至少写font:12px arial;才会有效。
其中
（1） font-style：定义字体样式，包括有这几种样式：正常、斜体、强制斜体、继承父元素，值如下
font-style：normal|italic|oblique|inherit；
（2） font-weight：定义字体粗细，值如下
font-weight：normal|bold|bolder|lighter|数值比如100-900；
400 等同于 normal，而 700 等同于 bold。
（3） font-family：定义什么字体，可以连串，中间用逗号隔开。
比如
font-family:"Times New Roman",Georgia,Serif;
注意：最后一个字体最好写一个类族名称作为最后的选择。比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"有这几类的字体类族，有兴趣可以去查查同类字体类族中还有别的哪些字体，但不管怎么变，最后都会回到上面这几个字体上。属于Web安全字体。
当然你可以搭配CSS3中的@font-face使用，使用你想要的炫酷的自定义的字体，只要在@font-face中定义加载自定义的字体文件，就不怕用户的电脑中没有安装你想要的字体了，就可以不用在最后一个字体写字体类族的名称。
（四）list-style 简写属性在一个声明中设置所有的列表属性:
list-style-type
list-style-position
list-style-image
例如：
list-style:square inside url('/images/images.gif');
其中
（1） list-style-type：定义列表前面的小圆点是空心还是实心还是别的样式或者没有样式。其值有但不限于如下这些
list-style-type：none|disc(实心圆)|circle（空心圆）|square（方块）|decimal-leading-zero（以0开头的数字）；
（2） list-style-position：定义列表的小原点之类的标记的位置是往里靠还是偏外面一点，可以看看实例，其值如下
list-style-position：inside|outside|inherit;
（3） list-style-image：定义列表标记的自定义图片，你可以设置自己的标记，不用默认的小圆点，改用箭头什么的图案都可以，一般是PNG或者Gif格式的，带透明的图。其格式如下
list-style-image：url("/i/arrow.gif");
02. CSS的盒模型的四个值，三个值，两个值的方向问题
拿margin为例，其他可以参照margin的。
（1）margin:10px ；意思是所有的外边距（上下左右）都是 10px。
（2） margin:10px 50px；意思是上下外边距是 10px，左右外边距是 50px。
（3） margin:10px 50px 20px；上外边距是 10px，而左右外边距是 50px，下外边距是 20px。
（4） margin:10px 50px 20px 30px；上外边距是10px，右外边距是50 px，下外边距是 20px，左外边距是 30px。
网友评论