Що таке CSS і як він визначає вигляд сторінок
Автор: Редакція Domeny.ForSale Опубліковано
Коротко: CSS — це мова таблиць стилів, яка визначає вигляд і компонування вебсторінок: кольори, шрифти, відступи та розташування елементів. Вона працює разом із HTML, що описує структуру та значення вмісту. Завдяки CSS одна й та сама сторінка може бути зручною для читання як на телефоні, так і на великому моніторі.
За що відповідає CSS і чим відрізняється від HTML?
Скорочення CSS походить від Cascading Style Sheets, тобто каскадних таблиць стилів. Це декларативна мова: ви вказуєте, як має виглядати елемент, а браузер відповідає за його відображення. Не потрібно крок за кроком описувати, як намалювати кнопку чи розмістити абзац.
Розподіл завдань на сторінці найпростіше зрозуміти на прикладі контактної форми:
- HTML визначає, що форма містить підписи, поля для введення даних і кнопку надсилання.
- CSS задає ширину полів, вигляд кнопки, відступи та компонування форми на різних екранах.
- JavaScript може забезпечувати додаткову поведінку, наприклад надсилання даних без перезавантаження сторінки.
CSS не замінює коректний HTML. Якщо звичайному фрагменту тексту надати вигляду заголовка, він не стане заголовком для допоміжних технологій, якими користуються відвідувачі. Вигляд і значення елемента — це дві окремі речі.
Таблиці стилів також дають змогу відокремити оформлення від вмісту. Один спільний файл CSS може змінити вигляд кнопок на багатьох сторінках сайту без редагування кожної кнопки окремо.
Як виглядає правило CSS?
Правило CSS складається із селектора, який вибирає елементи, та декларацій, які задають їхній вигляд. Кожна декларація містить властивість і її значення.
p {
color: #222222;
font-size: 18px;
line-height: 1.6;
}
Селектор p вибирає всі абзаци. Властивість color задає колір тексту, font-size — його розмір, а line-height — висоту рядка. У цьому прикладі висота рядка становить 1,6 розміру шрифту, завдяки чому текст має більше простору по вертикалі.
Проте не завжди потрібно змінювати всі елементи певного типу. Клас — це назва, присвоєна елементу в HTML, за якою його можна вибрати в CSS. Селектор класу починається з крапки:
.vydilennia {
background-color: #fff4cc;
padding: 16px;
border-radius: 8px;
}
Це правило задає світле тло, внутрішній відступ і заокруглені кути елементам із класом vydilennia. Самого запису назви в таблиці стилів недостатньо — відповідному елементу потрібно присвоїти цей клас у HTML.
Що означає каскад і чому стиль іноді перевизначається?
До одного елемента можуть підходити кілька правил. Каскад — це механізм, який визначає, яку декларацію буде застосовано, коли різні правила задають ту саму властивість.
Просте правило «останній запис завжди перемагає» тут не діє. Браузер враховує, зокрема, походження та важливість декларацій, шари каскаду й специфічність, тобто вагу селектора. Якщо решта умов однакові, значення має порядок запису.
p {
color: navy;
}
.uvaha {
color: darkred;
}
Абзац із класом uvaha буде темно-червоним. У цьому прикладі селектор класу має вищу специфічність, ніж селектор типу елемента.
Окремий механізм — успадкування: деякі властивості, наприклад колір тексту, можуть передаватися від батьківського елемента до його вмісту. Це стосується не всіх налаштувань: рамка та зовнішній відступ за замовчуванням не успадковуються. Якщо стиль не працює, спочатку перевірте, чи селектор вибирає потрібний елемент і які декларації конкурують між собою. Не поспішайте додавати !important: це змінює пріоритет декларації та може ускладнити подальші виправлення.
Як CSS пристосовує сторінку до екрана?
Адаптивність означає пристосування компонування до доступного простору. CSS забезпечує це завдяки гнучким значенням ширини, механізмам розташування елементів і медіазапитам (media queries) — умовам, за яких застосовуються певні стилі, наприклад за визначеної ширини області відображення сторінки.
Для створення макетів використовують, зокрема, Flexbox, зручний для розташування елементів в одному напрямку, та Grid, призначений для макетів із рядками й стовпцями. Наприклад, список товарів може мати три стовпці на широкому екрані й один на вузькому.
Задаючи розміри, потрібно розуміти блокову модель: елемент має область вмісту, внутрішній відступ (padding), рамку (border) і зовнішній відступ (margin). За замовчуванням задана ширина стосується лише вмісту. Налаштування box-sizing: border-box включає в цю ширину також внутрішні відступи та рамку, що полегшує контроль розміру елемента.
Як почати працювати з CSS?
Найчастіше правила записують в окремому файлі з розширенням .css, який підключають у заголовковій секції документа HTML. Стилі можна розміщувати й безпосередньо в документі, проте спільна таблиця стилів зазвичай спрощує підтримку великого сайту.
Першу вправу можна виконати без встановлення додаткових інструментів:
- Відкрийте сторінку в браузері та виберіть у контекстному меню команду дослідження елемента.
- Виберіть абзац і в панелі стилів змініть його
colorабоfont-size. - Перевірте, які декларації перекреслено: зазвичай їх перевизначили інші правила.
- Звузьте вікно й оцініть, чи текст залишається читабельним і чи не з’являється зайве горизонтальне прокручування.
Зміни в інструментах розробника зазвичай тимчасові й зникають після оновлення сторінки. Якщо результат правильний, перенесіть правило до файлу проєкту. Для початку змініть один елемент і перевірте результат також зі збільшеним текстом — так ви швидше зрозумієте взаємозв’язки, ніж після вставлення великої готової таблиці стилів.
Читайте також
