Вбудовування css в html документ

CSS - Cascading Style Sheets (каскадні таблиці стилів) - це засіб, що дозволяє задавати різні візуальні властивості HTML-тегами.

CSS складається з правил. Правила являють собою назву і значення. Поділяються вони двокрапкою (назва правила. Значення правила). Ніяких лапок в значеннях правил не ставимо! приклад:

Але як CSS зв'язати з HTML? Як прописувати стилі оформлення документа в html-коді? Для цього є 3 рішення:

• Вкладення (inline).
• Вбудовування (embeding).
• Зв'язування (linking).

Основа документа - html, а до нього вже застосовується css. Саме до документа, сам по собі css нічого не означає.

Метод вкладення (inline) CSS

Використовується атрибут style. Його можна поставити в будь-якому візуально видимій частині елементі. В style записуються правила css (назва правила. Значення правила), кілька правил розділені крапкою з комою (; є закінченням правила в css):

Метод вбудовування (embeding) CSS

Використовується спеціальний елемент «style», всередині якого записуються правила css. Усередині style пишемо тільки мова css. приклад:

У цьому прикладі ми прописали правило для елемента «p» абзац. У 2-му рядку ми прописали селектор (до яких тегам буде застосовуватися правило css). Саме правило записано в фігурних дужках «<>».

Елемент «style» ставлять тільки в елементі «head».

Метод зв'язування (linking) CSS

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

Для цього всі правила css виносимо в окремий текстовий файл. Зазвичай цього файлу дають розширення .css. І тоді відразу видно, що в ньому прописані стильові правила. Ні з чим не переплутаєш.

Як же тоді зв'язати цей окремий css-файл з нашим html-документом? Для цього використовуємо наступний код у розділі head:

Тобто вказуємо файл зі стилями через гіперпосилання на нього. Браузер підвантажує стильовий файл і застосовує правила з нього до всього документа. По суті це працює так само, як і елемент «style», але тільки знаходиться в окремому файлі. І ми можемо в будь-якому документі поставити посилання на css-файл. Це дуже зручно, тому що я правлю стилі в одному єдиному файлі; один раз завантаживши таблицю стилів, при переході на наступні сторінки браузер більше за цим файлом css не полізе, він дістане його з кешу (типу тимчасового сховища завантажених файлів). Тим самим я економлю трафік і прискорюю відображення сторінки.