锐英源软件
第一信赖

精通

英语

开源

擅长

开发

培训

胸怀四海 

第一信赖

当前位置:锐英源 / 开源技术 / 网站前端开发 / CSS文字样式
服务方向
人工智能数据处理
人工智能培训
kaldi数据准备
小语种语音识别
语音识别标注
语音识别系统
语音识别转文字
kaldi开发技术服务
软件开发
运动控制卡上位机
机械加工软件
软件开发培训
Java 安卓移动开发
VC++
C#软件
汇编和破解
驱动开发
联系方式
固话:0371-63888850
手机:138-0381-0136
Q Q:396806883

CSS文字样式


文字是传达信息的基础,是网页设计不可缺少的元素,在互联网中有着各种各样的文字。下面我们来讲一下CSS设置各种文字效果的方法。

为了便于讲解,我们准备了一个非常简单的页面。代码和页面效果图如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>锐英源CSS文字样式讲解</title>
<link href="../CSS/mm.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>玲珑骰子安红豆,入骨相思知不知。</h1>
<p>
一尺深红胜曲尘,天生旧物不如新。
合欢桃核终堪恨,里许元来别
井底点灯深烛伊,共郎长行莫围棋。
玲珑骰子安红豆,入骨相思知不知。</p>
<p>温庭筠(约812-约866),本名岐,艺名庭筠,字飞卿,汉族,太原祁(今天山西省祁县)人,唐代诗人、词人。唐初宰相温彦博后裔……</p>
<p>……略……</p>
</body>
</html>
TextStyle-A1

在HTML中,文字字体是通过<font-face="字体名称">来设置的,而在CSS中则是通过font-family属性来控制。接下来我们在样式部分增加如下代码:

p{
font-family:"Times New Roman", Times, serif;
}

CSS是通过font-size属性来控制文字大小的,该属性的值可以为长度单位px,这种是我们最常使用的。也可以是in、cm、mm、pt和pc。这五种长度单位都是绝对长度单位,它们不会随显示器的变化而变化。

还有两个比较特殊的长度单位ex和em。1ex表示字母x的标准高度,1em表示字母m的标准宽度。在这里我们需要注意的是,当父元素文字大小发生变化时,使用这两个单位的子元素大小会同比例变化。

比如在文字排版时,有时会要求第一个字母比其他字母大很多,并下沉显示,就可以使用这个单位:

<p class="p"><span class="firstLetter">温</span>

设置CSS类别.firstLetter

.firstLetter
{
font-size:3em;
float:left;
}

然后我们再通过line-height属性来设置行高,background-image属性来设置背景图片,并设置文字颜色。此时效果图如下:

TextStyle-AA1

在CSS中,可以通过text-align属性来控制段落的水平对齐,而段首缩进是通过text-indent属性设置的。

文字布局

下面我们来讲一下文字布局。首先我们给段落1设置边框线和背景色,然后将段落2文字环绕段落1,这时要将段落1设置为浮动。完整CSS代码如下:

body{
background-image:url(111.jpg);
}
h1{
background:#999;
color:#FFF;
text-align:center; }
p{
font-family:"Times New Roman", Times, serif;
font-size:18px;
line-height:1.5;
color:#666;
}
.firstLetter{
font-size:3em;
float:left;}
.p1{
width:300px;
float:left;
margin:10px;
margin-left:0;
padding:10px;
border:1px gary double;
}

此时的效果图就完成的差不多了,这时段落1和段落2距离边框也都有一定的空间。

TextStyle-AAA1

大家可以参考以上案列自己动手做一下,以便更加深入的了解CSS文字样式。

友情链接
版权所有 Copyright(c)2004-2021 锐英源软件
公司注册号:410105000449586 豫ICP备08007559号 最佳分辨率 1024*768
地址:郑州大学北校区院(文化路97号院)内