在我们的平常学习中，每一个课时和每一个知识点直接都是有关联的，那么今天我们就来说说怎么在html中链接css文件，下面是小编为大家准备的一些链接css文件教程源码！
1.行内式
这是一种直接在html文件中书写的代码，通常我们使用style属性在特定的Html中标记设置css的样式，但是建议不要使用这种方式，因为在每一个html的标记中都需要单独的设置样式，如果当你使用这个方法的时候会加大工作量，而且管理和检查起来会比较的麻烦。但是在简易的设计中使用这种方法会比较方便，代码于截图如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html链接css的方法</title>
</head>
<body style="background-color:black;">
<h1 style="color:white;padding:30px;">
w3cschool - 编程狮，随时随地学编程
</h1>
<p style="color:white;">
w3cschool,编程狮,web前端开发,菜鸟教程,编程入门教程
</p>
</body>
</html>
2.内嵌式
在这个方法中，我们会发现代码中会比行内式的比较不会那么的杂乱，而且内嵌式的用法就是把 css 代码放在特定页面的<head>部分中。而且在内嵌CSS的时候，需要把内容放在<style></style>标签之间。类选择器可用于引用CSS代码，但是他们仅在该特定页面上处于活动状态；这样可以提高加载速度。在某些情况下使用内嵌样式是很有用，当我们向其他人发送页面模板的时候，因为内容都在一个页面中，所以看到预览要容易得多；内嵌式的编写代码例子代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>怎么用css制作导航栏</title>
<style>
ul{list-style-type: none;
margin: 0;padding: 0;
overflow: hidden;
background-color: antiquewhite;}
li{float: left;}
li a{display: block;
color: peru;
padding: 8px 16px;
text-decoration: none;}
li a.active{background-color: palegreen}
li a:hover:not(.active){background-color: gray;
color: white;}
</style>
</head>
<body>
<p>css制作导航栏</p>
<ul>
<li><a class="active" href="">主页</a></li>
<li><a href="#">地圖</a></li>
<li><a href="#">直播</a></li>
<li><a href="#">更多</a></li>
</ul>
</body>
</html>
3.外联式
这个就是我们最经常使用的一个方式，外联式就是使用link标签将 html 文件外的 css 链接起来，从而将.css文件中的样式使用链接起来。这样虽然多了些步骤，但是在实际的运用中，我们可以更加方便的找寻到问题的所在进行修改，从而更加快速的完成任务。外联式的链接代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>怎么用css写一个三角形</title>
<link href="css/test.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="uptriangle">
</div>
</body>
</html>以上就是对于怎么在html中链接css文件的方法，而且现在大多数网站都是使用外联式的方式，不仅如此外联式是在单独的一个文件中进行编辑，然后再通过link标签进行链接使用的范围比较广泛，这就使得我们在管理页面的时候就会变得更加容易。更多的相关知识我们可以在w3cschool中进行一个全面的学习和了解！
