咱们学会了CSS中选择器的使用,现在可以开始来学习一些CSS的常用样式了。

文字

先来学习最常见、最简单的文字样式设置。容我小小自恋一下,我这里有一段文字。

<html>
<head>
    <meta charset="utf-8">
    <!-- ... -->
</head>

<body>
<p>我最喜欢在ITFun,听东哥的课程了!</p>
</body>
</html>

先来预览一下,默认的样子,真的是平平无奇。我们现在就来给它设置一下常用的样式。

<head>
    <meta charset="utf-8">
    <!-- ... -->

    <style>
        p {
            color: #1f99b0;
            font-size: 18px;
            text-align: center;
            font-family: sans-serif;
            font-weight: bold;
        }
    </style>
</head>

CSS常用文字样式

这些就是基础的文字样式的设置了。我们现在将中间的文字,多复制个几份。

<body>
<p>我最喜欢在ITFun,听东哥的课程了!我最喜欢在ITFun,听东哥的课程了!我最喜欢在ITFun,听东哥的课程了!
    我最喜欢在ITFun,听东哥的课程了!我最喜欢在ITFun,听东哥的课程了!我最喜欢在ITFun,听东哥的课程了!
    我最喜欢在ITFun,听东哥的课程了!我最喜欢在ITFun,听东哥的课程了!我最喜欢在ITFun,听东哥的课程了!
    我最喜欢在ITFun,听东哥的课程了!我最喜欢在ITFun,听东哥的课程了!我最喜欢在ITFun,听东哥的课程了!</p>
</body>

刷新一下,先把text-align居中对齐的属性去掉了。这样一个段落,最常见的需求就是首行需要缩进两个空格。那如果你不会CSS,你说我直接在p标签中打两个空格行不行呢?刷新一下,发现完全没有任何反应。其实别说是打两个空格了,就算你打100个空格在这里,一样的没有任何变化的。正确的做法,当然就是要用CSS来实现了。

<style>
p {
    color: #1f99b0;
    font-size: 18px;
    font-family: sans-serif;
    font-weight: bold;

    text-indent: 2em;
}
</style>

indent的中文意思,是缩进。这里em的意思是相对长度单位,你可以先简单的理解为,缩进了两个字的位置。而且无论你的文字大小是多少像素,它都是刚好缩进两个文字大小的位置。这样就很完美的实现了首行缩进了。

另外,文字太多了,每行之间的行距,其实也是可以调整的。需要使用的是

<style>
p {
    /* ... */

    line-height: 30px;
}
</style>

首行缩进

总结

属性名 常用值 意义
color red、#08c 文字颜色
font-size 18px 文字大小
text-align center、right 水平对齐方式
font-family "PingFang SC", "Microsoft YaHei", sans-serif 字体
font-weight bold、400 文字粗细
text-indent 2em 缩进
line-height 30px 行高

常用的文字样式设置,其实也就这么多了。其他还有一些不太常用的属性,大家如果将来碰到了,可以再去查查CSS手册