Вступ до CSS
В уроках вивчених раніше (за HTML) ми з Вами створили простий сайт, присвячений автомобілям. При завданні елементів оформлення веб-сторінок (текст, шрифт, рамка сайту і т.д.) кожному з елементів ми з Вами прописували в коді свої теги, які наказують браузеру, як він (браузер) відображатиме цю сторінку на екрані монітора. Цей навчальний сайт містив лише 6 сторінок. А тепер уявіть, що на Вашому сайті сторінок 50 або більше і ось Вам, наприклад, знадобилося змінити колір шрифту або рамку навколо сайту….. Тобто. необхідно відкрити всі 50 файлів (або більше) і прописати для кожного абзацу інший колір шрифту, це ж скільки роботи необхідно зробити, причому роботи дуже безглуздою і рутинною.
Однак існує технологія, що дозволяє керувати оформленням дизайну одночасно на всіх сторінках сайту одночасно зміною всього декількох рядків коду. Ця технологія дозволяє відокремити дизайн сайту від його змісту. Це так звані каскадні таблиці стилів CSS.
CSS Cascading Style Sheets (Таблиці каскадних стилів) – це набір правил оформлення та форматування, який можна застосовувати до різних елементів сторінки. У стандартному HTML для присвоєння якомусь елементу певних властивостей (таких, як колір, розмір, положення на сторінці тощо) доводиться щоразу описувати ці властивості. Застосовуючи CSS, Ви можете один раз описати властивості елементів та визначити цей опис як стиль, а надалі просто вказувати, що елемент, який ви хочете оформити відповідним чином, має прийняти властивості стилю, описаного вами.
Ви можете зберегти опис стилю як у тексті веб-сторінки, так і в окремому файлі – це дозволить використовувати опис стилю на будь-якій кількості Web-сторінок. У цих уроках Мибудемо з Вами говорити про написання стильових правил в окремому файлі.
Щоб прив'язати цей файл стилів до конкретного html документа, в цьому документі між тегами прописується такий код:
HTML-документів, до яких прив'язується дана таблиця стилів, може бути безліч. У місцях html-сторінки, де ми хочемо застосувати цей стиль, просто ставляться спеціальні мітки при написанні коду. Якщо таблиця стилів лежить у будь-якій папці, необхідно замість "style.css" прописати повний шлях до цього файлу як ми робили для вказівки шляху до графічних файлів. Але давайте поки не ускладнюватимемо, нехай наш файл style.css лежить у кореневій папці сайту.
Тепер Ви розумієте, щоб змінити будь-який елемент оформлення на всіх сторінках сайту, достатньо змінити код оформлення даного елемента лише у таблиці стилів.
Отже, приступимо до оформлення дизайну нашого тестового сайту за допомогою CSS каскадних таблиць стилів.