html+css报纸排版中的那些事

由于html标签太多，很多不一定会用到，因而容易忘记。但是也有很多在有特定功能的网页布局中用得比较频繁，就拿之前写的一个报纸排版来说吧，有些标签需要经常用到，所以我把它们做了一个总结。下面，我们一起来看看在报纸排版中比较常用的几个标签和一些效果实现。

（1）background-size：设置背景图片的大小

           报纸排版中的背景图必不可少，而这个标签的作用就是设置背景图片的大小，以长度值或者百分比显示，也可通过cover和contain来对图片进行伸缩。

           语法：background-size: auto | <长度值> | <百分比> | cover | contain

           取值说明：1.  auto：默认值，不改变背景图的原始宽高。

                            2.  <长度值>：成对出现时分别表示width和height；设置为一个值时表示将其作为宽度值等比缩放。

                            3.  <百分比>：0~100%之间的任何值，表示在原来的基础上乘上百分比得出数值。成对和设置一个值的时候同上。

                            4.  cover：将背景图等比缩放以填满这个容器。

                            5.  contain：将背景图等比缩放至某一边紧贴容器边缘为止。

（2）文本相关标签：css中font的各种属性+css中的text的各种属性

          font相关属性：1.  font-style: normal（默认）  |  italic（斜体）  |  oblique（倾斜）  |  inherit（从父元素继承）

                                2.  font-variant: normal（默认）  |  small-caps（小型的大写字母）  |  inherit（从父元素继承）

                                3.  font-weight: normal（默认）| bold（粗体）| bolder（更粗）| lighter（更细）| 100~900（400-normal，700-bold）| inherit（继承）

                                4.  font-family:

         text相关属性：1.  text-indent（缩进文本）——可为正值或负值（em）  |  百分比  |  继承

                               2.  text-align（水平对齐）——left  |  right  |  center  |  justify

                               3.  word-spacing（改变字或单词之间的间隔）；letter-spacing（改变字母间的间隔）

                               4.  text-transform（大小写）——none | uppercase（全大写）|  lowecase（全小写）|  capitalize（对每个单词的首字母大写）

                               5.  text-decoration（文本装饰）——none | underline（下划线）| overline（顶端划线）| line-through（贯穿线）| blink（闪烁）

（3）水平线和竖直线的实现：

        水平线的实现：1. <hr /> 

                               2.  border-top  /  border-bottom

        竖直线的实现：border-left  /  border-right

       （另外，附加一个css巧妙实现分隔线的博客链接：http://www.daqianduan.com/4258.html）

（4）段落首字下沉的实现：第一处first类定义了块元素的宽度、文字大小和行距；

                                         第二处first:first-letter定义的就是首行下沉的具体样式，30像素大小粗 体、楷体、行距20像素，并且向左浮动。

                                         而且IE6对first-letter伪类也可以很好的支持，不用担心浏览器兼容性的问题。

<span style="font-size:12px;"><style>
.first {
   width:240px;
   font-size:12px;
   line-height:18px;
}
.first:first-letter {
   font-size:30px;
   float:left;
   padding:5px 5px 0 0;
   line-height:24px;
   font-family:"楷体_GB2312";
   font-weight:bold;
   color:#c00;
}
</style></span>

（5）css的border实现小三角形：

<span style="font-size:12px;"><span style="font-size:12px;"><div style="width:0px;
            height:0px;
            border-top:100px solid red;
            border-left:150px solid transparent;
            border-bottom:50px solid transparent;
            border-right:150px solid transparent;">
</div></span></span>

（6）css实现阴影效果：

        文本阴影：text-shadow:h-shadow（水平位置 --必需，可为负值） v-shadow（垂直位置 --必需，可为负值） blur（模糊半径 --可选） color（可选）；

           元素块阴影：box-shadow:h-shadow   v-shadow   blur（阴影的模糊半径）   spread（阴影的扩展半径）   color  inset（或outset）；

        浏览器的兼容问题：

<span style="font-size:12px;">.box-shadow{

         //Firefox4.0-

         -moz-box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色;

         //Safariand Google chrome10.0-

         -webkit-box-shadow:投影方式 X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色;

         //Firefox4.0+、 Google chrome 10.0+ 、 Oprea10.5+ and IE9

         box-shadow:  投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;

}</span>