Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Вивчайте Вступ до CSS для Стилізації Веб-Сторінок | Анатомія Вебсайту
Learn
Курси
Learning Tracks
Popular Topics
Practice
Projects
Quizzes & Challenges
Quizzes
Challenges
/
Веб-розробка з ChatGPT

bookВступ до CSS для Стилізації Веб-Сторінок

CSS (каскадні таблиці стилів) визначає зовнішній вигляд ваших веб-сторінок. У той час як HTML забезпечує структуру, CSS керує кольорами, шрифтами, відступами та макетом — подібно до того, як декор і дизайн інтер'єру визначають вигляд будинку.

Додавання CSS для стилізації HTML

CSS можна застосовувати трьома основними способами.

Вбудовані стилі

Використання атрибута style для швидкого оформлення окремого елемента.

index.html

index.html

copy

Внутрішні стилі

Додавання блоку <style> у межах <head> для оформлення елементів на цій самій сторінці.

index.html

index.html

copy

Зовнішні таблиці стилів

Для більших проєктів зберігайте CSS у окремому файлі та підключайте його до HTML.

Будь ласка, перегляньте файли index.html та index.css у прикладі.

index.html

index.html

index.css

index.css

copy

CSS-селектори

Селектори визначають, до яких елементів застосовуються певні стилі.

Селектор елемента

Застосовується до всіх елементів певного типу.

p {
  /* styles */
}

Селектор класу

Застосовується до елементів із певним атрибутом класу.

.highlight {
  /* styles */
}

Селектор ID

Вибирає конкретний елемент із унікальним атрибутом ID.

#header {
  /* styles */
}

Властивості CSS

Властивості CSS визначають, як мають бути стилізовані вибрані елементи. Ось деякі поширені властивості CSS:

  • color встановлює колір тексту;
  • background-color встановлює колір фону елемента;
  • font-size встановлює розмір тексту;
  • margin додає відступи навколо елемента.

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

Приклад:

index.html

index.html

index.css

index.css

copy

Відео-урок

question mark

Які з наведених способів є коректними для застосування CSS-стилів до HTML-сторінки?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 2. Розділ 3

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

Can you explain the difference between class and ID selectors in CSS?

How do I link an external CSS file to my HTML?

Can you give more examples of common CSS properties?

bookВступ до CSS для Стилізації Веб-Сторінок

Свайпніть щоб показати меню

CSS (каскадні таблиці стилів) визначає зовнішній вигляд ваших веб-сторінок. У той час як HTML забезпечує структуру, CSS керує кольорами, шрифтами, відступами та макетом — подібно до того, як декор і дизайн інтер'єру визначають вигляд будинку.

Додавання CSS для стилізації HTML

CSS можна застосовувати трьома основними способами.

Вбудовані стилі

Використання атрибута style для швидкого оформлення окремого елемента.

index.html

index.html

copy

Внутрішні стилі

Додавання блоку <style> у межах <head> для оформлення елементів на цій самій сторінці.

index.html

index.html

copy

Зовнішні таблиці стилів

Для більших проєктів зберігайте CSS у окремому файлі та підключайте його до HTML.

Будь ласка, перегляньте файли index.html та index.css у прикладі.

index.html

index.html

index.css

index.css

copy

CSS-селектори

Селектори визначають, до яких елементів застосовуються певні стилі.

Селектор елемента

Застосовується до всіх елементів певного типу.

p {
  /* styles */
}

Селектор класу

Застосовується до елементів із певним атрибутом класу.

.highlight {
  /* styles */
}

Селектор ID

Вибирає конкретний елемент із унікальним атрибутом ID.

#header {
  /* styles */
}

Властивості CSS

Властивості CSS визначають, як мають бути стилізовані вибрані елементи. Ось деякі поширені властивості CSS:

  • color встановлює колір тексту;
  • background-color встановлює колір фону елемента;
  • font-size встановлює розмір тексту;
  • margin додає відступи навколо елемента.

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

Приклад:

index.html

index.html

index.css

index.css

copy

Відео-урок

question mark

Які з наведених способів є коректними для застосування CSS-стилів до HTML-сторінки?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 2. Розділ 3
some-alt