css介绍与引入
css:层叠样式表
- 内容与样式分离
- 网页样式统一,容易修改
- 丰富样式,使页面布局更加灵活
- 减少网页代码量,提升网页浏览速度,节省网络资源
- 运用独立页面的css,有利于被搜索引擎收录
CSS引入方式
- 行内样式
- 内接样式
- 外接样式
- 连接式
- 导入试,也可以在一个css文件中@import另一个css文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css引入</title> <!--连接外部css资源,连接式--> <link rel="stylesheet" href="./index.css"> <style type="text/css"> /*写内接样式表*/ /*标签选择器,检索整个文档标签,所有标签具有共性*/ span{ color:green; } </style> <!--连接外部css资源,导入式--> <style type="text/css"> @import "index.css"; </style> </head> <body> <div> <!--行内样式,直接在标签上用style引入--> <p style="color:red">我是一个段落,引入行内样式</p> </div> <div> <!--内联样式--> <span>我是另一个span标签,使用内接样式</span> <a href="#">我是a标签,使用外接样式表,连接式</a> </div> </body> </html>
每个样式以键值对形式,以冒号结束