Главная | Обратная связь

Урок 7: Ссылки в CSS

 

Наверное Вы не раз замечали на различных сайтах, как при наведении на ссылку меняется ее внешний вид. Ну например исчезает подчеркивание или меняется цвет. Это делает как-раз CSS , а именно за это отвечают псевдоклассы - классы, способные учитывать те или иные условия, при определении свойств html элемента.

Для ссылок бывает четыре псевдокласса:

 

A:link { ... стиль оформления обычной ссылки... }

A:active { ... стиль оформления ссылки в момент нажатия... }

A:visited { ... стиль оформления посещенной ссылки... }

А:hover { ... стиль оформления ссылки, на которую наведен указатель мыши ... }

 

Пример:

a:link {color: blue ;}

a:visited {color:gray;}

a:hover { color:red ; text-decoration:none;}

a:active {color:green; text-decoration:none;}

 

Вариантов оформления ссылки может быть множество, и каждый делает под конкретный дизайн что-то свое. Вот еще примерчик:

a:link {color: blue}

a:visited {color:gray}

a:hover {color:red ; text-decoration:none; font-weight:bold}

a:active {color:green; text-decoration:none; text-transform:uppercase}

 

Если для всех псевдоклассов стиль одинаковый, то это можно записать и короче:

a:link, a:visited, a:hover, a:active {color:black; text-decoration:none;}

 

А можно и вовсе без использования псевдоклассов:

a {color:black; text-decoration:none;}

 

 

Урок 8: Типы селекторов в CSS

 

Селектор служит для того, чтобы однозначно определить элемент в html документе, к которому мы хотим применить тот или иной стиль CSS .

Типы селекторов:

Селектор по элементу;

Селектор по классу;

Селектор по id;

Контекcтный селектор;

 

Селектор по элементу

До этого момента, работали именно с этим селектором. Т.е. в качестве селектора использовалось непосредственно имя html элемента , к которому мы хотели применить данный стиль. Т.е. написав класс например для параграфа(Р) , все параграфы на странице приобретали стиль данного класса.

P {font-family: arial, verdana, sans-serif; font-size: 12px}

 

Селектор по классу

Если необходимо сделать идентичные элементы в разных стилях, используется селектор по классу.

Для начала создаётся универсальный класс в CSS: сначала ставим точку, затем сразу, без пробела, пишем имя класса, ну а затем в фигурных скобках стиль:

.green {font-family: arial, verdana, sans-serif; font-size: 12px; color:green}

 

Применение данного стиля.

Допустим мы хотим применить данный стиль к определенному параграфу в документе. Вот как это будет выглядеть в html:

<p>Это обычный параграф , для него используется селектор по элементу </p>

<p class="green"> Этот параграф зеленый, т.к к нему применили класс </p>

<p class ="big_red" >А этот параграф большего шрифта и красный </p>

<p>Этот параграф снова обычный, по классу селектора элемента </p>

 

css:

p {font-family:arial,verdana,sans-serif; font-size:18px}

.green {color:green;}

.big_red{font-size:28px; color:red}

 

Как видите используется атрибут class со значением названия стиля.

Указываем сначала базовый стиль для всех параграфов(селектор по элементу), а потом уже, если хотим в каком-либо параграфе что-то изменить, создаем для него специальный стиль (селектор по классу) и присваиваем его этому параграфу. Когда мы создаем этот самый специальный класс, мы должны писать туда только те свойства, которые хотим добавить, или изменить, по отношению к базовому стилю для этого элемента.

 

Чтобы класс действовал только на определенный элемент(например параграф) нужно указать название элемента перед точкой:

P.green {color:green}

 

Селектор по id

Данный селектор применяется если необходимо выделить один единственный элемент , уникальный, отличный от всех остальных в документе. К примеру, выделим первый заголовок на странице определенным образом:

 

html- часть:

<Н1 id="firstheader"> Первый заголовок на странице </Н1>

 

css - часть:

H1#firstheader { color: red; font-weight: bold; text-align: center }

 

Как видите в html-части вместо атрибута class здесь употребляется атрибут id , а в css - вместо точки употребляется знак #.