Стили HTML - CSS

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

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

Вы можете добавить CSS к элементам HTML тремя способами:

Встроенный (Inline), когда атрибут style используется непосредственно в элементах HTML.
Внутренний (Internal), когда элемент <style> используется в разделе <head>.
Внешний (External), когда используется внешний файл CSS.

Рассмотрим каждый способ подробнее.

Встроенный CSS

Встроенный CSS применяет определённый стиль к одному HTML-элементу. Для этого используется атрибут style элемента.

В примере ниже цвет текста элемента <p> установлен в красный:

Пример встроенного CSS:

Пример встроенного CSS

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Usage of the inline CSS</h1>
    <p style="color:red;">The paragraph is red.</p>
  </body>
</html>

Try it Yourself »

Внутренний CSS

Внутренний CSS задаёт стиль для одной HTML-страницы. Он определяется в элементе <code><head></code> HTML-страницы внутри тега <code><style></code>:

Пример внутреннего CSS:

Пример внутреннего CSS

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: yellow;
      }
      h1 {
        font-size: 30px;
      }
      p {
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <h1>Lorem Ipsum</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>

Try it Yourself »

Внешний CSS

Внешняя таблица стилей задаёт стиль для нескольких HTML-страниц. Она может изменить внешний вид всего сайта путём изменения всего одного файла.

Чтобы использовать внешнюю таблицу стилей, добавьте ссылку на неё внутри элемента <code><head></code> HTML-страницы: ### Пример внешней таблицы стилей CSS:

Пример внешней таблицы стилей CSS

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Lorem Ipsum</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>

Try it Yourself »

Файл не должен содержать HTML-код и должен быть сохранён с расширением .css.

Шрифты CSS

Свойство CSS color описывает цвет текстового содержимого.

Свойство CSS font-family определяет шрифт текстового содержимого.

Свойство CSS font-size определяет размер текста.

Пример шрифтов CSS:

Пример шрифтов CSS

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        color: #008000;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 200%;
      }
      p {
        color: #666666;
        font-family: 'New Roman', serif;
        font-size: 150%;
      }
    </style>
  </head>
  <body>
    <h1>Lorem Ipsum</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>

Try it Yourself »

Граница CSS

Свойство CSS border задаёт значения для всех четырёх сторон элемента.

Пример свойства CSS border:

Пример свойства CSS border

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border: 2px dotted red;
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>

Try it Yourself »

Отступы CSS (padding)

Свойство CSS padding задаёт внутренний отступ (пространство) между текстом и границей.

Пример свойства CSS padding:

Пример свойства CSS padding

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border: 2px dashed #008022;
        padding: 50px;
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>

Try it Yourself »

Внешние отступы CSS (margin)

Свойство CSS margin создаёт пространство вокруг элемента.

Пример свойства CSS margin:

Пример свойства CSS margin

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border: 2px dashed #090fce;
        margin: 50px;
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>

Try it Yourself »

Атрибут id

Атрибут id attribute задаёт уникальный стиль для одного элемента.

Пример атрибута id:

Пример атрибута id

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #large-text {
        border: 8px groove powderblue;
        font-size: 24px;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <p id="large-text">
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>

Try it Yourself »

Атрибут class:

Атрибут class attribute используется для задания стиля для определённых типов элементов.

Пример атрибута class:

Пример атрибута class

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text {
        border: 8px inset powderblue;
        font-size: 20px;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <p class="text">
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p class="text">
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>

Try it Yourself »

Практика

Какими способами можно добавить стили CSS в HTML-документ согласно статье на w3docs?

Встроенный (Inline) — с помощью атрибута style внутри элементов HTMLВнешний (External) — путём подключения внешнего файла CSSВнутренний (Internal) — с помощью элемента <style> в разделе <head>С помощью тега <css> внутри элементов HTMLДобавлением стилей внутри тега <body>

Стили HTML - CSS ​

Встроенный CSS ​

Пример встроенного CSS: ​

Внутренний CSS ​

Пример внутреннего CSS: ​

Внешний CSS ​

Шрифты CSS ​

Пример шрифтов CSS: ​

Граница CSS ​

Пример свойства CSS border: ​

Отступы CSS (padding) ​

Пример свойства CSS padding: ​

Внешние отступы CSS (margin) ​

Пример свойства CSS margin: ​

Атрибут id ​

Пример атрибута id: ​

Атрибут class: ​

Пример атрибута class: ​

Практика ​

Стили HTML - CSS

Встроенный CSS

Пример встроенного CSS:

Внутренний CSS

Пример внутреннего CSS:

Внешний CSS

Шрифты CSS

Пример шрифтов CSS:

Граница CSS

Пример свойства CSS border:

Отступы CSS (padding)

Пример свойства CSS padding:

Внешние отступы CSS (margin)

Пример свойства CSS margin:

Атрибут id

Пример атрибута id:

Атрибут class:

Пример атрибута class:

Практика