css引入页面的三种方法
2018-12-24 09:03:06来源:博客园 阅读 ()
1.内联式:直接在标签上写样式
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文件的逻辑路径。我们看一下效果。
这种方法才是开发中最常用的办法。好处显而易见,比如,低耦合,整洁,条理清晰。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:HTML文本结构及常用标签
下一篇:简单介绍CSS3圆角的优点
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-14
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-13
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-02
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash