前端开发：CSS（3）—— 字体与文本-EW帮帮网

下面我们来进一步学习如何使用CSS来修改文本样式。

字体样式

1、字体设置

字体选择

对于我们想要修改的字体，只能选择当前计算机上下载好的。我们选择想要修改的标签，使用font-family属性即可进行选择。在实际操作中尽量使用英文名称。

p {
    font-family: 'Times New Roman', Times, serif;
    font-family: '微软雅黑';
}

要注意：

多个字体之间使用逗号隔开；如果名称有空格，需要用单引号包裹。

字号大小

修改字号大小使用font-size进行修改。单位为px（像素）

p {
    font-family: '微软雅黑';
    font-size: 50px;
    color:red;
}


<!--html文件-->
<body>
    <p>微软雅黑</p>
</body>

运行效果如图：

2. 字体颜色

在上面的例子中已经修改了字体颜色。即使用color来选择想要的字体颜色；在上面我们直接使用了颜色的名称（红色—red）；此外，我们还可以通过设置三原色的比例进行选择：

三原色为红、绿、蓝；上面三原色写法中两两一组，分别对应红绿蓝三种颜色，其数字越大，对应的颜色就越深。

rgb表示方法类似于三原色，我们可以修改三个数值来选择我们想要的颜色。

3. 字体粗细

字体的粗细设置我们可以直接使用数值，也可以使用以下关键字后缀：（font-weight）

normal（400）：默认值，定义标准的字符。
bold（700）：粗体字符。
bolder：更粗的字符。
light：细体字符。
lighter：更细的字符。
inherit：规定一个从父元素继承字体的粗细。

4.样式

样式的修改我们使用以下关键字：（font-style）

normal：默认值，定义标准的样式。
italic：斜体样式。
oblique：倾斜样式。
inherit：规定一个从父元素继承字体的样式。

文本设置

1. 相对位置

我们先写如下代码：

<body>
    <h1>靠左</h1>
    <h2>居中</h2>
    <h3>靠右</h3>
    <p>正文内容---------------------------------------------------------</p>
</body>

下面我们添加类属性，依次进行靠左对齐、居中对齐、靠右对齐和首行缩进20px操作。

控制水平方向的对齐我们需要使用 text-align ：[值] 来进行设置。

首行缩进使用 text-indent ：[值] 来进行设置。

运行之后即可看到我们修改成功：

关于首行缩进：单位我们使用px或em；使用em更好，1个em就是当前元素文字的文字大小；此外，缩进可以是负的，表示往左缩进。

2. 行高

我们将字体大小均分为四部分内容：顶线、中线、基线和底线。行高=上边距+下边距+字体大小。在设置行高时，我们需要用到 line-height 来进行设置，单位px。

背景属性

下面我们来介绍背景属性。

背景颜色

背景颜色默认是transport（透明）的，我们可以通过 background-color 来修改背景颜色。

<style>
    p {
        background-color: grey;
}
</style>

背景图片

我们也能给背景设置一张背景图片；使用：

background-image: url(...)

注意：在括号内天航图片的路径，且：

url不能遗漏
url可以是绝对路径，也可以是相对路径
url上可以加引号，也可以不加

我们可以加上width和height来决定有多大的空间来展示图片。

背景颜色和背景图片可以同时存在。

背景平铺

使用 background-repeat: 来决定平铺方式。默为repeat。

repeat：平铺

no-repeat：不平铺

repeat-x：水平平铺

repeat-y：垂直平铺

背景位置

使用 background-position ：x y ； 来修改图片的位置。x，y为图片的参数。

关于参数，我们有三种描述方法：

方位名词：（top,left,right,bottom）
精确单位：坐标或百分比（以左上角为原点，坐标单位px）
混合单位：同时包含方位名词和精确单位

背景尺寸

使用 background-size : length|percenttage|cover|contain 来修改背景尺寸。

1.可以填具体的数值，如 40px 60px 表示宽度为40px，高度为60px。

2.也可以填百分比，按照父元素的尺寸设置。

3.cover：把背景图像扩展到足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

圆角矩形

在CSS中允许我们添加并设置圆角矩形。使用 border-radius 来使边框带有圆角效果。

border-radius: length;

其中length表示内切圆半径，其数值越大，弧线越强烈。

下面我们用代码生成一个圆角矩形：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height:200px;
            border:2px green solid;
            border-radius: 20px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

这样我们就得到了一个圆角矩形。下面我们按fn+F12打开控制台，修改我们length参数，我们可以看到圆角矩形的弧度会发生变化。

生成圆形：让border-radius的值为正方形宽度的一半即可：
  <style>
        div {
            width: 100px;
            height:100px;
            border:2px green solid;
            border-radius: 50%;
        }
    </style>
点击运行，我们可以看到生成了一个圆。

前端开发：CSS（3）—— 字体与文本