3. Ответить на теоретические вопросы по данной теме руководителю своей группы.

4. Оформить отчет по самостоятельной работе, который должен содержать:

• титульный лист

• порядок выполнения данной работы с приложенными программами и результатами их выполнения в виде снимков с экрана

• выводы по каждому результату

3. Методические указания.

Существует 3 способа работы со стилями CSS в HTML. Можно указывать стили с помощью атрибута style в тегах р, div и др., можно описывать стили в заголовках, а можно использовать внешний файл, описывающий все стили.

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

В листинге 1.62 показывается, как можно подключить файл со стилями.

Листинг 1.62. Таблица стилей во внешнем файле

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML>

<HEAD>

<TITLE>Moя домашняя страница</Т1ТlЕ>

<LINK rel="stylesheet" href="my_style.css" type="text/css">

</HEAD>

<BODY>

<Н1>Моя домашняя страница</Н1> <P>Ha этой странице вы найдете информацию обо мне и моих друзьях.

</BODY> </HTML>

Перед тем как непосредственно приступить к описанию CSS, рассмотрим комментарии. Эти элементы в CSS начинаются с символов / * и заканчиваются символа­ми * /. Они могут находиться в любом месте таблицы. Использовать комментарии очень удобно: они помогут вам быстро разобраться, за какую часть документа от­вечает тот или иной CSS-код.

Пример CSS-кода с комментарием следующий:

/* Цвет основного заголовка - синий */ H1 { color: blue }

Селекторы

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

Группировка

Для задания разным тегам документа одних и тех же свойств в CSS используется группировка. Селекторы, то есть теги, можно сгруппировать в список, разделив запятыми.

В следующем примере разным тегам задается одно свойство:

Hi { color: red } Н2 { color: red } НЗ { color: red }

Этот пример можно значительно упростить, используя правило группировки:

HI, H2, НЗ { color: red }

Как отмечалось выше, при группировке селекторы разделяются запятыми. Селекторы потомков

Иногда необходимо задать свойства тегу, который располагается внутри другого тега, то есть является так называемым потомком. Селектор потомков состоит из двух и более селекторов, разделенных пробелом.

Предположим, HTML-документ имеет следующий код:

<Н1>0чень <ЕМ>важный</ЕМ> заголовок</Н1>

Теперь допустим, что вы хотите изменить свойства тега <Н1> и текста «важный». Если вы будете использовать CSS-код, приведений ниже, то повлияете на все теги <ЕМ> на странице (а этого вам не нужно):

H1 { color: red }

ЕМ { color: blue }

Чтобы повлиять на свойства текста «важный», который находится внутри тега <ЕМ>, а тот, в свою очередь, внутри тега <Н1>, нужно использовать следующий CSS-код:

H1 EM { color: blue }

Обратите внимание, что, в отличие от группировки, при обращении к потомкам запятые не ставятся. Количество тегов, которые можно записать потомками, неог­раниченно, например:

BODY DIV P SPAN { color: green }

Если в вашем документе есть тег <SPAN>, который находится внутри тега <р> который, в свою очередь, находится внутри тега <DIV>, то текст в данном теге будет зеленым. В столь длинных описаниях тег <BODY> можно опускать, так как

все теги и так находятся внутри тега <BODY>.

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

Пример, представленный выше, можно перезаписать так:

BODY * SPAN { color: green }

Однако помните, что текст будет зеленым, даже если тег <SPAN> просто находится внутри тега <DIV>. Другими словами, звездочкой считается любой набор селекто­ ров и их потомков. ~~

Сестринские селекторы

Сестринскими тегами называются теги, которые следуют друг за другом. Предпо­ложим, у вас есть абзац, который имеет атрибут class со значением first. Если за ним следует еще какой-то абзац, то размер вертикального пространства между| ними можно уменьшить, используя такой код:

P.first + P {margin-top: -5mm }

Селекторы атрибутов

CSS позволяет создавать правила, сопоставляемые тегам с атрибутами, определе ными в исходном коде HTML-документа. Селекторы атрибутов могут сопостаЙ ляться в четырех случаях:

• [att] — если для элемента установлен атрибут att, независимо от значен» этого атрибута;

• [att=val] — если значение атрибута att данного элемента в точности равнС

val;

• [att~=val ] — если значением атрибута att данного элемента является списо| слов, разделенных пробелами, одно из которых равно val;

• [ att | =val ] — если значением атрибута att элемента является список разде-| ленных дефисом слов, начинающийся со слова val. Сопоставление всегда на-: чинается с начала значения атрибута.

Чтобы разобраться с этим свойством, рассмотрим несколько примеров.

