Навіщо потрібні каскадні таблиці стилів CSS?
В даний час створення web-сторінок немислимо без використання каскадних таблиць стилів CSS (Cascading Style Sheets). Реалізація CSS застосовується у всіх сучасних браузерах (Microsoft Internet Explorer, Opera, Mozilla Firefox) і інструментальних засобів розробки web-сторінок, таких як Macromedia Dreamweaver, Microsoft FrontPage. Воістину поява CSS вчинила цілу революцію у всесвітній павутині, взявши на себе логічне уявлення і форматування сторінок. Ось чому каскадні ьабліци стилів придбали величезну популярність серед дизайнерів і розробників.
Причиною появи і поширення CSS послужив той фактор, що мова HTML замислювався як структурний мову розмітки і спочатку не відповідав за зовнішнє уявлення елементів сторінки. Поступово з розвитком мережі Інтернет, виникненням безлічі сайтів росла потреба в нових HTML-тегах, які стали відповідати за зовнішнє уявлення web-сторінок.
Якщо поглянути на код HTML сторінки, яка б не використовувала CSS, можна виявити, що обсяг розмітки займає іноді більшу частину коду, ніж самі матеріали сайту.
Наприклад, погляньте на цей код, який може повторюватися в багатьох частинах сайту:
Про сайт
Контакти
завантажити
Чи не простіше поставити через CSS-стиль подібних елементів, і застосовувати його у відповідних HTML-тегах. Створимо таблицю стилів, для цього наберемо наступний код і збережемо його в файл style1.css в кореневій папці сайту.
razdel font-family: Times New Roman;
font-size: 11;
font-color: "# 009999";
>
В HTML залишиться прописати лише наступне.
У розділі HEAD прописуємо:
У тілі сторінки прописуємо:
Про сайт
Контакти
завантажити
Чи не використовуючи в повній мірі каскадні таблиці стилів, у сайту виникає кілька проблем:
1) Зайвий обсяг коду HTML значно збільшує розмір web-сторінки, а отже і її завантаження.
2) Відсутність структурірованнной розмітки ускладнює індексування пошуковими машинами вмісту web-сторінок.
3) В даний час сучасні браузери краще розуміють CSS, ніж теги зовнішнього подання HTML. Якщо у вас скачуть рядки, не ставить за висота або ширина рядка таблиці, задайте її через CSS і в 50% випадків це допоможе!
4) Управління зовнішнім поданням сторінки тільки за допомогою HTML погіршує обслуговування сайту, внесення змін в код сторінок. Досить, подивитися на наведений вище приклад. Ми просто ізменіняем один стиль, тоді зміниться уявлення всіх трьох елементів, ніж вносити зміни в кожен елемент. А якщо подібних елементів буде, як часто буває близько 50-ти, тоді без CSS просто не обійтися.
Крім вирішення даних проблем, використовуючи каскадні таблиці стилів, ми отримуємо ще додаткові важливі переваги.
1) Великий вибір стилів
В даний час CSS забезпечують набагато більші можливості по зовнішньому поданням документів, ніж HTML. Ми може задавати різні рамки, відступи, розбивки, задавати колір тексту, фону елементів.
3) Можливість застосування стилів до багатьох сторінок.
Щоб застосувати одну таблицю стилів до потрібних сторінок вашого сайту, досить зберегти таблицю стилів в окремому файлі, а сторінках сайту в розділі head зробити посилання на цей окремий файл.
4) Каскадування.
CSS надає можливість вирішення конфліктів правил, званих каскадування.
Припустимо ми створили окремим файлом каскадну таблицю стилів для всіх сторінок сайту. Однак згодом захотіли, щоб деякі сторінки сайту все-таки мали певні спеціальні правила, що застосовуються до цих сторінок. Для цього ми створюємо додаткову таблицю, імпортовані в ці сторінки. В результаті каскадирования ми переобумовленої основні правила на спеціальні для потрібних нам сторінок.