赵工的个人空间

CSS设置文本样式

CSS引入的主要目的是让设计者方便灵活地控制Web页面的外观表现，其中的文字样式更加丰富，实用性更强。

1.长度单位：

在HTML中，无论文字的大小，还是图片的长宽设置，通常使用像素或百分比来进行设置。CSS中，可以用多种长度单位，主要分为两类：相对类型和绝对类型。

1）相对类型：

①px（pixel）：
像素，由于会根据设备的分辨率的多少而代表不同的长度，因此属于相对类型。
②em：
设置以目前字符高度为单位。比如h1{margin:2em}，就会以目前字符的两倍高度来显示。当用em作为尺度单位时，是以font-size属性为参考依据，如果没有设置font-size属性，就以浏览器默认的字符高度为参考。使用em来设置字符高度并不常用。

2）绝对类型：

所谓绝对，就是无论显示设备的分辨率是多少，都代表相同的长度。

尺寸单位		说明
in	英寸	不是国际标准单位，平常极少使用
cm	厘米	国际标准单位，较少用
mm	毫米	国际标准单位。较少用
pt	点数	最基本的显示单位，较少用
pc	印刷单位	应用印刷行业中，1pc=12pt

网页制作中，默认以像素为单位，但对某些浏览器来说，以像素为单位也要加上px。

2.颜色定义：

在HTML页面中，颜色统一采用RGB模式显示，每种颜色都由这3种颜色的不同比重组成，每种颜色的比重分为0~255档。当红绿蓝3个分量都设置为255时就是白色；当RGB3个分量都为0时为黑色。
在CSS中文字颜色是通过color属性设置的。主要有3种表示方法：

1）W3C标准的16种颜色：

W3C标准化组织定义了16种颜色名称：

名称	颜色	名称	颜色
aqua	水蓝	navy	深蓝
black	黑	olive	橄榄绿
blue	蓝	purple	紫
fuchsia	紫红	red	红
gray	灰	silver	银
green	绿	teal	青
lime	绿黄	white	白
maroon	酱紫	yellow	黄

2）十六进制颜色：

#xxxxxx形式的颜色，每两个字节表示一种颜色，如：#ffff00。
还有一种简略形式，只取颜色中每两个字节的第一个，如：#ff0，与#ffff00等效。
简略形式支持4000种颜色，而6字节形式支持1600万种颜色。

3）rgb函数定义颜色：

比如，rgb(0, 255, 255)。也可以用百分比方式，如rgb(58%, 95%, 74%)。

下面的几种方法都是将文字设置为蓝色：
  h3 {color: blue; }
  h3 {color: #0000ff; }
  h3 {color: #00f; }
  h3 {color: rgb(0,0,255); }
  h3 {color: rgb(0%,0%,100%); }

3.设置文字的字体：

在HTML中，设置文字的字体需要通过<font>标记的face属性。而在CSS中，则使用font- family属性。示例：
  <style type="text/css">
     h1{
        font-family:黑体;
     }
     p{
        font-family:Arial, "Time New Roman";
     }
  </style>
font-family属性可以同时声明多种字体，字体之间用逗号分隔开，浏览器会在计算机中按顺序字体，搜索到就使用，搜索不到就搜索下一个，如果都搜索不到就使用浏览器默认字体。一些字体中间有空格的需要用双引号括起来。

4.设置文字的倾斜效果：

CSS中的font-style属性是用来控制字体倾斜的，可以设置正常、意大利体、倾斜3种样式：
  font-style:normal;
  font-style:italic;
  font-style:oblique;
然而，在windows上并不能区分italic、oblique，都是按iatlic方式显示的。中文字体的倾斜效果不好看，网页上很少使用中文字体的倾斜。

5.设置文字的加粗效果：

在HTML中可以通过添加<b>标记或者<strong>标记将文字设置为粗体。在CSS中，使用font- weight属性控制文字的粗细。CSS规定font-weight属性可以设置很多不同的值：

设置值	说明
normal	正常粗细
bold	粗体
bolder	加粗体
lighter	比正常粗细还细
100-900	共有9个层次，数字越大字体越粗

实际上大多数操作系统和浏览器不能很好地实现精细的文字加粗设置，通常只能设置正常和加粗两种。

6.英语字母大小写转换：

CSS中，只需要设定英文段落的text-transform属性，就能轻松实现大小写的转换。示例：
  p.one{text-transform:capitalize; } /*单词首字大写*/
  p.two{text-transform:uppercase; } /*全部大写*/
  p.three{text-transform:lowercase; } /*全部小写*/

7.控制文字的大小：

CSS中通过font-size属性来控制文字大小，该属性可以使用多种长度单位。示例：
  p{font-family:Arial, "Times New Roman"; font-size:12px; }
实用中，font-size最常用的单位是px和em。1em表示的长度是字母m的标准宽度。还常使用百分比为单位，如“font-size:200%”。
英文排版常使用段落首字母为标准大小3倍、左浮动并下沉显示：
  <p id="p1"><span id="firstLetter">A</span>……
其样式为：
  #firstLetter{
     font-size:3em;
     float:left;
  }
CSS2.1规定了7个绝对大小的font关键字：xx-small、x-small、small、medium、large、x-large和xx-large。另外还有用于相对测量的关键字：larger和snaller。

8.文字的装饰效果：

在HTML文件中，可以使用<u>标记给文字加下划线。CSS中，用text-decoration属性为文字加下划线、删除线和顶线等多种装饰效果。text-decoration属性的设置值见表：

设置值	说明
none	正常显示
underline	为文字加下划线
line-through	为文字加删除线
overline	为文字加顶线
blink	文字闪烁，仅部分浏览器支持

这个属性可以同时设置多个属性值，用空格分隔即可。示例：
  h1{
     font-family:黑体;
     text-decoration:underline overline;
  }

9.设置段落首行缩进：

根据中文排版习惯，每个正文段落的首行的开始处应该保持两个中文字的空白。CSS中，text- indent属性可以控制段落的首行缩进和缩进距离。示例：
  #p2{
     text-indent:2em;
  }
