Question

（对不起我的语法不好，英语不是我的母语）

我开始刷新对HTML5和CSS的了解。

从基础开始。

在我PC的文件夹中制作了html文件和CSS样式表。编写了一些HTML代码：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="style/css" href="styles.css">
    <meta charset="UTF-8">
</head>
<body>

<a href="https://www.google.lv/"><button>Ej uz Google!</button></a>


</body>
</html>

和CSS样式表：

body {
  background-image: url("https://www.hdwallpapers.in/download/sunset_horizon_above_clouds_4k-1366x768.jpg");
  background-repeat: repeat-x;
}
button{
    background-color:#44c767;
    -moz-border-radius:28px;
    -webkit-border-radius:28px;
    border-radius:28px;
    border:1px solid #18ab29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:17px;
    padding:16px 31px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
}
button:hover {
    background-color:#5cbf2a;
}
button:active {
    position:relative;
    top:1px;
}

但是当我在Dreamweaver中本地打开HTML时，一切正常。当我在任何浏览器中本地打开它时，它只显示简单的按钮，而CSS样式表中没有显示任何内容：（

我该如何解决？

谢谢！

祝你有美好的一天！

Answer 1

抱歉，我的问题很愚蠢，感谢您的帮助。

我只是借助强大的Google以及对此问题的评论进行了一些更改：）

所以我更改了HEAD部分：

<head>
    <meta charset="utf-8">
    <title>Seda Mājaslapa</title>
    <style type="text/css">
        @import url("styles.css");
    </style>
    <link rel="icon" href="https://img.icons8.com/color/48/000000/jacket.png">
</head>

感谢您的帮助！如果我的问题不好，我很抱歉。我只是在刷新HTML5和CSS的知识：）

祝你有美好的一天！

P.S。一些好的HTML5和CSS教程在哪里（我已经知道w3schools了：）

Answer 2

Bro使用此功能！

我对CSS进行了评论，因此您可以获取我添加的内容。
在您的代码中添加css，看看有什么让我知道的更改

body {
  background-image: url("https://www.hdwallpapers.in/download/sunset_horizon_above_clouds_4k-1366x768.jpg");
  /*---I have added this CSS Try it--*/
  background-size: cover;
  height: 100vh;
  text-align: center;
  /*--------*/
}
button{
    background-color:#44c767;
    -moz-border-radius:28px;
    -webkit-border-radius:28px;
    border-radius:28px;
    border:1px solid #18ab29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:17px;
    padding:16px 31px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
}
button:hover {
    background-color:#5cbf2a;
}
button:active {
    position:relative;
    top:1px;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="style/css" href="styles.css">
    <meta charset="UTF-8">
</head>
<body>

<a href="https://www.google.lv/"><button>Ej uz Google!</button></a>


</body>
</html>

外部CSS样式表仅在Dreamweaver中工作

2 个答案:

Bro使用此功能！