html - 外部css文件一半在html中工作

问题描述

我有这个代码：

@font-face {
    font-family: lato;
    src: url(../rsrc/fonts/Lato-Regular.woff);
}

@font-face {
    font-family: audrey;
    src: url(../rsrc/fonts/Audrey-Normal.otf);
}

body {
    margin: 0;
}

.main {
    display: grid;
    grid-template-rows: 'head content foot';
}

.head {
    grid-area: head;
}


.barra1 {
    background-color: #000000;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.g2 {
    text-align: center;
}

.g2 img {
    width: 16px;
    height: 16px;
    margin-top: 4px;
}

.g3 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: right;
    border-color: red;
}

.e1 {
    display: inline-block;
    margin: 0;
    padding: 0;
    border-color: orange;
}

.e1 a {
    color: #ffffff;
    display: block;
    margin: 0;
    padding: 6px;
    text-decoration-line: none;
    font-family: lato;
    font-size: 12px;
    border-color: yellow;
}

.e1 a:hover {
    background-color: #7a7a7a;
    color: #fafafa;
}

.e1 a:active {
    background-color: #1e1e1e;
    color: #ffffff;
}

.barra2 {
    font-family: audrey;
    text-align: center;
}

.barra3 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 1px solid #000000;
    border-right-width: 0;
    border-left-width: 0;
    background-color: #E6E6E6;
    text-align: center;
}

li.e3 {
    display: inline-block;
}

li.e3 a {
    display: block;
    padding: 10px 30px;
    text-decoration-line: none;
    font-family: lato;
    color: black;
    font-size: 20px;
}

li.e3 a:hover {
    background-color: #7a7a7a;
    color: #fafafa;
}

.e3 a:active {
    background-color: #1e1e1e;
    color: #ffffff;
}


.barra4 {
    padding: 0;
    text-align: center;
}

.e4 {
    color: #ffffff;
    display: inline-block;
    padding: 6px 6px;
    text-decoration-line: none;
    font-family: lato;
    font-size: 12px;
}

.e4:hover {
    background-color: #7a7a7a;
    color: #fafafa;
}

.e4:active {
    background-color: #1e1e1e;
    color: #ffffff;
}


.content {
    grid-area: content;
}

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="../css/estilo.css">
    <!----
    <style>
        .barra4 {
            padding: 0;
            text-align: center;
        }

        .e4 {
            color: #ffffff;
            display: inline-block;
            padding: 6px 6px;
            text-decoration-line: none;
            font-family: lato;
            font-size: 12px;
        }

        .e4:hover {
            background-color: #7a7a7a;
            color: #fafafa;
        }

        .e4:active {
            background-color: #1e1e1e;
            color: #ffffff;
        }
    </style>
    <!---->

</head>
<body style="margin:0">
    <!--foot--><div class="barra4">
        <a href="ej/1.jpg" class="e4">Políticas y aviso legal</a>
    </div>
</body>
</html>

html文件调用：C:\Users\silve\source\repos\TTWeb\html\foot.html css文件调用：C:\Users\silve\source\repos\TTWeb\css\estilo.css 两者都是在 UTF-8 中（不是 BOM 或其他）

我的问题是，当我通过内部 css（在脚.html 中的标签内，因为它在评论内）给出样式时没有问题，结果正是我想要的。但是当我使用外部 css 文件（estilo.css）（脚的样式在末尾）时，它并不完全适用。例如，背景是正确的，但链接不正确。

同样的问题也出现在我拥有的其他 html 文件中。我不知道为什么它不起作用，也没有在互联网上找到任何线索。

标签： htmlcss

html - 外部css文件一半在html中工作

问题描述

解决方案

推荐阅读