CSS简介以及导入形式

CSS（Cascading Style Sheets，层叠样式表） 是一种用于描述 HTML 或 XML 文档外观和格式的样式表语言。它用于控制网页的布局、颜色、字体、间距等视觉表现，使内容与表现分离，便于维护和更新。

主要功能：

1. 布局控制：定义元素的位置、大小、排列方式等。

2. 样式设置：设置字体、颜色、背景、边框等。

3. 响应式设计：通过媒体查询实现不同设备的适配。

4. 动画与过渡：创建动态效果，提升用户体验。

css语法：css通常由选择器，属性和属性值组成，多个规则可以组合在一起，以便于同时应用多个样式

选择器{
    属性1： 属性值1；
    属性2： 属性值2;
}

1.选择器的生明里面可以写无数条属性。

2.声明的每一行属性，都需要以英文分号结尾；

3.声明中所有属性和值都是以键值对这种形式出现的；

例如：

/*这是一个p标签选择器*/
p{
    color: bule;
    font-size: 16px;
}

CSS 的导入方式

CSS 可以通过多种方式引入到 HTML 文档中，常见的有以下三种：

1. 内联样式（Inline Styles）

直接在 HTML 元素的 style 属性中编写 CSS。

以下的就会出现一个颜色为蓝色的一句"这是一个段落"。

<p style="color: blue; font-size: 14px;">这是一个段落。</p>

特点：

• 优先级最高。

• 不利于维护和复用。

2. 内部样式表（Internal Style Sheet）

在 HTML 文件的 <head> 部分使用**<style>**标签定义 CSS。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>内部样式表示例</title>
    <style>
        p {
            color: blue;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <p>这是一个段落。</p>
</body>
</html>

特点：

• 适用于单个页面。

• 优先级低于内联样式，但高于外部样式表。

3. 外部样式表（External Style Sheet）

将 CSS 代码保存在独立的**.css 文件**中，通过 <link> 标签引入。

步骤：

1. 创建 CSS 文件（如 styles.css）：

p {
    color: blue;
    font-size: 14px;
}

2，在 HTML 文件中引入：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>外部样式表示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>这是一个段落。</p>
</body>
</html>

特点：

• 最适合大型项目，便于维护和复用。

• 优先级低于内联和内部样式表。

4. 使用 @import 导入

在 CSS 文件中通过 @import 引入其他 CSS 文件。

css

@import url('styles.css');

特点：

• 适用于模块化 CSS。

• 加载顺序可能影响性能。

总结

导入方式	适用场景	优先级	维护性
内联样式	单个元素样式	最高	差
内部样式表	单个页面样式	中	一般
外部样式表	多页面或大型项目	低	好
@import	模块化 CSS	低	一般

根据项目需求选择合适的导入方式，通常推荐使用外部样式表以实现样式与结构的分离。