排版与缩写

• 文字排版

　　   　字体：body{font-family:"Microsoft Yahei";}

　　　　字号和颜色:body{font-size:20px;color:red;}

　　　　字体排版：p span{font-weight:bold;}//设置为粗体

　　 　　               p a{font-style:italic;}//斜体

　　　　　　　　　p a{text-decoration:underline;}//下划线

　　　　　　　　　 .oldPrice{text-decoration:line-through;}//删除线

• 段落排版

　　　　缩进：p{text-indent:2em;}//段前空两个字的空白，2em的意思就是文字的2倍大小

　　　　行间距：p{line-height:2em;}//行高为2cm

　　　　文字间隔或者字母间隔：p{ letter-spacing:50px;}
　　　　单词间距设置：p{word-spacing:50px;}

　　　　块状元素中的文本、图片设置对齐；
　　　　居中样式:div{ text-align:center;}
　　　　左对齐：div{ text-align:left;}
　　　　右对齐：div{ text-align:right;}　　　

• 颜色值缩写

　　　颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。
　　　例：p{color: #336699;}可以缩写为：p{color: #369;}

 

• 字体缩写

　　　　body{
　　　　　　font-style:italic;
　　　　　　font-variant:small-caps; //针对小写英文字母，意思为小型大写，大小跟小写字母一样，样式是大写。
　　　　　　font-weight:bold; 
　　　　　　font-size:12px; 
　　　　　　line-height:1.5em; 
　　　　　　font-family:"宋体",sans-serif;
　　　　　　}
　　　　这么多行的代码其实可以缩写为一句：
　　　　body{ font:italic small-caps bold 12px/1.5em "宋体",sans-serif;}
　　　　注意：
　　　　　　1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。
　　　　　　2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
　　　　　　一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：
　　　　　　　　　　body{ font:12px/1.5em "宋体",sans-serif;}
　　　　　　　　　　只是有字号、行间距、中文字体、英文字体设置。

　　在网页中的颜色设置是非常重要，有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种：