目录

CSS简介以及导入形式

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一般

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