Внешний CSS не работает, но внутренний CSS - PullRequest
0 голосов
/ 28 апреля 2020

Я более свеж в HTML и CSS, я пытаюсь внешне связать свой файл CSS с моим HTML файлом, но не могу этого сделать, но Internal CSS работает. Пожалуйста, помогите исправить это

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Colleen</title>
    <link rel="stylesheet" type="text/css" href="css/firststyle.css"></link>
    <style type="text/css">
        @font-face
        {
            font-family: avengers;
            src: url('avengersital.ttf'); 
        }       
        .heading
        {
            color: red;
            text-align: center;
            font-family: avengers;
        }
    </style>
</head>

<body>
<header>
    <h1 class="heading">AVENGERS</h1>
    <a href="https://www.w3schools.com">one</a>
    <a href="https://www.w3schools.com">two</a>
    <a href="https://www.w3schools.com">three</a>
    <a href="https://www.w3schools.com">four</a>
</header>
<section>
    <h2 id = "hola">Favorite Foods</h2>
    <ul class = "list">
        <li>Apples</li>
        <li>Pizza</li>
        <li>Crab</li>
        <li>Choclate cake</li>
    </ul>
</section>
<section>
    <h2 id = "holareturns">Achievements</h2>
    <label for="file" id = "filelabel">Progress in this course(100%)</label>
    <progress id="file" value="100" max="100"></progress>
    <br>
    <br>
    <label for="filea" id = "filealabel">Progress in the specialization capstone(20%)</label>
    <progress id="filea" value="20" max="100"></progress>
    <br>
    <br>
    <label for="fileb" id = "fileblabel">Progress in life goals(67%)</label>
    <progress id="fileb" value="67" max="100"></progress>
</section>
<section>
    <h2 class="nothing"> More About Me</h2>
    <details>
        <summary>My Childhood</summary>
        <p> I grew up in Ashtabula Ohio. I lived near Lake Erie and I really miss the sunsets over water
        </p>
    </details>
</section>
<footer>
<img src= "http://www.intro-webdesign.com/images/newlogo.png" alt = "wd4e Logo">
    <caption>This page was created by Vaibhav Sharma & Colleen van Lent, To learn more about web design, visit <a href="http://www.intro-webdesign.com">Intro To Web Design</a></caption>
</footer>
</body>
</html>

и мой CSS равен

 @font-face{
    font-family: avengers !important;
    src: url('avengersital.ttf') !important; 
}
heading{
    color: red !important;
    text-align: center !important;
    font-family: avengers !important;
}

Я пробовал использовать! Важный во всех строках CSS и пытался использовать без него, у меня есть использовал полное местоположение папки в href в HTML, но все еще не работает.

Отредактировано: поэтому мой код работал так, как я использовал '\' в месте, где мне пришлось использовать '/' для подключения мой CSS с моим HTML. Я посещаю изменения

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Colleen</title>
    <link rel="stylesheet" type="text/css" href="A:/css/style.css"></link>
</head>

<body>
<header>
    <h1 class="heading">AVENGERS</h1>
    <a href="https://www.w3schools.com">one</a>
    <a href="https://www.w3schools.com">two</a>
    <a href="https://www.w3schools.com">three</a>
    <a href="https://www.w3schools.com">four</a>
</header>
<section>
    <h2 id = "hola">Favorite Foods</h2>
    <ul class = "list">
        <li>Apples</li>
        <li>Pizza</li>
        <li>Crab</li>
        <li>Choclate cake</li>
    </ul>
</section>
<section>
    <h2 id = "holareturns">Achievements</h2>
    <label for="file" id = "filelabel">Progress in this course(100%)</label>
    <progress id="file" value="100" max="100"></progress>
    <br>
    <br>
    <label for="filea" id = "filealabel">Progress in the specialization capstone(20%)</label>
    <progress id="filea" value="20" max="100"></progress>
    <br>
    <br>
    <label for="fileb" id = "fileblabel">Progress in life goals(67%)</label>
    <progress id="fileb" value="67" max="100"></progress>
</section>
<section>
    <h2 class="nothing"> More About Me</h2>
    <details>
        <summary>My Childhood</summary>
        <p> I grew up in Ashtabula Ohio. I lived near Lake Erie and I really miss the sunsets over water
        </p>
    </details>
</section>
<footer>
<img src= "http://www.intro-webdesign.com/images/newlogo.png" alt = "wd4e Logo">
    <caption>This page was created by Vaibhav Sharma & Colleen van Lent, To learn more about web design, visit <a href="http://www.intro-webdesign.com">Intro To Web Design</a></caption>
</footer>
</body>
</html>

Спасибо за ваши ответы всем !! Мир!

Ответы [ 4 ]

2 голосов
/ 28 апреля 2020

Вы не должны использовать абсолютный путь, поскольку

<link rel="stylesheet" type="text/css" href="C:\Users\VAIBHAV SHARMA\Desktop\html+css_projects\learning\css\firststyle.css"></link>

должен измениться на

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

Я предполагаю, что ваш файл HTML и папка css имеют тот же уровень.

Может быть, вы пропустите точку для класса .heading вместо heading

Я воспроизвожу в местном, это сработало.

enter image description here enter image description here

1 голос
/ 28 апреля 2020
C:\Users\VAIBHAV SHARMA\Desktop\html+css_projects\learning\css\firststyle.css

в указанном выше маршруте вашего css файла должно быть правильное имя вашей папки и используйте / вместо \

как C:/Users/VAIBHAV-SHARMA/Desktop/htmlcss_projects/learning/css/firststyle.css

0 голосов
/ 28 апреля 2020

HTML Элемент ссылки на внешний ресурс (link) будет использоваться следующим образом.

<link rel="stylesheet" href="/media/examples/link-element-example.css" />

Вы должны использовать forward sla sh (/), а не backsla sh ( \).

Подробнее о теге link.

0 голосов
/ 28 апреля 2020

во-первых, я не вижу внутренних CSS, применяемых в вашем источнике HTML, поэтому вы можете обновить свой код с помощью внутреннего стиля?

Во-вторых, согласно наиболее важному правилу CSS - "Внутренний CSS перезапишет внешний CSS, а встроенные стили перезапишут внутренний и внешний CSS" https://www.quora.com/Whats-the-best-practice-inline-internal-or-external-CSS

In в случае вашего текущего кода - где вы указываете на внешний CSS - может быть вероятность того, что ваша ссылка HTML неверна, файлы HTML и CSS не находятся в той же папке? попробуйте сослаться, используя относительный URL - как

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

Наконец - я думаю, что ваш CSS должен быть заголовком (не заголовком)

header{
    color: red !important;
    text-align: center !important;
    font-family: avengers !important;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...