CSS样式的引用方式以及选择器使用

1. CSS 引用方式

CSS 可以通过三种方式引用到 HTML 文件中：

• 行内样式（Inline Styles）：直接在 HTML 元素中定义样式。
• 内部样式表（Internal CSS）：在 HTML 文档的 部分使用

  这是一个标题

  这是一个段落。

  2. CSS 选择器的简单使用

  CSS 选择器用于选取 HTML 元素并对其应用样式。以下是一些常用的 CSS 选择器。

  1. 元素选择器

  用于选择所有某一类型的 HTML 元素。

  p { color: green; }

  以上代码会将所有

  标签中的文本颜色设置为绿色。

  2. 类选择器（Class Selector）

  使用类选择器可以为具有相同类名的元素应用样式。类选择器前面加上 .。

  .text { font-size: 16px; color: #555; }

  HTML：

  这是一个段落。

  3. ID 选择器

  ID 选择器用于选取具有特定 ID 的元素，前面加上 #。

  #header { background-color: #4CAF50; color: white; padding: 10px; }

  HTML：

  网站头部

  4. 组合选择器

  组合选择器用于选取多个元素或特定条件下的元素。

  • 后代选择器：选取某个元素内的所有指定后代元素。

    div p { color: red; }

    以上代码会选取所有位于

    元素内的

    标签。

  • 群组选择器：同时选取多个元素，并为其应用相同的样式。

    h1, h2, h3 { font-family: 'Arial', sans-serif; }

  3. CSS 示例

  外部样式表 styles.css：

  /* 为所有 h1 标签设置样式 */

  h1 {

  color: darkblue;

  font-size: 24px;

  }

  /* 为类为 text 的元素设置样式 */

  .text {

  font-size: 14px;

  line-height: 1.6;

  color: #666;

  }

  /* 为 ID 为 footer 的元素设置样式 */

  #footer {

  background-color: #333;

  color: white;

  text-align: center;

  padding: 10px;

  }

  HTML 文件：

  这是一个标题

  这是段落内容。

  网站底部
  <

  /body>

  4. 总结

  • 行内样式：将样式直接写在元素内，不推荐使用，因为不利于维护。
  • 内部样式表：适合小型页面，但无法跨页面复用。
  • 外部样式表：最常用的方式，推荐用于大型项目，方便复用与管理。

  使用 CSS 选择器可以为网页中的不同元素应用样式，选择器种类包括：元素选择器、类选择器、ID 选择器等。