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

Це дозволяє нам додавати ефекти або анімації на веб-сайт. Ми використовуємо CSS показувати анімації люблю кнопки, ефекти, завантажувачі або блешні , а також анімовані фони .

Без використання CSS , веб-сайт не виглядатиме привабливим. Є 3 види CSS які нижче:

• Вбудований CSS
• Внутрішній/вбудований CSS
• Зовнішній CSS

1. Внутрішній CSS

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

Ми можемо використовувати внутрішній CSS, виконавши такі дії:

1. Спочатку відкрийте HTML сторінку та знайдіть

2. Вставте наступний код після

3. Додайте правил CSS у новому рядку.

приклад:

 body { background-color: black; } h1 { color: white; padding: 50px; } 

4. Закрийте тег style.

Після додавання внутрішнього CSS повний файл HTML виглядає так:

 body { background-color: black; } h1 { color: red; padding: 50px; } <h2>CSS types</h2> <p>Cascading Style sheet types: inline, external and internal</p> 

Ми також можемо використовувати селектори (клас та ID) у таблиці стилів.

приклад:

 .class { property1 : value1; property2 : value2; property3 : value3; } #id { property1 : value1; property2 : value2; property3 : value3; } 

Плюси внутрішнього CSS

Внутрішній CSSнеможливо завантажити кілька файлів, коли ми додаємо код до сторінки HTML.

Мінуси внутрішнього CSS:

• Додавання коду в HTML документ зменшить розмір сторінки і час завантаження веб-сторінки.

2. Зовнішній CSS

У зовнішньому CSS ми пов’язуємо веб-сторінки із зовнішнім .css файл. Він створений текстовий редактор . CSS є більш ефективним методом оформлення веб-сайту. Редагуючи .css файл, ми можемо змінити весь сайт одночасно.

Щоб використовувати зовнішній CSS, виконайте наведені нижче дії.

1. Створіть новий .css файл с текстовий редактор , і додати Каскадна таблиця стилів теж правила.

Наприклад:

 .xleftcol { float: right; width: 35%; background:#608800; } .xmiddlecol { float: right; width: 35%; background:#eff3df; } 

2. Додати посилання на зовнішню .css файл відразу після тег у розділ аркуш HTML :

Плюси зовнішнього CSS:

• Наші файли мають чіткішу структуру та менший розмір.
• Ми використовуємо те саме .css файл для кількох веб-сторінок у зовнішньому CSS.

Мінуси зовнішнього CSS:

• Сторінки не можуть бути доставлені належним чином до завантаження зовнішнього CSS.
• У зовнішньому CSS завантаження багатьох файлів CSS може збільшити час завантаження веб-сайту.

3. Вбудований CSS

Вбудований CSS використовується для стилізації конкретного HTML елемент. Додати a стиль атрибут для кожного тегу HTML без використання селекторів. Керування веб-сайтом може бути складним, якщо ми використовуємо лише вбудований CSS . Однак Inline CSS у HTML корисний у деяких ситуаціях. Ми не маємо доступу до файли CSS або застосувати стилі до елемента.

У наступному прикладі ми використали вбудований CSS

бінарний пошук