摘要:本篇教程探讨了HTML+CSS入门之CSS引入页面的三种方法,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。
本篇教程探讨了HTML+CSS入门之CSS引入页面的三种方法,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。
<
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>css页面引入方法</title>
6 </head>
7 <body>
8 <div style="color: red ;font-size:50px">css页面引入方法</div>
9 </body>
10 </html>
如上面的代码所示,在div标签内直接通过styl属性直接写样式。那么这里我们设置了字体的颜色为红色,字体大小为50px。
看一下显示出来的效果。
这种方法在开发中是最不常用的一种,因为在标签内写方法会让代码看起来很乱,而且也不利于管理和查找,所以只有在某些情况下才会使用这种方式来写样式。
2.嵌入式:通过style标签来写样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css页面引入方法</title>
<style type="text/css">
div{
color: green;
font-size: 50px;
}
</style>
</head>
<body>
<div>css页面引入方法</div>
</body>
</html>
可以看到我在head中用style标签写了一个样式出来,通过选择器选择器来将样式加入到页面中。看一下效果。
这种方法是比较常用的一种,一般在写首页的时候通常会用到这种方式,因为网站首页加载快慢会直接影响用户的体验,所以网页的加载速度就要快。那么这种方式不会影响加载速度,又将样式整合到了标签中,所以是比较适用的。但是也不会大量的使用。最后一种才是我们经常用的方式。
3.外联式:通过link标签将样式添加到页面上
main.css
1 div{
2 font-size: 50px;
3 color: blue;
4 }
code.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css页面引入方法</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div>css页面引入方法</div>
</body>
</html>
我们可以看到这次用了两个文件,一个是css文件,一个是html文件。css文件里写的东西和style标签中的写法是一模一样的。只是单独写在一个文件中。然后通过link标签将css样式文件引入到页面。rel里面的东西我们不用管,herf中的路径就是css文件的逻辑路径。我们看一下效果。
这种方法才是开发中最常用的办法。好处显而易见,比如,低耦合,整洁,条理清晰。
本文由职坐标整理发布,学习更多的相关知识,请关注职坐标IT知识库!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号