css样式有几种：CSS样式有几种？全面解析CSS样式类型

来源：网络作者：日期：2025-11-09 22:14:46

CSS样式的分类

CSS样式可以根据其来源、作用范围和应用场景分为以下几类：

行内样式（Inline Styles）

行内样式是直接作用于HTML元素的样式，通过元素的style属性定义，其特点是优先级最高，但灵活性较低,适用于局部样式调整。

示例代码：

<p style="color: red; font-size: 16px;">这是一段行内样式文本。</p>

内部样式表（Internal Stylesheet）

内部样式表将CSS代码直接嵌入到HTML文档的<head>标签中的<style>标签内，适用于单个页面的样式设计,便于维护和修改。

示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
    }
    h1 {
      color: blue;
    }
  </style>
</head>
<body>
  <h1>内部样式表示例</h1>
</body>
</html>

外部样式表（External Stylesheet）

外部样式表将CSS代码单独保存为.css文件，通过<link>标签引入HTML文档，适用于多页面共享样式,便于统一管理和维护。

示例代码：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>外部样式表示例</h1>
</body>
</html>

伪类（Pseudo-classes）

伪类用于为选择器添加特殊状态，如链接的悬停效果、输入框的聚焦状态等，常见的伪类包括hover、focus、active、first-child等。

示例代码：

css样式有几种：CSS样式有几种？全面解析CSS样式类型

a:hover {
  color: purple;
  text-decoration: underline;
}

伪元素（Pseudo-elements）

伪元素用于选择元素的特定部分，如::before、::after、::first-letter、::selection等,常用于添加装饰性内容或样式。

示例代码：

p::first-letter {
  font-size: 24px;
  font-weight: bold;
}
p::after {
  content: " — 结束";
  color: gray;
}

媒体查询（Media Queries）

媒体查询根据设备的屏幕尺寸、分辨率、颜色深度等条件应用不同的样式,实现响应式设计。

示例代码：

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
  .container {
    width: 100%;
  }
}

CSS变量（Custom Properties）

CSS变量允许在样式表中定义可复用的值,提高样式的可维护性和灵活性。

css样式有几种：CSS样式有几种？全面解析CSS样式类型

示例代码：

:root {
  --main-color: #3498db;
  --font-size: 16px;
}
body {
  color: var(--main-color);
  font-size: var(--font-size);
}

动画与过渡（Animations & Transitions）

CSS动画和过渡用于实现元素的动态效果,提升用户体验。

示例代码：

/* 过渡效果 */
.button {
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: #2980b9;
}
/* 动画效果 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade-in {
  animation: fadeIn 2s ease-in;
}