Question

我正在尝试使用Notepad ++为我的网站制作导航栏，但导航栏的CSS代码不会链接到我的HTML文件。我尝试使用这种方法将文件链接在一起：

<link rel="stylesheet" type="text/css" href="main.css" />

但它似乎没有对我的HTML文件进行任何更改。

以下是我希望CSS代码链接到的HTML代码：

 <ul id="nav">
     <li><a href=" ">Home</a></li>
     <li><a href=" ">Popular Stories</a></li>
     <li><a href=" ">Q&A Page</a></li>
     <li><a href=" ">Popular Stitch Sessions</a></li>
     <li><a href=" ">Video Stories</a></li>
     <li><a href=" ">Secrets Section</a></li>
</ul>

以下是我想要链接到HTML代码的CSS代码：

/*CSS Document*/
* {margin:0px; padding:0px;}
body {
    width: 600px;
    margin-right: auto;
    margin-left: auto;
    font-family: Verdana, Geneva, sans-serif:
    font-size: 86x;
}

/*NAVIGATION*/
*nav {
margin-bottom:20px;
margin-top:20px;
margin-left:auto;
margin-right:auto;

}
*nav li {
   display:inline;
   margin-left:-3px;
   margin-right:-3px;
}

*nav a {
    text-decoration: none;
    background-color:#999;
    padding: 10px;
    margin-bottom:10px; 

}

*nav a:link{

}

*nav a:hover {
   background-color:#FFF
}

#nav a:visited {
}

Answer 1

假设您的CSS文件位于同一文件夹中，其余的HTML应该是这样的：

<!doctype html>
<html lang="us">
<head>
    <meta charset="utf-8">
    <title>Stylesheet Linking</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>

</body>
</html>

Answer 2

将文件保存在与代码

下面的html文件类型相同的目录中

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
</body>
</html>

Answer 3

您的ID选择器使用星号。它应该是一个哈希标记（#nav，而不是*nav）。

将CSS文件链接到HTML文件

3 个答案: