【CSS】文字样式

来源：互联网发布：中国石油大学网络认证编辑：程序博客网时间：2024/04/23 20:50

前言

　　再word中编辑文档，我们可以对文字的字体、大小和颜色等各种属性进行设置。CSS同样可以对HTML页面中的文字进行设置。

字体

　　在HTML语言中，文字的字体是通过下面的格式来设置的。

<font face="字体名称">

　　而css中字体则是通过font-family属性来控制的。

p{    font-family:黑体，Arial，宋体，sans-serif;}

　　上面的代码设置了p标记的字体，整句代码告诉浏览器，首先在浏览者的计算机中寻找黑体，如果该用户计算机中没有黑体，则接着寻找Arial字体，如果黑体与Arial都没有，再寻找宋体。遍历完后都没有的话就使用浏览器默认字体显示，也就是sans-serif，它表示的不是单个字体的名称，而是一类字体的统称，按照W3C的规则，在font(或font-family)的最后都要求制定一个这样的字体集（实际情况自己看着办）。另外，“serif”出现时的功能同sans-serif。不同字体用逗号隔开，如果遇到字体名中有空格，如Times New Roman，这时需要用双引号”Times Nes Roman”括起来。

文字大小

　　在css中，控制文字大小通过font-size属性来具体控制，而该属性的值可以是相对大小也可以是绝对大小。
　　绝对大小就是直接在font-size属性后面跟上一个具体的长度值，如：font-size：0.5cm(in/mm/pt/pc)。
　　相对大小设置比较灵活，是大多数网页制作者青睐的一种方式。

font-size：15px; /*其显示大小与显示器分辨率有关*/font-size：200%； /*在父标记的基础上乘以2*/font-size:0.5em;/*在父标记的基础上乘以0.5*/

文字颜色

　　文字的各种颜色配合其他页面元素组成了整个五彩缤纷的页面，在css中文字颜色是通过color属性设置的。下面的几种方法都是将文字设置为蓝色。

h3{color:blue;}h3{color:#00f;}h3{color:#0000ff;}h3{color:rgb(0,0,255);}h3{color:rgb(0%,0%,100%);}

　　在设置某一个段落文字的颜色时，通常可以利用span标记，将需要的部分进行单独标注，然后再设置span标记的颜色属性。
　　在HTML页面中，颜色统一采用RGB的格式，也就是通常人们所说的”红绿蓝”三原色模式。每种颜色都由这3中颜色的不同比重组成，分为0~255档。当红绿蓝3个分量都设置为255时就是白色，例如rgb(100%,100%,100%)和#FFFFFF都指白色，其中”#FFFFFF”为十六进制的表示方法，前两位为红色分量，中间两位是绿色分量，最后两位是蓝色分量。FF即为十进制中的255。
　　当RGB3个分量都为0时，即显示为黑色，例如rgb(0%,0%,0%)和#000000都表示黑色，当红、绿分量都为255，而蓝色分量为0时，则显示为黄色，例如rgb(100%,100%,0%)和#FFFF00都表示黄色。

文字粗细

在HTML中，我们可以通过添加b或strong标记将文字设置为粗体。在css中可以将文字的粗细进行更细致的划分，更重要的是css还可以将本身是粗体的文字变成正常粗细。

font-weight:lighter;/*将粗体设置成正常字体*/font-weight:100;/*font-weight后跟具体数值来设置粗细*/font-weight:bold;/*粗体*/

其他属性

font-style:italic;/*设置斜体*/font-style:normal;/*标准风格*/text-align:center;/*水平居中*/text-decoration:underline;/*下划线*/text-decoration:overline;/*顶划线*/text-decoration:line-through;/*删除线*/text-decoration:blink;/*闪烁*//*说明：有时候希望文字同时又下划线、顶划线和删除线，这时可以将属性值同时赋给text-decoration，并用空格分开*//*英文字母大小写转换*/text-transform:capitalize; /*单词首字大写*/text-transform:uppercase;/*全部大写*/text-transform:lowercase;/*全部小写## 标题 ##*/

实例：百度一下

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>百度一下</title><style>    div{        font-size:40px;        font-family:隶书,Helvetica,sans-serif;        color:#E10601;        font-weight:100;        font-weight:bold;        text-align:center;    }    #pic{        margin-left:-18px;        margin-right:-18px;        margin-top:50px;    }    #wb{        width:500px;        margin-top:20px;        height:30px;    }</style></head>    <div>        <span>Bai</span>        <img src="tb.png" id="pic"/>        <span>百度</span>    </div>    <div>        <input type="text" id="wb">    </div><body></body></html>

效果图

资料：拾色器下载

2 0