CSS的使用方式
1、内联样式
直接写在标签中(不能复用)
<label style="width: 200;height: 100;background-color: red;">大家好我是内联样式</label>
2、内部样式
写在head标签中,可同时设置可复用,没有共同作用,若有则使用最近的
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style type="text/css"> #box{ width: 200px; height: 200px; background-color: red; border: 2px solid blue; padding: 10px; margin-bottom: 10px ; float: left; } #box2{ width: 200px; height: 200px; background-color: cadetblue; margin-top: 15px; /*以哪个大为标准*/ float: left; } </style> </head> <body> <div id="box">hhh </div> <div id="box2">hhh </div> </body> </html>
3、外部样式:css的规则放在单独的css文件中,需要引用才能够起作用
3.1链接式
<link rel="stylesheet" type="text/css" href="css/huawei_top.css"/>
引用的是一个外部样式表 类型:text/css 引用的css文件放的目录
3.2导入式
<style type="text/css">
@import url("css/huawei_top.css");
</style>
链接式和导入式的区别
1.link所有的浏览器都支持,@import部分版本低的IE不支持
2.@import是等HTML加载完成后加载,link是执行到该语句就加载
3.@import不支持JS动态修改;