Как сделать сайт в программе Dreamweaver ?
Цвет текста ссылки.
Коды с данной страницы см.здесь - Сcылки. Тема № 5 - цвет текста ссылки.
Не путать с цветом ссылки!!!
Новые шрифты для сайта – качаем отсюда!
Добрались мы до темы ссылок! И сегодня займёмся цветом текста ссылки!
На самом деле, эта страница, посвящённая цвету текста ссылки, отличается от страницы цвета ссылки тем, что вместо background-color, используем color, вот и всё!
Но давайте всё по порядку!
- Изменить цвет текста ссылки
(т.е.
1.1. - Создадим новую, пустую, простую страницу, прикрепим к ней стили, в которых пропишем свойство цвета текста ссылки
1.2. – Изменим цвет текста ссылки на этой странице, к которой уже прикреплён файл css, в котором уже прописан цвет текста ссылки! Сейчас он такой)
- Изменить цвет текста ссылки через таблицу стилей css.
1.1.
Цвет текста ссылки без файла css.
Начнём с того, что нам понадобится для того, чтобы изменить цвет текста ссылки:
- Новая, простая, пустая страница.
- Код ссылки.
- Стиль, с прописанным в нём цветом ссылки.
<a href="#">Код цвета текста ссылки.</a>
Где:
<a href="#"> начало ссылки.
</a> - конец ссылки
# - сама ссылка.
"Код цвета текста ссылки" – текст ссылки.
<a>
Код стиля цветного текста ссылки.
<style type="text/css">
<!--
/* CSS Document */
a{
color: #F4F307;
font-size: 20px;
}
-->
</style>
Где:
color: #F4F307; - цвет текста ссылки, в данном случае - желтый.
font-size: 20px; - размер шрифта текста ссылки.
Вот так будет выглядеть код нашей страницы с приписанным цветом ссылки!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример цвета текста ссылки.</title>
<style type="text/css">
<!--
/* CSS Document */
a{
color: #F4F307;
font-size: 20px;
}
-->
</style>
</head>
<body>
<p><a href="#">Код цвета текста ссылки.</a></p>
</body>
</html>
Смотрим, как будет вынлядеть цветной текст ссылки
1.2.
Поменяем цвет текста ссылки на этой странице.
На этой странице уже прописан цвет текста ссылки. Но вот у нас возникла необходимость изменить, в какой-то части страницы цвет текста ссылки и далее мы займёмся именно этим!
Для этого создадим новый класс, который назовём:
Primer-ismenennogo-tsveta-texta-ssilki
Далее создадим ссылку и прикрепим к ней данный класс:
<p class="Primer-ismenennogo-tsveta-texta-ssilki"><a href="#" >Код цветной ссылки.</a></p>
В стилях опишем данный класс и вставим в данную страницу, сразу после тегов:
<style type="text/css">
<!--
/* CSS Document */
#rightPan .Primer-ismenennogo-tsveta-texta-ssilki a{
color: #F4F307;
font-size: 17px;
}
-->
</style>
Где:
#rightPan - id, - div в котором располагается даннsq ntrcn и мы обязаны прикрепить к нашему классу этот id.
Обращаем ваше внимание, что текст цвета ссылки изменился с чёрного на жёлтый.
А цвет вокруг текста не изменился, потому, что мы не изменили цвет ссылки или задний фон ссылки(background-color), назовите как хотите, на другой! И этот цвет заимствуется из файла css . Мы уже писали об этом здесь.
Свойство a:hover мы также здесь не меняли, поэтому когда вы наведёте мышку на ссылку, то она будет вести себя так, как это описано в файле css, для ссылок, для всего сайта. Об этом мы поговрим здесь.
Если очень быстро, чтобы вы не запаривались читать целую страницу,
то мы можем рассмотреть и замену осинового цвета(либо заднего цвета, либо фона, назовите, как хотите), на другой!
Создадим новый класс
.Primer-ismenennogo-tsveta-texta-ssilki-1
И в стиль добавим background-color – и цвет, ну , к примеру красный.
#rightPan .Primer-ismenennogo-tsveta-texta-ssilki-1 a{
color: #F4F307;
background-color: #F4F307;
font-size: 20px;
}
Код ссылки будет такой:
<p class="Primer-ismenennogo-tsveta-texta-ssilki-1"><a href="#" >Код цветной ссылки.</a> </p>
Вот, что у нас получилось:
2.
Цвет ссылки через css.
Для того, чтобы начать разговор о том, как изменить цвет текста через файл css, нужно сперва его создать, потом его прикрепить.
Вот только после этого мы можем приступить к изменению цвета текста.
В принципе, основное, что можно было рассказать на эту тему. Мы уже написали сверху!
Лишь мне остаётся напомнить, что css, бывает довольно капризный! И если вы только начали его изучать, то все будет намного проще, когда количество информации превратится в качество! (Законы диалектики, ещё никто не отменял!)
Код цвета текста ссылки у нас такой:
#rightPan a{
padding: 0 10px 0;
color: #2F5958;
background-color: #D3F1EF;
text-decoration: none;
font-size: 16px;
}
Где цвет ссылки описан вот этим свойством:
color: #2F5958;
Применение #rightPan связано с тем, что весь текст находится именно в этом div, к которому прикреплён этот id!
Вот и всё!
И на последок, вот наш цвет текста ссылки!
А теперь самое время развлечься!
Улучши поведенческий фактор на своём сайте!
Если понравится игра, то можно забрать код для своего сайта отсюда!