Самоучитель по креативному веб-дизайну. Книга 1, стр.142

В противном случае, если посетитель выберет переключатель «Одинок», Web-бра —

узер Передаст функции disableSpuseName () Значение True И функция установит значение атрибута disabled элемента SpouseName формы равным True, что заб — локирует поле и не позволит посетителю изменить его содержимое.

Глава 3. HTML-формы 17 1





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


type=»Submit» name=»Submit» value=»Отправить»>



Затем, для разблокирования кнопки Submit при заполнении посетителем по — лей формы вызовите JavaScript-функцию, включающую следующую строку:



FormName. Submit. disabled=false;



Кроме того, вы имеете возможность заблокировать любой элемент формы с помощью следующей строки JavaScript-кода:



FormName. ElementName. disabled=true;



Для разблокирования элемента формы в приведенной выше строке установите

Значение атрибута disabled равным False.



ПРИМЕЧАНИЕ Если для изменения состояния атрибута disabl e элемента формы ис- пользуется JavaScript-код, стандартная функция Web-браузера, сбрасывающая состояние элементов формы, не будет возвращать элемент в его исходное состояние. Поэтому, если

вы заблокировали элемент, который в исходном состоянии был активен, необходимо вос —

пользоваться атрибутом onReset дескриптора
формы и вызвать функцию, которая при нажатии посетителем кнопки Reset будет возвращать значение атрибута disable d эле — мента формы в его исходное состояние.

Самоучитель по креативному веб-дизайну. Книга 1, стр.143

















Применение нескольких правил каскадных списков стилей

к одному селектору

Выбор типа шрифта с помощью свойства font-family

Задание размера текста с помощью свойства font-size

Создание перекрывающегося текста Выравнивание текста на Web-странице Установка полей и высоты строк

Вывод текста в колонках

Работа с границами

Создание абзацного отступа и работа с интервалами между буквами, словами и строками

Использование в тексте начальных заглавных букв

Настройка внешнего вида гиперссылок Создание эффекта отбрасывания тени — Использование графических границ

Расположение фоновых изображений и «водяных знаков» Плавающие изображения и текст

Настройка внешнего вида списков

Создание эффектов текста и изображений с помощью фильтров

Выравнивание надписей с элементами формы и добавление цветов в форму

Вывод на странице галереи миниатюр с заголовками

Управление курсором

Расположение элементов Web-страницы по слоям

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

Глава 4. Каскадные списки стилей 17 3





|дна из задач, с которой вы постоянно встречаетесь при создании Web-стра —

г ниц, — расположение элементов в требуемых местах страницы. Web-страни —

ца не имеет внутренней системы координат, по отношению к которой можно

было бы располагать текст, изображения и другие объекты. В главе 2 книги было рассказано об использовании HTML-таблиц для создания ячеек, в которых могут располагаться элементы Web-страницы. К сожалению, применение невидимых таблиц для обеспечения плавильного расположения элементов за счет добавления дополнительных дескрипторов (по крайней мере, по два для каждой строки и столбца таблицы) существенно усложняет HTML-код страницы. Более того, скры — тые таблицы усложняют процесс работы со страницей. Предположим, например, что в определенное место Web-страницы необходимо поместить изображение или текст. Чтобы добавить в таблицу новую ячейку в то место, куда должен быть поме — щен новый элемент, во многих случаях требуется перекодировать всю или часть таблицы.

Каскадный список стилей {Cascading Style Sheet, CSS), на который иногда ссы —

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

графических изображений или «водяных знаков», которые будут выводиться под содержимым страницы. Кроме того, свойство positio n каскадных списков сти- лей исключает необходимость использования скрытых таблиц для расположения элементов страницы и позволяет указывать Web-браузеру, где располагать каждый конкретный элемент. И, наконец, правила каскадных списков стилей позволяют указывать тип и выбирать размер, цвет и вид текста. Помимо использования

Самоучитель по креативному веб-дизайну. Книга 1, стр.144

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

Несмотря на то что каскадный список стилей можно добавить в Web-доку — мент несколькими различными способами, наверное, самый простой способ — поместить правила списка стилей непосредственно в заголовок Web-страницы, как показано на примере следующего кода:





Несмотря на длинное название, «каскадный список стилей» представляет со- бой всего лишь набор операторов между начальным и конечным дескрипторами

стиля () , расположенными перед началом HTML-кода страни —

174 Глава 4. Каскадные списки стилей





цы. При считывании HTML-документа браузер применяет правила (т. е. операто — ры форматирования и позиционирования), приведенные в списке стилей, к эле — ментам Web-страницы, описанным в разделе . На рис. 4.1 показан про — стой каскадный список стилей с двумя правилами, которые указывают Web-браузеру, каким образом выводить на экран два элемента, описанные в деск — рипторе Web-страницы.

Самоучитель по креативному веб-дизайну. Книга 1, стр.145





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

