16+
ComputerPrice
НА ГЛАВНУЮ СТАТЬИ НОВОСТИ О НАС




Яндекс цитирования


Версия для печати

Модуль поиска не установлен.

Синтаксис объявления CSS (Cascading Style Sheets), JS (JavaScript) и VBS (Visual Basic Script) в HTML

10.12.2003

Объявление CSS (Cascading Style Sheets)

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

Существует три способа объявления каскадных таблиц стилей: непосредственное описание селекторов, ссылка на внешний ресурс, импорт таблицы стилей. Рассмотрим синтаксис для каждого из способов:

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

 тег {список селекторов};

 тег. класс {список селекторов};

 # класс {список селекторов}.

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

В этом случае форматирование будет применено только для данного объекта, которое потеряет силу вне объекта и не будет применяться к другим аналогичным. В качестве примера нагляднее всего привести абзацы текста, один из которых выделен красным цветом. Это выглядит следующим образом:

Объявление программных кодов на JS (JavaScript) и VBS (Visual Basic Script)

Для объявления программного кода (далее скрипты) на JavaScript и Visual Basic Script существует четыре способа: непосредственное описание, вставка в нужном месте, ссылка на внешний ресурс, привязка к объекту. Рассмотрим синтаксис для каждого из способов:

Непосредственное описание используемых в документе программных кодов внутри тега "script":"/script" в заголовке документа.









В принципе, различий между пунктами 1 и 2 мало, т.к. вставить тег "script":"/script" можно в любой части документа и описать как одну функцию, так и несколько. Но вообще принято, если используется много функций, то объявлять их необходимо как описательную часть документа и размещать в заголовке документа "head":"/head". Кроме перечисленных способов можно организовать временные местные вставки куска кода в атрибутах тега. Наиболее часто подобные вставки можно встретить в теге "a" ... "/a", когда требуется выполнить сценарий, а не перейти по ссылке, указанной в href = "...". Выглядит это следующим образом (в качестве вызываемой функции используется функция Modified(), т.к. она уже встречалась, вместо нее вы будете вызывать нужную вам функцию):


Причем по поводу запрета перехода хотелось бы оговорить некоторые позиции дополнительно. Во многих изданиях, типа <Пособия по : >, <Изучаем : > встречается описание пустого действия ссылки следующим образом: href = "" или href = "#". Но почему-то никто не описывает особенности их обработки. Например, href = "", действительно, вызывает обработку сценария, но после этого автоматически загружает первую страницу сайта, а то, что в обработчике событий onClick указан вызов процедуры, никого не касается. И будьте здоровы: А href = "#" после обработки сценария браузер фокусируется на начале страницы, расценивая # как якорь начала страницы. И только в JavaScript мне известен принудительный запрет обработки ссылки: void(0). Есть ли такая же возможность в VBScript, не знаю, т.к. никогда не сталкивался в литературе с ее описанием. Если кто-то располагает подобной информацией, с удовольствием готов принять ее по е-mail: starik@nm.ru.

Преимущества хранения данных во внешних файлах

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

Например, предположим, что объем таблицы стилей внутри HTML-документа составляет 1 Kb, а на вашем сайте 100 HTML-документов по 10 Kb. Объем занятого дискового пространства составит: 100 х 10 = 1000 Kb. За счет объявления общей внешней таблицы стилей размер каждого HTML-документа сократится на один 1 Kb. Таким образом, дисковое пространство, занятое под хранение файлов, составит: 100 х 9 + 1 = 901 Kb. Как видите, экономия в 99 Kb налицо.

В случае, если пользователь использует для навигации Microsoft Internet Explorer (MIE), получается еще интереснее. Помимо того, что размер HTML-документа уже меньше на 1 Kb и не надо его прокачивать, MIE делает резервные копии файлов в папке Temporary Internet Files. При обращении из другого HTML-документа к таблице стилей во внешнем файле, которая уже загружалась с данного сервера, Microsoft Internet Explorer вообще заново ее не качает, а обращается к резервной копии.

Внешние файлы скриптов в свою очередь также открывают доступ ко всем функциям из любого HTML-документа. А также позволяют создавать несколько библиотек с характерными функциями, на которые можно ссылаться при необходимости. Например, создаем файлы с функциями обработки данных в форме (form.js), со скриптом для организации часов (clock.js), калькулятора (calculator.js) и скриптом для летающей снежинки (schnee.js). Затем в разных HTML-документах нам потребуются следующие библиотеки:

 HTML-документ - обработка данных в форме, калькулятор;

 HTML-документ - часы, снежинки;

 HTML-документ - все библиотеки.

Ссылки на внешние источники будут выглядеть, соответственно, следующим образом:


При подобной организации скриптов нужно только внимательно следить за объявлением глобальных переменных. Одинаковые имена в разных библиотеках могут привести к ошибкам. С моей точки зрения, все глобальные переменные лучше объявлять также в отдельном файле. Это очень удобно, если величина варьирует и используется во многих документах. Для этого необходимо сформировать внешний файл, в котором находятся все переменные, но отсутствует программный код. Назовем его, например, constant.js или constant.vbs и он будет иметь следующий вид:


Затем в заголовке документа объявить как обычный внешний файл программного кода:


И в нужный момент в нужном месте организовать вывод на страницу переменной:


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

О вкусах не спорят, но...

Говорить о том, какой клиентский язык лучше - JavaScript или VBScript, можно сколь угодно долго. Так как это уже вопрос только вкуса. JavaScript или VBScript по функциональности ни в чем не уступают друг другу. И, тем не менее, есть одно маленькое "но", которое заставляет задуматься при выборе языка, на котором писать сценарии и наводить красоту на сайте. Microsoft Internet Explorer поддерживает и JavaScript и VBScript, в то время как браузеры от Netscape напрямую не поддерживают VBScript и ActiveX. Поддержка осуществляется за счет подключения дополнительных модулей, например, Ncompass. А это означает, что пользователи, путешествующие по бескрайним просторам Internet на программных продуктах Netscape, просто не смогут увидеть всю красоту вашей задумки, если у них нет специального модуля поддержки.

А лишать их этого удовольствия - жестоко. Поэтому мой выбор на текущий момент - JavaScript. Хотя, с течением времени, я уверен, что смогу на странице одновременно использовать оба клиентских языка сценариев.

Влад Веденеев



статьи
статьи
 / 
новости
новости
 / 
контакты
контакты