CSS魔法手册:从基础到进阶,打造梦幻网页

79 阅读8分钟

1. 什么是CSS?

CSS(Cascading Style Sheets,层叠样式表)是一种用于描述HTMLXML文档外观和格式的样式表语言。它允许开发者控制网页的布局、字体、颜色以及其他视觉呈现效果。

/* css规则 */
h1 { /* 选择器 */
    color: red; /* 声明:设置文本颜色为红色 */
    text-align: center; /* 声明:将文本居中对齐 */
}

2. CSS的作用

  • 美化页面:提供了一种方式来控制网页的布局、颜色、字体等视觉表现形式,使网站看起来更加美观且结构化。
  • 分离结构与表现:使内容(HTML)与设计(CSS)相分离,便于维护和修改。

3. HTML DOM为什么引入css?

  1. HTML文档对象模型(DOM)单独存在时并不具备良好的外观或用户体验。DOMHTML文档的一种编程接口,它将文档视为一个树状结构,其中每个节点都是一个HTML元素。虽然DOM本身提供了网页的基本结构,但如果不加以样式修饰,网页会显得单调乏味。因此,通常需要使用CSS来“装扮”DOM中的元素,使其具有更好的视觉效果。
  2. CSS选择DOM元素运用样式规则:这是指通过CSS选择器来定位特定的HTML元素,并为其应用样式规则的过程。CSS选择器可以基于元素类型、类名、ID等多种方式来选取目标元素。

4. 如何引入CSS?

内联样式

直接在HTML标签内使用style属性定义样式。

  • 特点:这种样式只对当前元素有效,优先级最高。但这种方法会导致内容与表现混杂,不利于维护和复用。
<p style="color: blue;">这是一个蓝色的段落。</p>

内部样式表

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

  • 特点:适用于单个页面的样式控制,比内联样式更易于管理和修改,但不便于跨多个页面共享样式。
<head>
<style>
body {
    background-color: lightblue;
}
</style>
</head>

外部样式表

创建独立的.css文件,并通过HTML中的<link>标签引用。

  • 特点:这是最推荐的做法,因为它允许你将样式集中管理,并且可以轻松地应用于整个网站的所有页面。这有助于保持一致的设计风格,并简化了后期维护工作。
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

5. 如何生成最终页面?

下载资源: 当用户请求一个网页时,浏览器首先会下载HTML文件。如果该HTML文件中引用了外部CSS(通过标签),浏览器也会开始下载这些CSS文件。
解析DOM: 浏览器从上到下解析HTML文档,构建DOM树。DOM树是一个表示文档结构的节点树,每个节点代表文档中的一个元素或文本内容。
构建CSSOM (CSS Object Model): 同时,浏览器也会解析所有加载的CSS文件,构建CSSOM树。CSSOM树反映了CSS规则是如何应用于DOM元素的。
创建渲染树: 浏览器结合DOM树和CSSOM树来构建渲染树(Render Tree)。渲染树只包含那些需要在屏幕上显示的内容,例如可见的DOM元素以及它们的样式信息。不可见的元素(如带有display: none;样式的元素)不会被加入渲染树。
布局(Layout): 一旦渲染树构建完成,浏览器就会根据每个节点的样式属性计算其确切的位置和大小,这一过程称为布局或重排(reflow)。
绘制(Painting): 布局完成后,浏览器会遍历渲染树,并将各个节点绘制到屏幕上的指定位置,从而生成最终的视觉效果。
合成(Compositing): 在一些情况下,为了提高性能,浏览器可能会将页面的不同部分作为单独的层进行处理,然后把这些层组合起来形成最终的图像。这一步骤称为合成。

6. 优先级

当多个CSS规则应用于同一个元素时,浏览器会根据以下优先级规则决定最终应用哪个规则:

行内样式 > ID选择器 > 类选择器 > 标签选择器
当多个样式规则具有相同的特殊性和优先级时,后声明的规则会覆盖先声明的规则。
!important声明可以覆盖其他所有规则,但不推荐滥用。
具体数值如下:

  • 标签选择器 = 1
  • 类选择器 = 10
  • ID选择器 = 100
  • 行内样式 = 1000
  • !important = ∞ (无限大)

