ІТ-інфраструктура для вашого підприємства
Сьогодні ми познайомимося з базовими поняттями і деякими прикладами практичного використання CSS (стильових таблиць). Розглянемо основні прийоми, необхідні початківцю веб-майстру. Вивчити за один урок всі можливості, які надають стильові таблиці, і всі пов'язані з ними проблеми не представляється доцільним та й не є завданням даного уроку. Посилання на ті ресурси в Інтернеті, де наведені специфікації стильових таблиць і пояснені всі їх властивості з конкретними прикладами використання, ви знайдете в урізанні «Корисні посилання» в кінці статті.
Що таке стильові таблиці і навіщо вони потрібні?
Отже, стиль - це правило, яке визначає зовнішній вигляд того чи іншого елемента в документі.
Переваги стильових таблиць:
- Таблиці стилів дозволяють відокремити логічну структуру сторінок від візуального представлення (оформлення). Адже мова HTML спочатку був розроблений для розмітки структури документа.
- Створена таблиця стилів може застосовуватися до всіх сторінок сайту, завдяки чому дотримується єдність його оформлення.
- Якщо сайт оформлений за допомогою єдиної стильової таблиці, то в разі внесення змін до оформлення тегів в одному місці (в стильової таблиці) ці зміни вступлять в силу на всіх сторінках сайту. Чи не доведеться відкривати і редагувати всі сторінки, де зустрічаються ці теги. Тим самим CSS дозволяють гнучко управляти зовнішнім поданням сторінок на екрані.
- Таблиці стилів надають веб-майстрам широкі можливості при оформленні сторінок. Як відомо, кошти мови HTML в цьому плані досить мізерні. Але будьте обережні. Далеко не всі властивості, описувані в специфікації стильових таблиць, коректно підтримуються браузерами. Тому, як і при використанні HTML-тегів, тестируйте їх в різних браузерах.
Розглянемо конкретний приклад.
На рис. 1 представлені:
- HTML-код сторінки aboutcss.HTML;
- таблиця стильового оформлення site.css;
- відображення сторінки в браузері Internet Explorer.
Дизайн даної сторінки досить схематичний:
Зверніть увагу на те, що зліва в стильової таблиці і в HTML-коді відсутні номери рядків. Оскільки листинги досить великі, так зручніше буде звертатися до тієї чи іншої рядку.
Короткий опис малюнка:
Пропоную вам повторити дану сторінку, причому спочатку спробуйте зробити це самостійно, а якщо щось не вийде, подивіться її HTML-код. На наступному, шостому і заключному, уроці ми ще повернемося до цього прикладу.
Синтаксис таблиць стилів
Правило складається з двох частин:
- селектор (H1) визначає тег в HTML-документі (заголовок, параграф і т.д.);
- визначення (color: red) встановлює стиль, який застосовується до даного селектору (тегу).
Визначення, в свою чергу, теж складається з двох частин: властивості (color) і значення (red). Вони записуються в фігурних дужках і відокремлюються один від одного двокрапкою. Властивості і деякі значення визначені в специфікації стильових таблиць. Селектори групуються через кому (,), визначення - через крапку з комою (;).
В даному прикладі задається однакове оформлення для заголовків першого і другого рівня. Вони будуть мати червоний колір і шрифт Arial.
Для чого робити угруповання? Відповідь проста - для зменшення розмірів таблиці.
спадкування
Це можливість одного тега успадковувати властивості іншого.
У попередніх прикладах ми визначили для тега
червоний колір. Припустимо, на вашій веб-сторінці всередині
зустрічається курсивное виділення:
Приклад успадкування властивостей батьківського елемента
Питання: якого кольору буде слово «успадкування»?
Відповідь: червоного (і шрифтом Arial).
Пояснення: так як ми не визначили колір для тега, він успадкує властивість від батьківського тега, в даному випадку - від
Мал. 2. Синтаксис CSS
Ось таке чудове властивість! Завдяки йому ви не повинні визначати стилі для всіх тегів, які використовуєте при створенні HTML-сторінок, - уявляєте, як це було б незручно і довго! Досить визначити стиль за замовчуванням для всього документа. А вже потім у міру необхідності додавати стилі для різних тегів.
Як же визначити цей стиль за замовчуванням? Для якого тега?
- від нього успадковують властивості всі інші теги.
На рис. 3 схематично у вигляді «дерева» зображена HTML-сторінка.
Сторінка являє собою ієрархічну структуру. На самому верхньому рівні знаходиться тег
на наступному -. і т.д.
Важливо пам'ятати, що на практиці спадкування не завжди коректно підтримується браузерами.
Зверніть увагу на рядки 7-10 в лістингу стильової таблиці (рис. 1). Вони дублюють стиль, заданий в
Це зроблено для того, щоб сторінка однаково виглядала в різних браузерах.
контекстні селектори
Це стильове оформлення для селектора (тега), який знаходиться всередині іншого селектора (тега). У прикладі:
Приклад успадкування властивостей батьківського елемента
ви можете визначити стильове оформлення для, коли він знаходиться всередині
Як видно з прикладу, контекстний селектор записується через пробіл.
У цьому прикладі всі теги, укладені між
будуть зеленого кольору.
Можна групувати кілька контекстних селекторів:
Деякі з можливостей таблиць стилів ми вже розглянули. І напевно, ви задалися питанням: а як ці стилі застосувати до HTML-сторінці?
Включення стильових таблиць в HTML-документ
Існує три способи додавання CSS в HTML-документ (рис. 4):
- Підключення зовнішньої стильової таблиці (
- Використання внутрішньої стильової таблиці, що діє тільки в даному документі (
- Вказівка стилю безпосередньо всередині тега
Цілком очевидно, що використання зовнішньої стильової таблиці - найкращий варіант. Адже ви можете підключити цю таблицю до всіх документів сайту і таким чином отримаєте досить гнучкий механізм управління його зовнішнім виглядом. При внесенні змін або доповнень в один файл (site.css, див. Рис. 4) вони вступлять в силу відразу на всіх сторінках.
Стильова таблиця в (другий спосіб) діє тільки всередині одного документа.
Третій спосіб втрачає всі переваги таблиць стилів, так як записується всередині тега і відповідно застосовується тільки до нього. Уявіть собі, що вам треба змінити цей стиль на двох сотнях сторінок.
Чому таблиці каскадні?
Як видно з рис. 4. до документа може бути застосовано відразу кілька стильових таблиць. Що ж станеться, якщо установки стилів перекриють один одного, як в заголовку першого рівня
Якого кольору виявиться напис «Стильові таблиці», коли користувач побачить її в браузері: червоного (
У нашому прикладі на рис. 4 напис «Стильові таблиці» буде синього кольору.
Корисні посилання
- Підтримка браузерами. Тут представлені таблиці підтримки специфікацій CSS1 і CSS2 як старими версіями браузерів, так і новими (IE 4-6, Netscape 4-7, Opera 3.5-7 під управлінням OC Windows і Macintosh). У цих таблицях використовуються такі позначення: Y - yes, так, селектор або властивість підтримується, P - partial, підтримується частково, тобто деякі типи значень можуть не підтримуватися, B - підтримка реалізована з помилками, N - no, що не підтримується
- На цьому ж сайті ви знайдете підручник з CSS (англійською мовою)
- На сайті World Wide Web Concortium ви знайдете:
CSS validator для перевірки створеної вами стильової таблиці в онлайновому режимі (вкажіть URI своєї стильової таблиці, вставте її вміст в поле форми і вкажіть шлях до стильової таблиці на cвоем комп'ютері). Можна завантажити безкоштовно цю програму до себе на комп'ютер
- Сторінка з прикладами застосування різних стильових таблиць до HTML-сторінці (в лівій частині вибираєте стиль, в правій відображається сторінка, до якої він застосовується). Крім того, можна подивитися вміст кожної з стильових таблиць
Схожі статті