CSS (англ. Cascading Style Sheets, укр. Каскадні таблиці стилів) використовується для стилізації та оформлення веб-сторінок - наприклад, для зміни шрифту, кольору, розміру та інтервалу вашого контенту, розділення його на кілька стовпців або додавання анімації та інших декоративних функцій. Цей модуль допомагає вам розпочати шлях до майстерності CSS з основами його роботи, включаючи селектори та властивості, написання правил CSS, застосування CSS до HTML, визначення довжини, кольору та інших одиниць у CSS, каскади та успадкування, і налагодження CSS.

Передумови

Перш ніж почати цей модуль, ви повинні мати:

  1. Базове знайомство з використання комп'ютерів і пасивне використання інтернету (тобто, просто споживання контенту переглядаючи його).
  2. Базове робоче середовище, встановлене, як зазначено у розділі Встановлення необхідних програм, та розуміння того, як створювати файли та керувати ними, як детально описано у розділі Робота с файлами.
  3. Базове знайомство з HTML, яке обговорюється в модулі Вступ до HTML.

Примітка: Якщо ви працюєте на комп'ютері / планшеті / іншому пристрої, де немає можливості створювати власні файли, ви можете спробувати (більшість) прикладів коду в програмі онлайн-кодування, таких як JSBin або Thimble.

Посібники

Цей модуль містить наступні статті, які проведуть вас через базову теорію CSS, і нададуть вам широкі можливості для перевірки деяких навичок.

Як CSS працює
У цьому модулі ми починаємо з теоретичного обґрунтування, розглядаючи, що таке CSS, як браузер перетворює HTML у DOM, як CSS застосовується до частин DOM, деякі дуже прості синтаксичні приклади , і який код використовується для того, щоб насправді включити наш CSS в нашу веб-сторінку.
Синтаксис CSS
Далі ми зануримось у синтаксис CSS набагато детальніше, розглядаючи, як властивості (properties) та їх значення (values) формуються в оголошення (declarations), набори оголошень утворюють блоки оголошень (declaration blocks), а блоки оголошень і селектори (selectors) формуються в завершині правила CSS (CSS rules). В завершенні статті розглянемо інші функції синтаксису CSS такі як коментарі та пробіли.
Селектори
Селектори згадуються в попередній статті, але в цьому посібнику ми переходимо до більшості деталей, показуючи, які типи селекторів доступні і як вони працюють.
Значення та одиниці вімиру CSS
Існує багато типів значень властивостей CSS, від числових значень кольорів до функцій, які виконують певну дію (наприклад, вбудовування фонового зображення або обертання елемента). Деякі з них покладаються на конкретні одиниці для визначення точних значень, які вони представляють. - Ви бажаєте, щоб ваш блок становив 30 пікселів або 30 сантиметрів? У цьому посібнику ми розглянемо більш поширені значення, такі як довжина, колір і прості функції, а також вивчимо менш поширені одиниці, наприклад, градуси, і навіть безрозмірні числові одиниці.
Каскади та успадкування
CSS має дві різні, але пов'язані системи для вирішення ситуацій, в яких виникають конфлікти селектора (різні селектори вибирають однакові елементи; який переможе і буде застосовано?) та елементи вкладені в інші елементи (деякі застовані до "батьківських" елементів частини стилю успадковуються "дитячими" елементами, деякі - ні.) Ця стаття охоплює обидві системи досить детально, щоб бути корисною, але не переважною.
Блочна модель
Блочна модель CSS є основою компонування в інтернеті - кожен елемент представлений у вигляді прямокутного блоку, у якого є вміст, внутрішній відступ, межа і зовнішній відступ розташовані навколо один одного, подібно шарам цибулі. Оскільки браузер переглядає макет веб-сторінки, він визначає, які стилі застосовуються до вмісту кожного блоку, наскільки великі шари навколо цієї "цибулі", і як блоки росташовані по відношенню один до одного. Перш ніж зрозуміти, як створити макети CSS, потрібно зрозуміти модель блоку..
Налагодження CSS
У кінцевій статті цього модуля ми розглянемо основи налагодження CSS, включаючи вивчення CSS, застосованого до сторінки, та інші інструменти, які допоможуть знайти помилки у вашому коді CSS.

Оцінка знань

Наступне оцінювання перевірить ваше розуміння основ CSS, викладених у наведених вище посібниках.

Розуміння основ CSS
Це оцінювання перевірить ваше розуміння вищевказаних посібників за допомогою деяких ретельно підготовлених вправ.

Дивіться також

Проміжна веб-грамотність 1: Вступ до CSS
Чудовий фундаментальний курс Mozilla, який досліджує і перевіряє багато навичок, про які говорили в модулі Введення в CSS. Дізнайтеся про стилізацію елементів HTML на веб-сторінці, селекторах CSS, атрибутах і значеннях.

Мітки документа й учасники

Зробили внесок у цю сторінку: ArtemLashmanov
Востаннє оновлена: ArtemLashmanov,