CSS魔法入门：从零开始，让网页炫起来！

谎言西西里
316 阅读6分钟

前言：

在前端开发日常中，我们离不开对页面的编辑，而操控页面的工具就是我们熟悉的老朋友 css 了，今天我们就来初步介绍 css 来帮助小白快速理解 css 基础知识。

CSS简介：

什么是CSS？

CSS（层叠样式表）是一种用来控制网页布局和样式的语言，允许开发者将内容与设计分离，使得网页的外观可以独立于其结构进行修改，主要是依附于 html DOM，不能单独存在。

/* css规则 */
h1 { /* 选择器 */
    color: red;          /* 声明 */
    text-align: center;  /* 声明 */
}

DOM和CSS的关系

DOM 相当于是一个模型，它将文档表示为一个树状结构（即构建 DOM树），而树上每个节点都代表文档的一部分，如元素、属性、文本等等，而 CSS 负责定义这些节点的外观，如颜色、字体等，并且CSS通过选择器来定位DOM中的特定节点来应用样式。

所以页面的渲染过程即为：

    1. 浏览器在解析html文档时，构建DOM树。
    1. 同时，浏览器会解析CSS文件，生成CSSOM（CSS Object Model）。
    1. DOM + CSS = render tree（渲染树），将最终页面绘制到屏幕上。

CSS叠层式的概念

前面介绍过了CSS名为层叠样式表，有人就会对“叠层”这俩字有疑惑，为啥要叫叠层呀，那是因为在 CSS 中样式体现是有优先级的，对于同一节点的样式定义，优先级越大的就会覆盖优先级小的。

而优先级计算有一个规则，每种选择器都有对应的分数：标签(1)，类名/伪类(10)，id(100)，行内样式(1000)，!important(MAX)。让我们来看个例子来理解：

<!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>
        /* <p>(标签) 选择器为 1 分 */
        p {
            color: blue;
        }

        /* class(类名) 选择器为 11 分 */
        .container p {
            color: red;
        }

        /* id 选择器为 101 分 */
        #main p {
            color: green;
        }
        
        /* 分数为无限大 */
        p {
            color: blue !important;
        }
        
        /* 同等分数相同的 后面覆盖前面 --> 层叠式。分数不同的 大的覆盖小的*/
    </style>
</head>
<body>
    <!-- attribute 属性 -->
    <div id="main" class="container">
        <!-- 行级分数为 1001 分 -->
        <p style="color:pink;">这是一段西西里爱情故事</p>
    </div>
</body>
</html>

在上述例子中我们对<p>进行了多次修改，但是在进行了分数的比较后，由于color: blue !important;中包含!important，其分数为最高，所以在页面上的文字就会显示为蓝色。

image.png

在了解分数后，请读者思考这道题目： .container ul li:nth-child(odd)的分数是多少？

答案在文章结尾(>^<)

CSS 选择器概览

在上文提到了CSS通过选择器来定位DOM中的特定节点来应用样式。那么什么是选择器呢？其又有哪些种类呢？

  • 基础选择器
    • 标签选择器
    • 类选择器
    • ID选择器
    • 通配符选择器 (*)
  • 组合选择器
    • 后代选择器( )
    • 子元素选择器(>)
    • 相邻兄弟选择器(+)
    • 普通兄弟选择器(~)
  • 伪类选择器
    • ::active、::hover、::selection等..... 可交互状态
  • 伪元素选择器
    • ::before 和 ::after
  • 属性选择器

由于其种类与功能较为繁杂，我们这里以组合选择器来举例介绍，其余还请读者自行去了解。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        /* 相邻兄弟选择器，重点就是只有相邻的才可以选择，在<body>我们可以选择h1和p，但是不能选择h1和span*/
        h1 + p {
            color: red;
        }
        /* 普通兄弟选择器，其分数与 h1+p 相同，但是遵循分数相同，后面的覆盖前面的，所以标题和段落都显示为蓝色*/
        h1 ~ p {
            color: blue;
        }
        /* 子元素选择器，在.container类中选择了子类<p>进行了加粗处理*/
        .container > p {
            font-weight: bold; /* 加粗 */
        }
        /* 后代选择器,对于.container类中的所有后代<p>进行了下划线处理 */
        .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>

最后的页面显示为，标题进行了加粗，"这是第一段文字"、"这是第二段文字"进行了加粗，字体为蓝色，下划线处理，"这是一个内部的段落"进行了下划线处理。

image.png

CSS的引入方法

我们可以通过引入样式来修改文章的视觉呈现和页面格式，而必不可少的一步就是选择引入方法，下面我们就来讲解 CSS 的三种引入样式---内联样式、外联样式、行内样式。

1. 行内样式：

直接在HTML元素的style属性中定义样式，虽然快速简单，但是不利于代码复用，而且违背了内容与表现分离的原则。例如：

<p style="color: blue; font-size: 20px;">这是一个蓝色且字体大小为20px的段落。</p>

2. 内联样式：

在HTML文档的<head>部分使用<style>标签来定义样式，便于集中管理，适用于单个页面的样式定义，但是不利于大型项目的维护。例如：

<!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>
        body {
            /* 将页面背景设置为绿色 */
            background-color: green;
        }
        h1 {
            /* 标题为红色 */
            color: red;
        }
        p {
            /* 段落为蓝色 */
            color: blue;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是我的第一个段落。</p>
</body>
</html>

3. 外联样式：

将所有样式定义在一个单独的.css文件中，然后通过<link>标签引入到HTML文档中，这样的话样式和内容完全分离，而且可以被多个 html 文档共享。例如：

我们先创建一个名为 style.css 文件设计好样式

body {
    /* 将页面背景设置为绿色 */
    background-color: green;
}
h1 {
    /* 标题为红色 */
    color: red;
}
p {
    /* 段落为蓝色 */
    color: blue;
}

再在html文档中通过<link>标签引入外部样式文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css</title>
    <!--
    rel（关系）是link标签的一个属性，rel="stylesheet"表示链接为一个样式表文件
    href（超文本引用）是link标签的一个属性，指定了要链接的外部资源的URL
    -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是我的第一个段落。</p>
</body>
</html>

总结

CSS是网页设计的利器，通过选择器精准定位HTML元素并应用样式。它让内容与表现分离，提高代码可维护性。DOM树和CSS结合生成渲染树，实现页面布局和美化。优先级规则确保样式正确应用，而多种引入方式（内联、内部、外部）提供了灵活性。掌握CSS基础，你就能轻松打造美观且响应式的网页。

答案： 优先级：

  • 类选择器：.container (10)
  • 元素选择器：ul (1)
  • 元素选择器：li (1)
  • 伪类选择器：:nth-child(odd) (10)

一共：22分（10+1+1+10）

---欢迎各位点赞、收藏、关注，如果觉得有收获或者需要改进的地方，希望评论在下方，不定期更新

0bae-hcffhsw0416753.gif
avatar
文章
阅读
粉丝