Web前端入门第 19 问：CSS 入门功法【内部样式表基础语法】

HELLO，这里是大熊学习前端开发的入门笔记。

本系列笔记基于 windows 系统。

上岸第一剑，先斩...内联样式~

内联样式弊端

关系的发展都是一步一步的，内联样式最终还是被取代了，原因是它太死脑筋了，不够灵活。

如多个元素的样式都长一样，代码就成这样了：

  <p style="color: red; font-size: 20px; line-height: 32px; background-color: #333;">此处是第一段文字</p>
  <div style="color: red; font-size: 20px; line-height: 32px; background-color: #333;">此处是第二段文字</div>
  <section style="color: red; font-size: 20px; line-height: 32px; background-color: #333;">此处是第三段文字</section>
  <p style="color: red; font-size: 20px; line-height: 32px; background-color: #333;">此处是第四段文字</p>

所有的 style 属性都一样，看起来就像多胞胎一样。程序的世界复制代码是大忌，所有重复的工作都应该有更友好的方式。

于是有了 CSS 与 class 不清不楚的关系

class 中文翻译 类，顾名思义就是分类、归类。作用嘛，就是给多胞胎元素样式归类。

然后 css 的语法华丽变身：

selector {
  property1: value1;
  property2: value2;
  property3: value31, value32, value33;
}

其中 selector 可以是 标签名、类名、ID名、伪类、伪元素、组合选择器等等各种组合拳。

以 class 为例，上面多个一样的多胞胎样式，就可以用 class 来归类，然后变身：

  <style>
    .style1 {
      color: red;
      font-size: 20px;
      line-height: 32px;
      background-color: #333;
    }
  </style>
  <p class="style1">此处是第一段文字</p>
  <div class="style1">此处是第二段文字</div>
  <section class="style1">此处是第三段文字</section>
  <p class="style1">此处是第四段文字</p>

class 的定义是有要求的，虽然 html 规定 class 属性可以是任何字符串，但是 css 的选择器规定，类名只能包含字母、数字、下划线（_）和短横线（-），并且区分大小写，而且不能以数字开头。

内联样式力不能及的事

  1. 伪类和伪元素
    所有伪类和伪元素在内联样式中无法使用，原因是它们都必须要结合 css 选择器使用，只能写在内部或外部样式表中。

  2. 媒体查询（响应式设计）
    定义媒体查询的语法规定只能结合 css 选择器使用，所以内联样式又被干掉了。

  3. 动画与过渡
    复杂动画需要依赖 CSS @keyframes 定义，@keyframes 又不支持内联样式写法，所以...嘿嘿嘿。。

内部样式表

所谓内部样式表，就是把 css 代码写在 style 标签中。

语法结构：

<style>
  selector1 {
    property1: value1;
  }
  selector2 {
    property2: value2;
  }
</style>

如果 selector1 和 selector2 是同一个选择器，结果会怎样？如：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS</title>
  <style>
    .style1 {
      color: red;
      font-size: 12px;
    }
    .style1 {
      font-size: 20px;
    }
  </style>
</head>

<body>
  <p class="style1">此处是第一段文字</p>
</body>

</html>

看渲染结果：

样式被合并应用到了元素身上，但是相同的 css 属性，排在后面的优先级更高，会覆盖前面的样式属性。

总结

  1. 如果仅有一两个css属性，可以使用内联样式。

  2. 如果HTML元素的样式超过两个，建议加class，使用内部或外部样式表。

  3. 内联样式有力不能及的时候。

  4. HTML结构应该尽可能保持简洁。

posted @ 2025-03-12 15:42  前端路引  阅读(171)  评论(0)    收藏  举报