CSS是什么？ - 技术栈

一、CSS 是什么？

CSS 全称是 Cascading Style Sheets（层叠样式表），它是专门用来控制网页样式（外观）的语言，和 HTML 配合使用：

HTML 负责搭建网页的结构（比如标题、段落、图片这些元素）；
CSS 负责给这些结构 "化妆"（比如设置文字颜色、字体大小、元素位置、背景样式等）。

简单来说：HTML 是网页的 "骨架"，CSS 是网页的 "皮肤"。

二、CSS 的核心作用

样式美化：修改元素的外观，比如文字颜色、大小、背景、边框、阴影等；
布局控制：调整元素在页面中的位置，比如居中、左右排列、上下间距、响应式适配不同设备（手机 / 电脑）；
层叠与继承：多个样式规则可以叠加生效，子元素可以继承父元素的部分样式，灵活控制样式优先级。

三、CSS 的使用方式（新手必知）

在前端开发中，CSS 有 3 种常见的引入方式，优先级从高到低依次是：

1. 行内样式（内联样式）

直接写在 HTML 元素的 style 属性里，仅对当前元素生效，适合临时修改单个元素样式。

html 复制代码

<!-- 示例：给段落设置红色、20px 字体 -->
<p style="color: red; font-size: 20px;">这是行内样式的文字</p>

2. 内部样式（嵌入式）

写在 HTML 文件的 <style> 标签中（通常放在 <head> 里），仅对当前 HTML 文件生效，适合小型页面。

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>内部样式示例</title>
  <!-- 内部样式 -->
  <style>
    /* 选中所有 p 标签，设置样式 */
    p {
      color: blue;
      line-height: 1.5; /* 行高 */
    }
    /* 选中 id 为 title 的元素 */
    #title {
      font-size: 24px;
      font-weight: bold; /* 加粗 */
    }
  </style>
</head>
<body>
  <h1 id="title">这是标题</h1>
  <p>这是内部样式的段落</p>
</body>
</html>

3. 外部样式（外联式）

将 CSS 代码单独写在 .css 后缀的文件中，通过 HTML 的 <link> 标签引入，是最推荐的方式（样式与结构分离，便于维护）。

第一步：创建 style.css 文件

css

css 复制代码

/* style.css */
/* 选中类名为 box 的元素 */
.box {
  width: 200px;
  height: 200px;
  background-color: pink; /* 背景色 */
  border: 2px solid black; /* 边框：2px 实线 黑色 */
  margin: 20px auto; /* 外边距：上下 20px，左右自动（居中） */
}

第二步：在 HTML 中引入

html

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>外部样式示例</title>
  <!-- 引入外部 CSS 文件 -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="box">这是外部样式的盒子</div>
</body>
</html>

四、CSS 的核心语法

CSS 规则由 选择器 + 声明块 组成：

css

css 复制代码

/* 选择器：选中要样式化的元素 */
选择器 {
  /* 声明块：多个样式声明，以分号结尾 */
  属性1: 值1;
  属性2: 值2;
}

选择器 ：找到目标元素（比如 p 选中所有段落、.box 选中类为 box 的元素、#title 选中 id 为 title 的元素）；
属性：要修改的样式维度（比如 color 控制颜色、width 控制宽度）；
值：属性的具体设置（比如 color: red 表示颜色为红色）。

五、CSS 的核心特性

层叠性：多个样式规则作用于同一个元素时，会按 "优先级" 叠加生效（行内样式 > ID 选择器 > 类选择器 > 标签选择器）；
继承性：子元素会继承父元素的部分样式（比如文字颜色、字体、行高，而宽高、边框等不会继承）；
优先级 ：当样式冲突时，优先级高的规则会覆盖优先级低的（可通过 !important 强制提升优先级，不建议频繁使用）。

总结

CSS 是控制网页样式的语言，核心作用是美化外观、控制布局，与 HTML 分工明确（HTML 搭结构，CSS 做样式）；
CSS 有 3 种使用方式，外部样式是开发中最推荐的（样式与结构分离，便于维护）；
CSS 核心语法是 "选择器 + 声明块"，通过选择器选中元素，再通过属性 - 值对设置样式。

掌握这些基础后，你可以进一步学习 CSS 选择器、盒模型、Flex 布局 / Grid 布局等核心知识点，就能实现更复杂的网页样式和布局了。