Основы Web-инжиниринга. Часть 1. Громов Ю.Ю - 51 стр.

UptoLike

ВУЗ: 

ТГТУ | Тамбов

Составители: 

Рубрика: 

Этот пример показывает, что привычный стиль отображения элементов может быть полностью изменен при помощи
CSS. В данной технологии HTML-разметка носит чисто декларативный характер.
Практическая значимость CSS для Web-инжиниринга заключена в том, что процесс создания узла можно формализо-
вать и представить в виде следующей последовательности действий.
• Сначала нужно определиться с номенклатурой страниц, т.е. все страницы проектируемого Web-узла разбить на ти-
пы, например: домашняя страница, навигационные страницы, информационные страницы, коммуникационные страницы и
т.п. У каждого узла этот перечень может быть своим.
• Для каждого из типов страниц разрабатывается определенная логическая структура (стандартный набор компонен-
тов страницы).
• После этого разрабатывается навигационная карта узла и форма ее реализации на страницах.
• Для каждого стандартного компонента страницы разрабатывается стиль его отображения (CSS-описатель).
• Теперь остается только рисовать картинки, создавать анимацию, писать программы, вручную вводить текст и графи-
ку или генерировать содержание страниц автоматически во время обращения к ним.
3.1. СПОСОБЫ ПРИМЕНЕНИЯ CSS
Под способами применением CSS будем понимать форму декларирования стиля на HTML-странице и форму связыва-
ния описания стиля отображения элемента разметки с самим этим элементом. Речь идет о том, где и в какой форме автор
страницы (или дизайнер) описывает стиль и как и в какой форме на него ссылается.
Итак, различают три способа применения стилей:
• переопределение стиля в элементе разметки (Inline Style Sheet – внутренние таблицы стилей);
• размещение описания стиля в заголовке документа в элементе STYLE (глобальные таблицы стилей);
• размещение ссылки на внешнее описание через элемент LINK (связанные таблицы стилей).
3.1.1. Переопределение стиля
Под переопределением стиля в элементе разметки мы понимаем применение атрибута STYLE у данного элемента раз-
метки:
<h1 style="font-weight:normal; font-style:italic; font-size:10pt;">
Заголовок первого уровня
</h1>
Атрибут style можно применить внутри любого элемента разметки. Например, мы можем через style определить шири-
ну и выравнивание элемента hr (горизонтальное отчеркивание):
<hr style="width:100px;">
Очевидно, что не всякие параметры стиля можно установить для конкретного элемента разметки. Cтили разработаны в
первую очередь для управления отображением текста. Не следует увлекаться стилями при управлении отображением нетек-
стовых элементов HTML-разметки.
3.1.2. Элемент STYLE
Применение элемента STYLE – это основной способ внедрения каскадных таблиц стилей в ткань HTML-документа.
Кроме управления отображением элементов разметки, элемент STYLE позволяет описывать стилевые свойства элементов,
которые можно изменять при программировании на JavaScript.
Элемент STYLE позволяет определить стиль отображения для:
• стандартных элементов HTML-разметки;
• произвольных классов (селектор class);
• HTML-объектов (селектор id).
К сожалению, работа с селекторами в браузерах различных производителей может преподнести различного рода сюр-
призы. Особенно это касается работы с селектором ID.
Стандартные элементы разметки описываются в элементе STYLE следующим способом:
<head>
<style>
p {color:darkred;text-align:justify;font-size:8pt;} </style>
</head>
<body>
...
<p>
…
</p>
...
</body>
Теперь все параграфы документа будут отображаться стилем из элемента STYLE, если только стиль не будет переопре-
делен каким-либо способом. В STYLE можно определить стиль любого элемента разметки.

Страницы