CSS 如何在 github 页面中将 index.html 链接到 CSS 文件
在本文中，我们将介绍如何在 Github 页面中将 index.html 文件链接到 CSS 文件。使用 CSS 样式可以为您的网页增加个性化的外观和布局，并提升用户体验。通过按照以下步骤，您将能够在 Github 页面上正确链接 CSS 文件。
阅读更多：CSS 教程
步骤一：创建 CSS 文件
首先，您需要创建一个 CSS 文件。在您的项目文件夹中，新建一个名为 “styles.css”（或者您喜欢的任何其他名称）的文件。在该 CSS 文件中，您可以编写自己的样式规则和属性，以控制网页的外观效果。
例如，在 “styles.css” 文件中，您可以添加以下样式代码：
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h1 {
color: #333333;
text-align: center;
}
步骤二：将 CSS 文件链接到 index.html
要将 CSS 文件链接到 index.html 页面，您需要在 HTML 文件中添加一个链接标签。打开您的 “index.html” 文件，并在 <head> 标签中添加以下代码：
<link rel="stylesheet" type="text/css" href="styles.css">
在上述代码中，href 属性指定了您的 CSS 文件的路径和文件名。如果您的 CSS 文件和 index.html 文件在同一文件夹中，则只需添加文件名即可。如果您的 CSS 文件在不同的文件夹中，则需要提供正确的相对路径。
步骤三：提交并部署您的代码到 Github
完成上述步骤后，保存您的代码，并将其提交并推送到您的 Github 仓库中。确保您的 CSS 文件和 index.html 文件一起提交和推送。
一旦您的代码成功推送到 Github 仓库，您可以通过访问您的 Github 页面来查看效果。Github Pages 会自动加载您的 CSS 文件并应用到您的网页中。
示例
以下是一个示例，展示如何将 index.html 链接到 CSS 文件：
styles.css 文件：
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h1 {
color: #333333;
text-align: center;
}
index.html 文件：
<!DOCTYPE html>
<html>
<head>
<title>My Github Page</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Welcome to My Github Page</h1>
<p>This is a sample webpage.</p>
</body>
</html>
假设您的 “styles.css” 和 “index.html” 文件都位于根目录中，那么在您的 Github 页面上，您将看到一个具有居中标题和浅灰色背景的页面。
总结
通过将 CSS 文件链接到 Github 页面的 index.html 文件，您可以为您的网页增加自定义样式和布局。请确保在 HTML 文件的 <head> 标签中使用 <link> 标签来引用您的 CSS 文件，并正确指定文件路径。随后，提交并推送您的代码到 Github 仓库，即可在 Github Pages 上查看效果。祝您成功美化您的 Github 页面！
此处评论已关闭