текста или других элементов и управлять выравниванием «плавающего» текста и объектов (например, графических изображений), внедренных в текст. Для приме —

ра на рис. 4.2 показано, каким образом браузер Internet Explorer реализует пра — вила каскадного списка стилей, которые выравнивают плавающее изображение

по левому краю окружающего его текста:





Обратите внимание, что правила каскадного списка стилей в этом примере создают поля между текстом и левой и правой границами Web-страницы и со — здают границу белого цвета между текстом и сторонами изображения.

Когда в конце 1996 года появились каскадные списки стилей, они существен — но обогатили и облегчили процесс разработки Web-страниц, предоставляя дизай — нерам Web-страниц следующие возможности:

Глава 4. Каскадные списки стилей 175







• Четкий контроль над расположением, шрифтами, цветами, фоном и други — ми типографическими эффектами.

• Способ изменения внешнего вида и форматирования неограниченного ко —

личества Web-страниц при изменении всего одного элемента — каскадного списка стилей.

• Возможность создания зрелищных страниц, использующих меньший объем кода, что, в свою очередь, позволяет сократить объемы страниц и быстрее загружать и отображать их в Web-браузерах.

Несмотря на довольно-таки холодный прием (в качестве конкурента широко

используемого в то время динамического HTML — DHTML), каскадные списки стилей набирают все большую и большую силу благодаря постоянно углубляю — щейся поддержке спецификаций каскадных списков стилей Web-браузерами ком — паний Microsoft и Netscape.



Разделение содержимого и внешнего вида

Язык HTML (как это первоначально предполагалось) не был предназначен для управления внешним видом Web-страниц. Он задумывался в качестве сред — ства, которое бы позволило авторам указать элемент, который должен находиться

Самоучитель по креативному веб-дизайну. Книга 1, стр.146

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

Тем не менее, с расширением содержимого Web-страниц и включением в них многоцветного текста различного типа и размера, графических изображений,

17 6 Глава 4. Каскадные списки стилей





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

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

и фоном.

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

Самоучитель по креативному веб-дизайну. Книга 1, стр.147

средств обеспечения ее внешнего вида позволяет упростить Web-страницы и об — легчить их сопровождение и обновление. Представьте себе, например, что необ —

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



Создание списка стилей

Для создания списка стилей напишите одно или несколько правил между на —

чальным и конечным дескрипторами ( ) в разделе заголовка Web-страницы (в разделе ). (В этой главе будет рассказано, каким образом можно создавать каскадные списки стилей в форме внешних документов.) От — кройте свой любимый текстовый редактор (например, Блокнот) и введите следу — ющий HTML-код:



Глава 4. Каскадные списки стилей 17 7





В приведенном примере код между начальным и конечным дескрипторами

стиля ( ) описывает каскадный список стилей. Пока что давайте

не будем останавливаться на отдельных элементах списка стилей (называемых правилами) — их синтаксис будет рассмотрен чуть ниже. Сохраните набранный

код Web-страницы в PJTML-файле (например, в файле с именем css_Testi. htm),

а затем откройте его в Web-браузере. На экране появится страница, показанная на рис. 4.3.







Терминология каскадных списков стилей

Список стилей содержит одно или несколько правил. Правило (rule) каскад — ного списка стилей представляет собой инструкцию для Web-браузера по форма — тированию или позиционированию HTML-элемента определенного типа. Спи —

Самоучитель по креативному веб-дизайну. Книга 1, стр.148

сок стилей в предыдущем примере содержит два правила. Первое правило указывает Web-браузеру, что текст, заключенный между начальным и конечным

дескрипторами заголовка уровня 1 () , должен выводится на экран шрифтом Verdana синего цвета и размера 40 пикселей:



hi {colorrblue; font-size:40px; font-family:verdana}



Первое правило списка стилей заставляет Web-браузер для первой строки тек — ста, заключенного между начальным и конечным дескрипторами абзаца (

), ввести абзацный отступ два сантиметра и вывести его на экран шрифтом

Helvetica белого цвета на зеленом фоне:



р {color:white; background:green; font-family:Helvetica; text-indent:2cm}



Следующее простое правило списка стилей содержит «селектор» (hi), который указывает, к какому HTML-элементу должно применятся данное правило, выво- дящее элемент на экран синим цветом:



hi {color:blue}



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

чальным и конечным дескрипторами заголовка уровня 1 () , синим

цветом. Селектор (в приведенном примере hi) представляет собой HTML-деск — риптор, к которому Web-браузер должен примерять правило списка стилей;

объявление (color:blue) — это инструкция позиционирования или форматирова —

17 8 Глава 4. Каскадные списки стилей





ния, которую Web-браузер должен применить. Объявление, как и правило, состо — ит из двух частей: свойства (например, color) и значения (blue).

Как видно из двух правил, содержащихся в приведенном выше примере, объявления с помощью скобок за селектором можно объединять в группу — пра —

