Html中使用CSS样式的四种方式
【摘要】 本文详细说明了在Html中使用CSS样式的四种方式
1、在页面中应用CSS
网页中书写CSS代码的方法有以下4种方式：
1、内联样式：将CSS样式直接写到HTML元素的style属性中
2、内部样式：将CSS样式写到<style>标签中
3、引入外部样式：精确通过<link>元素引入外部的一个CSS文件
4、导入外部样式：通过在<style>元素中，使用@import导入一个外部的CSS文件
1.1、样例说明
用CSS样式绘制如图所示的字母i，使用<figure>容器，容器中包含两个子元素：第1个<div>绘制一个橙色的圆形；第2个<div>绘制一个竖着的黄色矩形。
1.2、方式一：内联样式
第1种方法称为“内联样式”，它把样式属性写在HTML标签的style属性里，也是“内联”这个词的含义。这种方法的优点是不用定义选择器，但缺点是各元素的样式分散在整个HTML文档中，不方便集中管理，每个元素的样式也不能太复杂，否则写起来就很不方便了。
不推荐使用这种方法。
样例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<figure style="margin-left: 500px; margin-top: 100px;">
<div style="width: 100px; height: 100px; background-color: orange;border-radius: 50%; margin-bottom: 10px;"></div>
<div style="width: 100px; height: 200px; background-color: gold;border-radius: 10px;"></div>
</figure>
</body>
</html>
1.2、方式二：内部样式
第2种方法称为“内部样式”，它把网页中所有元素的样式都集中写到一个名为<style>的标签里，放在页面的DOM结构之前。因为样式不是写在元素的属性里，为了区分不同元素的样式，就要分别为各元素指定名字，然后在<style>标签里按元素的名称逐个书写样式。
样例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.figure {
margin-left: 500px;
margin-top: 100px;
}
.div1 {
width: 50px;
height: 50px;
background-color: orange;
border-radius: 50%;
margin-bottom: 10px;
.div2 {
width: 50px;
height: 100px;
background-color: gold;
border-radius: 10px;
}
</style>
</head>
<body>
<figure class="figure">
<div class="div1"></div>
<div class="div2"></div>
</figure>
</body>
</html>
1.3、方式三：引入外部样式
第3种方法称为“引入外部样式”，它在第2种方法的基础上，把<style>标签的内容单独存放到扩展名为.css的文件中，然后在HTML文件中用<link rel="stylesheet"href=“file-name.css”>标记导入这个CSS文件。这种方法的好处是，从物理上分离了结构和样式，HTML文件中只存储文档的DOM结构，CSS文件中只存储样式。在企业应用中多用这种方式，因为多个HTML文件可以引用同一个样式表文件，达到复用的目的，节省开发和维护成本。
1.3.1、样例代码：
1、CSS代码：
.figure {
margin-left: 500px;
margin-top: 100px;
}
.div1 {
width: 50px;
height: 50px;
background-color: orange;
border-radius: 50%;
margin-bottom: 10px;
}
.div2 {
width: 50px;
height: 100px;
background-color: gold;
border-radius: 10px;
}
2、Html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css_test1.css">
</head>
<body>
<figure class="figure">
<div class="div1"></div>
<div class="div2"></div>
</figure>
</body>
</html>
1.4、方式四：导入外部样式
第4种方法称为“导入外部样式”，它与第3中方式类似，通过在<style>元素中，使用@import导入一个外部的CSS文件。
1.4.1、样例代码：
1、CSS代码：
.figure {
margin-left: 500px;
margin-top: 100px;
}
.div1 {
width: 50px;
height: 50px;
background-color: orange;
border-radius: 50%;
margin-bottom: 10px;
}
.div2 {
width: 50px;
height: 100px;
background-color: gold;
border-radius: 10px;
}
2、Html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@import url(css_test1.css);
</style>
</head>
<body>
<figure class="figure">
<div class="div1"></div>
<div class="div2"></div>
</figure>
</body>
</html>
1.4.2、link和@import的使用区别：
1.从属关系区别：
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2.加载顺序区别：
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3.兼容性区别：
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4.DOM可控性区别：
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
5.权重区别：
link引入的样式权重大于@import引入的样式。
总体来说：link优于@import，强烈建议使用link标签，慎用@import方式。
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）