温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

html中如何链接css文件

发布时间:2022-02-21 10:01:18 来源:亿速云 阅读:562 作者:iii 栏目:开发技术

这篇文章主要介绍“html中如何链接css文件”,在日常操作中,相信很多人在html中如何链接css文件问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”html中如何链接css文件”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

1.行内式

这是一种直接在html文件中书写的代码,通常我们使用style属性在特定的Html中标记设置css的样式,但是建议不要使用这种方式,因为在每一个html的标记中都需要单独的设置样式,如果当你使用这个方法的时候会加大工作量,而且管理和检查起来会比较的麻烦。但是在简易的设计中使用这种方法会比较方便,代码于截图如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>html链接css的方法</title>
	</head>
     <body >
		 <h2 >
            w3cschool - 亿速云,随时随地学编程
                  </h2>
		 <p >
            w3cschool,亿速云,web前端开发,菜鸟教程,编程入门教程
                  </p>
	</body>
	
</html>

html中如何链接css文件

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文件”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI