Css文字效果

浏览数：28 / 时间：2015年06月09日

1.文字样式：font-family

字体：sans-serif（字体醒目）；serif（笔画的开始和结束有额外的修饰部分，易读性较强）

*页面设计最好有多个备选字体

2.文字大小：font-size

分绝对大小和相对大小，采用相对大小px,%,em（%，em相对于父标记而言，没有设定父标记则用浏览器默认值）。

不同浏览器采用相对字体大小。

3.字体颜色：color

span标记，可以针对某些具体字体来做改变，行内元素

4.文字粗细：font-weight

5.文字斜体：font-style

normal,italic,oblique

6.上下划线，删除线：text-decoration

blink闪烁，ie不支持，ff可以

7.英文字母大小写：text-transform

capitalize首字母大写；uppercase大写；lowercase小写

8.段落对齐方式

水平：text-align；垂直：vertical-align,对于文字本身而言，该属性对于块级元素不起作用，对于表格有用。

9.行间距：line-height 字间距：letter-spacing

10.首字放大：float和span，通过span标签对首字进行特殊的样式控制，然后float:left突出显示

伪类：first-letter，也可以实现类似首字放大，但该属性的文字对一些其他的CSS样式支持的不好，不推荐使用。

例子：百度搜索内容显示

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>百度搜索页面</title>
 6 <style type="text/css">
 7 body{
 8     margin:0px;
 9     padding:0px;}
10 p{
11     margin:0px;
12     font-family:Arial, Helvetica, sans-serif;}
13 p.title{
14     padding-bottom:0px;
15     font-size:16px;}
16 p.content{
17     padding-top:3px;
18     font-size:13px;
19     line-height:18px;}
20 p.link{
21     font-size:13px;
22     padding-bottom:25px;
23     color:#008000;}
24 span.search{
25     color:#c60a00;}
26 span.quick{
27     color:#666666;
28     text-decoration:underline;}
29 p.title span.search{
30     text-decoration:underline;}
31 
32 </style>
33 </head>
34 
35 <body>
36  <p class="title"><a href="#">中国<span class="search">春节</span>网欢迎您</a></p>
37  <p class="content">在中国传统的节日中,最热闹。最受人们重视的节日是<span class="search">春节</span>。<span class="search">春节</span>,是农历的元旦,是... 送压岁钱是潮汕春节习俗中重要的一项,长辈要分钱给后辈,能挣钱的后辈也要送...</p>
38  <p class="link">www.chunjie.net.cn 2012-11-08  - <span class="quick">百度快照</span></p>
39 </body>
40 </html>