Где размещается css в html : 3 места для css

Статья первоначально опубликована @ bepractical

Привет, разработчики, в этой статье я собираюсь показать вам, где css может быть размещен в вашем html-файле.

Итак, давайте начнем : )
Метод размещения css в html файле

  • Внешний css
  • Внутренний css
  • Внутренний css

Внешний css

В этом методе вы должны написать css во внешнем файле, а затем связать этот css-файл с html-файлом.

Предположим, что вы создали файл style.css в каталоге html-файла, и написали в нем некоторый css-код. Тогда в html файле вы можете связать css файл, как показано ниже в примере

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>My Home Page</title>
</head>
<body>

<h1>Welcome to Homepage !</h1>
<p>Greetings :)</p>

</body>
</html> 
Вход в полноэкранный режим Выйти из полноэкранного режима

Тег <link /> используется для ссылки css файлов в html файле. Атрибут href используется для указания местоположения css-файла.

Ваш style.css не содержит html тегов и файл будет выглядеть примерно так

#banner{
  background-color: lightblue;
}

#banner p{
  color: navy;
  margin-left: 20px;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Давайте перейдем ко второму методу, т.е. внутреннему css

Внутренний css

Это второй метод размещения css в html-файле. В этом методе нет необходимости создавать внешний файл для css и связывать его с html-файлом.

В этом методе css размещается внутри html-файла внутри тега <style> тега <head>, как показано ниже.

<!DOCTYPE html>
<html>
<head>
<style>
#banner{
  background-color: lightblue;
}

#banner p{
  color: navy;
  margin-left: 20px;
}
</style>
<title>My Home Page</title>
</head>
<body>

<h1>Welcome to Homepage !</h1>
<p>Greetings :)</p>

</body>
</html> 
Вход в полноэкранный режим Выход из полноэкранного режима

Встроенный css

В этом методе весь css применяется в атрибуте style этого тега, как показано в примере ниже. Атрибут style может содержать любое количество свойств css .

Читать полную статью здесь 👉 https://bepractical.tech/where-does-css-placed-in-html-3-places-for-css/

Оцените статью
devanswers.ru
Добавить комментарий