无情深扒CSS底层基础

坐镇指挥
195 阅读8分钟

CSS底层基础

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述网页上元素外观和布局的语言。它通过将样式规则应用于HTML或XML文档中的元素，使得这些文档能够以更加优雅和富有表现力的方式呈现给用户。以下是深扒的CSS底层基础详细解析。

微信图片_20241129231435.jpg

一、CSS的基本概念

  1. CSS规则：CSS规则由选择器和声明块组成。选择器用于选择要应用样式的HTML元素，而声明块则包含了一系列属性和值，用于描述这些元素的外观和布局。
  2. 选择器：选择器用于定位HTML文档中的元素。CSS提供了多种选择器，包括标签选择器、类选择器、ID选择器、通配符选择器、组合选择器、伪类选择器和伪元素选择器等。
  3. 声明：声明是一个单独的规则，它指定了添加到样式元素的属性和值。例如，“color:red”就是一个声明，它指定了元素的颜色属性为红色。

二、CSS的引入方式

  1. 内联样式（行内样式） ：将CSS代码直接写在HTML标签的style属性中。这种方式虽然优先级较高，但样式与结构冗余，不利于后期维护。
  2. 内部样式表：将CSS代码写在HTML文档的head部分的style标签中。这种方式适用于单个页面的样式定义。
  3. 外部样式表：将CSS代码写在独立的.css文件中，并通过HTML文档的link标签引入。这种方式便于样式的复用和管理，是推荐的做法。

三、CSS的层叠与优先级

  1. 层叠性：当多个样式规则同时应用于一个元素时，会出现样式层叠的情况。CSS通过一定的规则来确定最终应用的样式。这些规则包括选择器的特殊性和优先级、样式规则的顺序、样式规则的来源以及样式属性的重要性。

  2. 优先级计算规则：

    • 元素标签中定义的样式（style属性）优先级最低，其特殊性值为（1,0,0,0）。
    • ID选择器的特殊性值较高，为（0,1,0,0）。
    • 类选择器、属性选择器或伪类的特殊性值为（0,0,1,0）。
    • 元素选择符或伪元素选择符的特殊性值最低，为（0,0,0,1）。
    • 重要性声明（!important）的优先级最高，可以覆盖其他所有样式规则。
    • 当多个样式规则具有相同的特殊性和优先级时，后声明的规则会覆盖先声明的规则。

四、CSS选择器分类

  1. 基础选择器：

    • 标签选择器：通过HTML元素的标签名来选择指定的元素。例如，“div{font-size:50px;}”会选择所有的div元素并设置其字体大小为50px。
    • 类选择器：通过HTML元素的class属性值来选择指定的元素。例如，“.className{color:red;}”会选择所有class属性值为className的元素并设置其颜色为红色。
    • ID选择器：通过HTML元素的id属性值来选择指定的元素。ID选择器的特殊性高于类选择器。例如，“#idValue{background-color:yellow;}”会选择id属性值为idValue的元素并设置其背景颜色为黄色。
    • 通配符选择器：选择所有元素。但由于其性能较差，不推荐在大型项目中使用。

  2. 组合选择器：

    • 后代选择器：选择某个元素的所有后代元素。
    • 子元素选择器：选择某个元素的直接子元素。
    • 相邻兄弟选择器：选择紧接在另一个元素后的兄弟元素。
    • 普通兄弟选择器：选择所有在另一个元素后的兄弟元素。
    • 示例和解释
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>选择器</title>
  <style>
      /*相邻兄弟选择器 连着*/
      h1+p{
          color:red;
      }
      /*通用兄弟选择器*/
      h1~p{
          color:blue;
      }
      .container>p{
          font-size: bold;
      }
      /*后代选择器*/
      .container p{
          text-decoration: underline;
      }
  </style>
</head>
<body>
  <div class="container">
      <h1>标题</h1>
      <p>这是一段文字</p>
      <p>这是第二段文字</p>
      <a href="">链接</a>
      <span>这是一个span元素</span>
      <div class="inner">
          <p>这是一个内部段落</p>
      </div>
  </div>
</body>
</html>

  • <style>：包含了 CSS 样式规则，用于设置页面元素的样式。

    • /*相邻兄弟选择器 连着*/：这是一个 CSS 注释，解释下面的选择器的作用。
    • h1+p{ color:red; }：这是相邻兄弟选择器，它会选择紧挨着 h1 元素后面的 p 元素，并将其颜色设置为红色。
    • /*通用兄弟选择器*/：CSS 注释，解释下面的选择器。
    • h1~p{ color:blue; }：通用兄弟选择器，它会选择 h1 元素后面的所有 p 元素，并将它们的颜色设置为蓝色。
    • .container>p{ font-size: bold; }：子选择器，它会选择 .container 类元素的直接子元素 p，并将其字体设置为粗体。
    • /*后代选择器*/：CSS 注释，解释下面的选择器。
    • .container p{ text-decoration: underline; }：后代选择器，它会选择 .container 类元素内的所有 p 元素（包括嵌套元素中的 p 元素），并将它们的文本添加下划线。
    • 页面展示
