MarkusFx (itPit)

Темная тема

Введение ​

Что такое CSS? ​

CSS (Cascading Style Sheets - каскадные таблицы стилей) - это язык, который используется для оформления внешнего вида HTML-документов. С его помощью можно задавать стили: цвета, шрифты, отступы, размеры, расположение элементов на странице и многое другое.

HTML отвечает за структуру контента, а CSS - за его внешний вид.

Например, создадим и изменим файл index.html:

index.html
html
<!doctype html>
<html lang="ru">
    <head>
        <meta charset="UTF-8" />
        <title>Пример CSS</title>
        <style>
            body {
                background-color: #333333;
                font-family: Arial, sans-serif;
            }

            h1 {
                color: #00e5a4;
                text-align: center;
            }

            p {
                color: #eeeeee;
                font-size: 18px;
                line-height: 1.5;
                max-width: 600px;
                margin: 0 auto;
            }

            .highlight {
                color: #00e5a4;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <h1>Привет, мир!</h1>
        <p>
            Это простой пример использования
            <span class="highlight">CSS</span> в HTML-документе.
        </p>
    </body>
</html>
  • <style> - таблица стилей;
    • body - задаёт фон и шрифт всей странице;
    • h1 - стилизует заголовок (цвет и выравнивание);
    • p - задаёт стили для абзацев (цвет текста, размер, межстрочный интервал, отступы);
    • .highlight - класс для выделения текста цветом и жирным;

Селектор и блок деклараций ​

Определение стиля состоит из двух основных частей:

  • Селектор - часть до фигурных скобок ({...});
  • Блок деклараций - всё, что находится внутри фигурных скобок;
    • свойство: значение; - структура одной декларации;

Например:

css
p {
    color: red;
    font-size: 16px;
}
  • p - селектор;
    • {...} - блок деклараций;
      • color, font-size - свойства;
      • red, 16px - значения;

Подключение стилей в HTML ​

В HTML есть три основных способа подключения CSS-стилей:

  1. Встроенные стили (inline styles);
  2. Внутренние стили (внутри тега <style>);
  3. Внешние стили (подключение отдельного CSS-файла).

Встроенные стили ​

CSS пишется прямо внутри тега с помощью атрибута style.

Например:

index.html
html
<p style="color: red; font-size: 18px">Привет, мир!</p>

Внутренние стили ​

CSS пишется в секции <style> внутри HTML-документа (чаще всего в <head>).

Например:

index.html
html
<!doctype html>
<html lang="ru">
    <head>
        <meta charset="UTF-8" />
        <title>Пример</title>
        <style>
            p {
                color: blue;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <p>Привет, мир!</p>
    </body>
</html>

Внешние стили ​

CSS хранится в отдельном .css-файле, который подключается с помощью тега <link> в <head>.

Например, создадим и изменим файл index.html:

index.html
html
<!doctype html>
<html lang="ru">
    <head>
        <meta charset="UTF-8" />
        <title>Пример</title>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <p>Привет, мир!</p>
    </body>
</html>

Создадим и изменим файл styles.css:

styles.css
css
p {
    color: green;
    font-size: 20px;
}

Приоритеты стилей ​

  • Стили браузера по умолчанию - самый низкий приоритет;
  • Внешние - низкий;
  • Внутренние - средний;
  • Селекторы с class и id - высокий;
  • Встроенные - очень высокий;
  • !important - максимальный.

© 2023-2025, MarkusFx (itPit)