Що таке CSS?

CSS (Каскадні таблиці стилів) дозволяє створювати чудові веб-сторінки, але як же це працює? Ця стаття пояснює, що таке CSS, використовуючи простий приклад синтаксису, а також охоплює деякі ключові терміни про мову.

Что такое CSS: объясняем простыми словами - Создание сайтов Астана  Нур-Султан Разработка сайтов
Необхідні знання:Базові комп’ютерні знання, встановлення базового програмного забезпечення , базові знання робота з файлами та базові знання HTML ( Введення в HTML ).
Завдання:Дізнатися, що таке CSS.

У модулі Основи HTML ми розглянули, що таке HTML і як він використовується для розмітки документів. Ці документи будуть доступні для читання у веб-браузері. Заголовки будуть виглядати більше, ніж звичайний текст, абзаци розбиваються на новий рядок і матимуть простір між одним. Посилання виділені кольором та підкреслені, щоб відрізнити їх від решти тексту. Те, що ви бачите, – це стилі браузера за промовчанням – найголовніші стилі, які браузер застосовує до HTML, щоб гарантувати, що він буде переважно читабельним, навіть якщо автор сторінки не вказав явний стиль.

Тим не менш, інтернет був би нудним, якби всі сайти виглядали так. Використовуючи CSS, ви можете до дрібниць контролювати, як елементи HTML виглядають у браузері, представляючи вашу розмітку, використовуючи будь-який дизайн, що вам сподобався.

Навіщо потрібен CSS?

Як ми вже згадували раніше, CSS – це мова для визначення того, як документи надаються користувачам – як вони оформляються, розміщуються і т.д.

Документ зазвичай є текстовим файлом, структурованим з використанням мови розмітки: HTML – найпоширеніша мова розмітки, але ви також можете зустріти інші мови розмітки, такі як SVG або XML .

Примітка: Браузер іноді називають user agent , що в основному означає комп’ютерну програму, яка представляє людину всередині комп’ютерної системи. Браузери – це основний тип користувача агента, про який ми думаємо, коли говоримо про CSS, але він не єдиний. Доступні й інші агенти користувача, наприклад, ті, які перетворюють документи HTML і CSS на PDF-файли для друку.

Читайте також  Груповий відеочат в Skype став підтримувати до 50 осіб

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 дають вам швидкий спосіб пошуку властивостей та їх значень, коли ви забули або хочете дізнатися, що ще ви можете використовувати як значення.

Читайте також  В бібліотеку Xbox Game Pass додадуть вісім ігор, включаючи Shadow of War і Dead Rising 4

Примітка: ви можете знайти посилання на всі сторінки властивостей 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. Є також інші люди, відомі як запрошені експерти, які виступають як незалежні голоси; вони пов’язані з членами організації.

Читайте також  Як очистити пам'ять Samsung та звільнити місце на андроїді

Нові функції CSS розробляються чи визначаються робочою групою CSS. Іноді тому, що конкретний браузер зацікавлений у тому, щоб мати якісь можливості, іноді тому, що веб-дизайнери та розробники вимагають функцію, а іноді тому, що сама робоча група визначила вимогу. CSS постійно розвивається, з’являються нові функції. Тим не менш, ключовим моментом у CSS є те, що всі працюють дуже старанно, щоб ніколи не змінювати речі таким чином, щоб це зламало старі сайти. Веб-сайт, створений у 2000 році, з використанням обмеженого CSS, доступного на той час, має все ще використовуватись у браузері сьогодні!

Як новачок в CSS, цілком імовірно, що ви знайдете CSS-специфікації приголомшливими – вони призначені для інженерів, щоб використовувати їх для реалізації підтримки функцій в агентах користувача, а не для веб-розробників, щоб читати, щоб розуміти CSS. Багато досвідчених розробників вважають за краще звертатися до документації MDN або інших підручників. Однак варто знати, що вони існують, розуміти взаємозв’язок між CSS, підтримкою браузера (див. нижче) і специфікаціями.

Підтримка браузера

desktopmobile
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung InternetWebView Android
font-family1Теглі історії12Теглі історії1footnoteТеглі історії3.5Теглі історії1Теглі історії18Теглі історії4Теглі історії10.1Теглі історії1Теглі історії1.0Теглі історії4.4Теглі історії
mathExperimental103disabledТеглі історії103disabledТеглі історіїNoТеглі історії89disabledТеглі історіїNoТеглі історії103disabledТеглі історіїNoТеглі історіїNoТеглі історіїNoТеглі історіїNoТеглі історіїNoТеглі історії
system-ui56Теглі історії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 ви можете бачити статус властивості, що вас цікавить, щоб ви могли визначити, чи зможете ви використовувати її на веб-сайті.

Степан Лютий

Обожнюю технології в сучасному світі. Хоча частенько і замислююся над тим, як далеко вони нас заведуть. Не те, щоб я прям і знаюся на ядрах, пікселях, коллайдерах і інших парсеках. Просто приходжу в захват від того, що може в творчому пориві вигадати людський розум.

Вам також сподобається...

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *