Студопедия

КАТЕГОРИИ:


Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)

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




...

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

 




Поделиться с друзьями:


Дата добавления: 2014-11-16; Просмотров: 413; Нарушение авторских прав?; Мы поможем в написании вашей работы!


Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет



studopedia.su - Студопедия (2013 - 2024) год. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав! Последнее добавление




Генерация страницы за: 0.022 сек.