在网页设计中,我们经常会使用CSS样式来美化我们的页面。而如果页面需要多处使用同一份CSS样式,我们希望可以通过一次修改来同时改变所有用到这个样式的地方,那么就可以使用link标签将该CSS文件导入到我们的HTML文件中。
<link rel="stylesheet" type="text/css" href="style.css">
其中,rel属性定义了这个链接的关系。type属性告诉浏览器这个文件是样式表,href属性则是样式表文件的位置。需要注意的是,href属性的值需要使用相对路径或者绝对路径来指定样式表文件的位置。
一般情况下,我们会将CSS文件放在同一级目录下,如果要将CSS文件放在不同目录下,需要在href属性的值中加上相对路径或者绝对路径。
<link rel="stylesheet" type="text/css" href="css/style.css">
如果样式表对于不同的设备需要进行不同的设置,我们可以使用媒体查询来导入不同的样式表。
<!-- 手机设备使用该样式表 -->
<link rel="stylesheet" type="text/css" href="css/mobile.css" media="only screen and (max-width: 640px)">
<!-- 桌面设备使用该样式表 -->
<link rel="stylesheet" type="text/css" href="css/desktop.css" media="only screen and (min-width: 641px)">
该例子中,我们定义了两个样式表,其中mobile.css只会在屏幕宽度小于或等于640px的设备上生效,desktop.css只会在屏幕宽度大于640px的设备上生效。
通过link标签导入CSS样式表,可以使我们的代码结构更加清晰,方便维护。