Как добавить CSS в HTML

Язык разметки гипертекста (HTML) и каскадные таблицы стилей (CSS) — это два основных языка, используемых для создания веб-сайтов. В то время как HTML обеспечивает структуру сайта, CSS используется для создания стиля сайта. Вместе они дают пользователям возможность создавать привлекательные и хорошо организованные веб-сайты.

Необходимые условия

Эта статья предполагает, что у читателя есть следующее:

  • Текстовый редактор
  • Базовые знания HTML.
  • Базовые знания CSS.

Только после добавления CSS в HTML-документ декларации стилей могут быть применены к HTML-коду. Однако многие начинающие разработчики испытывают трудности с добавлением CSS в HTML. Поэтому в этой статье рассматриваются три метода создания стилей. Они следующие:
 

Встроенный CSS

Здесь стили добавляются непосредственно в теги элементов HTML с помощью атрибута style.

<h1 style = "color : blue;" >Inline CSS</h1>
Вход в полноэкранный режим Выход из полноэкранного режима

 Например,
Если вы хотите изменить цвет текста и цвет фона элемента, вы можете:

  1. Добавить атрибут style к элементу.
  2. Добавить свойства стиля к атрибутам стиля.
  <p style = " " > Paragraph </p>
Войти в полноэкранный режим Выйти из полноэкранного режима

 

  <p style = "color:blue; background-color:yellow;"> Paragraph </p>
Войти в полноэкранный режим Выход из полноэкранного режима

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

Избегайте использования инлайн CSS, насколько это возможно, но если это необходимо, делайте это редко.

Внутренний CSS

Здесь стили добавляются с помощью тега HTML <style> в разделе head HTML-документа. Затем свойства стиля определяются с помощью соответствующих селекторов в теге <style>. Внутренний CSS также часто называют встроенным CSS.

  <head>
     <style>
       h1{
        color:blue;
       }
    </style>

  </head>

  <body>

     <h1>Internal CSS</h1>

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

 

Стили для одной HTML-страницы определяются с помощью метода внутренней стилизации CSS. Это один из главных недостатков метода.

Поэтому метод внутренних стилей мало используется на практике.

Внешний CSS

Все рассмотренные до сих пор методы стилизации включаются в HTML-документ (либо в head, либо в body). Но в данном случае мы импортируем стили CSS через тег <link> из внешней таблицы стилей. Это важно, так как облегчает сопровождение и чтение кода.  

Метод внешних стилей CSS требует создания внешнего файла стилей .css и привязки его к HTML.
 
Например, если вы хотите придать стиль элементу HTML с помощью этого метода, вы можете:

  1. Создать внешний файл таблицы стилей с расширением .css (Создайте файл с именем style.css).
  2. Нацелить элемент HTML внутри файла style.css с помощью селектора, как показано ниже.
  3. Импортируйте файл style.css в раздел <head> документа HTML с помощью тега <link>.
   h1{
       color: blue;

       font-size: 16px;

     }
Вход в полноэкранный режим Выход из полноэкранного режима

 

  <head>
     <link rel="stylesheet" href="style.css">
  </head>

  <body>
     <h1> External CSS </h1>
  </body>

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

 

Способность этого метода задавать стили для нескольких HTML-страниц является одной из его главных особенностей.

Таким образом, внешний CSS становится наиболее предпочтительным методом стилизации веб-страниц.

Заключение

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

Я буду рад ответить на любые ваши вопросы в разделе комментариев ниже.
Если вы хотите узнать больше о веб-разработке, не стесняйтесь следовать за мной в Twitter.

Спасибо, что прочитали🎉.

Фотография на обложке — Клеман Элардо

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