css那些事-网页润色

作者：gcbeen

日期：2013年09月25日

一、字体设置

字体设置的建议：

中文页面尽可能首先定义为“宋体”，其次为其他字体，如：

    font-family: "宋体"、Verdana、Lucida,、Arial、Helvetica、sans-serif;
    font: normal 14px/1.5em simsun, Verdana,Lucida, Arial, Helvetica, sans-serif;

英文页面就选择英文字体，可以考虑Arial、Verdana、Tahoma等字体。
中英结合的页面可以考虑首先定义英文字体，相对来说修改浏览器默认字体的用户少之又少，但不带表没有。
特殊字体一律使用图片。

二、字形改变

字体大小（font-size）的属性值

xx-small：最小
x-small：较小
small：小
medium：默认值正常
large：大
x-large：较大
xx-large：最大
larger：相对字体尺寸，相对于父对象中字体尺寸较大，使用成比例em单位计算。
smaller：相对字体尺寸，相对于父对象中字体尺寸较小，使用成比例em单位计算。
length：百分数，px，其百分比取值基于父对象中字体的尺寸。

字体加粗（font-weight）常用属性值。

normal：默认值
bold：粗体

font-style属性值

normal：默认值
italic：斜体

em强调标签所包含的文字默认就是斜体，如果不需要倾斜将其设置为正常的字体（normal）。

三、文字颜色（color）

四、段落样式

首行缩进

text-indent属性可以设置文本对象的缩进

    p {
      text-indent: 2em;/* em相对于当前对象内文本字体大小的单位。 */
    }

在一个固定宽度的容器内，利用缩进的特性将文字“推到”容器之外，在设置overflow: hidden;将超出该容器的内容隐藏。

    p {
      width: 200px;
      height: 25px;
      overflow: hidden;
      background-color: #EEE;
    }
    p.ti-2em {
      text-indent: 2em;
    }
    p.ti-none {
      text-indent: -9999px;
    }

行高调整（line-height）

    p {
      line-height: 28px;
      background-color: #EEE;
    }

    p span {
      font-size: 30px;
    }

line-height属性居有一个特性，不设置单位的时候会以段落中某个最大的文字字体为基准做行高处理。

    p {
      line-height: 1.5;
      background-color: #EEE;
    }

五、特殊效果

首字母下沉

    p:first-letter {
      float: left;
      font-weight: bold;
      font-size: 2em;
    }
    p {
      clear: both;
    }

首行文字样式

    p:first-line {
      font-weight: bold;
      color: #F00;
    }

文字隐藏截取

    p {
      width: 300px;
      height: 54px;
      overflow: hidden;
      background-color: #EEE;
    }

文字隐藏，以图片代替。

    &lh1>css那些事<h1>

    h1 {
      width: 250px;
      height: 80px;
      overflow: hidden;
      text-indent: -9999px;
      background: url(images/logo.jpg) no-repeat 0 0;
    }

    h1 {
      width: 250px;
      height: 80px;
      overflow: hidden;
      line-height: 9999px;
      background: url(images/logo.jpg) no-repeat 0 0;
    }

使用具备隐藏特性的属性

visibility: hidden;
display: none;

    <h1><span>CSS那些事</span></h1>

    h1 {
      width: 250px;
      height: 80px;
      background: url(images/logo.jpg) no-repeat 0 0;
    }
    h1 span {
      visibility: hidden;
    }
    //或者
    h1 span {
      display: none;
    }

六、文字链接

链接样式的几个伪类

:link
:visited
:hover
:active

四个伪类的顺序（LoVe HAte）link visited hover active

    .myLink {
      padding-left: 20px;
      background: url(images/music_1.gif) no-repeat left center;
    }
    .myLink:hover {
      background: url(images/music_2.gif) no-repeat left center;
    }

利用多张图片代替文字链接在不同状态下的样式。

    .moreA {
      display: block;
      width: 41px;
      height: 11px;
      overflow: hidden;
      text-indent: -9999px;
      background: url(images/more_1.gif) no-repeat 0 0;
    }
    .moreA:hover {
      width: 43px;
      height: 13px;
      background: url(images/more_2.gif) no-repeat 0 0;
    }

css 7