2、快速入门

不变胖绝不罢休

已于 2022-05-19 14:06:25 修改

阅读量106

点赞数

分类专栏： # CSS3 文章标签： html css3

于 2022-05-18 17:28:00 首次发布

本文链接：https://blog.csdn.net/qq_44840451/article/details/124847022

版权

本文介绍了CSS的快速入门，包括练习格式、CSS的优势如内容和表现分离、样式丰富，以及CSS的4种常用导入方式，如链接式和导入式。此外，还概述了选择器的概念，详细讲解了基本选择器（标签、类和ID选择器）以及高级选择器中的层次和结构伪类选择器。

摘要由CSDN通过智能技术生成

2、快速入门

2.1.1、练习格式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范，<style>可以编写CSS的代码，每一个声明最好以“;”结尾
        语法：
            选择器{
                    声明1;
                    声明2;
                    声明3;
                }    -->
    <style>
        h1{
            color: crimson;
        }
    </style>
</head>
<body>
    <h1>我不是针对你，我是说在座的各位都是垃圾!</h1>
</body>
</html>

建议使用这种规范*（单独写一个css文件，用link标签引入css文件效果）*

2.1.2、CSS的优势：

1、内容和表现分离；

2、网页结构表现统一，可以实现复用；

3、样式十分丰富；

4、建议使用独立于html的css文件；

5、利用SEO，容易被搜索引擎收录！

2.1.3、CSS的4种常用导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <!--内部样式-->
    <style>
        h1{
            color: blue;
        }
    </style>
    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级：就近原则 -->

<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red">我不是针对你，我是说在座的各位都是垃圾！</h1>

</body>
</html>

拓展：外部样式两种方法