Содержание:
- Ссылки
- Псевдоклассы
- фон
Ссылки
HTML тег a
С помощью html тега <A> создаются ссылки на сайте. Причем как внешние, так и внутренние. Тег a встречается на каждой странице сайта. Если бы его не было, то было бы очень затруднительно перемещаться по интернету, поскольку каждый адрес страницы (URL) пришлось бы писать вручную.
Синтаксис тега <A>
<a class="имя класса" target="параметр" title="подсказка" href="URL">анкор</a>
Обязательным параметром у ссылки является только href=»URL», т.е. адрес ссылки. Между открывающим тегом <a> и закрывающим тегом </a> пишется анкор ссылки.
Пример. Html код:
<body> <a href="http://zarabotat-na-sajte.ru/">как заработать на своем сайте</a> </body>
К открывающему тегу <a> можно прописывать различные атрибуты. Они являются не обязательными, но очень важными. Давайте рассмотрим их.
Атрибуты тега a
1) Атрибут target=»параметр», который может принимать следующие значения:
→ _blank — открывает страницу в новом окне
→ _self — загружает страницу в текущее окно
→ _parent — загружает страницу во фрейм-родитель
→ _top — отменяет все фреймы и загружает страницу в полном окне браузера
Пример
<body> <a target="_blank" href="http://iboard.kz/">доска бесплатных объявлений в Казахстане</a> </body>
В этом случае мы получим ту же ссылку, что и в первом примере, но перейдя по ней, страница откроется в новом окне.
2) Атрибут title=»подсказка» позволяет прописать подсказку, которая высветится при наведении курсора на ссылку.
Пример
<body> <a title="Подсказка для ссылки на главную страницу сайта" href="http://iboard.kz">как заработать на своем сайте</a> </body>
В данном случае подсказка высвечивается стандартным способом. Однако можно также сделать более красивую всплывающую подсказку: как сделать красивую всплывающую подсказку для ссылки.
3) Атрибут class=»название класса» задает класс для ссылки со стилями. О классах Вы уже знаете из предыдущего урока (стили в html). Для тега a стили имеют небольшие отличия.
Всё изученное в предыдущих уроках вы можете применять и для ссылок/links (например
изменять шрифт, цвет, подчёркивание и т. д). Новым будет то, что в CSS эти
свойства можно определять по-разному, в зависимости от того, посетили уже ссылку,
активна ли она, находится ли указатель мыши над ссылкой. Это позволяет добавить
интересные эффекты на ваш web-сайт. Для этого используются так называемые
псевдоклассы.
Что такое псевдокласс?
Псевдокласс позволяет учитывать различные условия или события при определении
свойств HTM-тэга.
Рассмотрим пример. Как вы знаете, ссылки специфицируются в HTML тэгом <a>.
В CSS мы также можем использовать a в качестве селектора:
a {
color: blue;
}
Ссылка может иметь разные состояния. Например, её уже посетили/visited или
ещё нет. Можно использовать псевдоклассы для установки разных стилей посещённых
и непосещённых ссылок.
a:link {
color: blue;
}
a:visited {
color: red;
}
Используйте |a:link| и |a:visited| для непосещённых и посещённых ссылок, соответственно. Активные ссылки имеют псевдокласс a:active, и a:hover, когда указатель — над ссылкой.
Мы рассмотрим каждый их этих четырёх псевдоклассов на примерах и с
объяснениями.
Псевдокласс: link.
Псевдокласс :link используется для ссылок на страницы, которые
пользователь ещё не посещал.
В примере кода непосещённые ссылки — синие.
a:link {
color: #6699CC;
}
Псевдокласс: visited
Псевдокласс :visited используется для ссылок на страницы,
которые пользователь посетил.
В примере кода посещённые ссылки — фиолетовые.
a:visited {
color: #660099;
}
Псевдокласс: active
Псевдокласс :active используется для активных ссылок.
В примере активные ссылки имеют жёлтый фон.
a:active {
background-color: #FFFF00;
}
Псевдокласс: hover
Псевдокласс :hover используется для ссылок, над которыми
находится указатель мыши.
Это можно использовать для создания интересных эффектов. Например, если мы
хотим, чтобы ссылки становились оранжевыми и курсивными при прохождении
указателя над ними, то наш CSS должен выглядеть так:
a:hover {
color: orange;
font-style: italic;
}
Эффект при нахождении указателя над ссылкой
Эффекты для положения указателя мыши над ссылкой стали уже общим местом. Мы рассмотрим несколько дополнительных примеров для псевдокласса :hover.
Пример 1a: Расстояние между буквами
Расстояние между
символами можно установить свойством letter-spacing. Это можно
применить для ссылки:
a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}
Пример 1b: UPPERCASE и lowercase
Свойство text-transform может переключать символы с верхнего на нижний регистр. Это также можно
использовать для создания эффектов на ссылке:
a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}
Эти два примера показывают почти безграничные возможности комбинирования
различных свойств. Вы можете создавать свои собственные эффекты — попробуйте!
Удаление подчёркивания ссылок
Обычный вопрос — как удалить подчёркивание ссылок?Вы должны точно определить, нужно ли убрать подчёркивание ссылок, так как это может значительно снизить использование вашего web-сайта. Люди привыкли видеть на web-страницах синие подчёркнутые ссылки и знают, что по ним нужно щёлкать. Даже моя мама знает это! Если вы уберёте подчёркивание и измените цвет ссылок, весьма вероятно, что это смутит пользователей и они не получат доступа ко всему содержимому вашего сайта web-сайт.
Вообще-то удалить подчёркивание ссылок очень просто. Свойство text-decoration
можно использовать для определения подчёркивания текста. Для удаления
подчёркивания просто установите в text-decoration значение none.
a {
text-decoration:none;
}
Альтернативно можно также установить text-decoration, наряду с
другими свойствами, для всех четырёх псевдоклассов.
a:link {
color: blue;
text-decoration:none;
}
a:visited {
color: purple;
text-decoration:none;
}
a:active {
background-color: yellow;
text-decoration:none;
}
a:hover {
color:red;
text-decoration:none;
}
В этом уроке вы узнали о том, что такое псевдоклассы, используя некоторые
свойства из предыдущих уроков. Это должно показать вам, какие возможности
заложены в CSS.
Цвет — color
В течение предыдущих уроков мы все время использовали свойство цвета — color. Это свойство задает цвет текста внутри элемента. Свойство color является наследуемым. Рассмотрим на примере, что это значит. Пусть у нас имеется html-страница со следующим кодом:
<html> <head> <title>css color (цвет)</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Заголовок</h1> <p>Здесь текст параграфа</p> Здесь просто текст </body> </html>
Зададим стиль для элемента body:
body{
color:green;
}
Теперь весь текст на странице зеленого цвета. Если мы захотим изменить цвет какого-либо элемента, то ему нужно будет задать свой стиль. Например, сделаем цвет заголовка красным:
body{
color:green;
}
h1{
color:red;
}
Теперь цвет заголовка красный, т.к. мы задали ему свойство color, а до этого он, как и все остальные элементы, был зеленым, потому что унаследовал свойство color от своего «предка» — элемента body. Таким образом, если у элемента не задано свойство color, то оно наследуется от элемента «предка». Если оно не задано и для предка, то будет осуществлен поиск вверх по дереву элементов, пока не будет найден элемент, для которого это свойство задано. Дерево элементов — структура всех элементов html-страницы, отражающая их вложенность друг в друга. Схематично дерево элементов для нашего примера выглядит так:
В нашем примере для элементов h1 и p предком является элемент body, для которого предком является элемент html. Это и есть принцип наследования.
Значениями свойства color могут быть именные цвета (red, blue…), шестнадцатеричные коды цветов (#FF0000) и десятичные коды цвета в модели RGB (rgb(255, 0, 0)). Итак, задать цвет текста для элемента можно тремя способами:
body{
color:green;
}
h1{
color:red;
}
h2{
color:rgb(255,0,0);
}
Фон
Фон — background На самом деле это группа свойств, так или иначе связанная с фоном. При помощи CSS фон можно задать не только странице, но и заголовку, и абзацу, и любому другому элементу. Пусть у нас есть html-страница с таким кодом:
<html> <head> <title>css background (фон)</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> Здесь содержимое документа </body> </html>
Рассмотрим группу свойств
background: background-color — задает цвет фона. По умолчанию не наследуется, но его можно сделать наследуемым, если в качестве значения указать значение inherit.
Пример:
body{
background-color:#243CED;
color:yellow;
}
Сейчас наша страница в браузере выглядит так:
background-image — задает фоновое изображение. Значением свойства является URL графического файла. Формат задания следующий: сначала идет обозначение функции url, а затем в круглых скобках указывается путь к файлу. Путь к файлу указывается относительно таблицы стилей.
Пример:
body{
background-image:url(picture.gif);
background-color:#243CED;
color:yellow;
}
Сейчас наша страница в браузере выглядит так:
В нашем примере страница стилей style.css лежит в той же папке, что и изображение picture.gif (об относительной адресации читайте на странице абсолютная и относительная адресация). Обратите внимание, мы задали оба свойства: background-image и background-color. Это рекомендуется делать на случай, если фоновое изображение по тем или иным причинам окажется недоступным. При задании обоих свойств фоновое изображение будет лежать поверх фонового цвета.
background-repeat — задает возможность повторения фонового изображения. В качестве фонового изображения может выступать как цельное изображение (например, шапка сайта), так и маленькое изображение, которое должно замостить собой все пространство элемента. Данное свойство как раз и указывает, повторять ли изображение и, если да, то как именно повторять. Возможны 4 варианта:
repeat — повторять изображение по горизонтали и вертикали.
repeat-x — повторять изображение только по горизонтали.
repeat-y — повторять изображение только по вертикали.
no-repeat — не повторять изображение.
По умолчанию используется значение repeat, как мы и убедились в предыдущем примере.
Давайте посмотрим как ведут себя остальные значения:
body{
background-image:url(picture.gif);
background-repeat:no-repeat;
background-color:#243CED;
color:yellow;
}
В браузере выглядит так:
body{
background-image:url(picture.gif);
background-repeat:repeat-x;
background-color:#243CED;
color:yellow;
}
В браузере выглядит так:
body{
background-image:url(picture.gif);
background-repeat:repeat-y;
background-color:#243CED;
color:yellow;
}
В браузере выглядит так:
background-attachment — указывает, должно ли фоновое изображение прокручиваться вместе с текстом элемента или оно должно оставаться неподвижным. Может принимать два значения:
scroll — фон прокручивается вместе с текстом. Это значение используется по умолчанию.
fixed — фоновое изображение фиксируется относительно окна браузера, и во время прокрутки текста оно остается неподвижным.
Пример:
body{
background-image:url(picture.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-color:#243CED;
color:yellow;
}
Результат действия значения fixed непривычно для пользователя, поэтому применяйте его только когда это действительно обоснованно.
background-size
background-size: [ <значение> | <проценты> | auto ]{1,2} | cover | contain
Значения
- <значение>
- Задает размер в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др.
- <проценты>
- Задает размер фоновой картинки в процентах от ширины или высоты элемента.
- auto
- Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.
- cover
- Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
- contain
- Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.
Если установлено одно значение, оно задает ширину фона, второе значение принимается за auto. Пропорции картинки при этом сохраняются. Использование двух значений через пробел задает ширину и высоту фоновой картинки.
background-position — задает расположение элемента относительно окна браузера. Значения можно задавать в процентах, в единицах длины и при помощи ключевых слов. Рассмотрим на примерах:
body{
background-image:url(picture.gif);
background-repeat:no-repeat;
background-color:#243CED;
background-position:10% 30%;
color:yellow;
}
Левый верхний угол изображения будет смещен на 10% от ширины окна по горизонтали и на 30% от выстоты окна по вертикали. Следует заметить, что это свойство по-разному воспринимается разными браузерами. Например, в IE7 наш пример будет выглядеть так:
А в Opera так:
Этой проблемы можно избежать, задавая размер в пикселах:
body{
background-image:url(picture.gif);
background-repeat:no-repeat;
background-color:#243CED;
background-position:50px 50px;
color:yellow;
}
Левый верхний угол изображения будет смещен на 50 пикселов по горизонтали и на 50 пикселов по вертикали:
body{
background-image:url(picture.gif);
background-repeat:no-repeat;
background-color:#243CED;
background-position:center top;
color:yellow;
}
Изображение будет выровнено по горизонтали — по центру, а по вертикали — по верхнему краю страницы:
Вообще, для выравнивания по горизонтали (первый параметр) можно использовать следующие ключевые слова: left (по левому краю), center (по центру) и right (по правому краю). Для выравнивания по вертикали (второй параметр): top (по верхнему краю), center (по центру) и bottom (по нижнему краю).
Сокращенная запись свойства background
В CSS для многих свойств существует сокращенная запись. В этом случае значения всех свойств перечисляются через пробел в произвольном порядке. Например, для последнего примера сокращенная запись будет выглядеть так:
body{
background:url(picture.gif) no-repeat #33CCFF center top;
color:yellow;
}
Вот мы и рассмотрели свойства цвета и фона. Помните, что их можно применять ко всем элементам. Для тренировки задайте фон для заголовка или ссылки.
OPACITY
Краткая информация
| Значение по умолчанию | 1 |
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Процентная запись | Неприменима |
| Ссылка на спецификацию | http://www.w3.org/TR/css3-color/#transparency |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
Описание
Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.
Синтаксис
opacity: значение
Значения
В качестве значения выступает число из диапазона [0.0; 1.0]. Значение 0 соответствует полной прозрачности элемента, а 1, наоборот — его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6.
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>opacity</title>
<style>
.semi {
opacity: 0.5; /* Полупрозрачность элемента */
}
</style>
</head>
<body>
<p>
<img src="images/igels.png" alt="Обычный рисунок">
<img src="images/igels.png" alt="Полупрозрачный рисунок" class="semi">
</p>
</body>
</html>
Результат данного примера:
Браузеры
Firefox до версии 3.5 поддерживает нестандартное свойство -moz-opacity.
Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100