вило каскадного списка стилей. При этом отдельные объявления разделяются точкой с запятой. Так, например, на рис. 4.4 рассмотрены отдельные составляю — щие правила каскадного списка стилей, используемого для вывода на экран стра — ницы, показанной на рис. 4.3.







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

Самоучитель по креативному веб-дизайну. Книга 1, стр.149



h2, p, ul {color:green; font-family:arial}



Это правило указывает Web-браузеру выводить на экран заголовки уровня 2,

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

Например, запустите свой любимый текстовый редактор и наберите следую —

щий HTML-код:





Глава 4. Каскадные списки стилей 179





Как уже известно из вводной части этой главы, код между начальным и ко —

нечным дескрипторами styiex/styie > описывает правила каскадного списка стилей. Селектор tabl e указывает браузеру применять правило списка стилей к содержащимся на странице таблицам. Поэтому в приведенном примере будет со- здана таблица с зеленым фоном и шрифтом белого цвета размером 20 пикселей. Более того, Web-браузер поместит таблицу на расстоянии 150 пикселей правее левой границы и 200 пикселей ниже верхней границы Web-страницы. Сохраните

набранный код в HTML-файле (например, css Test2.htm) и откройте HTML — документ в Web-браузере. На экран будет выведена страница, похожая на пока — занную на рис. 4.5.





Наследование

При добавлении текстовых элементов на Web-страницу часто один элемент вставляется в другой. Например, при выделении текста полужирным шрифтом,

как в случае с текстом «полужирный текст» в приведенном ниже примере, фак- тически элемент полужирного шрифта вставляется в элемент абзаца:



Вы вставляете один элемент в другой всегда, когда помещаете

текст, находящийся в пределах одного набора контейнерных дескрипторов, в другой набор начального и конечного

дескрипторов. Например, следующий далее

полужирный текст представляет собой полужирный

элемент, вставленный в элемент параграфа.

При форматировании Web-браузером вставленного элемента сначала он при — меняет инструкции форматирования, установленные для внешнего элемента, а затем для внутреннего элемента (если соответствующие правила определены).

Самоучитель по креативному веб-дизайну. Книга 1, стр.150

18 0 Глава 4. Каскадные списки стилей





В терминологии. каскадных списков стилей элемент, содержащийся в другом

элементе, называется дочерним {child), а внешний элемент — родительским

(parent). Таким образом, в предыдущем примере текст, окружающий элемент по —

лужирного текста (полужирный текст), является родительским, а сам эле —

мент «полужирный текст» — дочерним. При включении одного типа элемента страницы в другой тип Web-браузер применяет правила каскадного списка роди- тельского (т. е. внешнего) элемента стилей и к дочернему (т. е. внутреннему) эле-

менту.

Предположим, например, что имеется каскадный список стилей со следую — щими правилами:



р {color:blue}

b {color:red}

При наличии на Web-странице следующего HTML-кода Web-браузер выведет

На ЭКран текст «Весь текст» СИНИМ цветом И текст «полужирного начертания

будет красным — включая и полужирный курсив» — красным цветом:



Весь текст полужирного начертания будет красным — включая и

полужирный курсив.



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

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

Самоучитель по креативному веб-дизайну. Книга 1, стр.151

тора ь. Таким образом, курсивный текст будет выводиться на экран шрифтом красного цвета.

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

тельного элемента) — «выводить текст шрифтом синего цвета». Затем отношение родительский элемент/дочерний элемент между элементом полужирного текста (родительский элемент) и элементом курсивного текста (дочерний элемент) при — вело бы к тому, что элемент курсивного текста наследовал бы правило своего ро — дительного элемента — элемента полужирного текста.



Добавление на Web-страницу каскадного списка стилей

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



Полезные ссылки
Случайные записи
  • 22.07.2010">Веб-дизайн – продуманное начало
  • 23.01.2011">Руководство по actionscript. часть 1, стр. 027
  • 23.01.2011">Руководство по actionscript. часть 1, стр. 016
  • 19.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.11
  • 11.03.2011">Руководство по actionscript. часть 4, стр. 008
  • 22.03.2011">Руководство по actionscript. часть 2, стр. 008
  • 22.01.2011">Руководство по actionscript. часть 1, стр. 131
  • 16.06.2010">Самоучитель по креативному веб-дизайну. Книга 4, стр.13
  • 02.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.110
  • 22.03.2011">Руководство по actionscript. часть 2, стр. 018
  • 04.07.2012">Windows Phone 8 может обзавестись клавиатурой нового типа
  • 24.02.2011">Руководство по actionscript. часть 7, стр. 014
  • 23.01.2011">Руководство по actionscript. часть 1, стр. 005
  • 18.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.54
  • 28.02.2011">Руководство по actionscript. часть 5, стр. 140
Опрос

Какие цвета вы предпочитаете?

View Results

Loading ... Loading ...