Главная страница Случайная страница КАТЕГОРИИ: АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника |
Города Иркутска.
... < LI> < font size=+2> < A href=pogrom.htm> щенок < B> Погромыч< /A> < /font> < /B> < /I>. 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> синичка < B> Клава< /B> < /A> < /LI> < LI class=sred > < A href=dusja.htm> кошка < B> Дуся< /B> < /A> < /LI> < LI class=bol > щенок < 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. В-четвёртых, мы получаем заметно больше возможностей для оформления страничек, причём познакомились мы с очень небольшой и не самой эффектной их частью. Но об этом мы сегодня говорить уже не будем…
|