Що таке CSS?
CSS (Каскадні таблиці стилів) дозволяє створювати чудові веб-сторінки, але як же це працює? Ця стаття пояснює, що таке CSS, використовуючи простий приклад синтаксису, а також охоплює деякі ключові терміни про мову.
| Необхідні знання: | Базові комп’ютерні знання, встановлення базового програмного забезпечення , базові знання робота з файлами та базові знання HTML ( Введення в HTML ). |
|---|---|
| Завдання: | Дізнатися, що таке CSS. |
У модулі Основи HTML ми розглянули, що таке HTML і як він використовується для розмітки документів. Ці документи будуть доступні для читання у веб-браузері. Заголовки будуть виглядати більше, ніж звичайний текст, абзаци розбиваються на новий рядок і матимуть простір між одним. Посилання виділені кольором та підкреслені, щоб відрізнити їх від решти тексту. Те, що ви бачите, – це стилі браузера за промовчанням – найголовніші стилі, які браузер застосовує до HTML, щоб гарантувати, що він буде переважно читабельним, навіть якщо автор сторінки не вказав явний стиль.
Тим не менш, інтернет був би нудним, якби всі сайти виглядали так. Використовуючи CSS, ви можете до дрібниць контролювати, як елементи HTML виглядають у браузері, представляючи вашу розмітку, використовуючи будь-який дизайн, що вам сподобався.
Навіщо потрібен CSS?
Як ми вже згадували раніше, CSS – це мова для визначення того, як документи надаються користувачам – як вони оформляються, розміщуються і т.д.
Документ зазвичай є текстовим файлом, структурованим з використанням мови розмітки: HTML – найпоширеніша мова розмітки, але ви також можете зустріти інші мови розмітки, такі як SVG або XML .
Примітка: Браузер іноді називають user agent , що в основному означає комп’ютерну програму, яка представляє людину всередині комп’ютерної системи. Браузери – це основний тип користувача агента, про який ми думаємо, коли говоримо про CSS, але він не єдиний. Доступні й інші агенти користувача, наприклад, ті, які перетворюють документи HTML і CSS на PDF-файли для друку.
CSS може використовуватися для простої стилізації тексту документа, наприклад, зміна кольору та розміру заголовків та посилань. Він може бути використаний для створення макета, наприклад, перетворення одного стовпця тексту на макет (en-US) з основною областю контенту та бічною панеллю для відповідної інформації. Це може навіть використовуватися для таких ефектів, як анімація . Подивіться посилання в цьому параграфі для конкретних прикладів.
Синтаксис CSS
CSS – це мова на основі правил: ви визначаєте правила, які визначають групи стилів, які повинні застосовуватися до певних елементів або груп елементів на вашій веб-сторінці. Наприклад:
“Я хочу, щоб основний заголовок на моїй сторінці відображався великим червоним текстом”.
У наступному коді показано дуже просте правило CSS, яке буде відповідати стилю, описаному вище:
h1 {
color: red;
font-size: 5em;
}
Copy to Clipboard
Правило відкривається за допомогою селектора . Цей селектор вибирає HTML-елемент, який ми збираємось стилізувати. І тут ми використовуємо заголовки першого рівня — ( <h1> (en-US) ).
Потім у нас є набір фігурних дужок { }. Усередині них буде один або кілька оголошень , які набувають форми пари властивості та її значення . Кожна пара вказує властивість елемента(-ів), який(-і) ми вибираємо, а потім значення, яке хотіли б привласнити властивості.
Перед двокрапкою у нас є властивість, а після двокрапки — значення. CSS- властивості (en-US) мають різні допустимі значення залежно від того, яка властивість вказується. У нашому прикладі ми маємо властивість color, яка може набувати різних колірних значень . У нас також є властивість font-size. Ця властивість може набувати різних значень розміру , як і властивості.
Таблиця стилів CSS містить багато таких правил, написаних одне за одним.
h1 {
color: red;
font-size: 5em;
}
p {
color: black;
}
Copy to Clipboard
Ви знайдете, що ви швидко вивчаєте деякі значення, тоді як інші вам потрібно шукати. Сторінки окремих властивостей у MDN дають вам швидкий спосіб пошуку властивостей та їх значень, коли ви забули або хочете дізнатися, що ще ви можете використовувати як значення.
Примітка: ви можете знайти посилання на всі сторінки властивостей CSS (разом з іншими функціями CSS), перелічені в MDN Посібнику CSS . Крім того, ви повинні звикнути до пошуку “MDN css-feature-name ” у вашому браузері, коли вам потрібно дізнатися більше інформації про функцію CSS. Наприклад, спробуйте пошукати «mdn color» та «mdn font-size»!
CSS-модулі
Оскільки існує безліч речей, які можна стилізувати за допомогою CSS, мова розбита на модулі. У міру вивчення MDN ви побачите посилання на ці модулі, а багато сторінок документації організовані навколо певного модуля. Наприклад, ви можете подивитися на посилання MDN у модулі Властивості фону та меж , щоб дізнатися, яка його мета та які різні властивості та інші функції він містить. Ви також знайдете посилання на специфікацію CSS, яка визначає технологію (див. нижче).
На цьому етапі вам не потрібно дуже турбуватися про те, як структурований CSS, проте це може спростити пошук інформації, якщо, наприклад, ви знаєте, що певна властивість може бути знайдена серед інших схожих речей, і тому, ймовірно, у тій самій специфікації.
Для конкретного прикладу давайте повернемося до модуля Властивості фону та меж – ви можете подумати, що це логічно для властивостей background-color і border-color, які будуть визначені в цьому модулі. І Ви маєте рацію.
Технічні характеристики CSS
Всі технології веб-стандартів (HTML, CSS, JavaScript і т. д.) визначені в гігантських документах, які називаються специфікаціями, які публікуються організаціями зі стандарти. зації (такі як W3C , WHATWG , ECMA або Khronos (en-US) ) і визначають, як ці технології повинні поводитися.
CSS нічим не відрізняється – він розроблений групою в W3C, яка називається CSS Working Group . Ця група складається з представників виробників браузерів та інших компаній, які зацікавлені у CSS. Є також інші люди, відомі як запрошені експерти, які виступають як незалежні голоси; вони пов’язані з членами організації.
Нові функції CSS розробляються чи визначаються робочою групою CSS. Іноді тому, що конкретний браузер зацікавлений у тому, щоб мати якісь можливості, іноді тому, що веб-дизайнери та розробники вимагають функцію, а іноді тому, що сама робоча група визначила вимогу. CSS постійно розвивається, з’являються нові функції. Тим не менш, ключовим моментом у CSS є те, що всі працюють дуже старанно, щоб ніколи не змінювати речі таким чином, щоб це зламало старі сайти. Веб-сайт, створений у 2000 році, з використанням обмеженого CSS, доступного на той час, має все ще використовуватись у браузері сьогодні!
Як новачок в CSS, цілком імовірно, що ви знайдете CSS-специфікації приголомшливими – вони призначені для інженерів, щоб використовувати їх для реалізації підтримки функцій в агентах користувача, а не для веб-розробників, щоб читати, щоб розуміти CSS. Багато досвідчених розробників вважають за краще звертатися до документації MDN або інших підручників. Однак варто знати, що вони існують, розуміти взаємозв’язок між CSS, підтримкою браузера (див. нижче) і специфікаціями.
Підтримка браузера
| desktop | mobile | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on iOS | Samsung Internet | WebView Android | |
font-family | 1Теглі історії | 12Теглі історії | 1footnoteТеглі історії | 3.5Теглі історії | 1Теглі історії | 18Теглі історії | 4Теглі історії | 10.1Теглі історії | 1Теглі історії | 1.0Теглі історії | 4.4Теглі історії |
mathExperimental | 103disabledТеглі історії | 103disabledТеглі історії | NoТеглі історії | 89disabledТеглі історії | NoТеглі історії | 103disabledТеглі історії | NoТеглі історії | NoТеглі історії | NoТеглі історії | NoТеглі історії | NoТеглі історії |
system-ui | 56Теглі історії | 79Теглі історії | 92moreТеглі історії | 43Теглі історії | 11moreТеглі історії | 56Теглі історії | 92Теглі історії | 43Теглі історії | 11moreТеглі історії | 6.0Теглі історії | 56Теглі історії |
Legend
Tip: Ви можете натиснути/натиснути на екрані для більшої інформації.Full supportFull supportNo supportNo supportЕкспериментальний. Expect behavior to change in the future.See implementation notes.User must explicitly enable this feature.Uses a non-standard name.Has more compatibility info.
Після того, як CSS було вказано, він буде корисний для розробки веб-сторінок, тільки якщо один або кілька браузерів його реалізували. Це означає, що код був написаний для перетворення інструкції в нашому CSS-файлі на щось, що може бути виведено на екран. Це незвичайно для всіх браузерів, щоб реалізувати функцію одночасно, і тому зазвичай є пробіл, де можна використовувати деяку частину CSS в одних браузерах, а не в інших. Тому корисно перевіряти стан реалізації. На кожній сторінці властивостей у MDN ви можете бачити статус властивості, що вас цікавить, щоб ви могли визначити, чи зможете ви використовувати її на веб-сайті.
