»ASP для новачків
" Головна сторінка
»ASP для новачків
Стильове оформлення Web-сторінок
Одним з важливих умов створення дійсно гарного сайту є оформлення всіх Web-сторінок, що входять до його складу, в єдиному стилі. На перший погляд, подібне завдання є тривіальною. Дійсно, що може бути простіше - встановити однакові значення для всіх візуальних властивостей об'єктів. Однак при великому обсязі Web-сторінок, що входять в проект, установка всіх значень може зайняти досить великий час. Хотілося б автоматизувати подібну діяльність. І тут на допомогу приходить технологія каскадних таблиць стилів - CSS (Cascading Style Sheets).
В рамках цієї технології створюється окремий зовнішній файл, в якому зібрані правила відображення того чи іншого тега в браузері. Потім CSS-файл підключався до кожної Web-сторінці. Таким чином, ми можемо легко досягти однакового стильового оформлення кожної Web-сторінки, що входить до складу сайту.
Перша версія стандарту CSS містила правила відображення тексту Web-сторінок, розміщення текстового вмісту на сторінці і деякі деталі відображення сторінок і комірок таблиць. Друга версія додала кілька нових можливостей, таких як візуальні ефекти або автоматична нумерація елементів.
Стильова таблиця являє собою звичайний текстовий файл спеціалізованого формату. У специфікаціях даний формат має позначення text / ess. В CSS-файлі записуються правила відображення для деяких тегів. Приклад запису одного такого правила може виглядати приблизно так: a
Це правило вказує на те, що текстове вміст всіх тегів <а>, яким в HTML позначаються гіперпосилання, буде відображатися за допомогою будь-якого доступного шрифту з сімейства Arial, темно-синього кольору (navy).
Після найменування тега в фігурних дужках записується правило оформлення текстового вмісту. Подивимося ще раз на наш приклад.
a (color. navy; font-family. Arial>
Як видно, в фігурних дужках може записуватися відразу кілька правил, розділених символом крапки з комою. Саме правило складається з двох частин. Спочатку записується найменування параметра відображення, наприклад, вид застосовуваного шрифту, а потім, після двокрапки, ми пишемо значення цього параметра. У прикладі все це досить добре видно.
Отже, як ми бачили, в фігурних дужках ми можемо записати відразу кілька правил відображення вмісту. Але іноді трапляється і так, що відразу для декількох тегів задаються однакові правила відображення. Ми можемо не вказувати однакові правила для кожного тега окремо, а об'єднати теги в одну групу і задати правила відображення для всіх тегів відразу. При цьому об'єднуються найменування тегів розділяються комою. Це можна побачити на прикладі наступної конструкції:
Дане правило вказує, що текстове вміст гіперпосилань і заголовків першого рівня буде відображатися темно-синім кольором.
Ми знаємо, що повне найменування CSS - каскадні таблиці стилів. Чому вони називаються таблицями стилів, ми вже зрозуміли. Виникає цілком слушне запитання, до чого тут каскадність, і що це взагалі означає?
У комп'ютерній індустрії дуже великий темп розвитку. Наслідком цього є безліч найрізноманітніших тенденцій і течій. Частина з них незабаром відмирає, а частина переходить з розряду тенденцій в ранг ідеології. Однією з таких тенденцій є повторне використання коду і спадкування раніше створених рішень. До CSS це має саме пряме відношення.
Ми не зобов'язані для кожного документа використовувати тільки одну стильову таблицю. Ми можемо підключати їх відразу декілька. Наприклад, при додаванні нових документів до сайту доведеться додавати нові правила відображення, створювати нові стилі. Іноді це робиться корекцією вже існуючої стильової таблиці, але ніхто не забороняє нам створити додатковий файл і підключити його до документа. Як ми тільки що говорили, ми можемо підключати відразу кілька таблиць.
А в додатковому файлі style2.css ми оголошуємо правила відображення для елементів item і part наступним чином:
Тепер, якщо ми підключимо до HTML-документу ці два стильових файлу, виявиться, що для елемента item задано два різних правила відображення. У першому файлі style Less зазначено, що текст елемента item буде відображатися синім кольором, а в другому файлі правило вказує, що застосовуватися для відображення вмісту цього ж елемента буде вже зелений колір. Те, який колір буде використовуватися насправді, залежить від того, в якому порядку до XML-документу будуть підключатися файли стильових таблиць.
Використовується завжди останнє правило. А саме, якщо спочатку ми підключимо файл style Less, а потім файл style2.css, то текстовий вміст елемента item буде відображатися зеленим кольором.
Але ми можемо встановлювати спеціальний модифікатор для правил відображення, який буде змушувати браузер ігнорувати порядок підключення стильових таблиць. Так, якщо ми приписуємо до якого-небудь правилом оформлення модифікатор important, то для відображення текстового вмісту елемента буде використовуватися саме це правило, незалежно від того, чи були ще підключені правила для відображення цього ж елемента. Інакше кажучи, використання ключового слова important дозволяє встановити для будь-якого правила привілейований рівень і прибрати його з ієрархії каскадних таблиць стилів. Розглянемо приклад. Візьмемо знайомий нам файл style Less і трохи модифікуємо його код. Отримуємо наступну сукупність правил відображення:
Тепер, при тому порядку підключення стильових файлів style Less і style2.css, який ми розглядали раніше, текстове наповнення елемента item буде відображатися синім кольором.
З прикладу видно порядок використання модифікатора important. Якщо нам необхідно якесь правило зробити привілейованим, ми після нього ставимо символ знаку оклику і записуємо ключове слово important, відокремлене прогалиною.
Втім, цілком можлива ситуація, коли в кількох CSS-файлах існують правила відображення для одного і того ж елемента, і відразу кілька з них мають модифікатор important. У цьому випадку формується додаткова ієрархія з цих привілейованих правил і використовується для відображення найостанніше підключений правило.
Природно, для того щоб успішно застосовувати стильові таблиці, необхідно знати найменування параметрів зображення. Ми не будемо зараз детально описувати всі ці параметри, повний опис CSS займе дуже багато місця, тому тим, хто ще не знайомий зі стильовими таблицями, доведеться порадити знайти літературу, в якій стильові таблиці розглянуті детально. Однак в додатку наведено список найбільш часто використовуваних параметрів відображення.
Насправді, розробник додатків ASP.NET може встановлювати будь-які параметри відображення вмісту Web-сторінок без стильових фай-, лов, безпосередньо використовуючи властивості тих чи інших елементів. Але тоді доведеться писати дуже вже великий обсяг коду. Подібне рішення ніяк не можна назвати витонченим. Спробуємо скористатися стильовими таблицями.
Існує дві можливості використання технології CSS. Ми можемо або встановити значення атрибута style для тих тегів HTML-сторінок, ко-гторие будуть піддаватися стильової обробці, або підключити зовнішній файл, який містить визначення стильової таблиці. На жаль, ASP.NET не дозволяє вказувати підключається до Web-сторінці стильову таблицю як свой- 'ство сторінки. Тому ми створимо стильову таблицю, в якій правила «відображення будуть асоційовані ні з найменуваннями тегів, а з найменуванням класів-селектор. Для кожного візуального компонента Web; Forms передбачено властивість CssClass, в якому і вказується найменування класу-селектора.
Отже, для початку ми створимо CSS-файл. Для включення до складу проекту зовнішнього стильового файлу слід виконати команду меню Project | Add New Item (Проект Додати новий елемент). Після виконання цієї команди на екрані буде відображено діалогове вікно Add New Item (Додати новий елемент). У групі Templates (Шаблони) слід вибрати елемент Style Sheet (Стиль). Після цього до складу проекту буде включений додатковий файл.
За замовчуванням в створювану стильову таблицю включається заготовок для визначення стилю, призначеного для тега
, т. е. в цьому правилі ми можемо задавати правила відображення, які будуть впливати на весь документ в цілому.Для того щоб додати нове правило оформлення в стильову таблицю, слід натиснути на кнопку Add Style Rule (Додати правило оформлення), що знаходиться на панелі інструментів Style Sheet (Стиль). При цьому буде активовано діалогове вікно Add Style Rule (Додати правило оформлення), чий зовнішній вигляд показаний на рис. 3.21.
Так як ми плануємо створювати правила оформлення вмісту Web-сторінки, спираючись на класи-селектори, варто вибрати кнопку-перемикач Class Name (Ім'я класу). У пов'язане з нею поле текстового вводу слід ввести найменування класу-селектора, для якого ми будемо створювати правило відображення. Після того, як найменування класу буде введено, натискання на кнопку ОК перенесе в код стильової таблиці заготовку для створення правил оформлення шуканого класу.
Після того, як ми створимо всі заготовки для наших класів, можна буде створити для них правила оформлення. Для цього слід встановити курсор на те селекторі, на який ми і будемо накладати умови оформлення, і натиснути кнопку Build Style (Створити стиль). Вона активує діалогове вікно інтерактивного будівника стилів Style Builder (Будівник стилів)
За допомогою діалогового вікна будівника стилів можна задати правила відображення для кожного класу-селектора в візуальному режимі. Однак ніхто не забороняє розробнику просто написати код правил CSS вручну. Все залежить від особистих переваг. Але слід зазначити, що при використанні діалогового вікна будівника стилів завжди можна бачити, як буде виглядати текст з урахуванням встановлених правил відображень, так як в діалоговому вікні присутній панель, на якій відображається приклад тексту в тому вигляді, як він буде виглядати в підсумковому варіанті на Web-сторінці.
font-family: 'Arial Black;
Після того, як CSS-файл був створений, слід підключити його до нашої Web-сторінці. Для цього слід перейти на розроблювану Web-сторінку, до якої ми збираємося підключити стильову таблицю, і виконати команду меню Format | Document Styles (Формат | Стилі документа). Дана команда активізує діалогове вікно Document Styles (Стилі документа). У цьому вікні слід натиснути кнопку Add Style Link (Додати посилання на стильову таблицю), яка дозволить прив'язати до Web-сторінці існуючий стильовий файл. Для цього буде використано діалогове вікно Select Style Sheet (Вибір стильової таблиці), чий зовнішній вигляд показаний на рис. 3.23.
Все, тепер стильовий файл прив'язаний до цієї Web-сторінці. При цьому в її HTML-коді, в розділі заголовка документа з'явився рядок наступного виду:
Тепер досить лише підключити створену CSS-таблицю до всіх Web-сторінок проекту, встановити значення властивостей cssciass для необхідних компонентів, і завдання стильового оформлення сайту вирішена.