- Правило CSS сопоставляется всем элементам тега <Р>, для которых описыва­ется атрибут align, независимо от его значения:

p[align] { color: blue;}

- Селектор, то есть правило CSS, сопоставляется всем элементам SPAN, у которых значение атрибута class равно example:

SPAN[class=example] { color: blue; }

Это значит, что это правило не описывает сам класс и тег <Р> с этим классом не будет отображать синий цвет.

• Для обращения к нескольким атрибутам элемента или для многократного обращения к одному и тому же атрибуту можно использовать несколько селекторов атрибутов. В этом примере селектор сопоставляется всем элементам TABLE, у ко­ торых значение атрибута width равно 90%, а значение атрибута height — 50%: TABLE[width="90r][height="50l"] { color: blue; }

• Следующие селекторы иллюстрируют различия между «~=» и «=». Первый селектор сопоставляется значениям right или left атрибута align. Второй селектор будет сопоставляться только в том случае, если значение атрибута href равно http : //www. yoursite . com/:

• P[align~="right left"]

• A[href="http://www.yoursite.com/"]

• Приведенное ниже правило скрывает все элементы, атрибут lang которых имеет значение f r , то есть элементы с текстом на французском языке:

*[LANG=fr] { display : none }

CI Следующее правило сопоставляется тем значениям атрибута lang, которые начинается со значения ru, включая ru, ru-RU и ru-UA: *[LANG|="ru"] { color : red }

Селекторы классов

В таблицах стилей, используемых с HTML-документами, при сопоставлении значе­ниям атрибута clas s вы можете использовать точку («.») как альтернативу условно­му обозначению «~=». Таким образом, выражения DIV. value и DIV[class~=value] имеют одинаковый смысл. Значение атрибута должно находиться непосредственно после точки.

например, для всех элементов со значением class=test информацию о стиле можно определить следующим образом:

*.test { color: red } /* все элементы с class=test */ или сокращенно:

.test { color: red } /* все элементы с class=test */

Рассмотрим еще один пример. Следующее правило назначает стиль только элементу H1 со значением class=test:

HI.test { color: green } /* элемент HI с class=test */

Благодаря этому правилу в следующем примере при первом появлении элемент H1 не будет отображаться красным цветом, а при втором появлении будет:

<Н1>Не зеленый цвет</Н1>

<Н1 cl ass="test">HacTOflLqMii зеленый цвет</Н1>

Для сопоставления перед каждым значением атрибута class, подмножество ко­торых записано в произвольном порядке, следует поставить точку.

Например, следующее правило сопоставляется любому элементу Р, атрибуту class которого в качестве значения назначен список разделенных пробелами значений, включающий слова test и marine:

P.test.marine { color: green }

Это правило сопоставляется, если, например, для тега <Р> задается атрибут class="Test blue aqua marine", и не сопоставляется, если задается атрибут

class="test blue"

ID-селекторы

Атрибут ID позволяет назначить идентификатор одному экземпляру элемента в дереве HTML-документа. В CSS ID-селекторы сопоставляются экземпляру элемен­та в зависимости от его идентификатора. ID-селектор содержит символ «#», непо­средственно за которым следует значение атрибута ID.

Например, следующий ID-селектор сопоставляется элементу HI, значение атрибута ID которого равно chapter7:

Hl#chapter7 { text-align: center }

В примере из листинга 1.63 правило стиля сопоставляется элементу, у которого значение атрибута ID равно «first». Это значит, что данное правило будет сопоставляться элементу Р.

Листинг 1.63. ID-селектор сопоставляет правило любому тегу

<ТIТLE>Глава 7</ ТIТLE > <STYLE type="text/css">

*#first { letter-spacing: 0.3em }

</STYLE> </HEAD> <BODY>

<p id=z98y>TeKCT абзаца</Р>

</BODY>

Однако в примере из листинга 1.64 это правило стиля будет сопоставляться толь­ко элементу H1, у которого значение атрибута ID равно first. В этом примере данное правило не сопоставляется элементу Р.

Листинг 1.64. ID-селектор сопоставляет правило только тегу H1

<HEAD>

< ТIТLE >Глава 9</TITLE> <STYLE type="text/css">

Hl#first { letter-spacing: 0.5em } </STYLE>

</HEAD>

<BODY>

<P id=first>TeKCT абзаца</Р> </BODY>

Отметим, что ID-селекторы имеют более высокий приоритет, чем селекторы атри­бутов.

Псевдоклассы и псевдоэлементы

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

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

Псевдокласс :first-child

Псевдокласс :first-child сопоставляется элементу, который является первым дочерним элементом некоторого другого элемента.

В следующем примере селектор сопоставляется каждому элементу Р, который является первым дочерним элементом элемента DIV. Это правило запрещает отступ для первого абзаца элемента DIV:

<DIV> P:first-child { text-indent: 0 }

Данный селектор сопоставляется элементу Р внутри элемента DIV в следующем фрагменте:

<Р>Последний Р перед примечанием.

<DIV class="note">

<Р>Первый Р внутри примечания.

Однако в следующем фрагменте он не сопоставляется элементу Р, так как он второй, а первым дочерним элементом DIV является теперь тег <Н2>:

<Р>Последний Р перед примечанием. <DIV class="note">

<Н2>Примечание</Н2>

<Р>Первый Р внутри примечания.

В следующем примере устанавливается ширина шрифта bold для каждого эле­мента ЕМ, являющегося одним из потомков первого дочернего элемента Р:

Р:first-chiId EM { font-weight : bold }

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

<Р>Это <ЕМ>жирный</ЕМ> текст.</Р>

Псевдоклассы ссылок

Обычно браузеры по-разному отображают просмотренные и не просмотренные ссылки. В CSS предусмотриваются псевдоклассы : link и : visited для разли­чения этих ссылок и задания им своего стиля:

- псевдокласс : link применяется, если пользователь не просматривал ссылку;

- псевдокласс : visited применяется, если пользователь просматривал ссылку.

В HTML псевдоклассы ссылок применяются к тегам <А> с атрибутом href. Таким образом, следующие два объявления CSS эквивалентны:

A :link { color: red }

:link {color: red }

Допустим, пользователь просмотрел такую ссылку:

<А class="external" href="http://yoursite.com/">nepeйти</A>

Тогда она будет представляться синим цветом согласно следующему правилу:

A.external:visited { color: blue }

Динамические псевдоклассы

Браузеры позволяют менять вид элементов HTML-документа после того, как пользователь выполнил некоторые действия. В CSS для наиболее часто встречаю­ щихся действий предусматривается три псевдокласса:

:hover применяется, когда пользователь выделяет некоторый элемент (как правило, с помощью мыши), но не активизирует его;

:active используется, когда пользователь активизирует элемент, например от

момента, когда он нажал кнопку мыши, до момента, когда он ее отпустил;

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

Сколько псевдоклассов могут одновременно сопоставляться элементу, на­пример:

A: link { color: red } /* непросмотренные ссылки */

A: visited { color: blue } /* просмотренные ссылки */

A: hover { color: yellow } /* ссылка, над которой находится в данный момент курсор */

Active { color: white } /* активные ссылки */

Обратите внимание, что правило А: hover должно располагаться после правил A: link и A:visited.

В противном случае правила каскадирования скроют свойст­во color правила А: hover. Аналогично, благодаря тому что правило А: active находится после правила А: hover, активная ссылка отображается белым цветом когда пользователь устанавливает указатель поверх элемента А и одновременно активизирует его.

Псевдоэлемент :first-line

Псевдоэлемент :first-line задает стиль первой строки абзаца, например:

P:first-line { text-transform: uppercase }

Представленное выше правило делает буквы первой строки каждого абзаца заглав­ными. Селектор Р:first-line не соответствует ни одному реальному элементу HTML. Он сопоставляется псевдоэлементу, который браузеры будут помещать в на­чало каждого абзаца.

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

<Р>Этот длинный абзац HTML-документа будет разбит на несколько строк.</Р>

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

это длинный абзац HTML-документа, будет разбит на несколько строк.

К псевдоэлементу :first-line применяются свойства шрифтов, цвета, фона,

word-spacing,letter-spacing,text-decoration,vertical-align,text-transform

line-height, text-shadow и clear.

Псевдоэлемент :first-letter

Псевдоэлемент :first-letter может использоваться для создания такого простого типографического эффекта, как буквица. Он соответствует строчному эле­менту, если его свойство float равно none, иначе он соответствует плавающему элементу.

К псевдоэлементам : first-letter применяются свойства шрифтов, цвета, фона, границ, отступов, рамок: text-decoration, vertical-align (только если для свойства float устанавливается значение none), text-trans form, line-height, float, text-shadow и clear.

В следующем примере из листинга 1.65 высота буквицы устанавливается равной высоте двух строк.

Стиль заглавной буквы

<:!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<HEAD>

< TITLE >Глава 7. Стиль заглавной буквы</TITLE>

<STYLE type="text/css">

p { font-size: 12pt: line-height: 12pt }

P:first-letter { font-size: 200&; font-style: italic:

font-weight: bold: float: left }

SPAN { text-transform: uppercase }

</STYLE>

</HEAD>

<BODY>

<P><SPAN>nepвые</SPAN> несколько слов из книги

"Самоучитель по HTML и CSS".</Р> </BODY> </HTML>

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

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

Р { color: red; font-size: 12pt } P:first-letter { color: green; font-size: 200% }

P:first-1ine { color: blue }

Псевдоэлементы :before и after

Псевдоэлементы : before и : after можно использовать для вставки содержи­мого до или после содержимого элемента.

Когда псевдоэлементы :first-letter и :first-line сочетаются с псевдоэлемен­тами : before и : after, то они применяются к первой букве или строке элемен­та, включая вставляемый текст:

P.special:before {content: "Важно! "} P.special:first-letter {color: gold}

Слово «Важно!» добавится в начало абзаца стиля special, а буква В этого слова, будет золотистого цвета.

Форматирование текста средствами CSS

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

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

Выделение текста цветом

Все свойства CSS по работе с цветом наследуемы. Если вы, к примеру, зададите, красный цвет текста для тега <BODY>, то весь текст на странице станет красным.

Если после этого вы зададите синий цвет для таблиц с именем класса bluetext, _{0 т}екст во всех таблицах с классом blue_text будет синим. Если же вы зададите красный цвет для тегов <Р>, а синий - для <BODY>, то цвет текста в таблицах ос­танется синим. Однако если внутри какой-то ячейки вы применяете тег <Р>, то цвет текста в этой ячейке будет красным.

Цвет текста

Для изменения цвета текста используется свойство color, в качестве параметра которого задается его название или в виде кода цвета:

H1

{ color: red;

}

Значение цвета можно задать тремя способами:

□ английским названием цвета (как в приведенном выше примере);

□ шестнадцатиричным значением (например, #ff 0000);

□ rgb-значением (например, г gb (255, 0, 0)).

Свойство color используется для задания цвета ссылкам в документе, например:

A:hover {

color: grey;

}

Цвет фона

Цвет фона задается с помощью свойства background-color.

Для примера выделим заголовки второго уровня (то есть теги <Н2>) на HTML-странице синим цветом. Для этого добавим в файл таблицы стилей такой код:

Н1

{

background-color: blue;

}

теги <Н1>, <р> и др. выделяют цветом всю область. Например, тег <Н1> выделяет строку целиком, а тег <Р> - только прямоугольную область, даже если последняя строка обрывается на середине. Чтобы установить фон для области, занятой только текстом, необходимо внутрь тега <Н1> вложить тег <SPAN> и задать цвет лишь для фона:

Н1 SPAN {

background-color: blue;

}

Практическая работа №4-5 СИНТАКСИС И ОСНОВНЫЕ СРЕДСТВА ЯЗЫКА JAVASCRIPT

1 ЦЕЛЬ РАБОТЫ Изучить синтаксис и основные средства языка JavaScript

2 ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ

1. Изучить пункт МЕТОДИЧЕСКИЕ УКАЗАНИЯ и выполнить следующее: (в случае возникновения дополнительных вопросов воспользоваться интернет-ресурсами)

3. Ответить на теоретические вопросы по данной теме руководителю своей группы.

4. Оформить отчет по самостоятельной работе, который должен содержать:

• титульный лист

• порядок выполнения данной работы с приложенными программами и результатами их выполнения в виде снимков с экрана

• выводы по каждому результату

письменные ответы на ВОПРОСЫ КОНТРОЛЯ

3. МЕТОДИЧЕСКИЕ УКАЗАНИЯ.

1. Запускаются программы ввода/вывода информации в JavaScript с помощью следующих методов: alert (), prompt () и confirm (), генерирующих различные окна сообщений. А также метод document.write, который записывает код на страницу. Измените сценарий так, чтобы выводились две строки текста, красная и синяя. Но это надо сделать с помощью дополнительных команд JavaScript, а не просто добавить код HTML к приведенному примеру. На странице должно выводиться следующее:

Это красный текст

Это синий текст

3. Составляются и запускаются программы, создающие функцию, которая вызовет два запроса (prompt). Первый попросит пользователя ввести свое имя, второй — отчество. Затем та же функция должна вызвать окно предупреждения (alert) c текстом: Привет, имя отчество, добро пожаловать на адрес страницы, мою замечательную страницу!

4. Составляются и запускаются программы, создающие скрипт, который реализует следующие событие: если щелкнуть по ссылке, должно всплыть окно со словами: «Уже уходите? Сейчас всего только текущее время.»; Время должно определяться через функцию. Пример функции, выводящей время в формате: 27:12:2010

приведен в заданиях к работе

5. Прочесть и выполнить все требования из раздела АРИФМЕТИЧЕСКИЕ ОПЕРАЦИИ