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;
}

效果

简明教程网
更多教程 HTML5 教程 CSS3 教程 JavaScript 教程 JQuery 教程 React.js 教程 Node.js 教程 Koa2 教程 Python 教程 Linux 教程