Варианты добавление CSS стилей на страницу

Поиск

Существует несколько способов добавления CSS стилей на веб-страницу:

Внутренние стили: стили могут быть написаны прямо внутри HTML-кода страницы с помощью тега <style>.

<!doctype html>
<html>
  <head>
    <style>
      h1 {
        color: red;
      }
      p {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>Заголовок</h1>
    <p>Текст</p>
  </body>
</html>

Внешние стили: стили могут быть сохранены в отдельном файле с расширением “.css” и подключены к HTML-странице с помощью тега <link>.

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Заголовок</h1>
    <p>Текст</p>
  </body>
</html>

Inline-стили: стили могут быть применены непосредственно к отдельным элементам с помощью атрибута “style”.

<!doctype html>
<html>
  <body>
    <h1 style="color: red;">Заголовок</h1>
    <p style="color: blue;">Текст</p>
  </body>
</html>

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