Отправляет email-рассылки с помощью сервиса Sendsay

Технологии эффективного Интернета

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Как сделать популярный сайт." на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Февраль 2007   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Автор
Vladimir N Abramov

Статистика

3.524 подписчиков
0 за неделю
←   Все выпуски   →

Основы web-технологий..:: N 16 ::.. Назначение и применение CSS. Часть 1


Рассылка: Основы web-технологий :: N 16
Раздел: Применение каскадных таблиц стилей

Раздел посвящен изучению каскадных таблиц стилей, способов гипертекстовой разметки с применением каскадных таблиц стилей (Cascade Style Sheets).

Тема: назначение и применение CSS.
Основные понятия: Каскадные таблицы стилей, ссылка на внешнее описание, импорт стилей, синтаксис, внешний файл, селектор, элемент разметки, имя класса, идентификатор объекта, объектная модель документа, наследование, переопределение, старшинство стилей.
Информация о выпуске: описание CSS, их назначение, определение и использование при форматировании HTML-документа.

Назначение CSS

"Дизайн HTML-страниц — это точное размещение элементов друг относительно друга в рабочей области окна браузера..." Недостатки такого определения Web-дизайна очевидны. В нем не учтены ни цвет, ни форма, ни другие свойства компонентов HTML-страниц. В этом определении видна ограниченность возможностей HTML-разметки. Позиционирование компонентов на странице является одним из самых слабых мест в HTML.

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

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

Нельзя сказать, что разработчики браузеров не пытались изменить данную ситуацию. В ранних версиях браузеров CERN для платформы NEXT и в браузерах WWWC автор страницы имел возможность переопределять настройки браузера по умолчанию через HTML-разметку. Но этот подход не получил продолжения в коммерческих продуктах.

Другой способ управления настройками браузера — программирование на JavaScript. Бурное развитие этого языка позволяет говорить о возможности полного контроля над процессом отображения HTML-страниц. Недостаток JavaScript — отказ от декларативного характера (отделение описания от содержания) разметки и относительно большой объем кода для переопределения свойств элементов разметки.

Спецификация CSS - (Cascading Style Sheets - Каскадные таблицы стилей)
позволяют отделить (декларировать) разметку от информационного наполнения страницы и полностью контролировать форму представления элементов HTML-разметки. Таблицы стилей позволяют определить цвет и начертание текстового фрагмента, изменять эти параметры внутри текстового блока, выполнять выравнивание текстового блока относительно других блоков и компонентов страницы. Наличие подобных возможностей позволяет говорить о CSS как о средстве разделения логической структуры документа и формы его представления. Логическая структура документа определяется элементами HTML-разметки, в то время как форма представления каждого из этих элементов задается CSS-описателем элемента.

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

Образец некоторого текста

HTML код примера выглядит следующим образом:

<I>
Образец некоторого текста
</I>

При помощи CSS мы можем полностью переопределить стиль отображения элемента разметки <I>:

Образец некоторого текста

Теперь HTML код выглядит так:

<I style="text-decoration:underline;font-style:normal;">
Образец некоторого текста
</I>

Этот пример показывает, что привычный стиль отображения элементов может быть полностью изменен при помощи CSS. В данной технологии HTML-разметка носит чисто декларативный характер. Кроме того, имеется замечательная возможность элементы разметки (отображенные параметром STYLE) вынести в отдельный файл.


Мои закладки: апельсиновый хостинг - бесплатный месяц на тестирование, трафик без ограничений, от $0.8 в месяц, все включено, домен бесплатно, кредит, скидки, ответственная и доброжелательная тех-поддержка, удобная русская панель управления сайтом.

Практическое значение CSS для разработки и сопровождения сайтов заключается в том, что процесс создания можно формализовать и представить в виде последовательности действий:

  • Определиться с номенклатурой страниц, т.е. все страницы проектируемого Web-узла разбить на типы, например домашняя страница, навигационные страницы, информационные страницы, коммуникационные страницы и т.п. У каждого узла этот перечень может быть свой;
  • Для каждого типа страниц можно разработать определенную логическую структуру (стандартный набор компонентов страницы);
  • Следует создать навигационную карту узла и форму ее реализации на страницах;
  • Для каждого стандартного компонента страницы разработать стиль его отображения (CSS-описатель);
  • После этого можно рисовать картинки, создавать анимацию, писать программы, вручную вводить текст и графику или генерировать содержимое страниц автоматически при обращении к ним.

