На Главную
Статьи современных авторов
Художественные произведения
Библиотека
История Европы и Америки XIX-XX вв
Как мы делали этот сайт
Форум и Гостевая
Полезные ссылки
Статьи на заказ
|
Урок 12. Что делать, чтобы ссылки на странице были разной конфигурации
Допустим, вы хотите, чтобы в центральной части вашей страницы ссылки были более крупным шрифтом и выделялись одним цветом, а в боковых модулях ссылки были более мелким шрифтом и выделялись другим цветом. Например, на Главной странице нашего сайта ( Главная страница сайта "Литература и жизнь" ) ссылки в средней части - большого размера, а ссылки в боковых колонках - меньшего размера.
Для этого вам нужно задать другой стиль ссылок. Это очень просто делается с помощью стиля CSS.
1. Для начала вы задаёте название новым ссылкам, например "ro". И в вашем документе html, между тегами <head> </head> прописываете стиль для новых ссылок следующим образом:
Напоминаю вам, что:
a.link - означает неактивную ссылку
a.visited - означает посещённую ссылку
a.active - означает ссылку, на которую вы нажали
a.hover - означает ссылку, на которую вы только навели курсор мыши
<style type="text/css">
a.ro:link { text-decoration: none; font-size: 8pt; color: #1503fc;}
a.ro:visited { text-decoration: none; font-size: 8pt; color: #1503fc;}
a.ro:active { text-decoration: none; font-size: 8pt; color: #1503fc;}
a.ro:hover { text-decoration: none; font-size: 8pt; color: #fc0315;}
</style>
Значения text-decoration:
- text-decoration: none; - означает, что мы задаём ссылку без подчёркивания.
- text-decoration: underline; - означает, что ссылка будет подчёркнутая.
- text-decoration: underline overline; - подчёркнутая и надчёркнутая.
Цвет можно задавать словами. Пример: color: red;
Примечание: если задаёте цвет ссылки словами (green, red, blue и пр.) - то знак # не ставится.
Примечание: значения для ссылок вы задаёте такие, какие вам нужно.
2. Далее, в том месте документа html, в который вы будете ставить ссылки (например, в правый модуль) вы вписываете ссылку вместе с заданным в CSS классом:
<a class="ro" href="http://dugward.ru/" target="_blank"> Работающая ссылка другого размера и цвета </a>
На место моей ссылки "http://dugward.ru/" вы поставите ту ссылку, которая вам нужна, а на место надписи "Работающая ссылка другого размера и цвета" вы впишете нужную вам надпись. Теперь я вставлю стиль CSS для новой ссылки и две ссылки другого размера и цвета в правый модуль. Это будет выглядеть так:
<html>
<head>
<LINK REL=STYLESHEET TYPE="text/css" HREF="mystile.css">
<style type="text/css">
.p1
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-indent: 1.5em;
text-align: justify;
}
</style>
<style type="text/css">
a.ro:link { text-decoration: none; font-size: 8pt; color: #1503fc;}
a.ro:visited { text-decoration: none; font-size: 8pt; color: #1503fc;}
a.ro:active { text-decoration: none; font-size: 8pt; color: #1503fc;}
a.ro:hover { text-decoration: none; font-size: 8pt; color: #fc0315;}
</style>
<title> Наша первая страница </title>
</head>
<body bgcolor="#c0c0c0" background="f3.gif">
<table width="100%" cellspacing="0", cellpadding="0" border="3" VALIGN=top>
<td align="left">
<div id="logo"> </div>
</td>
<td WIDTH=200px>
<table width="100%" border="3" cellspacing="0", cellpadding="0" VALIGN=top>
<td>
<table width="100%" bgcolor=#e5e5e7 border="0">
<tr>
<td align="center" WIDTH=19px> <a href="http://dugward.ru/Sod.html"> <img src="pa1.jpg" border="0"> </a> </td>
<td align="left" VALIGN=top> <a href="http://dugward.ru/Sod.html"> Читать книгу </a> </td>
</tr>
<tr>
<td align="center" WIDTH=19px> <a href="http://septemberfox.ucoz.ru/publ/"> <img src="pa1.jpg" border="0"> </a> </td>
<td align="left" VALIGN=top> <a href="http://septemberfox.ucoz.ru/publ/"> Статьи </a>
</td>
</tr>
</table>
</td> </table>
</td>
</table>
<table width="100%" cellspacing="0", cellpadding="0" border="0">
<td WIDTH=200px VALIGN=top>
<table width="100%" cellspacing="0", cellpadding="0" border="3" VALIGN=top>
<td>
<table width="100%" bgcolor=#e5e5e7 border="0">
<tr>
<td align="center" WIDTH=19px> <a href="http://forum.dugward.ru"> <img src="pa1.jpg" border="0"> </a> </td>
<td align="left" VALIGN=top> <a href="http://forum.dugward.ru"> Форум </a> </td>
</tr>
<tr>
<td align="center" WIDTH=19px> <a href="http://lezione.dugward.ru"> <img src="pa1.jpg" border="0"> </a> </td>
<td align="left" VALIGN=top> <a href="http://lezione.dugward.ru"> Как мы делали этот сайт </a>
</td>
</tr>
</table>
</td> </table>
</td>
<td>
<table width="100%" body bgcolor=#e5e5e7 border="3">
<td align="center">
<table width="95%" border="0" VALIGN=top>
<td align="center">
<h1> Заголовок 1 </h1>
<h2> Заголовок 2 </h2>
<h3> Заголовок 3 </h3>
<h4> Заголовок 4 </h4>
<p class="nev"> Текст зелёного цвета, выровненный по ширине, с шрифтом 8pt </p>
<p class="p1">
Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. </p>
<p class="p1">
Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине.
</p>
<a href="http://dugward.ru/index.html" target="_blank"> Главная страница </a>
<a href=http://forum.dugward.ru/ target="_blank"> Форум сайта "Созвездие Близнецов" </a>
</td> </table>
</td> </table>
</td>
<td WIDTH=200px VALIGN=top>
<table width="100%" cellspacing="0" cellpadding="0" body bgcolor=#e5e5e7 border="2">
<td align="center" VALIGN=top>
<table width="95%" VALIGN=top>
<td align="center" VALIGN=top>
<a class="ro" href="http://dugward.ru/" target="_blank"> Главная страница сайта "Литература и жизнь" </a> <br>
<a class="ro" href="http://palmernw.ru/" target="_blank"> Сайт "Монастыри и храмы Северо-запада" </a>
</td> </table>
</td> </table>
</td>
</table>
<table width="100%" cellspacing="0" cellpadding="0" border="3">
<td align="center">
<p class="p1">
Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине.
</p>
<br>
А здесь вы поставите свои баннеры, если захотите
</td>
</table>
</body>
</html>
|
Зелёным цветом я обозначила вставку стиля CSS для новых ссылок.
Синим цветом я обозначила добавленный мной модуль, точно такой же, как стоит слева на странице, чтобы наши ссылки смотрелись более чётко.
Красным цветом я обозначила фрагмент с заданным классом ссылок и самими ссылками.
Теперь поставим готовый код на страницу - и получится вот что:
Наша первая страница с заголовками и ссылками двух разных видов, прописанными в стилях css
Как видите, в левом боковом модуле у нас получились ссылки другого цвета и размера, по сравнению со всеми остальными.
3. Если вы хотите, чтобы у вас были разные ссылки на нескольких страницах, то рентабельнее прописать параметры новых ссылок в документа CSS. Для этого вы открываете ваш документ CSS и в самом документе, к примеру после обычных ссылок, ставите и другой класс ссылок. Весь документ CSS будет выглядеть так:
BODY
{margin:0; padding:0; background:url('f3.gif ');}
div#logo { width:599;height:98px;background:url('http://dugward.ru/LM311.jpg'); top left no-repeat;}
P {color:#000000; text-align:justify; font-size:14pt;}
P.nev {color:#03fc15; text-align:justify; font-size:18pt;}
H1 {color:#000000; text-align:center; font-style:bold; font-size:20pt;}
H2 {color:#000000; text-align:center; font-style:italic; font-size:20pt;}
H3 {color:#000000; text-align:right; font-style:italic; font-size:12pt;}
H4 {color:#000000; text-align:center; font-family:Arial; font-style:italic; font-size:20pt;}
A:link {font-family: Arial; font-size: 13pt; COLOR: #090f1d;}
A:visited {font-family: Arial; Caption; font-size: 13pt; COLOR: #203b6a;}
A:active {font-family: Arial; Caption; font-style:italic; font-size: 13pt; COLOR: #0f233c;}
A:hover {font-family: Arial; font-size: 13pt; COLOR: #a0707e;}
a.ro:link { text-decoration: none; font-size: 8pt; COLOR: #1503fc;}
a.ro:visited { text-decoration: none; font-size: 8pt; COLOR: #1503fc;}
a.ro:active { text-decoration: none; font-size: 8pt; COLOR: #1503fc;}
a.ro:hover { text-decoration: none; font-size: 8pt; COLOR: #fc0315;}
|
Красным цветом я обозначила фрагмент, который вы добавляете для задания стиля новых ссылок. Теперь, если вы задали класс ссылок в документе CSS, вы уже в документах html класс для ссылок другой конфигурации не задаёте. Сами же ссылки другого класса в документах html при этом прописываются так же, как я показывала вам выше, в пункте 2:
<a class="ro" href="http://dugward.ru/" target="_blank"> Главная страница сайта "Литература и жизнь" </a> <br>
<a class="ro" href="http://palmernw.ru/" target="_blank"> Сайт "Монастыри и храмы Северо-запада" </a>
Желаю удачи!
Примечание: Помните, что классы рисунков и ссылок обозначаются только словами, а не цифрами, как в случае с заголовками текста (H1, H2, H3). Нужно писать наименование класса прописываемой в стиль CSS ссылки: "ro", или "moi", или ещё как-то, как пожелаете, а не "1", "2", или "3".
Урок окончен.
Перейти к Уроку 13
© М.В. Гуминенко. 2008 г.
|
