obsidian/Веб/Фронтенд/CSS.md at 3e4e10da1095a3a5f72afaf4b9ba70cd62c55a3f

roma/obsidian

Fork 0

Files

T

roma-dxunvrs 04fc7af4f4 Weekends

2026-09-07 08:24:01 +03:00

4.1 KiB

Raw Blame History

CSS (Cascade StyleSheets) - язык описания внешнего вида HTML-документа
CSS - технология описания внешнего вида документа, написанного языком разметки
Используется для задания цветов, шрифтов и других аспектов представления документа
Основная цель - разделение содержимого документа и его представления
Позволяет представлять один и тот же документ в различных методах вывода (например, обычная версия и версия для печати)

Источники CSS

Авторские стили:
- Inline-стили - указывается прямо в атрибуте style
- Встроенных стилей - блоков CSS внутри HTML-документа
- Внешних таблиц стилей - отдельного файла .css
Пользовательские стили:
- Локальный CSS-файл, указанный пользователем в браузере
Стиль браузера:
- Стандартный стиль, используемый браузером по умолчанию

Структура CSS

Таблица состоит из набора правил
Каждое правило состоит из набора селекторов и блока определений:

селектор, селектор {
	свойство: значение;
	свойство: значение;
	свойство: значение;
}

Например:

div, td {
	background-color: red;
}

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

Если к одному элементу "подходит" сразу несколько стилей, применен будет наиболее приоритетный
Приоритеты (от большего к меньшему)
1. свойство задано при помощи !important
2. стиль прописан напрямую в теге
3. наличие идентификаторов (#id) в селекторе
4. количество классов (.class) и псевдоклассов (:pseudoclass) в селекторе
5. количество имен тегов в селекторе
Имеет значение относительный порядок расположения свойств - свойство, указанное позже, имеет приоритет

Селекторы

Точка (.message) - Класс
- Может повторяться на странице сколько угодно раз
- Через атрибут class
- Можно указать несколько через пробел <div class="message error bold">
Решетка (#message) - ID
- Должен быть строго уникальным на всей странице
- Через атрибут id
Без ничего - тег

Внешний файл стилей

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

<!DOCTYPE html>
<html lang="ru">
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

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

Пишутся в теге <style> тоже внутри head

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: #f0f0f0;
        }
        .title {
            color: blue;
        }
    </style>
</head>
<body>
    <h1 class="title">Привет, мир!</h1>
</body>
</html>

Инлайн-стили

Стиль пишется прямо внутри конкретного тега

<p style="color: red; font-size: 20px;">Это красный текст</p>

Дополнительно: CSS-препроцессоры

4.1 KiB Raw Blame History