Як прив’язати css стилі до html коду інтернет сторінки, free-site-master

Всім доброго часу доби.

Але ми не розглянули одне дуже важливе питання. А саме - як прив'язати CSS стилі до HTML коду сторінок нашого сайту.

Це питання насправді дуже важливий. Адже якщо ми неправильно прив'яжемо css стилі до сторінок нашого сайту, то ми не зможемо цими стилями користуватися. Браузер буде просто їх ігнорувати і ми не побачимо результату, який дає використання тих чи інших стилів.

Прив'язати CSS стилі до коду сторінки можна різними способами і сьогодні ми постараємося розглянути їх усі.

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

1. Внутрішні таблиці стилів CSS.

Внутрішні таблиці стилів знаходяться прямо всередині нашої інтернет сторінки. Так Так. Прямо всередині HTML-коду кожної окремо взятої сторінки.

Це звичайно трохи незручно, але все ж така можливість існує і я не можу про це не сказати.

Отже, перший спосіб прив'язки CSS стилів до коду сторінки - використання тега , застосовуються до всього вмісту HTML-документа. Їх може бути скільки завгодно, хоч всі стилі для всього сайту. Але це трохи неправильно. Про це розповім трохи нижче, коли буду розглядати зовнішні таблиці стилів.

Іноді Вам доведеться самим прописувати css-стилі всередині HTML коду.

Щоб цей банер коректно відображався (не вилазив за відведені йому кордону, можливо йому потрібна рамка і т.д.), іноді потрібно прив'язати до нього кілька css-інструкцій.

Але вносити при цьому зміни в загальну таблицю стилів немає сенсу. Банер - явище тимчасове. Сьогодні один, завтра інший. Тому простіше прописати стилі для нього прямо всередині коду цього банера.

Тобто нам потрібно підключити CSS стилі лише до певного елементу сторінки. Це робиться дуже просто - за допомогою атрибута style.

Стилі, прописані таким чином діють тільки на той елемент, в тезі якого вони розміщені. В даному випадку, тільки на цей абзац (тег

). І ні на який інший!

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

Під назвою зовнішні таблиці CSS стилів мається на увазі, що вони прописані не в тілі HTML документа, а в окремому спеціальному файлі. Ці файли мають розширення .css

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

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

Чому це відбувається.

Приєднати файли CSS стилів до веб-сторінці можна двома способами.

Перший спосіб є найпоширенішим - це використовувати тег з атрибутами: rel = "stylesheet" type = "text / css" href = "файл стілей.css" всередині коду заголовка сторінки (тег ).

Дані приклад приєднує до сторінці CSS стилі, прописані у файлі style.css. Вони діють на протязі всього документа.

Є ще один спосіб приєднати зовнішні таблиці стилів до HTML документу. Це використання директиви @import. Вона дозволяє імпортувати вміст CSS-файлу в поточну стильову таблицю.

Можна її використовувати як для додавання одних таблиць стилів до інших, так і для приєднання файлу таблиць стилів до HTML документу. Для цього її потрібно прописати всередині тега