logo
ВебТех Конспект лекций 2011 укр

Призначення css

Дизайн Web-Вузлів - це точне розміщення компонентів HTML-Сторінок відносно один одного в робочій області вікна браузера.

Недоліки такого визначення Web-Дизайну очевидні. У ньому не враховані ні колір, ні форма, ні інші властивості компонентів HTML-Сторінок. Головне в цьому визначенні - показати обмеженість можливостей HTML-Розмітки. Присохлий компонентів на сторінці є одним із самих слабких місць в HTML.

До компонентів сторінки ставляться: блоки тексту, графіка й убудовані додатки. Розмір і границі кожного із цих компонентів у рамках HTML-Розмітки задаються з різним ступенем точності. Розмір графіки й додатків можна задати з точністю до пиксела. Розміри текстових блоків в HTML задати не можна: вони обчислюються браузером виходячи з відносного розміру шрифту за замовчуванням.

Автор сторінки не може заздалегідь визначити настроювання браузера користувача, що істотно обмежує число варіантів подання інформації на сторінці.

Не можна сказати, що розроблювачі браузерів не намагалися змінити дану ситуацію. У ранніх версіях браузерів CERN для платформи NEXT і в браузерах WWWC автор сторінки мав можливість перевизначати настроювання браузера за замовчуванням через HTML-Розмітку. Але цей підхід не одержало продовження в комерційних продуктах.

Інший спосіб керування настроюваннями браузера - програмування на JavaScript. Бурхливий розвиток цієї мови дозволяє говорити про можливість повного контролю над процесом відображення HTML-Сторінок. Недолік JavaScript - відмова від декларативного характеру розмітки й щодо великий обсяг коду для перевизначення властивостей елементів розмітки.

Специфікація CSS (Cascading Style Sheets) дозволяє залишитися в рамках декларативного характеру розмітки сторінки й повністю контролювати форму подання елементів HTML-Розмітки.

Каскадні таблиці стилів покликані дозволити протиріччя між точністю визначення розмірів картинок і додатків, з одного боку, і точністю визначення розмірів блоків тексту і його накреслення - з іншої.

Таблиці стилів також дозволяють визначити колір і накреслення текстового фрагмента, змінювати ці параметри усередині текстового блоку, виконувати вирівнювання текстового блоку щодо інших блоків і компонентів сторінки.

Наявність подібних можливостей дозволяє говорити про CSS як про засіб поділу логічної структури документа й форми його подання. Логічна структура документа визначається елементами HTML-Розмітки, у той час як форма подання кожного із цих елементів задається CSS-Описателем елемента.

CSS дозволяє повністю перевизначити форму подання елемента розмітки за замовчуванням. Наприклад, <I>...</I> визначає відображення тексту курсивом:

<I>Відобразимо текст курсивом</I>

А тепер перевизначимо стиль відображення для елемента розмітки I:

<I STYLE="text-decoration:underline;

  font-style:normal;">

Відобразимо текст курсивом

</I>

;

Рис. 8.1. 

Цей приклад показує, що звичний стиль відображення елементів може бути повністю змінений за допомогою CSS. У даній технології HTML-Розмітка носить чисто декларативний характер.

Практичне значення CSS для Web-Інжинірингу (сукупності технологій розробки й супроводи Web-Вузлів) полягає в тім, що процес створення вузла можна формалізувати й представити у вигляді послідовності дій:

  1. необхідно визначитися з номенклатурою сторінок, тобто всі сторінки проектованого Web-Вузла розбити на типи, наприклад домашня сторінка, навігаційні сторінки, інформаційні сторінки, комунікаційні сторінки й т.п. У кожного вузла цей перелік може бути свій;

  2. для кожного типу сторінок потрібно розробити певну логічну структуру (стандартний набір компонентів сторінки);

  3. варто створити навігаційну карту вузла й форму її реалізації на сторінках;

  4. для кожного стандартного компонента сторінки потрібно розробити стиль його відображення ( CSS-Описатель);

  5. тепер залишається тільки малювати картинки, створювати анімацію, писати програми, вручну вводити текст і графіку або генерувати вміст сторінок автоматично при звертанні до них.

Пояснивши в такий спосіб роль і призначення CSS серед різноманіття Web-Технологій, ми переходимо безпосередньо до обговорення застосування каскадних таблиць стилів.