PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

分享四种方式将CSS样式导入到HTML中

yulia
yulia 原创
2018-09-17 10:46:16 4676浏览

在进行页面布局时,必然会用到css和html,因为html是页面的主体内容部分,css是页面的表现,通俗的讲,css是给html进行化妆的。那css的样式怎么在html中实现呢?这时候就需要在html中引入css文件,今天就和大家聊聊如何将css导入html中,有需要的可以参考一下。

将CSS导入HTML的方式有四种,分别是行内式,嵌入式,外部样式。外部样式又分为import导入式,link链接式。

一、行内式,即在HTML标签中直接加上css样式,用style添加。

比如:将div中的字体设置为40px,颜色设为红色。代码如下:

<div style="font-size: 40px;color: red;">今天星期一</div>

效果图:

样式1.jpg

二、嵌入式,即将CSS样式写在中,然后将style放在

之间。

比如:在

<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   div{font-size: 40px;color: orange;}
  </style>
 </head>
 <body>
  <div>今天星期二</div>
 </body>
</html>

效果图:

样式2.jpg

三、外部样式(外部样式又分为import导入式,link链接式)

外部样式就是把css样式代码写在一个单独的外部文件中,这个外部文件以“.css”为扩展名,然后将其引入需要的HTML中。import导入式和link链接式的引入方法不一样,接下来一一介绍。

1、import导入式,即在中用@import的URL引入。

比如:用import导入式将div的字体设为40px,颜色为黄色。代码如下:

<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   @import url("css/import.css");
  </style>  
 </head>
 <body>
  <div>今天星期三</div>
 </body>

效果图:

样式3.jpg

2、link链接式,即在

中添加 调用外部css文件来实现样式效果。

比如:用外部样式link将div的颜色设置为绿色,字体为40px。代码如下:

<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/index.css"/>  
 </head>
 <body>
  <div>今天星期三</div>
 </body>
</html>

 效果图:

样式44.jpg

总结:

1、行内式这种方式麻烦,查找不方便,也没有体现CSS的优势,因此不推荐使用。
2、嵌入式对于大的页面不推荐使用,对于小的样式少的网页可以使用。
3、同样是外部样式,import导入式和link链接式的区别在哪里?使用link链接式,会在加载页面主体内容之前加载CSS样式文件,这样用户看到的网页一开始就是带有样式效果的。如果使用import导入式,会在整个页面加载完成后再加载CSS样式文件,所以有时候会出现显示无样式情况,闪烁一下后再出现设置样式后的效果。因此从用户体验来说,还是建议使用link链接式来引入CSS样式。

以上介绍了4种方式将CSS导入到HTML中,具体用什么方式,还需要看情况决定,但是用的最多的还是link链接式,正在学习的小伙伴可以多去练习尝试,希望对你有帮助!

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。