CSS介绍及三种应用方式

基本介绍

• CSS（Cascading Style Sheets，层叠样式表）是一种用来描述 HTML 或其他基于标记语言的文档外观和格式的样式表语言。它是前端开发的核心技术之一，与 HTML 和 JavaScript 一起构成了构建现代网页的三大基石。

CSS 的作用

1. 控制网页样式

• 设置字体、颜色、边距、边框、背景等。
• 定义页面布局，例如居中、对齐、浮动、网格等。

1. 响应式设计

• 使用媒体查询（@media）实现不同屏幕尺寸和设备上的页面适配。

1. 动态效果

• 添加过渡（transition）、动画（@keyframes）等视觉效果。
• 配合 JavaScript 实现更加复杂的交互。

1. 分离内容与样式

• 将 HTML 的结构与样式分离，代码更易于维护。

CSS 的使用方式

1.内联样式（Inline Style）

• 将样式直接写在 HTML 标签的 style 属性中。
• 示例：

<p style="color: red;">这是一个段落。</p>

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

• 将样式写在 HTML 文档的 <style> 标签中。
• 示例：

<style>
  h1 {
    color: green;
  }
</style>

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

• 将样式写在独立的 .css 文件中，通过 <link> 标签引入。
• 示例：

<link rel="stylesheet" href="styles.css">

优先级

由高到低依次是：

5级—— !important

!important 是顶级优先级，可重置 JavaScript 设置的样式，通常不推荐使用。

4级——style 内联样式

3级——ID 选择器

2级—— 类选择器、属性选择器和伪类

1级——标签选择器

0级——通配选择器 *、逻辑组合伪类，如 :not()、:is() 和 :where 等

优先级最低 —— 继承的样式

总结