CSS link标签

文章目录

[CSS link标签](#CSS link标签)

概述

link 标签用于定义当前文档与外部资源的关系。

位置：必须放在 HTML 文档的 <head> 部分。
用途：引入外部样式表、定义网站图标(favicon)、预加载资源等。

常用属性

rel：必需属性，定义当前文档与外部资源的关系

rel="stylesheet"：表示外部资源是CSS样式表。
rel="icon"，表示外部资源是网站图标（favicon）。
rel="preload"，表示告诉浏览器优先加载这个资源。
rel="preconnect"，表示提前进行DNS查询或建立连接。

href：必需属性，指定资源的url，可以是绝对路径。也可以是相对路径

href="./styles/main.css"：相对路径。
href="/assets/global.css"：绝对路径。
href="https://xxxx.com"：url路径

type：可选属性，指定外部资源的媒体类型

type="text/css"：表示是CSS文件。
type="image/x-icon"：表示图片类型。

media：可选属性，定义响应式

media="screen"：表示只能用于屏幕设备。
media="(max-width:768px)"：表示小于等于768px时应用。

用法

链接外部CSS文件：

html 复制代码

<head>
    <link rel="stylesheet" href="css/reset.css">  
    <link rel="stylesheet" href="css/base.css">   
    <link rel="stylesheet" href="css/layout.css">  
    <link rel="stylesheet" href="css/components.css">  
</head>

响应式设计：

html 复制代码

<head>    
    <!-- 只有大屏幕（宽度至少1200px）才加载这个样式表 -->
    <link rel="stylesheet" media="(min-width: 1200px)" href="css/large-screen.css">   
    
    <!-- 只有平板等中等屏幕才加载 -->
    <link rel="stylesheet" media="(min-width: 768px) and (max-width: 1199px)" href="css/medium-screen.css">   
    <!-- 只有手机等小屏幕才加载 -->
    <link rel="stylesheet" media="(max-width: 767px)" href="css/small-screen.css">
    
    <!-- 打印页面时的样式 -->
    <link rel="stylesheet" media="print" href="css/print.css">
</head>

链接网站图标：

html 复制代码

<head>
    <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
    <!-- 现代浏览器更推荐使用 PNG 格式 -->
    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
    <!-- Apple 设备 -->
    <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
</head>

预加载CSS文件：

html 复制代码

<link rel="preload" as="style" href="css/critical.css" onload="this.rel='stylesheet'">

预连接：

html 复制代码

<link rel="preconnect" href="https://xxx.xxx.com">