Jack the Christian Ответов: 4

Как я могу реализовать свой CSS в свой HTML?

Я использую веб-сайт, который допускает только html, но мой код имеет страницу html и css. Как вставить свой css-код на html-страницу?

Вот мой html-код.

<DOCTYPE html>
    <head>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>    
    </head>
   <body>
        <header>

                <ul class="nav">
                    <li class="active"><a href="Website.html">Home</a></li>
                    <li><a href="world%20cup.html">World Cup</a>    </li>
                    <li><a href="sports.html">Sports</a></li>
                    <li><a href="schedule.html">Schedule</a></li>
                    <li><a href="about.html">About</a></li>
                </ul>
            </div>
        </header>
    </body>

</DOCTYPE html>



Вот мой css.

.nav {
    float: right;
    list-style-type: none;
    list-style: none;
    padding: 10px 100px;
    margin: 20px;
}

.nav li {
    display: inline-block;
    margin: 10px 5px;
}

ul.nav li a{
    color: #ffffff;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 20px;
    font-family: "Roboto", sans-serif;
    margin-bottom: inherit;
    padding: 5px 10px;
    letter-spacing: 2px;
    border: 1px solid #ffffff;
    
}

.nav li a:hover{
    background: #fff;
    transition: .4s;
    color: #000000
}

.nav li.active a{
    border: 2px solid white;
    background: #ffffff;
    color: #000;
}


Что я уже пробовал:

Я пробовал добавлять стиль в свой код вот так:

<DOCTYPE html>
    <stlye>
    li {float: right; list-style-type: none; list-style: none; padding: 10px 100px; margin: 20px;}
    </stlye>
    <head>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>    
    </head>
   <body>
        <header>

                <ul class="nav">
                    <li class="active"><a href="Website.html">Home</a></li>
                    <li><a href="world%20cup.html">World Cup</a>    </li>
                    <li><a href="sports.html">Sports</a></li>
                    <li><a href="schedule.html">Schedule</a></li>
                    <li><a href="about.html">About</a></li>
                </ul>
            </div>
        </header>
    </body>

</DOCTYPE html>

F-ES Sitecore

Css в вашем элементе стиля полностью отличается от css во внешнем файле, который вы использовали.

Afzaal Ahmad Zeeshan

Этот случай, скорее всего, будет проблемой в том, как ваш CSS связан, пожалуйста, проверьте, можно ли получить доступ к файлу с этого пути—как обсуждается в решении 1.

4 Ответов

Рейтинг:
8

Jack the Christian

Есть две вещи, которые вам нужно сделать:

1. Исправить орфографические ваш элемент стиля во внутреннем экране.
2. Удалите свой внутренний стиль css на HTML-странице.

Рейтинг:
2

#realJSOP

Посмотрите на консоль отладки Dev в вашем браузере и посмотрите, может ли она даже найти этот файл. (найдите вкладку "Сеть" в консоли). Он покажет вам код результата HTTP (обычно 200 или 404), и если код результата равен 404, он не сможет найти файл.

Если это так, вам придется изменить путь к файлу "ссылка".

Рейтинг:
1

Patrice T

Вы пробовали поместить "стиль"внутрь " головы", а не раньше ?
Вы можете посмотреть здесь:
HTML учебник[^]
HTML CSS[^]

Рейтинг:
0

Harsh.Shah.ifour

Во-первых, проверьте орфографию вашего элемента стиля во внутреннем csss, это неправильно.
Таким образом, он будет показывать ваш внутренний css в виде текста в вашем браузере.

Во-вторых, удалите свой внутренний стиль css на HTML-странице, потому что он такой же, как и в css-файле таблицы стилей. так что вам не нужно писать это дважды. Это не позволяет css-коду внешнего листа реализовываться должным образом.

Поэтому поместите весь css во внутренний элемент стиля или во внешний файл, тогда ваш css будет реализован правильно.