Блог

Главная - Вопросы по программированию - экстремальный новичок здесь, кто-нибудь может проверить, что не так с моим кодом? почему не применяется стиль?

экстремальный новичок здесь, кто-нибудь может проверить, что не так с моим кодом? почему не применяется стиль?

#html

#HTML

Вопрос:

    <!DOCTYPE html>
<html lang="en">
  <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
  href="https://fonts.googleapis.com/css2?family=Nerko Oneamp;display=swap"
  rel="stylesheet"
/>
<link
  href="https://fonts.googleapis.com/css?family=Lobster"
  rel="stylesheet"
  type="text/css"
/>
<style>
 
    background-image: url("https://wallpaperaccess.com/full/17520.jpg");
 

  #not-working {
    font-family: Lobster, monospace;
    font-size: 45px;
    text-align: center;
    color: white;
  }
</style>
  </head>
  <body>
<p id="not-working">hello world</p>
  </body>
</html>

Почему идентификатор #not-working не работает?

Ответ №1:

Просто удалите background-image: url("https://wallpaperaccess.com/full/17520.jpg") , потому что это неправильная строка. Вы должны сделать это каким-то другим способом, как будто body{background-image:[...];} иначе это работает.

 <style>
#not-working {
  font-family: Lobster, monospace;
  font-size: 45px;
  text-align: center;             
  color: white;
}
body{
  background-image: url("https://wallpaperaccess.com/full/17520.jpg");
}
</style>
<p id="not-working"> hello world</p>

Комментарии:

1. Не забывайте <head> <body> также о тегах and !

2. На самом деле head и body не имеют значения, потому что это такой простой случай, и браузер с HTML5-материалом должен быть в состоянии понять, что есть что.

3. Я полностью согласен. Но это вопрос новичка, не лучше ли продемонстрировать хорошую практику с помощью полного и исправленного ответа? Если не с помощью продемонстрированного примера, то, по крайней мере, с помощью списка точек внимания.

4. Хорошо, я думаю, это не повредит.

5. @Lae Я пытался удалить сдвиг и делать всевозможные вещи, но это не позволяет мне этого делать, поэтому я просто сдался в какой-то момент.

Ответ №2:

background-image ни к чему не применяется. Примените его к телу:

 <style>
body {
  background-image: url("https://wallpaperaccess.com/full/17520.jpg");
}

#not-working {
  font-family: Lobster, monospace;
  font-size: 45px;
  text-align: center;
  color: white;
}

Вы также испортили свой код. Используйте правильный формат HTML:

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Nerko Oneamp;display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Lobster"
      rel="stylesheet"
      type="text/css"
    />
    <style>
      body {
        background-image: url("https://wallpaperaccess.com/full/17520.jpg");
      }

      #not-working {
        font-family: Lobster, monospace;
        font-size: 45px;
        text-align: center;
        color: white;
      }
    </style>
  </head>
  <body>
    <p id="not-working">hello world</p>
  </body>
</html>

Ответ №3:

Потому что это ваша background-image: url("https://wallpaperaccess.com/full/17520.jpg") внешняя часть элемента. может, ты попробуешь!

 <!DOCTYPE html>
<html>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nerko Oneamp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>

#not-working {
font-family: Lobster, monospace;
font-size: 45px;
text-align: center;             
color: white;
background-image: url("https://wallpaperaccess.com/full/17520.jpg")
}
</style>
<p id="not-working"> hello world</p>