CSS по шагам
ВведениеШаг 1. Что такое CSS
Разделение оформления и содержания
Единое оформление документов
Централизованное хранение
Расширенные возможности
Быстрая работа
Шаг 2. Подключение CSS
Таблица связанных стилей
Пример 2.1. Подключение таблицы связанных стилей
Пример 2.2. Файл со стилем
Таблица глобальных стилей
Пример 2.3. Использование таблицы глобальных стилей
Внутренние стили
Пример 2.4. Использование внутренних стилей
Пример 2.5. Сочетание разных методов подключения стилей
Импорт CSS
Пример 2.6. Импорт CSS в глобальную таблицу стилей
Пример 2.7. Импорт в таблице связанных стилей
Шаг 3. Типы носителей
Пример 3.1. Импорт стилевого файла
Пример 3.2. Стили для разных типов носителей
Пример 3.3. Подключение стилей для разных носителей
Шаг 4. Базовый синтаксис
Пример 4.1. Использование стилей
Изменение важности элементов с помощью !important
Пример 4.2. Повышение важности элементов
Шаг 5. Селекторы тегов
Пример 5.1. Изменение стиля тега параграфа
Шаг 6. Классы
Пример 6.1. Использование классов c тегами
Пример 6.2. Использование классов
Пример 6.3. Использование классов
Шаг 7. Идентификаторы
Пример 7.1. Использование идентификатора
Пример 7.2. Применение идентификатора совместно с тегом
Пример 7.3. Изменение видимости слоя
Шаг 8. Комментарии
Пример 8.1. Комментарии в файле CSS
Пример 8.2. Комментарии в коде HTML
Пример 8.3. Однострочный комментарий
Пример 8.4. Комментирование отдельных свойств CSS
Шаг 9. Контекстные селекторы
Пример 9.1. Контекстные селекторы
Пример 9.2. Использование классов
Шаг 10. Соседние селекторы
Пример 10.1. Использование соседних селекторов
Пример 10.2. Изменение стиля абзаца
Пример 10.3. Отступы между заголовками и текстом
Шаг 11. Дочерние селекторы
Пример 11.1. Вложенность элементов в документе
Пример 11.2. Контекстные и дочерние селекторы
Пример 11.3. Использование дочерних селекторов
Шаг 12. Селекторы атрибутов
Простой селектор атрибута
Пример 12.1. Вид элемента в зависимости от его параметра
Селектор атрибута со значением
Пример 12.2. Стиль для открытия ссылок в новом окне
Атрибут начинается с определенного значения
Пример 12.3. Изменение стиля внешней ссылки
Атрибут оканчивается определенным значением
Пример 12.4. Стиль для разных доменов
Значение встречается в любом месте атрибута
Пример 12.5. Стиль для разных сайтов
Шаг 13. Универсальный селектор
Пример 13.1. Использование универсального селектора
Шаг 14. Группирование
Пример 14.1. Стиль для каждого селектора
Пример 14.2. Сгруппированные селекторы
Шаг 15. Наследование
Пример 15.1. Наследование параметров цвета
Пример 15.2. Параметры текста для всей веб-страницы
Пример 15.3. Изменение свойств наследуемого элемента
Шаг 16. Псевдоклассы
Псевдоклассы, определяющие состояние элементов
Active
Link
Focus
Пример 16.1. Применение псевдокласса focus
Hover
Visited
Пример 16.2. Изменение цвета ссылок
Пример 16.3. Выделение строк таблицы
Псевдоклассы, имеющие отношение к дереву документа
First-child
Пример 16.4. Использование псевдокласса first-child
Пример 16.5. Отступы для абзаца
Шаг 17. Псевдоэлементы
After
Пример 17.1. Применение псевдоэлемента after
Before
Пример 17.2. Использование псевдоэлемента before
First-letter
Пример 17.3. Использование псевдоэлемента first-letter
First-line
Пример 17.4. Выделение первой строки текста
Шаг 18. Правила создания стиля
Пишите все правила для каждого селектора в одном месте
Пример 18.1
Пример 18.2
Имеет приоритет значение, указанное в коде ниже
Пример 18.3
Начинайте с селекторов верхнего уровня
Пример 18.4
Группируйте селекторы с одинаковыми параметрами и значениями
Пример 18.5
Используйте идентификаторы и классы
Пример 18.6
Пример 18.7
