html怎样引入css？

最新推荐文章于 2023-06-04 20:52:46 发布

lse717

最新推荐文章于 2023-06-04 20:52:46 发布

阅读量318

点赞数 2

分类专栏： css 文章标签： html5 css3 css 前端

本文链接：https://blog.csdn.net/weixin_44880730/article/details/108042408

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

html引入css的四种方式

***内联样式表、内部样式表、外部样式表、@import导入***

1)、style属性方式:【内联样式表】

利用标签中style属性来改变每个标签的显示样式

<div style="width: 100px;height:100px;background-color:red;"></div>

2）、内部style标签【内部样式表】
将样式添加到head标签中的style标签里

 <style>
    div{
        width:200px;
        height:200px;
        background-color:blue;
    }
</style>
...
<body>
	<div></div>
</body>

3）、外部link导入【外部样式表】
将样式单独抽离出来，写成一个css文件，然后通过link标签导入

css文件：
			div{
			    width:300px;
			    height:300px;
			    background-color:orange;
			}
			
html文件：
		  <head>
				...
			    <link rel="stylesheet" href="./outer.css">
		  </head>

4）、@import导入
将样式单独抽离出来，写成一个css文件，在style标签内通过@import导入路径

  css文件：
			div{
			    width:300px;
			    height:300px;
			    background-color:orange;
			}
 html文件：	
            <style>
                @import url('./test.css');
            </style>

lse717

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html怎样引入css？

html引入css的四种方式***内联样式表、内部样式表、外部样式表、@import导入***1)、style属性方式:【内联样式表】利用标签中style属性来改变每个标签的显示样式<div style="width: 100px;height:100px;background-color:red;"></div>2）、内部style标签【内部样式表】将样式添加到head标签中的style标签里 <style> div{ widt
复制链接

扫一扫

专栏目录