Что такое CSS?

CSS — язык описания оформления веб-страниц

CSS (Cascading Style Sheets) — это технология, которая определяет **внешний вид и расположение элементов** на веб-странице. Без CSS все страницы выглядели бы как обычный текст — никаких цветов, шрифтов, размеров или позиционирования.

Базовая структура CSS

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

Пример:

p { color: blue; font-size: 16px; }

Эта запись означает: все параграфы <p> на странице будут синего цвета размером 16 пикселей.

Три способа подключения CSS

Внешний файл (рекомендуется):

<link rel="stylesheet" href="styles.css">

Встроенный в HTML:

<style>
  p { color: red; }
</style>

Inline стили (избегать):

<p style="color: green;">Текст</p>

Что тестируют QA при работе с CSS

Визуальное отображение:

• Цвета соответствуют макету (используем Color Picker)
• Размеры шрифтов верны
• Отступы (margin, padding) соответствуют дизайну
• Выравнивание элементов

Отзывчивость (responsive):

• Страница корректно выглядит на мобильных устройствах
• Медиа-запросы работают правильно
• Элементы не переполняют контейнеры

Кросс-браузерность:

• CSS работает одинаково в Chrome, Firefox, Safari, Edge
• Нет проблем с префиксами для старых браузеров

Производительность:

• Стили не замедляют загрузку страницы
• Нет дублирования CSS кода

Ключевые CSS свойства, которые часто проверяют QA

• Color — цвет текста
• Background — фоновый цвет или изображение
• Font-size, Font-weight, Font-family — параметры шрифта
• Width, Height — размеры элементов
• Margin, Padding — внешние и внутренние отступы
• Display, Flex, Grid — расположение элементов
• Border — границы элемента
• Opacity — прозрачность
• Transform, Animation — движения и эффекты

Для QA инженера важно понимать

Хотя QA не пишет CSS, нужно понимать как он работает для:

• Локализации и верификации UI элементов в браузере (DevTools)
• Проверки инспекции элементов (inspect element)
• Понимания проблем с вёрсткой и способности их описать разработчику
• Кросс-браузерного тестирования
• Работы с автоматизированными тестами (Selenium, Playwright), которые могут взаимодействовать с CSS селекторами