- •Понятия и определения
- •Html - основа основ
- •Тэги html
- •Структура html-документа
- •Атрибуты тэгов
- •Гиперссылки и совершенствование внешнего вида текста
- •Картинки на страничке
- •Создание и оптимизация изображений для Web-сайта
- •Анимация изображений
- •Изображение и гиперссылки
- •Сложные таблицы
- •Изображения и таблицы
- •Стили и ссылки
- •Стили, классы, селекторы
- •Каскадные таблицы стилей
- •Группа параметров
- •Маркированные списки
- •Управление фреймами
- •Мета-тэги
- •Index - разрешена индексация индексных ( стартовых)страниц - обычно это - index.Html;
- •Заключение
Стили и ссылки
Применение стилей к ссылкам, поможет Вам зделать ссылки "живыми" и существенно усилить дизайн и навигацию по сайту. Пользователь будет видеть, какие ссылки он посетил, на какой ссылке он находится.
Стиль для ссылки имеет четыре основных группы:
A:LINK — Дизайн ссылки.
A:HOVER — Дизайн ссылки, на которую наведен курсор мыши.
A:ACTIVE — Активная ссылка
A:VISITED — Дизайн посещенной ссылки
Рассмотрим следующий код, в котором ссылка будет отображаться чернымм цветом и без подчеркивания, что достигается с помощью строчки: text-decoration: none. Толщина и цвет бордюра для обводки и подсветки текста ссылки задаются с помощью border:. К примеру thin solid Black; — означает, что бордюр тонкий, сплошной и имеет черный цвет. Остальное, в принципе, понятно: background: - означает фон текста ссылки.
Итак, код HTML-документа:
<html>
<head>
<title>Стили ссылок</title>
<style>
A:ACTIVE {border : thin solid Black;
background : Aqua;}
A:HOVER {border : thin solid Yellow;
background : Red;}
A:LINK {text-decoration: none; color : Black;}
A:VISITED {border : thin solid Green;
background : Red;}
</style>
</head>
<body>
<a href="#">Ссылка</a>
</body>
</html>
Сохраните его как test.html и посмотрите, что происходит с ссылкой. Источник: web-brodilka.ru
Стили
Стили — мощнейший инструмент HTML, существенно расширяющий Ваши возможности. Использование стилей чем-то схоже с применением атрибутов тэгов. Однако, возможности стилей выше:
Стили задаются сразу для всей страницы, следовательно, при необходимости не требуется изменять атрибуты значительного количества тэгов, а бывает достаточно поменять установку стиля.
Стили обладают большим набором параметров, позволяющих разрабатывать не только статический, но и динамический дизайн (изменение цвета ссылок при наведении курсора мыши и др.).
Стиль можно задать для конкретного тэга, что избавляет от необходимости указания большого числа атрибутов для каждого тэга, что особенно остро ощущается при использовании таблиц.
Стили устанавливаются в самом начале HTML-документа, в теле тэга <head>...</head>
<html>
<head>
<title>Пример использования стилей</title>
<style>
P: {COLOR: blue; FONT-SIZE: 11pt;
FONT-FAMILY: Arial}
</style>
</head>
<body>
<p>Дизайн этого текста задан с помощью стиля.
</body>
</hmtl>
Итак, из приведенного выше примера мы видим, что для всех тэгов <p> все необходимые атрибуты уже выставлены, но не посредством атрибутов данного тэга, а с помощью стилей. Применение стилей отнюдь не заменяет использование атрибутов тэгов, а предназначено для повышения мобильности Вашего сайта, уменьшения его размеров путем исключения повторяющихся атрибутов для часто применяемых тэгов.
Рассмотрим фрагмент кода:
<head>
<title>Пример использования стилей</title>
<style>
P: {COLOR: blue; FONT-SIZE: 11pt;
FONT-FAMILY: Arial}
</style>
</head>
Все стили (в нашем случае он один — для тэга <p>) помещаются в теле тэга <style>...<style>
Сами стиль с параметрами записываются в следующей последовательности:
Наименование тэга.
В фигурных скобках пишется параметр, далее двоеточие и значение (свойство) данного параметра
Точка с запятой, как разделитель, отражающий конец предыдущего и начало следующего параметра
В нашем случае для тэга <p> было указано три параметра:
COLOR: blue — задание цвета шрифта
FONT-SIZE: 11pt — размер шрифта
FONT-FAMILY: Arial — тип шрифта
Разумеется для тэга <p> помимо указанных трех, можно задать еще ряд параметров:
Параметр |
Возможные значения |
background-color: |
все доступные цвета |
font-weight |
bold, light, extra-light |
margin-left margin-right margin-top margin-bottom |
Значения отступа: слева справа сверху снизу |
text-align |
left, right, center |
text-indent |
смещение в процентах или пикселях |
text-decoration |
underline, italic, line-through |
В следующий раз мы подробнее рассмотрим возможности стилей.