Присвоить класс css ссылке

Стили ссылок. Псевдоклассы

Для оформления гиперссылок используются встроенные стили, присваиваются классы и идентификаторы, т.е применяются те же методы оформления, что и к прочим тегам.

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

Как сделать ссылку блочной

Обойти это правило очень легко. Любой строчный элемент можно сделать блочным с помощью CSS.

/* CSS. Создаем классы и индексы для ссылки */ /* делаем ссылку блочной */ a.block_link {display: block;} /* плавающей (автоматически становится блочной */ a#float_link {float: left;} /* абсолютной (автоматически становится блочной */ а.absolut_link {position: absolute;}

После этого со ссылкой вида

a class="block_link" href="#/">Блочная ссылка/a>

можно обращаться как с блочным элементом.

href — обязательный атрибут. Если мы хотим чтобы ссылка никуда не вела, используем url #/ .При указании в качестве url # без слэша, будет осуществлен переход к началу страницы.

Псевдоклассы

Рассмотрим особенности отображения гиперссылок браузером (у разных браузеров возможны варианты):

— Цвет. Обычно браузеры отображают не посещенную ссылку синим цветом
— Подчеркивание
— При наведении на ссылку, вид курсора меняется
— При клике, цвет ссылки меняется на красный
— После посещения, цвет ссылки становится фиолетовым

При отображении гиперссылок большинство браузеров по умолчанию использует определенные стилевые правила.

Мы можем установить по умолчанию собственные правила для отображения ссылок. Например, выводить их более крупным и/или плотным шрифтом, задать цвет по-вкусу, применить курсив, убрать подчеркивание и многое другое.

Но что делать с изменением цвета при клике на ссылку, или после посещения?

Браузеры способны изменять внешний вид содержимого тега в зависимости от состояния. Управлять этими изменениями можно с помощью псевдоклассов
a:псевдокласс

Различают 4 специальных состояния гиперссылок.

1. a:link — не выбранная пользователем, непосещенная гиперссылка
2. a:visited — ссылка, посещенная ранее
3. a:hover — выбранная ссылка, на которую наведен указатель курсора
4. a:active — выбранная ссылка, в настоящий момент обрабатываемая браузером
   (при нажатии на кнопку мыши)
5. a:focus — ссылка, получившая фокус

Как сделать ссылку кнопкой

 a href="#/" class="link_button">Кнопка/a>

Псевдоклассы можно применять как непосредственно к тегу a , так и к классу ссылки

/*-- CSS. --*/ .link_button { padding: 4px 12px; border: 1px solid #CDECD3; background: #E9FFEE; border-radius: 6px; } .link_button:hover { background: black; color: #fff; } .link_button:active { color: red; }

Внимание специфичность!

Почему иногда псевдоклассы не работают?

Т.к все рассмотренные псевдоклассы имеют одинаковый приоритет, то следующий переопределяет предыдущий. Здесь важен порядок записи стилей.

«LoVe & HAte» — любовь и ненависть (Link, Visited, Hover, Active). Придерживайтесь указанного порядка, и все будет хорошо.

Источник

Классы и идентификаторы

Классы и идентификаторы облегчают обращение к элементам HTML из сценариев и таблиц стилей. Атрибут class может использоваться в одном или нескольких тегах и используется для стилизации. Но идентификаторы предназначены для обозначения одного элемента, т.е. один и тот же идентификатор никогда не должен использоваться дважды. Идентификаторы обычно используются с JavaScript и ссылками внутри документа и не рекомендуется в CSS. В этом разделе содержатся полезные пояснения и примеры относительно правильного использования атрибутов класса и идентификатора в HTML.

Присвоение класса элементу

Классы указывают признак для элементов. Используйте атрибут class , чтобы назначить класс элементу.

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

Использование классов в CSS

Классы могут использоваться для стилизации определенных элементов без изменения всех элементов данного типа. Например, эти два элемента span могут иметь совершенно разные стили:

Множество элементов могут иметь одинаковые классы и все они получат стиль, связанный с этим классом. Это всегда будет верно, если внутри CSS вы не укажете элемент. Например, у нас есть два элемента: оба с классом highlight:

Некоторый текст
 Некоторый текст

Если ваш стиль такой, как показано ниже, то оба элемента будут содержать зеленый текст:

Однако, если мы хотим только чтобы класс работал только внутри div, мы можем добавить конкретики, как показано ниже:

Тем не менее, при стилизации с помощью CSS обычно рекомендуется использовать только классы (например, .highlight), а не элементы с классами (например, div.highlight). Как и любой другой селектор, классы могут быть вложенными:

.main .highlight < color: red; >/* селектор потомка */ .footer > .highlight < color: blue; >/* дочерний селектор */

Вы также можете связать селектор классов только с элементами, имеющими определенную комбинацию из нескольких классов. Например, если это наш HTML:

Этот текст должен быть розовым

И мы хотим покрасить текст этого элемента в розовый цвет, то можем написать в CSS следующее:

Присвоение идентификатора элементу

Атрибут элемента id — это идентификатор, который должен быть уникальным во всем документе. Его цель состоит в том, чтобы однозначно идентифицировать элемент при ссылке на него, написании сценариев или стилизации (с помощью CSS).

У вас не должно быть двух элементов с одинаковым идентификатором в одном документе, даже если атрибуты привязаны к двум различным типам элементов. Например, следующий код неверен:

Браузеры сделают все возможное, чтобы выполнить этот код, но может возникнуть неожиданное поведение при стилизации или добавлении функциональности с помощью JavaScript.
Чтобы ссылаться на элементы по их идентификатору в CSS используйте префикс # перед идентификатором:

Чтобы перейти к элементу с идентификатором на заданной странице, добавьте # с id элемента в URL-адрес:

http://example.com/about#example-id

Эта функция поддерживается в большинстве браузеров и не требует дополнительной работы JavaScript или CSS.

Допустимые значения

Для идентификатора

Для HTML5 ограничениями на значение id являются:

1. он должен быть уникальным в документе
2. он не должен содержать пробелов
3. он должен содержать хотя бы один символ

Таким образом, значением могут быть все цифры, только одна цифра, только знаки пунктуации, включая специальные символы, все что угодно. Просто не должно быть пробелов. Таким образом, нижеследующие объявления являются допустимыми:

Также неверен нижеследующий код, если включен в один документ:

Для HTML 4.01 и ниже для значения id всегда должно начинаться с буквы, а остальными символами могут быть:

• латинские буквы (A-Z/a-z)
• цифры (0-9)
• тире («-«)
• подчеркивания («_»)
• двоеточия («:»)
• точки («.»)

В этом случае в вышеприведённом примере для HTML5, допустим только один вариант:

Другие примеры, допустимые в HTML 4.01 и ниже:

Для класса

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

А это совершенно нормально:

Как значения id и class обрабатываются вне HTML

Имейте в виду, что приведенные выше правила и примеры применяются в контексте HTML. Использование чисел, знаков препинания или специальных символов в значении i id и class может вызвать проблемы в других контекстах, таких как CSS, JavaScript и регулярных выражениях. Например, хотя в HTML5 допустим следующий идентификатор:

В CSS различные идентификаторы (включая имена элементов, классы и идентификаторы в селекторах) могут содержать только символы [a-zA-Z0-9] и символы из ISO 10646 U + 0080 и выше, а также дефис ( — ) и подчеркивание ( _ ); они не могут начинаться с цифры, двух дефисов или дефисов, за которыми следует цифра. ( 4.1.3 Characters and case )

В большинстве случаев лучше избегать символов, у которых есть ограничения или особый смысл.

Ссылки W3C

Дублирование идентификаторов

Наличие более одного элемента с одним и тем же идентификатором трудноустранимая проблема. Парсер HTML все равно попытается отобразить страницу и обычно ошибка не возникает. Но она легко может привести к неправильной веб-странице. В этом примере:

var html = document.getElementById("aDiv").innerHTML;

Источник