CSS3的chapter4

  段落样式:

    • 行高——line-height

      p { line-height:25px | 150% | normal;}

    • 段落缩进——text-indent

      p { text-indent:2em;}

    • 段落对齐——text-align

      p { text-align:left | center | right | justify;}

    • 文字间距——letter-spacing

      p { letter-spacing:5px | normal;}

    • 文字溢出——text-overflow
      text-overflow:clip ——将内容裁切掉
      text-overflow:elipsis——内容替换为省略号
           注意:要先定义强制文本在一行显示——white-space:nowrap及溢出内容为隐藏——overflow:hidden ,才有显示省略号的效果。

      p{

               overflow: hidden;    

               white-space: nowrap;

               text-overflow: ellipsis;

      }

    • 段落换行——word-wrap
      word-wrapnormal | break-word

  背景样式:

    • 背景颜色——background-color
      body { background-color:#CCCCCC | rgba(255,0,0,.5) | rgb(255,0,0) | transparent;}
    • 渐变——linear-gradient/radial-gradient
      background-image:linear-gradient(to left, red 30%,blue);
    • 背景图片——background-image
      body { background-image:url(images/bg.jpg);}
    • 背景平铺方式——background-repeat
      body { background-repeat:repeat-x | repeat-y | no-repeat | repeat;}
    • 背景定位——background-position

      body { background-position:left bottom/30% 30%/20px 20px;}

    • 背景原点——background-origin
      注意:必须设置背景平铺为background-repeat:no-repeat才生效

      body {background-origin:border-box | padding-box | content-box;}

    • 背景显示区域——background-clip

      body {background-clip:border-box | padding-box | content-box | text }

    • 背景尺寸——background-size

      body { background-size:80px 60px | 80% 60% | auto | cover | contain;}

    • 缩写

      body {

               background-color:# EDEDED;

               background-image:url(images/bg.png);

               background-repeat:no-repeat;

               background-position:50%  30px;

      }

      body { background:#EDEDED url(images/bg.png) no-repeat 50% 30px;}

  列表样式:

    • 项目符号——list-style-type
      ul { list-style-type:disc | circle | square | none | decimal | lower-roman | upper-alpha;}
    • 自定义项目符号——list-style-image
      ul {list-style-image:url(images/arrow.gif)}    
posted @ 2016-08-12 10:54  很污的文杰  阅读(109)  评论(0编辑  收藏  举报