如果首行凸出一定距离，也称悬挂缩进：
  #p2{
     padding-left:2em;
     text-indent:-2em;
  }

10.设置字词间距：

英文是由单词构成，单词是由字母构成。要控制英文文本的疏密程度，要设置单词内部的字母间距和单词之间的距离。CSS通过letter-spacing和word-spacing两个属性分别控制字母间距和单词间距。示例：
  #p1{
     font-style:italic;
     text-transform:capitalize;
     word-spacing:10px;
     letter-spacing:-1px;
  }
对于中文而言，要调整汉字之间的距离，需要设置letter-spacing属性。

11.设置段落内部的文字行高：

不通过CSS，HTML无法控制段落中行与行之间的距离。CSS中，使用line-height属性控制行高。line-height属性的设置值见表：

设置值	说明
长度	数值，可以使用前面所介绍的尺度单位，示例：line-height:20px;
倍数	font-size的设置值的倍数，示例：line-height:1.5;
百分比	相对于font-size的百分比，示例：line-height:130%;

如果不设置行高，那么由浏览器默认的设置高度，通常是段落文字的font-size的1.2倍。

12.设置段落之间的距离：

要调整段落之间的距离，设置margin属性，margin称为外边距。示例：
  p{
     border:1px red solid;
     margin:5px 0px;
  }
这里为margin设置了两个属性值，前者确定上下距离为5像素，后者确定左右距离为0像素。将p段落的上下margin设置为5像素，相邻段落之间的距离取两段落margin值得较大者。

13.控制文本的水平位置：

使用text-align属性可以设置文本的水平位置。text-align属性的设置值见表：

设置值	说明
left	左对齐，浏览器默认
right	右对齐
center	居中对齐
justify	两端对齐

14.设置文字与背景的颜色：

CSS中，除了设置文字的颜色，还可以设置背景的颜色，分别使用属性color和background- color。示例：
  p{
     background-color:#678;
     color:white;
  }

15.设置段落的垂直对齐方式：

CSS中，有一个用于垂直方向对齐的属性vertical-align。在目前的浏览器中，只能对表格单元格中的对象进行垂直方向的对齐设置，而对于一般的块级元素，例如div等，都不起任何作用。

1）使用line-height属性进行设置：

如果文字内容只有1行，可以使用line-height的办法使文字垂直居中。示例：
  <div class="middle">
      Hear is ONE line of text.
  </div>
相应的CSS设置为：
  .middle{
     height:100px;
     line-height:100px;
     border:1px #666 solid;
  }
这里将行高设置为与高度相同的值，就可以保证文字垂直居中了。

2）通用的3层嵌套div方法：

  <html><head><title>通用CSS垂直居中方式</title>
  <style>
     #outer{height:100px; overflow:hidden; position:relative; }
     #outer[id] {display:table; position:static; }
     #middle{position:absolute; top:50%; } /*for explorer only*/
     #middle[id] {display:table-cell; vertical-align:middle; position:static; }
     #inner{position:relative; top:-50%; } /*for explorer only*/
     /*optional: #inner[id] {position:static; } */
     .withBorder{
         border: 1px green solid;
      }
  </style> </head>
  <body>
  <div id="outer" class="withBorder">
     <div id="middle">
        <div id=="inner">
           Any text any height any content,
           everything is vertically centered.
        </div>
     </div>
  </div> </body></html>