HTML 与 CSS 结合：调用不同 CSS 文件实现样式多样化

要聊网页设计，不能不提HTML和CSS，它们可就是网站的核心！HTML就像房屋的骨骼，决定了整个页面的架构；而CSS，就好比给房子穿衣打扮，包括字体、色彩、排版等都得靠它。没它的话，你的页面可能会显得单调乏味因此，学会怎么调用各种CSS文件，对我们这些搞网页的人来说，真的很关键！

使用link标签调用外部CSS文件

要在HTML里找CSS文件，直接用<link>标签就好！放在顶部，填写网页链接的href属性，然后把rel参数设置为描述CSS跟HTML间关系。想在页面上同时使用多个CSS文件？那就这么做：

html

你只要给style1.css和style2.css设定两种好看的网页效果，然后用在每个页面上，就能把你的网站变得超炫了！



  
  
  调用不同CSS文件示例

使用@import调用CSS文件

别只用链接标签，CSS里面也可以通过@import调用别的CSS文件。这种方法特别适用于结合各种小样式表，比如你就在style.css这个主样式表里进行如下操作吧：

“`css

@import url(‘style2.css’);

设定好以后，不管你的HTML站是否再碰到问题都不用担心啦～只需加载一下style.css文件，style2.css里的样式就能自动添加进去，让你的界面看起来更有活力！

@import url("style2.css");

使用id选择器和class选择器

要是你想用好几个CSS文件的话，那可要记得用id和class来搞定挑选样式的事儿！别忘了，id的能力可是比别的都强多，你可以给每个物品都设个id，然后根据它量身定制一份CSS样式。比如说，咱们现在就在style1.css里这么搞：

#box {

background-color: red;

#box {
  width: 200px;
  height: 200px;
  background-color: red;
}

}

#box {
  width: 100px;
  height: 100px;
  background-color: blue;
}

而在style2.css中，你可以这样定义：

background-color: blue;



  
  
  调用不同CSS文件示例


  样式设置示例

然后在HTML页面中，你可以这样使用：

这样，box元素就会使用style1.css中定义的样式。

class选择器的使用

老样子你能用class定个样式滴~在CSS文件里就是加个点儿(.)咯。比如你想把style1.css变成这样的话：

.box {

.red-box {
  width: 200px;
  height: 200px;
  background-color: red;
}

你瞧，先把那个box玩意儿用style1.css打扮下，旁边的就交给style2.css搞定！

总结

想让每页网页有着与众不同的感觉？学会运用多种 CSS 文件就行，还能通过 id 和 class 选择器给每个元素添加个性。记住学会使用 CSS 文件才能真正玩转网页制作！

.blue-box {
  width: 100px;
  height: 100px;
  background-color: blue;
}

好了，咱们最后聊一个问题吧：你编代码的时候，是喜欢直接在 html 里面加<link>标签链接 CSS，还是更喜欢用 @import 导入 CSS？快快来评论区跟大家说说看！别忘了给我点赞加油，还有记得帮我转发到朋友圈让更多小伙伴看到这篇好文！