将CSS样式导入到HTML中的四种方式-创新互联

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

专业成都网站建设公司,做排名好的好网站,排在同行前面,为您带来客户和效益!创新互联建站为您提供成都网站建设,五站合一网站设计制作,服务好的网站设计公司,成都做网站、网站建设负责任的成都网站制作公司!

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

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

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

今天星期一

效果图:

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

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

比如:在

今天星期二

效果图:

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

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

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

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

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


  
  
    
 
 
  
今天星期三

效果图:

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

2、link链接式,即在中添加 调用外部css文件来实现样式效果。

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


 
  
  
    
 
 
  
今天星期三

效果图:

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

总结:

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

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

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


当前名称:将CSS样式导入到HTML中的四种方式-创新互联
文章链接:http://pwwzsj.com/article/djccog.html