image.png
  1. 伪类选择器：用于选择元素的特定状态。例如，“:hover”选择鼠标悬停时的元素，“:active”选择被激活的元素等。
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*通过为类选择器，添加不同状态*/
        button:active{
            background-color: red;
            color: white;
        }
        p:hover{
            color:yellow;
        }
        ::selection{
            background-color: blue;
            color: white;
        }
        input:focus{
            border: 2px solid blue;
        }
        input:checked+label{
            color: blue;
        }
        li:nth-child(odd){
            background-color: lightgray;
        }
        /*选择除了最后一个元素之外的所有li元素*/
        li:not(:last-child){
            /*添加底部边框*/
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>伪类选择器示例</h1>
        <button>点击我</button>
        <p>鼠标悬浮在这里</p>
        <input type="text" placeholder="输入框">
        <input type="checkbox" id="option1">
        <label for="option1">选项1</label>
        <input type="checkbox" id="option2" checked>
        <label for="option2">选项2</label>
        <ul>
          <li>列表项1</li>
          <li>列表项2</li>
          <li>列表项3</li>
          <li>列表项4</li>
        </ul>
      </div>
</body>
</html>

  • <style>：这是 HTML 中的一个元素，用于定义 CSS 样式规则。

    • button:active{ background-color: red; color: white; }：

      • button:active 是一个伪类选择器，它会在用户点击并按住按钮（处于激活状态）时应用样式。
      • background-color: red; color: white;：将按钮在激活状态下的背景颜色设置为红色，文本颜色设置为白色。

    • p:hover{ color:yellow; }：

      • p:hover 是一个伪类选择器，当鼠标悬停在 <p> 元素上时会应用样式。
      • color:yellow;：将鼠标悬停时 <p> 元素的文本颜色设置为黄色。

    • ::selection{ background-color: blue; color: white; }：

      • ::selection 是一个伪元素选择器，用于设置用户在页面上选中（高亮）文本时的样式。
      • background-color: blue; color: white;：将选中的文本的背景颜色设置为蓝色，文本颜色设置为白色。

    • input:focus{ border: 2px solid blue; }：

      • input:focus 是一个伪类选择器，当输入框获得焦点（用户点击输入框准备输入）时应用样式。
      • border: 2px solid blue;：将输入框在获得焦点时的边框设置为 2 像素宽的蓝色实线边框。

    • input:checked+label{ color: blue; }：

      • input:checked 是一个伪类选择器，当输入框（这里是复选框）被选中时应用样式。
      • input:checked+label 表示当输入框被选中时，紧接着的 <label> 元素会应用样式。
      • color: blue;：将被选中的输入框后面的 <label> 元素的文本颜色设置为蓝色。

    • li:nth-child(odd){ background-color: lightgray; }：

      • li:nth-child(odd) 是一个伪类选择器，它会选择 <ul> 或 <ol> 元素中奇数位置的 <li> 元素。
      • background-color: lightgray;：将奇数位置的 <li> 元素的背景颜色设置为浅灰色。

    • li:not(:last-child){ margin-bottom: 10px; }：

      • li:not(:last-child) 是一个伪类选择器，它会选择除了最后一个 <li> 元素之外的所有 <li> 元素。
      • margin-bottom: 10px;：为这些 <li> 元素添加一个 10 像素的底部外边距。
image.png

  1. 伪元素选择器：用于选择元素的一部分内容。例如，“::before”和“::after”用于在元素内容的前面和后面插入内容。

  2. 属性选择器：根据元素的属性及其值来选择元素。例如，“input[type='text']{border:1px solid #ccc;}”会选择所有type属性值为text的input元素并设置其边框样式。

五、DOM与CSS的结合

  1. DOM解析：浏览器将HTML文档解析为树状的DOM模型，其中每个元素对应着树上的一个节点对象。
  2. CSS应用：浏览器根据CSS选择器定位DOM元素，并应用相应的样式规则。这些样式规则会改变DOM元素的外观和布局。
  3. 渲染树构建：浏览器将应用了样式的DOM元素构建成渲染树（Render Tree），这是用于显示页面的数据结构。
  4. 页面渲染：最后，浏览器渲染引擎根据渲染树将页面呈现给用户。

综上所述，CSS作为网页设计和开发中的重要组成部分，其底层基础知识的掌握对于提高网页的表现力和可维护性具有重要意义。通过深入理解CSS的选择器、层叠与优先级、以及DOM与CSS的结合等概念，可以更好地控制和管理网页的外观和布局。

avatar
文章
阅读
粉丝