НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ

CSS Підручник

CSS СТАРТ CSS Інтро CSS Синтаксис CSS Селектори CSS Як підключити CSS Коментарі CSS Кольори CSS Фони CSS Межі CSS Поля CSS Внутрішній відступ CSS Висота/Ширина CSS Блочна модель CSS Контур CSS Текст CSS Шрифти CSS Іконки CSS Посилання CSS Списки CSS Таблиці CSS Display CSS Max-Width CSS Position CSS Z-index CSS Overflow CSS Float CSS Inline-Block CSS Вирівнювання CSS Комбінатори CSS Псевдо-класи CSS Псевдо-елементи CSS Непрозорість CSS Панель навігації CSS Випадаючі списки CSS Галерея зображень CSS Спрайти зображень CSS Селектори атрибутів CSS Форми CSS Лічильники CSS Макет веб-сайту CSS Одиниці CSS Специфічності CSS !important CSS Математичні функції

CSS Розширений

CSS Закруглені кути CSS Межі зображень CSS Фони CSS Кольори CSS Кольори. Ключові слова CSS Градієнти CSS Тіні CSS Ефекти тексту CSS Веб-шрифти CSS 2D Трансформації CSS 3D Трансформації CSS Переходи CSS Анімації CSS Підказки CSS Стилі зображень CSS Image Reflection CSS Підгонка об'єкту CSS object-position CSS Masking CSS Кнопки CSS Нумерація сторінок CSS Кілька стовпців CSS Користувальницький інтерфейс CSS Змінні CSS Розміри блоків CSS Медіа-запити CSS Приклади медіа-запитів CSS Flexbox

CSS Адаптивний

RWD Інтро RWD Область перегляду RWD Вигляд сітки RWD Медіа-запити RWD Зображення RWD Відео RWD Фреймворки RWD Шаблони

CSS Grid (Сітка)

Grid Інтро Grid Контейнер Grid Елементи

CSS SASS

Підручник

CSS Приклади

CSS Шаблони CSS Приклади CSS Сніпети CSS Вікторина CSS Вправи CSS Сертифікат

CSS Довідники

CSS Довідник CSS Селектори CSS Функції CSS Довідник аудіо CSS Безпечні веб-шрифти CSS Анімація CSS Одиниці CSS PX-EM Конвертер CSS Кольори CSS Значення кольору CSS Значення за замовчуванням CSS Підтримка браузерами

CSS3. Уроки W3Schools для початківців українською мовою

En Es De

CSS Підручник


Що таке CSS?

CSS (англ. Cascading Style Sheets, рус. Каскадні таблиці стилів) — спеціальна мова, яка використовується для опису зовнішнього вигляду сторінок, написаних мовами розмітки даних.

Найбільш часто CSS використовують для візуальної презентації сторінок, написаних на HTML та XHTML, але формат CSS може застосовуватись і до інших видів XML-документів.

Специфікації CSS були створені і розвиваються Консорціумом Всесвітньої павутини - W3C.

CSS має різні рівні та профілі. Наступний рівень CSS створюється на основі попередніх, додаючи нову функціональність або розширюючи функції, що вже існують. Рівні позначаються як CSS1, CSS2 та CSS3. Профілі - сукупність правил CSS одного або більше рівнів, створені для окремих типів пристроїв або інтерфейсів. Наприклад, існують профілі CSS для принтерів, мобільних пристроїв тощо.

CSS (каскадна або блокова верстка) прийшла на заміну табличній верстці вебсторінок. Головна перевага блокової верстки - розділення змісту сторінки (даних) та її візуальної презентації (оформлення).

Станом на 2023-й рік актуальною версією є специфікація CSS3. Специфікація CSS4 розробляється ще з 2011 року. Модулі CSS4 побудовані на основі CSS3 і доповнюють їх новими властивостями та значеннями. Всі вони існують поки що як чернетки (working draft) і на цей час офіційно не затверджені.

Інформація взята з Вікіпедії




CSS

CSS - це мова, яка описує стиль HTML документа.

CSS описує, як повинні відображатися HTML елементи.

Цей підручник навчить вас писати CSS від базового рівня до розширеного.

Почати вивчати CSS негайно ❯

Приклади в кожному розділі

Цей підручник CSS містить сотні прикладів CSS.

За допомогою онлайн-редактора від W3Schools ви можете редагувати CSS, клікнувши на кнопку "Спробуйте самі", і відразу переглянути результат.

CSS Приклад

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
Спробуйте самі »

Клацніть на кнопку "Спробуйте самі" щоб побачити, як вона працює.


CSS Приклади

Навчайтеся більш ніж на 300 прикладах! З онлайн-редактором від W3Schools ви можете редагувати CSS і натискати кнопку, щоб переглянути результат.

Перейти до CSS прикладів!


CSS Шаблони

Ми створили деякі адаптивні шаблони W3.CSS для використання.

Ви можете змніювати, зберігати, обмінюватись та використовувати їх в будь-яких своїх проєктах.

Вільні для використання CSS шаблони!


CSS Вправи та вікторини

Перевірте свої CSS знання та навички на W3Schools!

Почати CSS Вправи!

Почати CSS Вікторину!


CSS Довідники

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


Пройдіть CSS Іспит - Отримайте свій Диплом!

Онлайн W3Schools Сертифікація

Онлайн Сертифікація W3Schools

Ідеальне рішення для професіоналів, яким необхідно збалансувати роботу, сім’ю та кар’єру.

Більше 25 000 сертифікатів уже видано!

Отримайте Ваш Сертифікат! »


Що таке CSS? Для чого воно треба?

CSS (Cascading Style Sheets) — це мова опису стилів, яка відіграє важливу роль у створенні красивих та зручних за дизайном вебсайтів.

Чому вивчення CSS є ключовим для успішного веброзробника?

  • Зовнішній Вигляд: HTML визначає текстовий контент, а CSS — його візуальну структуру, розташування та естетику. Без CSS веб-сайти були б менш привабливими та важкодоступними для користувачів. Знання CSS дозволяє нам створювати гарний дизайн, змінювати кольори, шрифти, розташування елементів та багато іншого.
  • Швидкість Завантаження: CSS допомагає зменшити обсяг коду, що покращує швидкість завантаження сторінок. За допомогою одного правила CSS можна застосовувати стилі до всіх входжень певного тегу в HTML документі.
  • Користувацький Досвід: Добре оформлені кнопки, логічно розташований текст та зручний дизайн роблять веб-сайт більш зрозумілим для користувачів. CSS допомагає покращити їхні враження від відвідування сайту.
  • Ефективний Розвиток: З CSS можна застосовувати стилі до кількох сторінок одним рядком коду. Наприклад, якщо у вас є сторінки, які мають однаковий формат, ви можете використовувати один файл CSS для всіх таких сторінок. За потреби дизайн таких сторінок можна легко змінювати, змінюючи лише зміст CSS-файлу.