Города Иркутска.

...

< LI> < font size=+2> < A href=pogrom.htm> щенок < B> Погромыч< /A> < /font> < /B> < /I>. < /font>

3. Сохрани изменения в файле и посмотри его в браузере. Если всё сделано правильно, ты почти не заметишь изменений, разве что заголовок теперь записан другим шрифтом и с разрядкой (то есть буквы расположены шире, с большим, чем раньше, расстоянием между ними), да абзацы начинаются с красной строки. Кроме этого, теперь шрифт списка заметно мельче остального текста. И если вдуматься, так и должно быть, мы ведь не задали оформление тегов < OL>, < UL> и < LI>. Можно, конечно, это сделать. Но мы поступим по-другому. Представь ситуацию, в которой один список нам потребуется записать шрифтом покрупнее, а другой – помельче (именно так у нас оформлен список друзей). Поэтому теперь опишем стиль не конкретного тега, а класса:

c добавь в раздел описания стиля < STYLE> выделенные строки:

< STYLE type=text/css>

H2{ text-align: center;

...

}

P{ text-indent: 3em;

...

}

.mal{ font-size: 90%; }

.sred{ font-size: 110%; }

.bol{ font-size: 130%; }

< /STYLE>

Со знака «.» (точка) начинается название класса. Мы создали три класса mal – маленький, sred – средний, bol – крупный и задали для них соответствующие размеры шрифта.

c измени код, задающий списки (добавь выделенное полужирным и удали зачёркнутое):

< OL class=sred >

< LI> информатику

< LI> рисовать

< LI> своих друзей:

< UL>

< LI> четвероногих

< LI> пернатых

< /UL>

< /OL>

< P> А друзья мои – это:

< UL>

< LI class=mal > < I> < font size=+0> < A href=klava.htm>

синичка < B> Клава< /B> < /A> < /LI>

< LI class=sred > < A href=dusja.htm>

кошка < B> Дуся< /B> < /A> < /LI>

< LI class=bol > < font size=+2> < A href=pogrom.htm>

щенок < B> Погромыч< /A> < /B> < /I> < /LI>

< /UL>

Тебе наверняка уже всё понятно: первый список < OL> мы оформили стилем класса sred, а во втором списке < UL> применили к каждому его элементу стиль соответствующего класса (mal для синички, sred для кошки и bol для щенка).

Обрати внимание, что тег, в котором записан атрибут class, необходимо закрыть.

4. И таким образом можно задавать оформление практически для любого тега. Но среди них есть один особенный – < A>, задание стиля для которого немного отличается от остальных:

c добавь в раздел описания стилей выделенные строчки:

< STYLE type=text/css>

H2{ text-align: center;

...

}

P{ text-indent: 3em;

...

}

A: link{ color: #ff00ff;

text-decoration: none;

}

A: hover{ color: #ffffff;

text-decoration: underline;

background: #ff00ff;

}

A: active{ color: #ff0000; }

A: visited{ color: 880000;

text-decoration: overline;

}

.mal{ font-size: 90%; }

.sred{ font-size: 110%; }

.bol{ font-size: 130%; }

< /STYLE>

Гиперссылки (тег < A>) могут находиться в четырёх состояниях, для которых мы и задаём оформление:

A: link – обычная гиперссылка;

A: hover – гиперссылка, над которой находится указатель мыши;

A: active – активная (в момент щелчка) ссылка;

A: visited – посещённая ссылка.

Здесь мы встретились ещё с двумя параметрами описания стиля:

text-decoration может принимать значения underline (подчёркнутый), overline (надчёркнутый), line-through (перечёркнутый) и none (неподчёркнутый);

background – цвет фона (он тебе уже знаком).

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

c убери из тега < BODY> атрибуты link и vlink – они теперь не нужны;

c посмотри страничку в браузере и если она выглядит примерно так, значит, всё сделано правильно:

5. У тебя, наверняка, возник огромаднейший вопрос – а зачем мы угрохали столько времени, если в результате страничка практически не изменилась? И действительно, затевать возню со стилями ради одной маленькой странички, возможно, не стоит. Но мы ведь создаём сайт и хотим, чтобы он был оформлен единообразно, не пытаясь каждый раз вспомнить, а как там мы оформляли заголовки. Поэтому теперь оформим теми же стилями другие странички нашего сайта. Как это сделать? Можно просто скопировать через буфер обмена содержимое тега < STYLE> из файла glav.htm в остальные файлы, а можно поступить иначе, что мы и сделаем:

c в папке my_site создай текстовый файл my_style.css и скопируй в него описание стилей из файла glav.htm; (всё, что находится между тегами < STYLE> и < /STYLE>, исключая сами эти теги):

H2{ text-align: center;

color: #ff0088;

font-style: italic;

...

A: visited{ color: 880000;

text-decoration: line-through;

}

.mal{ font-size: 90%; }

.sred{ font-size: 110%; }

.bol{ font-size: 130%; }

c в файле glav.htm вместо тега < STYLE> вставь выделенную строчку:

< HEAD>

< TITLE> Моя домашняя страничка< /TITLE>

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

< /HEAD>

c эту же строчку добавь во все остальные файлы твоего сайта и посмотри результат – теперь все странички оформлены в едином стиле.

Тег < LINK> указывает браузеру, что в файле, указанном в атрибуте href, находится описание стилей. И всё!

Такой способ задания стилей (во внешнем файле) называется присоединяемые стили, в отличие от вложенных стилей, которыми мы воспользовались вначале, поместив описание стилей в раздел < HEAD> с помощью тега < STYLE>.

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

За вот такое поочерёдное влияние на оформление странички и названы таблицы стилей каскадными или иерархическими.

6. Задание: задай в стилевом файле оформление для тега < BODY> (background, color, font-size). И не забудь убрать ненужные атрибуты этого тега в файлах.htm.

Так что же нам дают CSS? Прежде всего, это чёткость и единообразие страничек, достающиеся нам без особых затрат времени – достаточно один раз создать стилевую таблицу и затем она уже сама будет работать на нас. Во-вторых, применение CSS дисциплинирует web-дизайнера, ведь ему приходится заранее продумать стиль своего сайта и затем его придерживаться. В-третьих, представь, что через год, а то и сразу после создания, ты решишь что-то изменить в стиле своего сайта, например, все заголовки из розовых сделать синими. Достаточно будет всего лишь исправить стилевой файл – и все заголовки приобретут новый вид. При этом важно то, что стилевой файл (*.css) совсем необязательно должен находиться в той же папке, он может быть где угодно, просто в этом случае значением атрибута href будет его URL. В-четвёртых, мы получаем заметно больше возможностей для оформления страничек, причём познакомились мы с очень небольшой и не самой эффектной их частью. Но об этом мы сегодня говорить уже не будем…