Question

我是HTML和CSS的新手。我在Atom文本编辑器中编写的以下行未在预览中正确显示。字体不会更改默认的Times New Roman。甚至在添加额外的字体包之后。但是，我没有使用任何奇特的字体。相反，我的代码出了问题吗？

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="stylesheet.css">
    <title>Text</title>
</head>
<body>
  <p> This is a paragraph. All of the text on this page has a font size of 16 pixels.
    This paragraph, like most of the text on this page is black and uses Tahoma font.</p>
  <ul>
    <li id="point1">This list item uses the Verdana font and color orange.</li>
    <li id="point2">This list item uses the Impact font and the color red.</li>
    <li id="point3">This list item uses the Georgia font and the color pink.</li>
    <li id="point4">This list item is black and uses the Tahoma font. It also contains a link to
      <link href="http://www.spiced-academy.com"></link>
    </ul>
  <p>This is another paragraph. Each item in the list above has a top and bottom
    margin of 10 pixels.</p>
</body>
</html>

isLoggedIn$

Answer 1

我不确定是不是问题但是尝试在链接css样式表上添加属性类型：

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

Answer 2

好吧，在代码预览窗口中，我看到它有效（Chrome，Mac）。尝试清除浏览器缓存或写入font-family: Tahoma !Important;

Answer 3

确保您的CSS页面保存为stylesheet.css，因为这是代码中引用的内容。

检查您的HTML文件和CSS文件是否保存在同一目录中。

对于测试，您可以在<style>标记中使用CSS，甚至在尝试链接到样式表之前。您可以将其放在<head>标记中。然后，一旦您可以在此处成功查看样式，就可以处理外部样式表。

<head>
  <style>

    body {
      font-family: Tahoma;
      font-size: 16px;
    }

    #point1 {
      font-family: Verdana;
      color: orange;
      margin-top: 10px;
      margin-bottom: 10px;
    }

   #point2 {
     font-family: Impact;
     color: red;
     margin-top: 10px;
     margin-bottom: 10px;
   }

   #point3 {
     font-family: Georgia;
     color: pink;
     margin-top: 10px;
     margin-bottom: 10px;
    }

   #point4 {
    font-family: Tahoma;
    margin-top: 10px;
    margin-bottom: 10px;
   }

  </style>
</head>

HTML / CSS代码没有正确描绘或者我的代码有问题吗？

3 个答案: