CSS的使用方式,css使用方式链接式和导入式的区别

mac2024-12-19  8

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动态修改;

最新回复(0)