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

这篇文章将为大家详细讲解有关将CSS样式导入到HTML中的四种方式，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

成都创新互联专注于中大型企业的做网站、成都做网站和网站改版、网站营销服务，追求商业策划与数据分析、创意艺术与技术开发的融合，累计客户近1000家，服务满意度达97%。帮助广大客户顺利对接上互联网浪潮，准确优选出符合自己需要的互联网运用，我们将一直专注成都品牌网站建设和互联网程序开发，在前进的路上，与客户一起成长！

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

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

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

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

效果图：

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

二、嵌入式，即将CSS样式写在<style type="text/css"></style>中，然后将style放在<head></head>之间。

比如：在<style>中写入样式，将div的颜色设为橙色，字体为40px。代码如下：

<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>

效果图：

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

三、外部样式（外部样式又分为import导入式，link链接式）

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

1、import导入式，即在<style type="text/css"></style>中用@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>

效果图：

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

2、link链接式，即在<head></head>中添加<link rel="stylesheet" type="text/css" href="css/index.css"/> 调用外部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>

效果图：

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

总结：

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

关于将CSS样式导入到HTML中的四种方式就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

分享名称：将CSS样式导入到HTML中的四种方式
网站链接：https://www.cdcxhl.com/article36/pdcppg.html

成都网站建设公司_创新互联，为您提供外贸网站建设、虚拟主机、商城网站、定制开发、网站设计、软件开发

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容