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

Вы можете думать о HTML как о структуре и обрамлении дома. И когда вы хотите, чтобы эта структура выглядела хорошо, вы добавляете краску, декор и другие функции. Это украшение – CSS.

Как стилизовать HTML-код?

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

Существует 3 разных способа стилизации HTML:

• встроенные стили,
• внутренние стили (также известные как встроенный CSS), и
• внешние таблицы стилей.

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

HTML шаблон

Чтобы облегчить работу в этом учебнике, я подготовил простой шаблон HTML, который мы будем стилизовать:

<article>
    <p class="paragraph-one">
      freeCodeCamp is one of the best platforms to learn how to code
    </p>
    <p class="paragraph-two">
      Learning to code is free on freeCodeCamp, that's why they call it
      freeCodeCamp
    </p>
    <p class="paragraph-three">
      freeCodeCamp generates money through donations inorder to pay employees
      and maintain servers.
    </p>
    <p id="paragraph-four">
      If you're generous enough, consider joining others who have been
      donating to freeCodeCamp
    </p>
    <p class="paragraph-five">
      At freeCodeCamp, it's not all about typing on a code editor alone,
      there's a forum like StackOverflow, where you can ask questions about
      your coding problems and get answers from campers alike.
    </p>
</article>

Встроенные стили в HTML

Когда вы используете встроенные стили, вы добавляете их непосредственно в теги HTML с помощью атрибута style.

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

Также типично удалить подчеркивание и цвет по умолчанию, предназначенные ссылкой, поэтому мы можем сделать это внутри отверстия <a> тег тоже.

<article>
   <p
     class="paragraph-one"
     style="color: darkmagenta; font-size: 2rem; text-align: center"
   >
     <a href=" style="text-decoration: none; color: crimson"
       >freeCodeCamp</a
     >
     is one of the best platforms to learn how to code
   </p>
   <p class="paragraph-two">
     Learning to code is free on freeCodeCamp, that's why they call it
     freeCodeCamp
   </p>
   <p class="paragraph-three">
     freeCodeCamp generates money through donations inorder to pay employees
     and maintain servers.
   </p>
   <p id="paragraph-four">
     If you're generous enough, consider joining others who have been
     donating to freeCodeCamp
   </p>
   <p class="paragraph-five">
     At freeCodeCamp, it's not all about typing on a code editor alone,
     there's a forum like StackOverflow, where you can ask questions about
     your coding problems and get answers from campers alike.
   </p>
 </article>

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

Наша веб-страница теперь выглядит как на скриншоте ниже:

Плюсы встроенных стилей

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

Минусы встроенных стилей

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

Внутренние стили в HTML

Когда вы используете внутренний стиль, вы встраиваете стили прямо в HTML-файл в тег style. Обычно вы размещаете их в голове, но это работает везде, даже вне открывающего и закрывающего тегов HTML (но не делайте этого, поскольку это плохая практика).

Мы можем применить некоторые внутренние стили к нашему HTML-коду, например:

<style>
   * {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
 }
 body {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
   }

 .paragraph-two {
     font-size: 1.5rem;
      }

 .paragraph-one a {
      text-decoration: none;
      color: crimson;
      font-size: 2rem;
      font-weight: bolder;
     }
 </style>
</head>
 <body>
 <article>
   <p class="paragraph-one">
     <a href=">freeCodeCamp</a>
     is one of the best platforms to learn how to code
   </p>
   <p class="paragraph-two">
     Learning to code is free on freeCodeCamp, that's why they call it
     freeCodeCamp
   </p>
   <p class="paragraph-three">
     freeCodeCamp generates money through donations inorder to pay employees
     and maintain servers.
  </p>
   <p id="paragraph-four">
     If you're generous enough, consider joining others who have been
     donating to freeCodeCamp
   </p>
   <p class="paragraph-five">
     At freeCodeCamp, it's not all about typing on a code editor alone,
     there's a forum like StackOverflow, where you can ask questions about
     your coding problems and get answers from campers alike.
   </p>
 </article>

Вы можете увидеть, что теперь у нас есть больше вариантов стилей, когда мы используем внутренние стили.

Плюсы внутренних стилей

• Уменьшает количество файлов, которые нужно скачать браузерам
• Нет переключения между файлами для изменения CSS
• Больше вариантов стиля, поскольку вы можете использовать комбинаторы, селекторы классов и селекторы идентификаторов

Если вам интересно, что такое комбинаторы, это символы, которые используются для соединения различных селекторов. Примером является пробел ( ) для выбора следующего потомка элемента, например любого абзаца (p), идущий после a div.

Селекторы классов обозначаются точкой (.), а селекторы id обозначаются a #.

Минусы внутренних стилей

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

Теперь наша веб-страница выглядит так:

Внешние таблицы стилей в HTML

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

Чтобы использовать внешние таблицы стилей в HTML, вы связываете их в заголовке с помощью тега ссылки.

Основной синтаксис тега ссылки выглядит следующим образом:

<link rel="stylesheet" href="

Чтобы стилизовать наш HTML код, нам нужно создать файл CSS и связать его. Когда связано, наш полный HTML-файл теперь выглядит так:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>How to Style HTML</title>
    <link rel="stylesheet" href=" />
  </head>
  <body>
    <article>
      <p class="paragraph-one">
        <a href=">freeCodeCamp</a>
        is one of the best platforms to learn how to code
      </p>
      <p class="paragraph-two">
        Learning to code is free on freeCodeCamp, that's why they call it
        freeCodeCamp
      </p>
      <p class="paragraph-three">
        freeCodeCamp generates money through donations inorder to pay employees
        and maintain servers.
      </p>
      <p id="paragraph-four">
        If you're generous enough, consider joining others who have been
        donating to freeCodeCamp
      </p>
      <p class="paragraph-five">
        At freeCodeCamp, it's not all about typing on a code editor alone,
        there's a forum like StackOverflow, where you can ask questions about
        your coding problems and get answers from campers alike.
      </p>
    </article> 
</body>
</html>

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

Давайте применим некоторые стили к нашему HTML в нашей внешней таблице стилей:

Плюсы внешних таблиц стилей

• Делает стили повторно использованными в нескольких HTML-файлах
• Его легче обслуживать
• Кэшируется браузером во время начальной загрузки, что облегчает отображение страницы и занимает меньше времени после последующих загрузок страницы.
• Его можно размещать на CDN, поэтому пропускная способность становится минимальной, и ее можно легко транспортировать в разные регионы мира.

Минусы внешних таблиц стилей

• Это увеличивает количество файлов, которые нужно скачать браузеру
• Браузер должен делать дополнительные HTTP-запросы на файл

Вывод

Надеюсь, этот учебник помог вам узнать, как можно стилизовать свой HTML.

Теперь вы также знаете плюсы и минусы каждого метода, так что можете выбрать тот, который лучше всего подходит именно вам.

Спасибо, что читаете, и продолжайте кодировать.