【CSS入门】第一课 - CSS内容都可以写在哪里？

news2024/12/23 17:27:36

从这一小节开始，我们开始学习CSS的内容。之前都是学习的HTML标签，还用几节课的时间做了纯HTML标签的实战。

但是只用纯HTML标签做出来的东西呢，不是那么好看，而且你看那么多网站，没有哪个网站只用纯HTML标签做东西的，所以CSS是必须要学习的一个知识体系。这一小节，我们开始学习CSS的知识内容。

1 CSS有什么用？

1.1 让网页好看一些

1.2 统一样式管理

1.3 JS获取网页元素信息

2 CSS样式往哪里写？

2.1 行内样式

2.2 写到 style 标签里

2.3 写到外部css文件中

2.4 @import的方式引入

3 小结

1 CSS有什么用？

1.1 让网页好看一些

我们之前做的纯HTML标签实战，可以发现，做出来的确是不怎么好看。所以，学了CSS样式以后，可以对标签们做一定的装饰，甚至一些布局就可以不考虑使用 table 了，而是采用 DIV + CSS的方式。

其实现在项目开发，大家也都不使用table表格进行开发了（不过很多B端的表格，还在使用table，但C端的网站，几乎已经不使用table进行开发了）。

但很多时候，为了好看实用CSS的话，还不如直接放一张图片来的省事呢。但图片毕竟需要加载，越高清的图片质量越大，加载起来就需要考虑更多的问题。所以，为了网页更加漂亮呢，HTML标签，图片和CSS样式结合起来，会更加完美。

1.2 统一样式管理

除了对标签做样式修饰呢，我们会发现网站上有很多样式相同，或者相近的元素。比如你看这些菜单们：

比如你看这些菜单们：

比如你看这些列表元素们：

你会发现，这些内容除了数据不同，但样式都是一样的。所以，就不能一个一个的去设置CSS样式，就可以写一个CSS样式，然后通过这一个样式去控制N个HMTL标签的展现形式。

1.3 JS获取网页元素信息

在后续的前端学习，和真实项目开发中，大家经常会需要获取网页的某个元素。这个时候可能就会拿到我们定义的那个CSS样式类，通过这个样式类去获取网页元素，然后做一些JS事件的开发。

其实前端开发呀，说到底，就是搞一搞标签，获取一下标签，往标签里放一些数据，从标签里拿一些数据，跟后端交互一下。90%的工作是这些个东西。

2 CSS样式往哪里写？

我们在这一节：【HTML入门】第二课 - head标签下的常见标签们-CSDN博客应该是在 index.html 文件中加过一个 style 标签，不明白上下文的同学，可以回过头去看一眼。

接下来，我们说一下这一节的主要内容，CSS样式的代码应该往哪里写呢？

2.1 行内样式

行内元素，我们之前说过，对吧。行内元素，或者叫内联元素。这里，我们说行内样式，行内样式就是把样式写到标签上。看下面代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <div style="width: 300px;height: 300px;border: 1px solid red;">我在学习前端开发</div>
    </body>
</html>

从上面代码，我们可以看出：

我们在div标签上，加了一个 style 属性；
属性值呢，是放在一对双引号里；
内容是一组一组成对出现的，每一组中间用分号隔开

2.2 写到 style 标签里

我们在head标签内，有个style标签，还可以写到这里，就像这样（效果是一样的）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            .box {
                width: 300px;
                height: 300px;
                border: 1px solid red;
            }
        </style>
        <link rel="stylesheet" type="text/css" href="./css/index.css" />
    </head>
    <body>
        <div class="box">我在学习前端开发</div>
    </body>
</html>

从上面代码，我们可以看出：

需要在div标签中添加 class="" , 而这里的双引号中，写入的是 css 的类名，我们本案例中命名为 box；
在 style 标签中，以 .box 开始；与标签中的类名相呼应；
也可以理解为，style标签中的 .box 为css 的样式类定义，而标签中通过 class="box" 的方式实现调用类；
style标签中，类名然后是一对大括号，里面也是一组一组成对出现的，以分号为组的结尾。