CSS3 文本样式

字体

字体大小

p {
 font-size: 6px; <!-- px 是字体的单位，单位有关的知识，在后面单独讲 -->
}

<p>简明教程</p>

效果

简明教程

字体斜体

p {
 font-style: italic; <!-- font-style: normal; 对已斜体的字体取消斜体 -->
}

<p>简明教程</p>

效果

简明教程

字体加粗

p {
 font-weight: bold; <!-- font-weight: normal; 对已加粗的字体取消加粗 -->
}

<p>简明教程</p>

效果

简明教程

系统字体

p {
 font-family: 宋体,微软雅黑f,Georgia,Serif; <!-- 必须是操作系统有这个字体 | 宋体,微软雅黑; 如果没有宋体，则使用雅黑，最后Georgia,Serif -->
}

<p>简明教程</p>

效果

简明教程

在线字体

@font-face {
    font-family: name;
    src: url('name.ttf'); <!-- 把字体文件放在css文件同级目录，然后载入 -->
}
<p>简明教程</p>

文本

下划线

p {
 text-decoration: underline; <!-- 取消下划线 text-decoration: none; -->
}
<p>我想赞助简明教程。</p>

效果

我想赞助简明教程。

文本对齐

p {
 text-align: right; <!-- left 左对齐，center 居中，right 右对齐 -->
}
<p>我要赞赏简明教程。</p>

效果

我要赞赏简明教程。

文本间距

p {
 letter-spacing: 10px;
}
<p>我要赞赏简明教程。</p>

效果

我要赞赏简明教程。

首行缩进

p {
 text-indent: 20px; 
}
<p>我要赞赏简明教程。<br> 第二行......  </p>

效果

我要赞赏简明教程。
第二行......

链接

当光标移动到上面时，显示手型。

a:hover {
 cursor:pointer;
}

效果