欢迎来到我的个人网站。

3. 外部链接（External Link）

最常用的方法是将CSS规则写在一个独立的.css文件中，并通过HTML文档的标签将其链接到HTML文档，这样做的好处是可以在多个页面间共享同一个样式表，有助于保持整体风格的一致性，并方便管理和维护。

创建一个名为styles.css的文件：

body {
    backgroundcolor: lightblue;
}
h1 {
    color: white;
    textalign: center;
}
p {
    fontfamily: verdana;
    fontsize: 20px;
}

在HTML文档中使用标签引入该CSS文件：

    


    
我的网站
    
欢迎来到我的个人网站。

确保href属性中的路径正确指向了CSS文件的位置，如果CSS文件位于与HTML文件相同的目录中，则可以直接使用文件名；如果在不同的目录中，需要指定相对路径或绝对路径。

4. @import 导入

除了使用标签外，还可以使用CSS的@import规则在样式表中导入其他样式表，这通常用在嵌套样式表中，但也可以用于外部样式表，需要注意的是，@import必须在样式表的开头使用，而且它可能会导致性能问题，因为它会延迟浏览器加载样式表的时间。

在styles.css文件中导入另一个样式表typography.css：

@import url('typography.css');
body {
    backgroundcolor: lightblue;
}
h1 {
    color: white;
    textalign: center;
}
p {
    fontfamily: verdana;
    fontsize: 20px;
}

然后在HTML中使用：

    


    
我的网站
    
欢迎来到我的个人网站。

最佳实践建议：

组织和维护：对于大型项目，推荐使用外部链接的方式引入CSS，这样更易于管理和更新样式。

性能优化：避免使用@import，因为它可能会导致额外的HTTP请求和加载延迟，使用标签可以并行加载资源，提高性能。

响应式设计：考虑使用媒体查询来创建适应不同设备屏幕大小的样式，这通常在外部CSS文件中实现。

浏览器兼容性：确保你的CSS代码兼容目标浏览器，可以使用工具如Autoprefixer来自动添加必要的浏览器前缀。

通过以上方法，你可以有效地在HTML中引入和使用CSS，创建出既美观又功能丰富的网页。