Способы применения CSS

Различают четыре способа применения стилей:

  • переопределение стиля непосредственно в элементах разметки;
  • размещение ссылки на внешнее описание через элемент LINK;
  • размещение описания стиля в заголовке документа в элементе (в теге) STYLE;
  • импорт описания стиля в документ.

Переопределение стиля

<H1 style="font-weight:normal;
font-style:italic;
font-size:10pt;">
Заголовок первого уровня
</H1>

Атрибут style можно применить внутри любого элемента разметки. Например, мы можем через style определить ширину и выравнивание элемента hr (горизонтальное отчеркивание):

<HR style="width:100px;">

Очевидно, что не все параметры стиля можно установить для конкретного элемента разметки. О типах элементов и соответствующих параметрах стилей мы поговорим в разделе "Понятия блочного и строкового элементов".

Здесь же нужно отметить следующее: стили разработаны в первую очередь для управления отображением текста. Не следует увлекаться стилями при управлении отображением нетекстовых элементов HTML-разметки.

Ссылка на внешнее описание

Ссылка на описание стиля, расположенное за пределами документа, осуществляется при помощи элемента LINK, который размещают в элементе HEAD. Внешнее описание может представлять собой файл, содержащий описание стилей. Описание стилей в этом файле будет по синтаксису в точности совпадать с содержанием элемента STYLE.

Посмотрите пример ссылки на внешнее описание стилей:

<LINK TYPE="text/css" REL="stylesheet" HREF="http://some.ru/css/default.css">

Здесь важны значения атрибутов REL и TYPE. Атрибут REL должен иметь значение stylesheet. Type может принимать значения text/css или text/javascript. Второй тип описания стилей введен Netscape после того, как Microsoft запатентовала CSS1.

Атрибут HREF задает универсальный локатор ресурса (URL) для внешнего файла описания стилей. Это может быть ссылка на файл с любым именем, а не только на файл с расширением *.css.

Использование элемента STYLE

Применение элемента STYLE — основной способ использования каскадных таблиц стилей в HTML-документах. Помимо управления отображением элементов разметки, элемент STYLE позволяет описывать стилевые свойства элементов, которые можно изменять при программировании на JavaScript.

Элемент STYLE дает возможность определить стили отображения для:

  • стандартных элементов HTML-разметки;
  • произвольных классов (селектор CLASS);
  • НTML-объектов (селектор ID).

К сожалению, работа с селекторами в браузерах различных производителей может преподносить различного рода сюрпризы. Особенно это касается селектора ID - различные клиентские броузеры обрабатывают их, к большой головной боли веб-дизайнеров, по-разному. Понятие селектора, применение селекторов и формальный синтаксис CSS мы обсудим чуть позже.

Стандартные элементы разметки описываются в элементе STYLE следующим образом:

<HEAD>
<STYLE>
p { color:darkred;text-align:justify;font-size:8pt; }</STYLE>
</HEAD>
<BODY>
...
<P>
Этот параграф мы используем как пример применения описания стиля для стандартного элемента HTML-разметки.
</P>
...
</BODY>

Теперь все параграфы документа будут отображаться стилем из элемента STYLE, если только стиль не будет каким-либо способом переопределен. В "головном" теге STYLE (в начале HTML страницы) можно определить стиль любого элемента разметки.

Однако существует проблема, которая заключается в том, что, используя тег <STYLE> так, как описано выше, мы должны вставлять таблицу стилей в каждый документ. Это увеличивает не только время, необходимое для создания документа, но и размер файла и делает более сложным полное изменение стиля всех используемых документах. Так что этот метод сводит на нет все достоинства применения талиц стилей.

Импорт описания стилей

К счастью, есть способ автоматически применять таблицы стилей и делать размеры файлов меньше. Импорт описателей стилей в некотором смысле составляет конкуренцию представленному выше указанию на внешний описатель стиля. Импортировать стиль можно либо внутрь элемента STYLE, либо внутрь внешнего файла, который представляет собой описатель стиля. Оператор импорта стиля должен предшествовать всем прочим описателям стилей:

<STYLE>
import:url("http://some.ru/css/default.css")
A { color:cyan;text-decoration:underline; }
</STYLE>

Импортируемый стиль можно переопределить либо через описатель элемента в STYLE, либо через атрибут элемента STYLE.

Спасибо за внимание, встретимся через неделю.

cайт рассылки: web.aho.ru
В избранное