CSS 选择器与引入方式_href="style.css-CSDN博客

本文链接：https://blog.csdn.net/prefer__/article/details/147433962

CSS 作为美化页面的关键技术，其选择器和引入方式是重要的基础内容

CSS 引入方式

行内样式：直接在 HTML 标签中使用style属性设置样式，如<p style="color: green;"> ，它的优先级最高，仅作用于当前标签。

内部样式表：在 HTML 的<head>标签内，通过<style>标签定义样式，可对多个相同标签或不同标签进行样式设置，如上述代码中在<style>标签内定义了p、.highlight、#unique等样式。

                外部样式表：将 CSS 代码写在独立的.css文件中，通过<link rel="stylesheet" href="style.css">在 HTML 中引入，便于维护和复用。

        CSS 选择器
                 标签选择器：以 HTML 标签名作为选择器，如p，会选中页面中所有<p>标签并应用样式。

类选择器：以.开头，后面跟自定义类名，如.highlight ，可给多个不同标签添加相同样式，只要标签的class属性值与之匹配即可。

id 选择器：以#开头，后面跟唯一的 id 名，如#unique ，一个页面中 id 应唯一，常用于对特定元素进行单独样式设置。

样式优先级：
行内样式优先级最高，其次是 id 选择器，然后是类选择器，最后是标签选择器。当存在多个相同优先级的样式定义时，遵循后来居上原则，即后定义的样式会覆盖前面的样式

示例代码：

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

<head>
  <meta charset="UTF-8">
  <title>CSS 选择器练习</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }

    p {
      color: blue;
    }

   .highlight {
      background-color: yellow;
    }

    #unique {
      color: red;
    }
  </style>
</head>

<body>
  <p style="color: green;">行内样式段落</p>
  <p class="highlight">类选择器样式段落</p>
  <p id="unique"> id 选择器样式段落</p>
  <p>标签选择器样式段落</p>

  <link rel="stylesheet" href="style.css">
</body>

</html>

运行结果: