html引入css的方式

最新推荐文章于 2023-05-06 18:53:01 发布

eziolt7

最新推荐文章于 2023-05-06 18:53:01 发布

阅读量398

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_46847662/article/details/107681942

版权

CSS (Cascading Style Sheets) 层叠样式表，是一个用于修饰文档（可以是标记语言HTML，也可以是XML或者SVN）的语言，CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化，使文档以更优雅的形式呈现给用户。
浏览器将CSS规则应用到文档上，使CSS影响文档的显示。CSS规则由选择器和一系列的属性对组成。一系列的CSS规则就可以形成一个层叠样式表。
html引入css有以下三种方式：

1.行内样式表（ Inline styles）
将css写到元素的style属性中，示例如下：

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

运行结果如下：
在这里插入图片描述
2.内部样式表（ Internal stylesheet）
将css写到<style标签>中，示例如下：

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

结果：

在这里插入图片描述
3.外部样式表（ External stylesheet）
将css写入一个以".css"为后缀的文件中，然后使用<link标签>或者@import url()导入到html
outer.css文件如下：

div{
    width:300px;
    height:300px;
    background-color:orange;
}

link

<head>
	...
    <link rel="stylesheet" href="./outer.css">
</head>

结果：
在这里插入图片描述

@import url()

    <style>
        @import url(./outer.css);
    </style>

结果：
在这里插入图片描述
上述三种方式中，行内样式表只能作用于一个元素，内部样式表修改起来不方便，一般都不推荐使用。

eziolt7

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
html引入css的方式

CSS (Cascading Style Sheets) 层叠样式表，是一个用于修饰文档（可以是标记语言HTML，也可以是XML或者SVN）的语言，可以将文档以更优雅的形式呈现给用户。浏览器将CSS规则应用到文档上，使CSS影响文档的显示。CSS规则由选择器和一系列的属性对组成。一系列的CSS规则就可以形成一个层叠样式表。html引入css有以下三种方式：内部样式表（ Internal stylesheet）直接将css写道```...
复制链接

扫一扫