Html - урок 3 як підключити css стилі оформлення в шаблоні

Html - урок 3 як підключити css стилі оформлення в шаблоні
Як підключити CSS стилі оформлення в шаблоні

Отже, ми продовжуємо уроки html для початківців. У минулому уроці я розповів про те, що таке DOCTYPE. тег HEAD і про те, як встановити кодування HTML сторінки, а також вказати ключові слова і опис до неї. Що ж ми дізнаємося сьогодні? У цьому уроці ми дізнаємося про те, як підключити стилі в шаблоні. Детальніше далі.

Як підключити стилі оформлення в шаблоні? Для початку дізнаємося про те, що таке CSS стилі. Стилі оформлення CSS - це засіб оформлення WEB - сторінок, написаних за допомогою мов розмітки HTML, XHTML і XML. Їх можна вказати, як і в самому документі HTML. так і підключити ззовні, тобто описати в окремому файлі. Я пропоную розглянути, як перший, так і другий способи. Практично всі web сторінки та web сайти використовують CSS стилі оформлення.

1. Спосіб підключення стилів оформлення CSS - всередині HTML - документа або підключення внутрішніх стилів.
Якщо стилі не вказані в окремому файлі, то вказувати їх потрібно в самому документі всередині тега. Приклад підключення css-стилів всередині документа:

Підключення таким способом стилі діють по всьому документу. але що робити, якщо потрібно вказати їх тільки для одного блоку? Описати стилі всередині певного блоку (тега) можна за допомогою атрибута даного тега - style. Приклад підключення стилів для одного тега:

Стилі, описані в такий спосіб, не впливають на інші теги документа.

2. Спосіб, який дозволяє підключити стилі з іншого файлу або підключення зовнішніх стилів оформлення.

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

Шлях до файлу, який містить стилі, вказується в цій частині тега: href = "style.css" в лапках. У прикладі підключений файл стилів, який ежит в одній папці з HTML документом.

Також можна підключити зовнішні стилі і іншим способом - спеціальною директивою @import, яка міститься всередині тега. Приклад підключення за допомогою директиви @import:

Файл стилів css. а точніше шлях до нього, в даному способі вказується в дужках.

Підключення стилів, які були описані в другому способі, повинні бути обов'язково розташовані між тегами.

Якщо CSS стилі потрібно підключити для XML-документа, то потрібно скористатися наступним рядком:

В даному способі підключення шлях до файлу зі стилями вказано в лапках.

На сьогодні урок закінчено! Вдалою верстки і нових знань!

Хочете поїхати в Європу? Вам потрібен закордонний паспорт.