• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

详解CSS文件中的4种引入方式:行内,内联式,外部式,导入式

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

CSS引入方式-行内式

通过 style这个标签属性,将css键值对直接写入标签内

<p style="width: 100px;height: 100px;background: red;"></p>
 <!--注释:这段代码描述的是一个宽高为100px,背景为红色的容器-->

css引入方式-内嵌式(嵌入式)

使用style标签将css属性名和属性值引入到html页面中,通常style标签放置在head标签中。为什么css样式要放置在head标签中呢,因为代码从上到下执行,如果先加载结构,那么用户看到的就将是干巴巴的内容,而没有通过美化,而先加载样式后加载结构,就相当于孩子出生就是穿着衣服的!

 <head>
     <style type="text/css">
        p{
             width: 100px;height: 100px;background: red;
         }
     </style>
 </head>

以上代码描述的也是一个宽高为100px,背景为红色的容器,只不过是通过内嵌式引入的!

css引入方式之外链式

通过link标签将独立的css文件引入到html页面中

<link rel="stylesheet" type="text/css" href="./style.css">

rel="stylesheet"描述了当前页面与href所指定的文档的关系,即说明的是href链接的文档是一个新式表,type="text/css"是指定MINME类型,也就是css文档。href="./style.css"规定被链接文档的位置

css引入方式之导入式

<style type="text/css">
     @import url("style.css");
</style>

通过@import url引入一个独立的CSS文件,url("style.css")规定被链接文档的位置

到此这篇关于CSS文件中的4种引入方式:行内,内联式,外部式,导入式的文章就介绍到这了,更多相关css 引入方式内容请搜索极客世界以前的文章或继续浏览下面的相关文章,希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap