Уроки web-майстерності

ІТ-інфраструктура для вашого підприємства

Сьогодні ми познайомимося з базовими поняттями і деякими прикладами практичного використання CSS (стильових таблиць). Розглянемо основні прийоми, необхідні початківцю веб-майстру. Вивчити за один урок всі можливості, які надають стильові таблиці, і всі пов'язані з ними проблеми не представляється доцільним та й не є завданням даного уроку. Посилання на ті ресурси в Інтернеті, де наведені специфікації стильових таблиць і пояснені всі їх властивості з конкретними прикладами використання, ви знайдете в урізанні «Корисні посилання» в кінці статті.

Що таке стильові таблиці і навіщо вони потрібні?

Отже, стиль - це правило, яке визначає зовнішній вигляд того чи іншого елемента в документі.

Переваги стильових таблиць:

  1. Таблиці стилів дозволяють відокремити логічну структуру сторінок від візуального представлення (оформлення). Адже мова HTML спочатку був розроблений для розмітки структури документа.
  2. Створена таблиця стилів може застосовуватися до всіх сторінок сайту, завдяки чому дотримується єдність його оформлення.
  3. Якщо сайт оформлений за допомогою єдиної стильової таблиці, то в разі внесення змін до оформлення тегів в одному місці (в стильової таблиці) ці зміни вступлять в силу на всіх сторінках сайту. Чи не доведеться відкривати і редагувати всі сторінки, де зустрічаються ці теги. Тим самим CSS дозволяють гнучко управляти зовнішнім поданням сторінок на екрані.
  4. Таблиці стилів надають веб-майстрам широкі можливості при оформленні сторінок. Як відомо, кошти мови 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):

  1. Підключення зовнішньої стильової таблиці (
поміщається в заголовну частину HTML-документа)
  • Використання внутрішньої стильової таблиці, що діє тільки в даному документі (
  • Вказівка ​​стилю безпосередньо всередині тега

    Цілком очевидно, що використання зовнішньої стильової таблиці - найкращий варіант. Адже ви можете підключити цю таблицю до всіх документів сайту і таким чином отримаєте досить гнучкий механізм управління його зовнішнім виглядом. При внесенні змін або доповнень в один файл (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-сторінці (в лівій частині вибираєте стиль, в правій відображається сторінка, до якої він застосовується). Крім того, можна подивитися вміст кожної з стильових таблиць

    Схожі статті