引入css方式(重点掌握)
-
行内样式
-
内接样式
-
外接样式
3.1 链接式
3.1 导入式
css介绍
现在的互联网前端分三层:
- HTML:超文本标记语言。从语义的角度描述页面结构。
- CSS:层叠样式表。从审美的角度负责页面样式。
- JS:JavaScript 。从交互的角度描述页面行为
HTML的缺陷:
- 不能够适应多种设备
- 要求浏览器必须智能化足够庞大
- 数据和显示没有分开
- 功能不够强大
CSS 优点:
- 使数据和显示分开
- 降低网络流量
- 使整个网站视觉效果一致
- 使开发效率提高了(耦合性降低,一个人负责写html,一个人负责写css)
比如说,有一个样式需要在一百个页面上显示,如果是html来实现,那要写一百遍,现在有了css,只要写一遍。现在,html只提供数据和一些控件,完全交给css提供各种各样的样式。
<!--行内样式--> <div> <p style="color: green">我是一个段落</p> </div> <!--内接样式--> <style type="text/css"> /*写我们的css代码*/ span{ color: yellow; } </style> <!--外接样式-链接式--> <link rel="stylesheet" href="./index.css"> <!--外接样式-导入式--> <style type="text/css"> @import url('./index.css'); </style>