Как настроить css ссылок

Как с помощью css сделать ссылку красивой

В css , ссылки имеют привилегированное положение по сравнению с остальными элементами. Каскадные таблицы стилей предоставляют широкий набор средств для оформления ссылок. И было бы настоящим кощунством не использовать их на практике:

Преимущества использования CSS

Появление каскадных таблиц стилей ( CSS ) во многом упростило весь процесс разработки и оформления внешнего вида веб-страниц. Благодаря CSS объемы кода сильно сократились. Теперь стилевое решение можно прописать один раз, а затем применять его для нужных элементов.

В CSS доступ к стилевым описаниям реализован с помощью классов и селекторов. Многие прослеживают в этом проявление основных принципов объектно-ориентированного программирования.

Сравните объем кода с использованием каскадных таблиц стилей и без них:

Ссылки в CSS

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

• С помощью селектора элемента – при этом стиль ссылки задается селектором элемента а . Пример:

Описанный стиль будет применен ко всем ссылкам внутри страницы:

• Через селектор идентификатора – он задается внутри тега . А его стилевое описание располагается в блоке CSS внутри страницы или в отдельном файле каскадных таблиц стилей. В начале имени селектора ставится решетка. Пример:

Результат аналогичен предыдущему.

• Через селектор класса – для этого внутри тега в атрибуте class прописывается имя класса. В CSS перед его именем ставится точка. Пример:

С помощью всех этих трех методов можно легко установить цвет ссылки. Пример:

Таким же образом можно убрать подчеркивание ссылок. Для этого внутри селектора свойству text-decoration присваивается значение none . Пример:

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

Псевдо классом называется класс CSS , применяемый к стилю элемента в зависимости от его состояния ( активный, неактивный, при нажатии ).

В CSS различают несколько псевдо классов ссылок:

• A:link – задает стиль ссылки до посещения;
• A:visited – стиль после посещения;
• A:active – устанавливает, как будет выглядеть активная ссылка;
• A:hover – вид ссылки при наведении на нее курсора мыши.

A:link по своему действию аналогичен селектору элемента a ( оба задают внешний вид не посещенной ссылки ).

Пример, в котором подчеркивание ссылки и размер шрифта будут меняться в зависимости от ее состояния:

Как видно из приведенных примеров, с помощью css ссылкам можно придавать разнообразную форму и вид. И эти возможности намного обширнее, чем в html . Да и писанины c CSS намного меньше.

Источник

CSS: Оформление ссылок

Селекторы псевдо-классов

Псевдо-классы применяют стиль к элементам согласно их состоянию, которое может изменяться с помощью действий пользователя, а также может зависеть от расположения элемента в дереве документа. Селекторы псевдо-классов начинаются с двоеточия — » : » и обычно добавляются сразу же после селектора типа без дополнительных пробелов между ними:

Ссылки

Чаще всего селекторы псевдо-классов можно встретить, когда они применяются к ссылкам. Каждая ссылка может находиться в одном из четырех состояний: непосещённая, посещенная, активная (находящаяся под курсором мыши) и нажатая (удерживаемая кнопкой мыши). В CSS есть возможность стилизовать ссылку в каждом ее состоянии:

Приведенный выше код содержит четыре CSS правила. При этом в каждом из селекторов используется псевдо-класс. Первое правило задает цвет для ссылок, по которым пользователи еще не переходили, если пользователь перешел по ссылке, то будет использовано второе правило. Псевдо-классы :hover и :active динамически изменяют отображение ссылки: :hover стилизует ссылку только в то время, когда над ней находится указатель мыши, а :active только тогда, когда пользователь уже щелкнул по ссылке, но кнопка еще удерживается.

Псевдо-классы :hover и :active формально называют динамическими, поскольку они применяют стиль только при взаимодействии пользователя с соответствующими элементами путем наведения курсора мыши и щелчка по ссылке соответственно.

Примечание: :hover, помимо ссылок, можно использовать и с другими элементами, что позволяет создавать эффекты вроде подсветки строки таблицы при наведении на нее курсора мыши. Однако браузер IE6 и более ранние версии поддерживают использование данного псевдо-класса исключительно с элементами .

Подчеркивание ссылок

По умолчанию текст ссылок всегда отображается подчеркнутым. Используя свойство text-decoration вы можете либо совсем убрать подчеркивание ссылок либо сделать так, чтобы ссылка была подчеркнутой, только при наведении на нее курсора мыши.

Примечание: если подчеркивание ссылок отключается с помощью свойства text-decoration, то единственным визуальным отличием между ссылками и обычным текстом будет их цвет. Это может привести к тому, что пользователям может быть трудно отличить ссылки от текста.

Псевдо-классы :first-child и :last-child

Еще одним примером псевдо-классов являются :first-child и :last-child. Псевдо-класс :first-child ссылается на первый по порядку дочерний элемент обозначенного родителя, в отличие от него :last-child работает наоборот, он ссылается на последний дочерний элемент:

