无法将外部样式表连接到HTML

时间：2019-05-20 03:12:18

标签： html css

这是一个容易回答的问题。我正在制作Google Clone主页，并且正在尝试连接 CSS 和 HTML 。由于某种原因，它不起作用。

我的 HTML 和 CSS 在同一文件夹中，所以这不是问题。在我的 HTML 工作表中，我还已经链接到外部 CSS 样式表。 HTML 代码如下。 

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

由于我的 CSS ，我希望看到我的 HTML 发生变化，但是我没有看到。

您可以找到我的完整 HTML 代码：https://codeshare.io/ay3yrw

还有完整的 CSS ，这里：https://codeshare.io/GABLnN

5 个答案:

答案 0 :(得分：1)

link标签直接在 head标签内使用

必须是这样的：

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

答案 1 :(得分：0)

从链接标记的开头和结尾删除样式标记，如下所示

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

答案 2 :(得分：0)

请删除UITableViewDataSourcePrefetching标签，以便您可以引用此 CSS 文件。

答案 3 :(得分：0)

从链接标签的开头和结尾删除样式标签，如下所示：

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

，在这种情况下，请确保您的HTML文件和CSS文件必须位于同一文件夹中。

答案 4 :(得分：0)

我检查了您的代码，发现了您的 CSS 无法正常工作的三个主要原因。

1。 link标记

正如许多其他提到的那样，您需要从<style> ... </style>标记中删除<head>标记，并直接在其中使用<link>标记。

2。不是id，而是class

您的 HTML 和 CSS 有很多错误。例如，您在 CSS 文件中设置样式：

.top left links {
    ...
}

此处.top被定义为class，但是在您的 HTML 代码中，您将其定义为id，请检查以下行：

<!-- Containing Top Left Links on Nav Bar -->
<div id="top left links">
...
</div>

<!--Containing Top Right Links on Nav Bar-->
<div id="top right links">
...
</div>

请记住，id应该是唯一的，因此应将id属性更改为class属性。

3。没有空格

在您的 CSS 文件中，所有定义都不正确：

.top left links {
    ...
}

根据此定义，我们知道.top是一个类，但是left和links代表标签。我们都知道没有<left>或<links>标签的地方，它们应该表示为类。另外，请记住，当您要引用具有多个类的单个元素时，请串联它们，而当您要引用后代元素时，请用空格将类分开。

因此正确的定义应该没有空格：

.top.left.links {
    ...
}

最后，我对.search1类的 CSS 文件进行了一些修改。检查此代码：

/* Google Duplicate CSS */

.top.left.links {
  float: left;
  color: #718090;
  text-align: left;
  padding: 30px;
  margin: auto;
  list-style-type: none;
}

.top.left.links a:hover {
  text-decoration: none;
}

.top.right.links {
  float: right;
  color: #718090;
  text-align: right;
  padding: 30px;
  margin: auto;
  list-style-type: none;
}

.top.right.links a:hover {
  text-decoration: none;
}

#ham_menu {
  height: 24px;
  width: 24px;
  float: right;
}

.search1 {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#f1f1f1));
  background-image: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
  -webkit-border-radius: 2px;
  -webkit-user-select: none;
  color: #5F6368;
  height: 36px;
  line-height: 27px;
  background-color: #f2f2f2;
  border: 1px solid #f2f2f2;
  border-radius: 4px;
  cursor: pointer;
  font-family: arial, sans-serif;
  font-size: 14px;
  margin: 11px 4px;
  min-width: 54px;
  padding: 0 16px;
  text-align: center;
}

.bottom.left.links,
.bottom.right.links {
  list-style-type: none;
  color: #718090;
  padding: 30px;
  margin: auto;
  font-size: 13px;
}

.bottom.left.links {
  float: left;
}

.bottom.right.links {
  float: right
}

.footer {
  position: fixed;
  min-width: 980px;
  z-index: 103px;
  height: 64px;
  background-color: lightgray;
}
<!--Header Menu of Page -->
<header>
  <!-- Containing Top Left Links on Nav Bar -->
  <div class="top left links">
    <a href="https://about.google/intl/en/?fg=1&utm_source=google-US&utm_medium=referral&utm_campaign=hp-header">About</a>
    <a href="https://store.google.com/?utm_source=hp_header&utm_medium=google_oo&utm_campaign=GS100042">Store</a>
  </div>

  <!--Containing Top Right Links on Nav Bar-->
  <div class="top right links">
    <li><a href="https://mail.google.com">Gmail</a></li>
    <li><a href="https://www.google.com/imghp?hl=en&tab=wi">Images</a></li>
    <li><a href="https://accounts.google.com/ServiceLogin/signinchooser?hl=en&passive=true&continue=https%3A%2F%2Fwww.google.com%2F&flowName=GlifWebSignIn&flowEntry=ServiceLogin">Sign In</a></li>
  </div>

</header>
<!--Top Right Ham Menu-->
<img id="ham_menu" src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" class="right">

<!--Actual Google Image, Search Form, and Buttons-->
<center>
  <img src="http://www.google.com/logos/doodles/2019/us-teacher-appreciation-week-2019-begins-4994791740801024-2x.jpg" alt="Happy US Teacher Appreciation Week 2019!" class="center">
  <form class="search" input type="text"> </form>
  <button class="search1" type="submit" value="Google Search" style="visibility">
         Google Search
        </button>

  <button class="search1">
        I'm Feeling Lucky
        </button>

  <p><a href="https://www.blog.google/outreach-initiatives/education/teacher-appreciation-week-2019/?utm_source=google&utm_medium=hpp&utm_campaign=taw_2019" target="_blank">We're supporting teachers inspiring the next generation.</a></p>
</center>



<!--Footer Links-->
<footer>
  <div class="bottom left links">
    <a href="https://ads.google.com/intl/en_us/home/?subid=ww-ww-et-g-awa-a-g_hpafoot1_1!o2&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpafooter&fg=1">Advertising</a>
    <a href="https://www.google.com/services/?subid=ww-ww-et-g-awa-a-g_hpbfoot1_1!o2&utm_source=google.com&utm_medium=referral&utm_campaign=google_hpbfooter&fg=1#?modal_active=none">Business</a>
  </div>

  <div class="bottom right links">
    <li><a href="https://policies.google.com/privacy?hl=en&gl=us">Privacy</a></li>
    <li><a href="https://policies.google.com/terms?hl=en&gl=us">Terms</a></li>
  </div>
</footer>

相关问题
最新问题