【前端 - CSS】第 9 课 - CSS 初体验

Aperion

已于 2023-06-10 08:59:39 修改

阅读量1.5k

点赞数 1

分类专栏： HTML 文章标签： css 前端

于 2023-06-10 08:58:51 首次发布

本文链接：https://blog.csdn.net/qq_51870334/article/details/131080329

版权

HTML 专栏收录该内容

18 篇文章 2 订阅

订阅专栏

欢迎来到博主 Apeiron 的博客，祝您旅程愉快！时止则止，时行则行。动静不失其时，其道光明。

1、CSS 定义

层叠样式表（Cascading Style Sheets，缩写为 CSS），是一种 样式表 语言，用来描述 HTML 文档的呈现（美化内容）。

书写位置：title 标签下方添加 style 双标签，style 标签里面书写 CSS 代码。

<title>CSS 初体验</title>
<style>
    /* 选择器 {} */
    p {
        /* CSS 属性 */
        color：red;
       }
</style>


<p>体验 CSS </p>

2、基础选择器

在 CSS 中，基础选择器（也称为元素选择器）用于选择 HTML 文档中的特定元素并应用样式。基础选择器 以元素的名称作为选择器，例如 div、p、a 等。它们是 CSS 规则中最简单和最基本的选择器之一。

基础选择器的作用是选择特定类型的元素，并将样式应用于这些元素。当 HTML 文档中包含多个相同类型的元素时，基础选择器可以一次选择它们所有，并为它们应用相同的样式规则。

例如，如果要将所有段落元素 <p> 的文字颜色设置为红色，可以使用以下 CSS 规则：

p {
  color: red;
}

上述规则中的 p 就是一个基础选择器，它选择了所有 <p> 元素，并将文字颜色设置为红色。通过使用基础选择器，可以轻松地对 HTML 文档中的元素应用通用样式。

3、文字控制属性

在 CSS 中，文字控制属性 用于控制文本的外观和布局。这些属性允许您更改文字的字体、大小、颜色、对齐方式以及其他相关样式。以下是一些常见的文字控制属性及其作用：

① font - family：用于指定文本的字体系列。可以使用特定字体的名称，或者提供多个字体作为备选项，以确保在某个字体不可用时使用备用字体。

② font - size：用于设置文本的字体大小。可以指定具体的大小值，如像素或百分比，也可以使用相对值，如相对于父元素的大小。

③ font - wieght：用于控制文本的粗细程度。可以使用关键词如 "normal"（正常）、"bold"（粗体），也可以使用数字值。

④ color：用于设置文本的颜色。可以使用颜色名称、十六进制值或 RGB 值来指定颜色。

⑤ text - align：用于控制文本的水平对齐方式。可以设置为 "left"（左对齐）、"right"（右对齐）、"center"（居中对齐）或 "justify"（两端对齐）。

⑥ line - height：用于设置文本行高。可以使用具体的数值或百分比值，也可以使用相对值。

⑦ text - decoration：用于添加或移除文本装饰效果，如下划线、删除线等。

这些属性只是文字控制属性中的一部分，还有其他许多属性可用于更精确地控制文本的样式。通过使用这些属性，您可以根据需求自定义文本的外观和布局，从而实现各种视觉效果。

4、示例代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            /* CSS 代码 */
            /* 选择器 { CSS 属性 } */
            /* 属性名和属性值成对出现 -> 键值对 */
            p {
                /* 文字颜色 */
                color:red;

                /* 字号 */
                font-size:30px;
            }
        </style>

    </head>

    <body>
        <p>体验 CSS</p>
    </body>
</html>