对于复合选择器,其优先级是各个组成部分的加总。
.container ul li:nth-child(odd) 的优先级为 10 + 1 + 1 + 10 = 22。

7. CSS选择器分类

基础选择器

  • 类选择器:.classname
  • ID选择器:#idname
  • 通配符选择器:*(匹配所有元素,但性能较差)

组合选择器

  • 后代选择器:A B(B是A的后代)
  • 子元素选择器:A > B(B是A的直接子元素)
  • 相邻兄弟选择器:A + B(B紧接在A之后且同级)
  • 普通兄弟选择器:A ~ B(B是A之后的任意一个兄弟元素)

伪类选择器

:hover, :active, :focus, :first-child, 等

伪元素选择器

::before, ::after, ::first-line, ::selection, 等

属性选择器

[attribute], [attribute=value], [attribute^=value], 等

8. 实例代码分析

优先级示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css</title>
    <style>
    /* 1 */
    p {
        color: blue !important;
    }
    /* 101 */
    #main p {
        color: green;
    }
    /* 11 */
    .container p {
        color: red;
    }
    </style>
</head>
<body>
    <div id="main" class ="container">
      <p style="color: pink;">薛之谦的歌真好听</p>
    </div>
</body>
</html>

在这个例子中,

标签的文本颜色将会是蓝色。如果移除行内样式和!important,那么文本颜色将是绿色,因为#main p的选择器优先级更高(101)。

组合选择器示例

<!DOCTYPE html>
<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-weight: 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>
  • /* 相邻兄弟选择器 连着 */:h1 + p 选择器使紧跟在<h1>后的第一个<p>文本变为红色。
  • /* 通用兄弟选择器 */:h1 ~ p 选择器使<h1>之后的所有<p>文本变为蓝色。
  • /* 子元素选择器 */:.container > p 选择器使<div class="container">下的直接子<p>文本加粗。
  • /* 后代选择器 */:.container p 选择器使<div class="container">下的所有<p>文本带有下划线。

image.png

伪类选择器示例

<!DOCTYPE html>
<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 {
            background-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: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>
  • button:active 选择器使按钮在被点击时背景色变为红色,文本颜色变为白色。
  • p:hover 选择器使段落在鼠标悬停时背景色变为黄色。
  • ::selection 选择器改变选中文本的背景色和文本颜色。
  • input:focus 选择器使输入框获得焦点时边框变为蓝色。
  • input:checked + label 选择器使复选框选中时跟随的标签文本颜色变为蓝色。
  • li:nth-child(odd) 选择器使奇数位置的列表项背景色变为浅灰色。
  • li:not(:last-child) 选择器使非最后一个列表项底部有10像素的间距。

image.png

nth-child 和 nth-of-type 示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container p:nth-child(3) {
        background-color: yellow;
        color: black;
    }
    .container p:nth-of-type(3) {
        background-color: lightblue;
        color: black;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>nth-child vs nth-of-type 例子</h1>
    <p>这是一个段落</p>
    <div>这是一个div</div>
    <p>这是第二个段落</p>
    <p>这是第三个段落</p>
    <div>这是第二个div</div>
  </div>
</body>
</html>
  • .container p:nth-child(3) 选择.container类下的第三个子元素变为黄色,但只有当这个子元素是<p>时才会生效。 由于第三个子元素不是<p>(而是<div>),所以没有任何<p>元素会被选中,颜色不会改变。
  • .container p:nth-of-type(3) 选择器使容器内的第三个<p>元素背景色变为浅蓝色。

image.png

结语

通过本文的介绍,我们已经深入了解了CSS的基本概念、作用以及如何使用它来美化网页。从基础的选择器到复杂的伪类和伪元素,再到样式的引入方式和优先级规则,CSS提供了丰富的工具集,使开发者能够精确地控制网页的外观和布局。希望本文能成为你CSS学习旅程中的一个良好起点。无论你是初学者还是有一定经验的开发者,CSS都是一个值得深入研究的领域。通过不断练习和探索,相信你能创造出既美观又功能强大的网页。让我们一起用CSS为网络世界增添更多色彩吧!