CSS详细学习笔记

发布于:2025-05-09 ⋅ 阅读:(22) ⋅ 点赞:(0)

1. CSS简介

CSS(Cascading Style Sheets,层叠样式表)是一种用于控制HTML文档外观和格式的样式表语言。它通过定义HTML元素的样式规则,可以实现对网页布局、字体、颜色、间距等外观特性的统一控制,从而使网页更加美观、易读和具有个性化的风格。

1.2 CSS的引入方式

1.2.1 内联样式
  • 定义:直接在HTML元素的style属性中定义样式。

  • 示例

    <p style="color: red; font-size: 16px;">这是一段红色的文本,字体大小为16px。</p>
  • 优点:样式与HTML元素紧密关联,直观且易于理解;对单个元素的样式控制非常方便。

  • 缺点:样式代码分散在HTML文档中,不利于维护和复用;如果多个元素需要相同的样式,需要重复编写代码,增加了代码冗余。

1.2.2 内部样式表
  • 定义:在HTML文档的<head>部分使用<style>标签定义样式。

  • 示例

    <head>
      <style>
        p {
          color: blue;
          font-size: 14px;
        }
      </style>
    </head>
    <body>
      <p>这是一段蓝色的文本,字体大小为14px。</p>
    </body>
  • 优点:样式代码集中在一个地方,便于管理和维护;可以对整个HTML文档中的元素进行统一的样式设置。

  • 缺点:仅适用于单个HTML文档,无法在多个页面之间共享样式;如果需要修改样式,需要在每个HTML文档中分别修改。

1.2.3 外部样式表
  • 定义:将样式代码写在一个独立的.css文件中,然后通过<link>标签引入HTML文档。

  • 示例

  • CSS文件(styles.css)

    p {
      color: green;
      font-size: 12px;
    }

    HTML文件

  • <head>
      <link rel="stylesheet" href="styles.css">
    </head>
    <body>
      <p>这是一段绿色的文本,字体大小为12px。</p>
    </body>
  • 优点:样式代码完全独立于HTML文档,便于维护和复用;可以在多个HTML页面中共享同一套样式,提高开发效率;易于实现样式的全局修改和更新。

  • 缺点:需要额外的文件管理和维护;如果CSS文件加载失败,可能会影响页面的显示效果。

2. CSS选择器

CSS选择器用于选择HTML文档中的元素,以便为其应用样式规则。选择器的种类繁多,每种选择器都有其特定的用途和特点。

2.1 标签选择器

  • 定义:通过HTML标签名称选择元素。

  • 示例

    p {
      color: red;
    }
  • 特点:选择范围较广,适用于对所有相同标签的元素进行统一设置,但不够具体,可能会对页面中所有该标签的元素产生影响。

2.2 类选择器

  • 定义:通过HTML元素的class属性选择元素。

  • 示例

    .my-class {
      color: blue;
    }
    <p class="my-class">这是一段蓝色的文本。</p>
  • 特点:具有较高的灵活性和复用性,可以为多个元素指定相同的样式;通过类名可以更具体地选择元素,避免对其他元素产生影响。

2.3 ID选择器

  • 定义:通过HTML元素的id属性选择元素。

  • 示例

    #my-id {
      color: green;
    }
    <p id="my-id">这是一段绿色的文本。</p>
  • 特点:具有最高的选择器优先级,只能用于选择页面中具有唯一id的元素;在页面中id值必须是唯一的,因此可以精确地控制单个元素的样式。

2.4 属性选择器

  • 定义:通过HTML元素的属性及其值选择元素。

  • 示例

    [type="text"] {
      border: 1px solid black;
    }
    <input type="text">
  • 特点:可以根据元素的具体属性及其值进行选择,具有较强的针对性和灵活性;适用于对具有特定属性的元素进行样式设置。

2.5 伪类选择器

  • 定义:用于选择元素的特定状态或位置。

  • 示例

    a:hover {
      color: red;
    }
  • 特点:可以为元素的不同状态或位置添加特殊的样式,增强页面的交互性和视觉效果;例如,:hover伪类可以为鼠标悬停状态的元素设置样式。

2.6 伪元素选择器

  • 定义:用于选择元素的特定部分或创建虚拟元素。

  • 示例

    p::before {
      content: ">> ";
      color: blue;
    }
  • 特点:可以在元素的前后插入虚拟内容或对元素的特定部分进行样式设置,丰富页面的布局和效果;例如,::before::after伪元素可以用于添加装饰性内容。

2.7 分组选择器

  • 定义:通过逗号分隔多个选择器,为它们应用相同的样式规则。

  • 示例

    h1, h2, h3 {
      color: purple;
    }
  • 特点:可以减少重复的样式代码,提高样式的复用性。

2.8 后代选择器

  • 定义:选择某个元素的后代元素。

  • 示例

    .container p {
      color: orange;
    }
    <div class="container">
      <p>这是一段橙色的文本。</p>
    </div>
  • 特点:可以精确地选择特定上下文中的元素,避免对其他元素产生影响。

2.9 子代选择器

  • 定义:选择某个元素的直接子元素。

  • 示例

    .container > p {
      color: pink;
    }
    <div class="container">
      <p>这是一段粉色的文本。</p>
      <div>
        <p>这段文本不会变色。</p>
      </div>
    </div>
  • 特点:与后代选择器类似,但只选择直接子元素,不包括更深层次的后代元素。

2.10 相邻兄弟选择器

  • 定义:选择某个元素的紧邻兄弟元素。

  • 示例

    h1 + p {
      color: cyan;
    }
    <h1>标题</h1>
    <p>这是一段青色的文本。</p>
  • 特点:只能选择紧邻的兄弟元素,不包括其他兄弟元素。

2.11 通用兄弟选择器

  • 定义:选择某个元素的所有兄弟元素。

  • 示例

    h1 ~ p {
      color: lime;
    }
    <h1>标题</h1>
    <p>这是一段绿色的文本。</p>
    <p>这段文本也会变绿。</p>
  • 特点:可以选择所有兄弟元素,而不仅仅是紧邻的兄弟元素。


网站公告

今日签到

点亮在社区的每一天
去签到