Поскольку первый абзац является первым дочерним элементом для

Источник

Основы работы со ссылками и границами

Учебник HTML CSS

Практика

Продвинутый курс

Практика

Адаптив

Продвинутые вещи

Практика

В данном уроке мы с вами продолжим изучать различные CSS свойства.

Блок . Свойство text-decoration

Свойство text-decoration позволяет задавать некоторые эффекты для текста: подчеркивание , перечеркивание , линию сверху , а также отменять такие эффекты, если какой-либо тег имеет их по умолчанию.

Чаще всего это свойство используются для отмены подчеркивания ссылок (они по умолчанию подчеркнуты).

Давайте посмотрим, какие значения может принимать свойство text-decoration.

Значение underline

Значение underline добавляет подчеркивание тексту:

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet.

Значение overline

Значение overline добавляет линию над текстом:

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet.

Значение line-through

Значение line-through добавляет линию, перечеркивающую текст:

Так код будет выглядеть в браузере:

Lorem ipsum dolor sit amet.

Значение none

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

В следующем примере ссылка по умолчанию будет подчеркнута, а вторая ссылка с id=»link» будет без подчеркивания, так как мы ей зададим text-decoration в значении none:

Так код будет выглядеть в браузере:

Блок . Состояния ссылок

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

К примеру, вот так — a:hover — мы поймаем состояние, когда на ссылку навели курсор мышки. В этот момент мы можем, к примеру, поменять цвет ссылки или убрать/добавить ей подчеркивание.

Конструкция :hover называется псевдоклассом. Псевдоклассы позволяют отлавливать разные состояния элементов.

Кроме :hover если еще псевдоклассы :link, которые отлавливают не посещенную ссылку, и :visited, которые отлавливают посещенную ссылку.

На некоторых сайтах с их помощью показывают пользователям, где они были, а где — нет.

Есть еще и псевдокласс :active, который отлавливает следующее состояние: на элемент нажали мышкой, но еще не отпустили.

В следующем примере для ссылки в состоянии :hover убирается подчеркивание, в состоянии :link будет красный цвет, в состоянии :visited — зеленый, в :active — голубой:

Так код будет выглядеть в браузере:

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

Псевдоклассы наследуют друг от друга. К примеру, если я уберу подчеркивание для состояния :link, то оно уберется для всех состояний.

Из-за наследования для корректной работы данные псевдоклассы следует размещать именно в таком порядке, как в примере: :link, :visited, :hover, :active (ненужные можно не писать). Этот порядок подчиняется следующему мнемоническому правилу: LoVe HAte.

Часто состояния :link и :visited объединяют вместе через запятую:

В таком случае можно их вообще и не указывать:

Блок . Сложные селекторы с учетом состояний ссылок

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

Давайте научимся обращаться к таким ссылкам.

Пусть у нас есть ссылки с классом .test и без него. Выберем только ссылки с этим классом:

Пусть у нас есть ссылки внутри блока с id test. Выберем только ссылки только из этого блока:

Если вам не очень понятно, как обращаться со ссылками, то специально для вас я снял следующее видео:

Здесь скоро появится видео по работе с состояниями ссылок.

Блок . Работа с границами на CSS

Сейчас мы с вами научимся добавлять границу элементам. Это делается при помощи трех свойств: свойство border-width задает толщину границы, border-color — цвет, а border-style задает тип границы.

Первые два свойства работают очевидным образом: border-color принимает цвета в том же формате, что и свойство color, а толщина границы может задаваться в любых единицах измерения (кроме процентов), чаще всего в пикселях.

А вот свойство border-style может принимать одно из нескольких значений: solid (сплошная линия), dotted (граница в виде точек), dashed (граница в виде черточек), ridge (выпуклая граница), double (двойная граница), groove (вогнутая граница), inset (рамка), outset (рамка) или none (отменяет границу).

Сделаем, к примеру, границу толщиной 3 пикселя, в виде точек, красного цвета:

Так код будет выглядеть в браузере:

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

Значение solid

Значение solid — сплошная линия:

Так код будет выглядеть в браузере:

Значение dotted

Значение dotted — линия в виде точек:

Так код будет выглядеть в браузере:

Значение dashed

Значение dashed — линия в виде тире:

Так код будет выглядеть в браузере:

Значение ridge

Значение ridge — выпуклая линия:

Так код будет выглядеть в браузере:

Значение double

Значение double — двойная линия:

Так код будет выглядеть в браузере:

Значение groove

Значение groove — вогнутая линия:

Так код будет выглядеть в браузере:

Значение inset

Значение inset — рамка:

Так код будет выглядеть в браузере:

Значение outset

Значение outset — рамка:

Так код будет выглядеть в браузере:

Блок . Свойство-сокращение для границ

Так же, как и для шрифтов, для границ тоже существует свойство-сокращение border, которое мы можем использовать вместо того, чтобы писать 3 разных свойства для толщины, цвета и типа границы. В свойстве border мы можем просто перечислить эти значения, их порядок при этом не важен. Смотрите пример:

