9.零基础学CSS：元素属性设置（字体、颜色、对齐等）全解析

一、常用元素属性

二、字体属性

[1. 设置字体](#1. 设置字体)

[2. 大小（font-size）](#2. 大小（font-size）)

八、文本装饰（text-decoration）

九、行高（line-height）

十、代码案例：实现新闻页面编辑

新闻页面代码示例：

一、常用元素属性

CSS属性众多，可参考官方文档：CSS 参考手册

不需要全部背下来，而是在使用中学习。

二、字体属性

1. 设置字体

通过 font-family属性设置字体，示例：

html 复制代码

body {
    font-family: '微软雅黑';
    font-family: 'Microsoft YaHei';
}

字体名称可以用中文，但不建议。

2. 大小（`font-size`）

通过 font-size设置字体大小，示例：

复制代码

p {
    font-size: 20px;
}

不同浏览器默认字号不同（Chrome 默认 16px），最好给明确值。
可给 body标签统一设置 font-size。
注意单位 px不要忘记。
标题标签（如 h1-h6）需要单独指定大小。

注意：实际设置的是字体中字符框的高度；实际字符字形可能比框高或矮。

示例代码（设置宋体、80px）：

html 复制代码

<style>
    div {
        font-family: '宋体';
        font-size: 80px;
    }
</style>


<body>
    <div>这是宋体</div>
</body>

三、设置文本颜色（`color`）

color属性用于设置文本颜色，支持三种写法：

复制代码

color: red;           /* 预定义颜色值（单词） */
color: #ff0000;       /* 十六进制形式（最常用） */
color: rgb(255, 0, 0);/* RGB方式 */

鼠标悬停在 VSCode 的颜色上，会出现颜色选择器，可手动调整颜色。

color属性值的写法：

预定义的颜色值（直接是单词，如 red）。
最常用：十六进制形式（如 #ff0000）。
RGB 方式（如 rgb(255, 0, 0)）。

RGB 原理：三原色（红、绿、蓝）的像素点叠加，数字越大颜色越深。例如：

color: red;红色像素点，数字越大红色越深。
color: rgb(255, 0, 0);红色拉满，绿色、蓝色为 0。

十六进制缩写规则：

若十六进制的两位相同，可缩写（如 #ff0000缩写为 #f00）。
不可缩写的情况：如 #f00f（两位不同，无法缩写）。

四、粗细（`font-weight`）

通过 font-weight设置字体粗细，示例：

复制代码

p {
    font-weight: bold;   /* 粗体 */
    font-weight: 700;    /* 数字表示（700 等同于 bold） */
}

可用数字（100~900）表示粗细。
700 == bold，400 == normal（默认不粗）。
取值范围：100（最细）~ 900（最粗）。

取值说明：

取值	说明
`normal`	默认值，标准粗细
`bold`	粗体
`bolder`	更粗（相对于父元素）
`lighter`	更细（相对于父元素）
`100~900`	100 最细，900 最粗；400=normal，700=bold

五、文字样式（`font-style`）

通过 font-style设置文字倾斜/正常，示例：

复制代码

/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;

很少把某个文字变倾斜，但经常要把 <em>/<i>改成不倾斜（去掉默认倾斜）。

示例代码（div 倾斜，p 倾斜）：

html 复制代码

<style>
    div {
        /* font-weight: lighter; */
        font-style: oblique;
        }
    p {
        font-style: italic;
        color: rgb(0, 0, 255);
      }
</style>

<body>
    <div>这是一段话</div>
    <p>这是第二段话</p>
</body>

六、文本对齐（`text-align`）

控制文字水平方向的对齐，也可控制图片等元素居中/靠右，示例：

复制代码

text-align: [值];

center：居中对齐。
left：左对齐。
right：右对齐。

应用示例（h1 左、h2 中、h3 右，p 左对齐）：

html 复制代码

<style>
h1 {
    text-align: left;
}
h2 {
    text-align: center;
}
h3 {
    text-align: right;
}
p {
    text-align: left;
}
</style>


<body>
    <h1>最左</h1>
    <h2>居中</h2>
    <h3>居右</h3>
    <p>Lorem</p>
</body>

七、文本缩进（`text-indent`）

控制段落的首行缩进（其他行不影响），示例：

复制代码

text-indent: [值];

单位可用 px或 em。
用 em更好：1 个 em= 当前元素的文字大小（如文字大小 16px，则 2em = 32px）。
缩进可为负：表示往左缩进（会导致文字"冒出去"）。

示例代码（p 缩进 2em）：

html 复制代码

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

<body>
    <div>
        <h1>这是新闻标题</h1>
        <p>Lorem</p>   
    </div>
</body>

八、文本装饰（`text-decoration`）

通过 text-decoration设置文本装饰线，示例：

复制代码

text-decoration: [值];

常用取值：

underline：下划线（常用，如链接默认下划线）。
none：啥都没有（如给 <a>标签去掉下划线）。
overline：上划线（不常用）。
line-through：删除线（不常用）。

示例代码（h1 上划线、h2 删除线、h3 右对齐、p 下划线）：

html 复制代码

<style>
    h1 {
        text-align: left;
        text-decoration: overline;
    }
    h2 {
        text-align: center;
        text-decoration: line-through;
    }
    h3 {
        text-align: right;
    }
    p {
        /* text-indent: 20px; */
        text-indent: 2em;
        text-decoration: underline;
    }
    a {
        text-decoration: none;
    }
</style>

<body>
    <h1>靠左</h1>
    <h2>居中</h2>
    <h3>居右</h3>
    <p>Lorem</p>
    <a href="#">不跳转</a>
</body>

九、行高（`line-height`）

通过 line-height设置行高，示例：

复制代码

line-height: [值];

十、代码案例：实现新闻页面

页面内容包含：

标题：居中加粗
发布日期：右对齐
分割线：提示，可使用 <hr>标签
正文/段落：左侧缩进
插图：居中显示
落款：右对齐

新闻页面代码示例：

html 复制代码

<!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>
    .title {
        text-align: center;
        font-weight: bolder;
        font-family: '宋体';
        font-size: 40px;
    }
    .time {
        text-align: right;
    }
    p {
        text-indent: 2em;
    }
    .picture {
        text-align: center;
    }
    img {
        width: 200px;
        height: 400px;
    }
    .finnaly {
        text-align: right;
    }
    </style>
</head>
<body>
    <div>
        <div class="title">这是新闻标题</div>
        <p class="time">2010年3月10日</p>
        <hr>
    </div>
    <div>
        <p>这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段</p>
        <p>这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段</p>
        <div class="picture">
            <img src="../头像.jpg" alt="">
        </div>
        <p>这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段</p>
        <p>这是新闻第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段</p>
    </div>
    <div class="finnaly">这是落款</div>
</body>
</html>