css文本格式

回复

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

今天学习css中的文本格式

一.文本格式

1、控制字体

1、指定字体

font-family : value,value,value ...

eg:font-family:"微软雅黑","Arial";

font-family:"Microsoft Yahei";

提示：一般网页中，中文使用微软雅黑较多，英文使用 Arial

2、字体大小

font-size:12px;

提示：网页中，默认文本一般采用12px

3、字体加粗

相当于 <b></b>

font-weight:normal / bold / value;

value : 400-900 之间

400 相当于 normal

900 相当于 bold

4、字体样式

相当于<i></i>

font-style:normal / italic;

5、小型大写字母

font-variant : normal / small-caps;

6、字体属性 : font

font 为简写属性，包含6个值

font : font-style font-variant font-weight font-size/line-height font-family;

font:bold 12px "microsoft yahei";

font:12px/24px "microsoft yahei";

应用：现在我想在页面中显示文本大小28px ，文字加粗，斜体,字体为微软雅黑的一段文本

<!DOCTYPE html>
<html>
<head>
<title>字体</title>
<meta charset="utf-8" />
<style>
#d1{
/*文本大小28px ，文字加粗，斜体,字体为微软雅黑，*/
font-size:28px;
font-weight:bold;font-style:italic;

复制代码

显示效果为：

2、控制文本格式

1、文本颜色

color:value;

2、文字水平排列方式:

text-align : left/right/center

3、文本线条修饰

text-decoration:none / underline ;

取值：overline(上划线) , line-through(删除线)

4、行高

每行文本所占的高度是多少。一旦设定好后，该行文本将在该行内垂直居中显示（仅在行高大于本文大小时有效）。

问：在一个div中，有一行文本，向让该行文本在div中垂直居中显示？

解决：div中文本的行高要设置与 div的高度一致

但是，紧紧局限于一行数据

5、首行文本缩进

text-indent : value ;

value 表示的是缩进的距离

6、文本阴影

text-shadow : h-shadow v-shadow blur color;

应用，我现在想分别显示一段红色的，水平居中，有下划线和一段垂直居中，首行缩进20px，有阴影的文本：

<!DOCTYPE html >
<head>
<title>文本格式</title>
<meta charset="utf-8" />
<style>
#d1{
height:40px;
width:500px;
border:1px solid black;
color:red;
text-align:center;
text-decoration:underline;
}
#d2{
height:40px;
width:500px;
border:1px solid black;
line-height:40px;
text-indent:20px;
text-shadow:1px 2px ;
}
</style>
</head>
<body>
<div id="d1">
这是一段红色的，水平居中，有下划线的文本
</div> <br/>
<div id="d2">
垂直居中,首行缩进了20个像素，具备阴影的文本
</div> </body>

复制代码
其显示效果如下：

[HTML5开发] css文本格式

[HTML5开发] css文本格式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

阅读推荐

用微信扫一扫