Так код будет выглядеть в браузере:

Чаще всего гораздо удобнее пользоваться свойством-сокращением, чем отдельными свойствами.

Блок . Граница для отдельных сторон

Существуют также свойства-сокращения для отдельных сторон: border-left (левая граница), border-right (правая граница), border-top (верхняя граница), border-bottom (нижняя граница).

Давайте сделаем блоку только левую границу с помощью свойства border-left:

Так код будет выглядеть в браузере:

А теперь одновременно сделаем и левую, и правую границы:

Так код будет выглядеть в браузере:

Блок . Скругленные уголки

Сейчас мы с вами научимся скруглять уголки у границ. Это избавит наши сайты от некоторой угловатости и придаст им плавность линий.

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

Давайте скруглим уголки блоку, задав ему скругление в 10px:

Так код будет выглядеть в браузере:

Что означает то, что мы указали скругление в 10px? Это радиус круга, который можно вписать в это скругление. Если у вас нелады с математикой и вам не понятно последнее предложение — забудьте о нем и просто подбирайте скругление на глаз. При некотором опыте это сделать не проблема (измерительного инструмента для измерения скруглений не существует, по крайней мере я о таком не слышал).

Имейте ввиду, что border-radius не входит в свойство-сокращение border, это разные свойства, хоть и имеют похожие названия.

Блок . Разные скругления для разных углов

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

Четыре значения

Свойство border-radius может принимать 4 значения. Как в этом случае будут скругляться уголки — смотрите на следующем примере: border-radius: 10px 20px 30px 40px — 10px — верхний левый угол, 20px — верхний правый угол, 30px — нижний правый угол, 40px — нижний левый угол.

Смотрите, что у нас получится:

Так код будет выглядеть в браузере:

Два значения

Если же в border-radius написать два значения, то первое задаст скругление углов одной диагонали, а второе — другой.

Смотрите на примере:

Так код будет выглядеть в браузере:

Три значения

Ну, и наконец, если в border-radius написать три значения, то первое задаст скругление верхнего левого угла, третье — нижнего правого, а второе — скругление углов диагонали (двух оставшихся углов).

Смотрите на примере:

Так код будет выглядеть в браузере:

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Когда все решите — переходите к изучению новой темы.

Источник

Свойства ссылок

Для управления видом различных ссылок в CSS используются псевдоклассы, которые указываются после селектора A через двоеточие. В табл. 1 приведены допустимые псевдоклассы и их описания.

Табл. 1. Псевдоклассы при работе со ссылками

Свойство	Описание
A:link	Определяет стиль для обычной непосещенной ссылки.
A:visited	Определяет стиль для посещенной ссылки.
A:active	Определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее.
A:hover	Определяет стиль для ссылки при наведении на нее мышью.

Обычно использование псевдокласса link имеет тот же эффект, что и применение стиля к селектору A . Поэтому этот псевдокласс можно опустить.

Ссылки без подчеркивания

Одно из наиболее популярных применений CSS — это скрытие подчеркивания у ссылок. С позиции юзабилити не совсем верное решение, поскольку пользователь может сразу не догадаться, что текст, который он видит, является ссылкой. Все ведь уже привыкли — раз подчеркивание используется, значит это ссылка. Но при правильном применении отсутствие подчеркивания у ссылок может придать определенный эффект сайту. Часто делается, что при наведении курсора, ссылка становится подчеркнутой, меняет свой цвет или используется и тот и другой эффект одновременно (пример 1).

Пример 1. Подчеркивание у ссылки и изменение ее цвета

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

Подчеркнутые и надчеркнутые ссылки

Еще один пример демонстрирует использование в ссылках подчеркивания и надчеркивания одновременно. При этом эффекте тонкие линии будут появляться над и под ссылкой при наведении на нее курсора. Это достигается применением свойства text-decoration: underline overline в селекторе A:hover .

Пример 2. Использование подчеркивания в ссылках

Изменение размера ссылки

Пример 3 показывает, как изменять размер ссылки при наведении на нее курсора.

Пример 3. Изменение размера ссылки

Изменение цвета подчеркивания

Со ссылками, при помощи CSS, можно сделать интересную особенность. Цвет ссылки, при наведении на нее курсора мыши, остается неизменным, но зато у нее появляется подчеркивание другого цвета, нежели сама ссылка (пример 4).

Пример 4. Создание подчеркивание другого цвета

Ссылки разных цветов

Часто возникает необходимость на одной странице использовать ссылки разных цветов и размеров. И применять для каждой области веб-страницы ссылки подходящего типа. Одни для меню, другие для текста. В этом случае создаем два или больше класса со своими параметрами и применяем их по своему усмотрению. В примере 6 достаточно поменять значения у соответствующего класса, и цвета у ссылок, где этот класс используются, изменятся автоматически.

Пример 5. Ссылки разных цветов

Результат данного примера показан на рис. 1.

Источник