css引入方式

发布时间:10个月前 来源:94开发网原创 作者:超级管理员 热度:200℃
css引入方式主要有四种,分别是行内样式、内嵌式、外链式、导入式。

css引入方式。

css引入方式主要有四种,分别是行内样式、内嵌式、外链式、导入式。

css引入方式

1.行内样式

行内样式是直接把css代码放到HTML标签里面,作为style属性的属性值。

<div style="width: 100px; height: 100px; border: 1px solid black;">这是一个长宽都为100px的div</div>

运行结果:

css引入方式

2.内嵌式

内嵌式是在HTML中创建一个style标签,把css样式写入style标签内,style标签可以写在HTML中的任何位置,通常写在head标签内。

  

<style>
  div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
  }
</style>
<div>这是一个长宽都为100px的div</div>

运行结果

css引入方式

3.外链式

外链式是把css样式写入.css文件内,然后通过link标签链接。

  

/*css代码*/
div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
<link rel="stylesheet" href="url"> 
<div>这是一个长宽都为100px的div</div>

运行结果

css引入方式

4.导入式

导入式和和外链式差不多,都是在外部创建一个css文件,然后在style标签内通过@import url(url);导入,但是与外链式不同的是,外链式是先加载css,再显示HTML,而导入式是先显示HTML,再加载css,所以推荐使用外链式。

  

/*css代码*/
div {
    width: 100px;
    height: 100px;
    border: 1px solid black;
}
<head> 
    <style> 
        @import url("test.01.css"); 
    </style> 
</head>
<div>这是一个长宽都为100px的div</div> 

运行结果

css引入方式


文章链接:https://www.94kaifa.com/bc/10094.html

文章标题:css引入方式

文章版权:94KAIFA(www.94kaifa.com) 所发布的内容,部分为原创文章,转载请注明来源,网络转载文章如有侵权请联系我们!

本文最后更新发布于 2023-09-04 15:31:51 ,某些文章具有时效性,若有错误或已失效,请联系客服处理:75109479@qq.com

关于我们
本站上线于2023年09月01日,专注PbootCMS模板制作及整合,提供优质的企业网站模板、建站技术教程、网页素材、网站源码下载,更有仿站开发、网站维护等业务。做中小站长企业快速建站好帮手。
站长QQ:532088631
微信群聊
微信群聊
联系方式
技术交流QQ群号201010290
电话:400-0707-327
邮箱:kefu@kaifacn.com
坐标:西安市雁塔区高新路6号
陕ICP备2020015383号 陕公网安备61019002001930号

Copyright © 2023 94KAIFA All Rights Reserved.本站采用创作共用版权 CC 4.0 BY-SA 许可协议