CSS命名规范与简写规则技巧

 

通常有下面四种书写方法:

 

property:value1; 表示所有边都是一个值value1； 

property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 

property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3 

property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left 

 

margin与padding的简写

方法一：

margin-top:5px;

margin-right:0px;

margin-bottom:5px;

magin-left:0px;

简写:上下、左右

margin:5px 0;

 

方法二：

margin-top:5px;

margin-right:5px;

margin-bottom:5px;

magin-left:5px;

简写:

margin:5px;

 

方法三：

margin-top:10px;

margin-right:5px;

margin-bottom:15px;

magin-left:50px;

简写:上、右、下、左

margin:10px 5px 15px 50px;

 

 

padding与margin相同

 

border 

 

　　border-width:1px; 

　　border-style:solid; 

　　border-color:#000000; 

　　代码简化为：border:1px solid #000 

 

background 

 

　　background-color:#CCFFFF; 

　　background-image:url(图片路径); 

　　background-repeat:repeat-x; 

　　background-position:5px 4px; 

　　代码简化为：background:#CFF url(图片路径) repeat-x 5px 4px 

 

font 

 

　　font-size:26px; 

　　font-weight:bold; 

　　font-family: “宋体”; 

　　代码简化为：font:26px bold “宋体”

 

color属性值 

 

　　color:#000000; 

　　color:#ff0000; 

　　代码简化为：color:#000, color:#f00 

注：16进制的色彩值，如果每两位的值相同，可以缩写一半

 

Block和inline元素对比

所有的HTML元素都属于block和inline之一。block元素的特点是： 总是在新行上开始； 高度，行高以及顶和底边距都可控制； 宽度缺省是它的容器的100%，除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。相反地，inline元素的特点是： 和其他元素都在一行上； 高，行高及顶和底边距不可改变； 宽度就是它的文字或图片的宽度，不可改变。 <span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。 用code class="inline">display: inline 或display: block命令就可以改变一个元素的这一特性。什么时候需要改变这一属性呢？ 让一个inline元素从新行开始； 让块元素和其他元素保持在一行上； 控制inline元素的宽度（对导航条特别有用）； 控制inline元素的高度； 无须设定宽度即可为一个块元素设定与文字同宽的背景色。

 

导航文字居中或布局居中

 

用line-height文字垂直居中

布局居中假设你的布局的那个div壳是#wrapper：div#wrapper{margin:0 auto;}