Главная | Обратная связь | Поможем написать вашу работу!

Использование каскадных таблиц стилей(CSS)

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

selector[, selector[,...]]

{ attribute:value;

[atribute:value;...] }

или

selector selector [selector...]

{ attribute:value;

[atribute:value;...] }

В первом варианте перечислены селекторы, для которых действует данное описание стиля. Второй вариант задает иерархию вложенности селекторов, для совокупности которых определен стиль. Напомним, что речь в данном случае идет об описаниях стилей в нотации text/css. Описания стилей размещаются либо внутри элемента STYLE, либо во внешнем файле.

· В качестве селектора можно использовать имя элемента разметки, имя класса и идентификатор объекта на HTML-странице.

Селектор — имя элемента разметки

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

Такой способ создания сайта позволяет автору изменять внешний вид всех страниц путем внесения изменений в файл описания стилей, а не в файлы HTML-страниц.

Внешний файл при этом может выглядеть следующим образом:

I, EM { color:#003366,font-style:normal }

A I { font-style:normal;font-weight:bold;

text-decoration:line-through }

В первой строке этого описания перечислены селекторы-элементы, которые будут отображаться одинаково:

Это курсив и это тоже курсив

Последняя строка определяет стиль отображения вложенного в гипертекстовую ссылку курсива:

<A NAME=empty>SevNTU</A>

В данном случае переопределение состоит в том, что текст отображается внутри гипертекстовой ссылки перечеркнутым, причем жирным шрифтом.

Селектор — имя класса

Имя класса не является каким-либо стандартным именем элемента HTML-разметки. Оно определяет описание класса элементов разметки, которые будут отображаться одинаково. Для того, чтобы отнести элемент разметки к тому или иному классу, нужно воспользоваться его атрибутом CLASS (открыть):

<STYLE>

.test {color:white;background-color:black;}

</STYLE>

...

Этот параграф мы отобразим белым цветом по

черному фону

...

Эту <A CLASS="test">гипертекстовую ссылку</A>

мы отобразим белым цветом по черному фону.

Таким образом, в любом элементе разметки можно сослаться на описание класса отображения. При этом совершенно необязательно, чтобы элементы разметки были однотипными. В примере к одному классу отнесены и параграф, и гипертекстовая ссылка в другом параграфе.

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

a.menu { color:red;background-color:white;

text-decoration:normal; }

a.paragraph { color:navy;

text-decoration:underline; }

В данном примере класс гипертекстовых ссылок menu имеет одно описание стиля, а класс гипертекстовых ссылок paragraph — совершенно другое. При этом каждый из этих классов нельзя применить к другим элементам разметки, например, параграфу или списку. Если имя элемента разметки не задано, это означает, что класс можно отнести к любому элементу разметки — корневой класс описания стилей. Это очень похоже на обозначение имени корневого домена в системе доменных имен. Собственно ничего удивительного здесь нет, т.к. система классов объектов на HTML-странице представляет собой дерево. Элементы разметки — это узлы дерева.

Селектор — идентификатор объекта

Объектная модель документа (Document Object Model) описывает документ как дерево объектов. Объектами являются: сам документ, изображения, параграфы, приложения и т.п. Каждый из объектов можно поименовать и обращаться к нему по имени. Данная возможность используется при программировании страниц на стороне клиента.

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

a.mainlink { color:darkred;

text-decoration:underline;

font-style:italic; }

#blue { color:#003366 }

...

<A CLASS=mainlink>основная гипертекстовая

ссылка</A>

<A CLASS=mainlink ID=blue>модифицированная

гипертекстовая ссылка</A>

В таблице 1 представлены некоторые элементы CSS.

Таблица 1 - Элементы CSS

Наименование Элемента	Описание
СВОЙСТВА ШРИФТА
font-family	Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент. P {font-family: Times New Roman, sans-serif;}
font-weight	Определяет степень жирности шрифта с помощью трех параметров: lighter, bold, bolder B {font-weight: bolder;}
font-size	Устанавливает размер шрифта. Параметр может указываться как в относительной (проценты), так и абсолютной величине (пункты, пикселы, сантиметры) H1 {font-size: 200%;} H2 {font-size: 150px;}
ЦВЕТ ЭЛЕМЕНТА И ЦВЕТ ФОНА
Color	Определяет цвет элемента I {color: yellow;}
background-color	Устанавливает цвет фона для элемента – именно для элемента, а не для страницы. Обратите внимание, что браузеры отображают это свойство по-разному:
СВОЙСТВА ТЕКСТА
text-decoration	Устанавливает эффекты оформления шрифта, такие, как подчеркивание или зачеркнутый текст H4 {text-decoration: underline;} A {text-decoration: none;} .wrong {text-decoration: line-through;}
text-align	Определяет выравнивание элемента. P {text-align: justify} H1 {text-align: center}
text-indent	Устанавливает отступ первой строки текста. Чаще всего используется для создания параграфов с табулированной первой строкой. P {text-indent: 50pt;}
line-height	Управляет интервалами между строками текста. P {line-height: 50 %}
СВОЙСТВА ГРАНИЦ
Margin-left	Устанавливают значения отступов вокруг элемента. IMG { margin-right: 20pt} P { margin-left: 2cm}
Margin-right margin-right margin-top	Устанавливают значения отступов вокруг элемента. IMG { margin-right: 20pt} P { margin-left: 2cm}
ЕДИНИЦЫ ИЗМЕРЕНИЯ
Px	Пикселы
Cm	Сантиметры
Mm	Миллиметры
Pt	Пункты (типограф.)
%	Проценты

Гипертекстовые ссылки

Гипертекстовые ссылки являются одним из ключевых элементов, делающим WEB привлекательным для пользователей. Добавляя гипертекстовые ссылки (далее - ссылки), вы делаете набор документов связанным и структурированным, что позволяет пользователю получать необходимую ему информацию максимально быстро и удобно.

Ссылки имеют стандартный формат, что позволяет браузеру интерпретировать их и выполнять необходимые функции (вызывать методы) в зависимости от типа ссылки. Ссылки могут указывать на другой документ, специальное место данного документа или выполнять другие функции, например, запрашивать файл по FTP-протоколу для отображения его браузером и проч.

URI и URL

Каждый ресурс в Web - документ HTML, изображение, программа и т.д. - имеет адрес, который может быть закодирован с помощью URI (Universal Resource Identifier) - универсального идентификатор ресурса.

Примечание: более распространенной является аббревиатура "URL" (Uniform Resource Locator). Следует отметить, что URL образуют подмножество более общей схемы наименования URI, но в дальнейшем будем использовать аббревиатуру URL.

HTML использует URL (Uniform Resource Locator) для представления гипертекстовых ссылок и ссылок на сетевые сервисы внутри HTML-документа.

URL состоит из нескольких частей:

method://machine-name/path/page.html

Первая часть URL (до двоеточия) описывает метод доступа или сетевой сервис (протокол). Другая часть URL (после двоеточия) интерпретируется в зависимости от метода доступа. Обычно, два прямых слеша после двоеточия обозначают имя машины (сервера):

Следующий пример представляет собой вызов HTML-документа index.html с сервера www.is.sevntu.sebastopol.ua с использованием HTTP протокола:

http :// www . is . sevntu . sebastopol . ua / index . html

Полный формат URL представлен ниже:

METHOD://SERVERNAME:PORT/PATHNAME#ANCHOR

Опишем каждый из компонентов URL.

METHOD определяет тип операцию, которая будет выполняться при интерпретации данного URL. Наиболее часто используемые методы:

· file - чтение файла с локального диска. Имя файла интерпретируется для локальной машины пользователя. Данный метод используется для отображения какого-либо файла, находящегося на машине пользователя. Например: file:/home/alex/index.html - отображает файл index.html из каталога /home/alex на пользовательской машине;

· http - доступ к WEB-странице в сети с использованием HTTP-протокола. (Это наиболее часто используемый метод доступа к какому-либо HTML-документу в сети);

· ftp - запрос файла с анонимного FTP-сервера. Например: ftp://hostname/directory/filename;

· mailto - активизирует почтовую сессию с указанным пользователем и хостом. Например: mailto: webmaster@is.sevntu.sebastopol.ua - активизирует сессию посылки сообщения пользователю webmaster на машине is.sevntu.sebastopol.ua, если браузер поддерживает запуск электронной почты. Заметьте, что метод mailto: не требует указание слешей после двоеточия (как правило, после двоеточия сразу идет электронный адрес абонента)

· telnet: обращение к службе telnet;

· news: вызов службы новостей, если браузер ее поддерживает. Например: news:relcom.www.support;

SERVERNAME - необязательный параметр, описывающий полное сетевое имя машины. Если имя сервера не указано, то ссылка считается локальной, и полный путь, указанный далее в URL вычисляется на той машине, с которой взят HTML-документ, содержащий данную ссылку. Следует отметить, что вместо символьного имени машины может быть использован IP-адрес.

PORT - номер порта TCP на котором функционирует WEB-сервер. Если порт не указан, то "по умолчанию" используется порт 80. Данный параметр (port) не используется в подавляющем большинстве URL.

PATHNAME - частичный или полный путь к документу, который должен вызваться в результате интерпретации URL. Различные WEB-сервера сконфигурированы по разному для интерпретации пути доступа к документу. Например, при использовании CGI скриптов (исполняемых программ), они обычно собираются в одном или нескольких выделенных каталогах, путь к которым записан в специальных параметрах WEB-сервера. Для данных каталогов WEB-сервером выделяется специальный логический путь, который и используется в URL. Если WEB-сервер видит данный путь, то запрашиваемый файл интерпретируется как исполняемый модуль. В противном случае, запрашиваемый файл интерпретируется просто как файл данных, даже если он является исполняемым модулем.

Следует отметить, что при описании пути используется UNIX-подобный синтаксис, где, в отличии от DOS и Windows используются прямые слеши вместо обратных. Если после сетевого имени машины сразу идет имя документа, то он должен находиться в корневом каталоге на удаленной машине или (как правило) в каталоге, выделенном WEB-сервером в качестве корневого. Если же URL заканчивается сетевым именем машины, то в качестве документа запрашивается документ из корневого каталога удаленной машины с именем, установленным в настройках WEB-сервера (как правило, это index.html).

#ANCHOR - д анный элемент является ссылкой на строку (точку) внутри HTML-документа. Большинство браузеров, встречая после имени документа данный элемент, размещают документ на экране таким образом, что указанная строка документа помещается в верхнюю строку рабочего окна браузера. Точки, на которые ссылается #anchor, указываются в документе при помощи тега NAME, как это будет описано далее.

⇐ Предыдущая 123 4 Следующая ⇒

Воспользуйтесь поиском по сайту: