Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву

Мы поможем в написании ваших работ!

ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Главная Избранные Случайная статья Познавательные Новые добавления Обратная связь FAQ

Асинхронный режим работы обработка страницы начнётся тогда, когда удастся загрузить скрипт.(Грузиться несколько скриптов, первым выполняется тот, который первым загрузился asynce)

⇐ ПредыдущаяСтр 4 из 7Следующая ⇒

Сценарии, написанные на языке javascript, могут располагаться на самой html-странице между тегами <script></script>, которые в свою очередь обычно находятся в тегах <head></head>. У тега <script> должен быть указан параметр language, который и указывает язык написания скрипта:

<html>

<head>

<title>Заголовок документа</title>

</head>

<body>

</body>

</html>

Теоретически теги <script></script> могут располагаться и в теле документа (в тегах <body></body>). Выполняться такой сценарий будет тогда, когда браузер "дочитает" страницу до этого места (до тегов <script></script>).
Javascript-код во внешнем файле
Создайте в блокноте страницу (пока пустую) и сохраните ее как script.js в ту же папку, где лежит html-страница:

Это будет наша страница с javascript-кодом. Теперь нам надо подключить страницу script.js к html-странице. Для этого, как вы помните, в html существует тег <script>, который и отвечает за подключение внешних файлов скриптов. Добавим этот тег в html-страницу:

<html>

<head>

<title>Заголовок документа</title>

</head>

<body>

</body>

</html>

В дальнейшем мы будем пользоваться именно этим способом, как самым удобным.

Каскадные таблицы стилей CSS. Управление стилями элементов html-страниц

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

CSS предполагает 3 типа таблиц стилей - встроенные, внедренные (внутренние) и связанные (внешние).
Термин "каскадный" означает, что в одной странице HTML могут использоваться разные стили. Браузер, поддерживающий таблицы стилей, будет следовать их порядку (как по каскаду), интерпретируя информацию стилей.
Это означает, что вы можете использовать все три типа стилей, и браузер будет интерпретировать сначала связанные, затем внедренные и, наконец, встроенные стили. Даже если ко всему узлу будут применены образцы стилей, можно будет управлять отдельными аспектами страниц с помощью внедренных стилей, а отдельными областями внутри этих страниц - с помощью встроенных стилей.
Другой аспект каскадирования - наследование (inheritance). Наследование означает, что если не указано иное, то конкретный стиль будет унаследован другими элементами страницы HTML.

Методы

Существует три метода для применения таблицы стилей к документу HTML:

Встроенный (Inline). Этот метод позволяет взять любой тег HTML и добавить к нему стиль. Использование встроенного метода предоставляет максимальный контроль над всеми свойствами Web-страницы. Предположим, вы хотите задать внешний вид отдельного абзаца. Вы можете просто добавить атрибут style к тегу абзаца, и браузер отобразит этот абзац с помощью параметров стиля, добавленного в код.
Внедренный (Embedded). Внедрение позволяет контролировать всю страницу HTML. При использовании тега <style>, помещенного внутри раздела <head> страницы HTML, в код вставляются детализированные атрибуты стиля, которые будут применяться ко всей странице.
Связанный (Linked или External). Связанная таблица стилей - мощный инструмент, который позволяет создавать образцы стилей (master styles), которые можно затем применять ко всему узлу. Основной документ таблицы стилей (расширение.css) создается Web-дизайнером. Этот документ содержит стили, которые будут едиными для всего Web-узла (неважно, содержит одну страницу или тысячи страниц). Любая страница, связанная с этим документом, будет использовать указанные стили.

Синтаксис таблицы стилей

Таблицы стилей строятся в соответствии с определенным порядком (синтаксисом), в противном случае они не могут нормально работать.
Синтаксис всех методов, используемых для применения стилей к документа HTML, практически одинаков. Таблицы стилей составляются из определенных частей. Эти части включают следующие элементы:

Указатель (Selector). Указатель является элементом, к которому будут применяться назначаемые вами атрибуты. Это может быть просто тег типа заголовка (H1) или абзаца (Р). Таблицы стилей позволяют использовать различные объекты, включая классы, которые будут кратко обсуждаться далее.
Свойство (Property). Свойство определяет указатель. Например, если в качестве указателя выбран абзац, вы можете включить свойства, определяющие этот указатель. В свойства входят такие элементы, как поля, шрифты и фоновые изображения. В таблицах стилей существует много свойств, которые можно использовать для того, чтобы определить указатель.
Значение (Value). Значения определяют свойства. Предположим, что у вас есть заголовок первого уровня H1 (указатель) и вы включаете свойство type family (семейство шрифта). Шрифт, который на самом деле будет применен к указанному фрагменту, задается значением этого свойства.
Описание (Declaration). Свойства и значения объединяются, образуя описание.
Строка (Rule). Указатель и описание образуют строку

Определение правил CSS

Итак, какскадная таблица стилей - это набор правил форматирования тегов HTML.

В данном случае объявлено правило форматирования тега body, а именно - свойству стиля background присвоено значение black (черный). В результате применения этого правилацвет фона всего документа изменится на черный.

Обратите внимание: в таблице стилей теги HTML не заключаются в круглые скобки.

Свойства CSS должны находиться в фигурных скобках.

Для каждого тега HTML можно указать не одно, а несколько свойств стиля.

Изменим с помощью CSS не только цвет фона Web-страницы, но и цвет шрифта (на белый).

body{background:black;color:white}

Формат самого правила не имеет значения, главное - правило должно читаться удобно и легко.

Одно и то же правило стиля можно применить сразу к нескольким различным тегам HTML-страницы. Например:

body,td,h1{

background:black;

color:white}

Управление стилями
Язык JavaScript предоставляет средства для управления стилями элементов "на лету". Под стилем в данном случае понимается набор параметров элемента, определяющий его внешний вид и особенности поведения на странице.

Возможно два способа управления стилем - непосредственное программное изменение элементов стиля и переопределение стиля с использованием классов CSS.

Рассмотрим первый способ. Мы уже применяли его, когда рассматривали возможности перехвата событий клавиатуры. Смысл данного метода состоит в том, что необходимый внешний вид и поведение элемента достигается последовательным изменением свойств его стиля.

Например:

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

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

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

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

Третья причина более всего важна для разработчиков. Разделив код и описание стилей, можно спокойно зашифровать или как-то ещё закрыть код, защищая тем самым свой труд от банального воровства и плагиата. Это особенно актуально, если вы распространяете свои скрипты за деньги.

Таким образом, совмещение JavaScript и CSS позволяет добиться впечатляющих визуальных эффектов.

⇐ Предыдущая 1 2 345 6 7 Следующая ⇒

Читайте также:

Техника прыжка в длину с разбега

Организация работы процедурного кабинета

Области применения синхронных машин

Оптимизация по Винеру и Калману

Последнее изменение этой страницы: 2016-07-16; просмотров: 168; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 18.118.2.15 (0.016 с.)