CSS – Каскадні списки стилів
Каскадні списки стилів (CSS) — це мова стилів, що використовується для задання вигляду документів, написаних мовою HTML або XML (включно із діалектами XML, як-от SVG, MathML чи XHTML). CSS описує, який вигляд елементи матимуть на екрані, папері, у мовленні чи в іншому вигляді.
CSS належить до ключових мов відкритого вебу і стандартизована між вебпереглядачами згідно зі специфікаціями W3C. У минулому розробка різних частин специфікації CSS велася послідовно, що давало змогу випускати свіжі рекомендації у форматі редакцій. Ви могли чути про CSS1, CSS 2.1 чи навіть CSS3. Ніколи не буде жодних CSS3 чи CSS4; натомість тепер усе є просто CSS, без номера версії.
Після виходу CSS2.1 обсяг специфікації помітно зростав. Прогрес різних модулів CSS почав настільки сильно відрізнятись, що стало більш ефективним розробляти та випускати рекомендації для кожного модуля окремо. Замість оформлення редакцій специфікації CSS, W3C тепер періодично робить знімок найсвіжішого стабільного стану специфікації CSS і поступу окремих модулів. Модулі CSS тепер мають номери версій, або рівні, як то Модуль кольору CSS рівня 5 (англ.).
Ключові матеріали
- Вступ до CSS
Якщо ви новачок у веброзробці, обов'язково прочитайте нашу статтю "основи CSS", щоб дізнатися, що таке CSS та як їх використовувати.
- Підручники з CSS
Наша зона вивчення CSS містить силу-силенну підручників, щоб допомогти на шляху від початкового до високого рівня майстерності, покриваючи усі засадничі принципи.
- Довідник з CSS
Наша вичерпна довідка CSS для загартованих веброзробників описує кожну властивість та концепцію CSS.
Підручники
Наша зона вивчення CSS містить низку модулів, що навчають CSS з нуля, – попередні знання не потрібні.
- Перші кроки у CSS
CSS (каскадні списки стилів) використовуються для стилізації та створення вебсторінок – наприклад, для зміни шрифту, кольору, розміру, інтервалів вашого контенту, поділу його на кілька стовпчиків, або додавання анімацій та інших декоративних особливостей. Цей модуль дасть м'який початок вашому шляху до майстерності в CSS у вигляді основ того, як вони працюють, який вигляд має синтаксис, і як можна почати використовувати їх для стилізації HTML.
- Структурні елементи CSS
Цей модуль продовжує там, де Перші кроки у CSS зупинились, — тепер, ознайомившись із мовою та її синтаксисом, і отримавши деякий базовий досвід її використання, пора дещо заглибитись. Цей описує каскадність та наслідування, всі доступні типи селекторів, одиниці вимірювання, розміри, стилізацію тла та меж і багато іншого.
Його метою є надання набору інструментів для написання грамотного CSS та допомога у розумінні всієї необхідної теорії перед переходом до більш специфічних дисциплін, як-от стилізація тексту та CSS-верстання.
- Стилізація тексту засобами CSS
Після ознайомлення з основами мови CSS, наступною темою є стилізація тексту – одна з найбільш поширених справ, котрі доводиться робити на CSS. Тут ми розглянемо основи стилізації тексту, включно з установленням шрифту, жирності, нахилу, відступу між рядками та між літерами, тіней та інших особливостей тексту. Ми завершуємо модуль оглядом застосування власних шрифтів для вашої сторінки та стилізації списків і посилань.
- CSS-верстання
В цій точці шляху засади CSS уже пройдені, ви вже знаєте, як стилізувати текст, і як стилізувати й маніпулювати блоками, в котрих вміщається контент. Тепер пора поглянути на те, як розташувати ці блоки на сторінці й відносно одне одного. Необхідні умови виконано, можемо заглиблюватись у CSS верстку, поглянути на різні налаштування екранів, сучасні інструменти компонування, як-от flexbox, CSS grid та позиціювання, а також на деякі застарілі техніки, про які вам все ж слід знати.
- Використовуйте CSS для подолання поширених проблем
Цей модуль містить посилання на розділи з поясненнями як користуватися CSS для подолання поширених проблем під час створення вебсторінки.
Довідка
-
CSS довідка: Ця вичерпна довідка для загартованих веброзробників описує кожну властивість і кожну концепцію CSS.
-
Ключові концепції CSS:
- Синтаксис та форми мови
- Специфічність, наслідування, and каскадність
- Одиниці вимірювання і значення CSS та функціональні нотації
- Блокова модель та перекриття зовнішніх відступів
- Місткий блок
- Контексти нагромадження та блокового форматування
- Початкові, обчислені, використані та дійсні значення
- Скорочені властивості CSS
- Flex-верстання у CSS
- Grid-верстання у CSS
- Селектори CSS
- Медіазапити
- Анімація
Книга рецептів
Книга рецептів CSS прагне зібрати докупи рецепти загальноприйнятих шаблонів компонування та іншого, що може знадобитись під час розробки ваших вебсайтів. Окрім надання коду, котрий можна використовувати як стартову точку власних проєктів, ці рецепти показують різні способи застосування специфікацій компонування, і рішень, котрі можуть бути прийняті розробником.
Інструменти CSS-розробки
- Для перевірки валідності CSS можна застосовувати Службу перевірки CSS від W3C. Це незамінний інструмент зневадження.
- Інструменти розробника Firefox (англ.) дають змогу переглядати CSS сторінки на льоту за допомогою Інспектора (англ.) та Редактора стилів (англ.).
- Розширення веброзробника для Firefox дає змогу відстежувати та редагувати CSS відображених вебсайтів на льоту.
Метаінформація про вади
- Firefox: Вада Firefox 1323667