【前端 - CSS】第 14 课 - CSS 应用案例 - CSS 简介

欢迎来到博主 Apeiron 的博客，祝您旅程愉快！时止则止，时行则行。动静不失其时，其道光明。

1、缘起

最近学习完了 CSS 的 选择器 和 字体修饰属性 的相关知识点，然后运用所学过的知识点写了一个应用案例 - CSS 简介，以求巩固学习过的知识点和熟练使用这些知识点。是啊，知识只有在运用的时候才有用，其他时候没有任何用处。

2、示例代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS 简介</title>
        <style>
            p {
                text-indent: 2em;
                line-height: 30px;
                font-size: 14px;
            }
            
            ul {
                line-height: 30px;
                font-size: 14px;
            }

            a {
                color: #0069c2;
            }

        </style>
    </head>



    <body>
        <h1>CSS （层叠样式表）</h1>

        <p>层叠样式表（Cascading Style Sheets，缩写为 CSS），
            是一种 <a href="#">样式表</a>语言，用来描述 HTML 
            或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支
            语言）文档的呈现，CSS 描述在屏幕、纸质、音频等其他媒体
            上的元素应该如何被渲染的问题。
        </p>

        <p> <strong>CSS 是开放网络的核心语言之一</strong>，由 W3C 规范实现跨浏览器的
            标准化，CSS 节省了大量的工作。样式可以通过定义保存在外部.css 
            文件中，同时控制多个网页的布局，这意味着开发者不必经历在所有
            网页上编辑布局的麻烦。CSS 被分为不同等级：CSS1 现已被废弃，
            CSS2.1 是推荐标准，CSS3 分成多个小模块且正在标准化中。
        </p>

        <ul>
            <li>CSS 介绍：如果你是 Web 开发新手，请务必阅读我们的
                CSS 基础文章，以学习 CSS 的含义和语法。
            </li>

            <li>CSS 教程：我们的 CSS 学习区包括了丰富的教程，它们覆盖了
                CSS 的全部基础知识，能使你在 CSS 之路上从初出茅庐到游刃有余。
            </li>

            <li>
                CSS 参考：针对资深 Web 开发者的 <a href="#">详细参考手册</a>，
                描述了 CSS 的各个属性与概念。
            </li>
        </ul>
    </body>
</html>

案例涉及的知识点：

① a 标签（超链接标签）

② p 标签（段落标签）

③ h1 标签（标题 1 标签）

④ ul-li 标签（列表标签）

⑤ strong 标签（字体加粗标签）

⑥ 选择器

⑦ 字体修饰属性

3、总结

本期的分享总结就到这里了，如果有疑问的小伙伴儿，我们在评论区交流嗷~~~，笔者必回，我们下期再见啦！！

<前端 - CSS> 专栏系列将持续更新，，，，，，

【前端 - CSS】第 14 课 - CSS 应用案例 - CSS 简介

1、缘起

2、示例代码

3、总结

猜你喜欢