Города Иркутска.
. . .
<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. В-четвёртых, мы получаем заметно больше возможностей для оформления страничек, причём познакомились мы с очень небольшой и не самой эффектной их частью. Но об этом мы сегодня говорить уже не будем…