Вредоносное ПО (malware) - это назойливые или опасные программы,...
CSS сноски
Нумеровать CSS сноски нет необходимости. Это сделано с помощью нумерованного списка и CSS счётчика. Также тут использована разметка HTML5.
В предыдущем уроке вы узнали о четырех состояниях, которые может принимать ссылка, а также о том, как стилизовать ссылки в этих состояниях, используя псевдоклассы. Сегодня мы поговорим о свойствах CSS, пригодных для использования со ссылками.
Современный CSS позволяет создавать для ссылок какой угодно внешний вид, главное, чтобы пользователь смог понять, что это. В зависимости от контекста, в котором находится ссылка, от ее назначения и от того, куда она ведет, можно определять для нее подходящий стиль.
Со ссылками работают самые разнообразные свойства: color , background , border , border-radius , text-decoration , padding и т. д. Мы покажем наиболее распространенные варианты оформления ссылок, после чего вы можете подумать, каким образом их дополнить либо изменить.
По умолчанию ссылка в браузере имеет синий цвет и подчеркивание снизу. Но встретить этот классический, приевшийся дизайн в наше время - большая редкость, поскольку стиль ссылки в 99.9% случаев переделывается. Подчеркнутые ссылки чаще всего можно встретить в тексте, а вот в навигационных меню подчеркивание, как правило, убирается.
Чтобы отменить дефолтный подчеркнутый стиль у ссылок, потребуется задать значение none для уже знакомого нам свойства text-decoration:
A { text-decoration: none; }
У многих пользователей ссылка ассоциируется с подчеркнутым текстом, поэтому если вы решили убрать подчеркивание, то стоит подумать над альтернативным способом очевидного обозначения ссылки. В противном случае есть риск ввести пользователей сайта в заблуждение. Например, ссылка в середине текста, которая не имеет подчеркивания и не выделена другим цветом, просто затеряется.
A { text-decoration: none; font-weight: bold; } a:hover { text-decoration: underline; } Ссылка подчеркнута, когда наведен курсор
Стандартное свойство text-decoration не поддается особой стилизации, поэтому веб-разработчики часто используют в качестве альтернативы свойство border . Управлять внешним видом границы гораздо легче: ей можно задать цвет, толщину, стиль полосы. Пример:
A { text-decoration: none; /* отменяем стандартное подчеркивание, * иначе будет две полосы */ border-bottom: 3px solid pink; /* добавляем нижнюю границу */ padding-bottom: 1px; /* делаем небольшое расстояние между текстом и границей */ } Создание подчеркивания с помощью свойства border-bottom
Согласитесь, такой вариант выглядит веселее с точки зрения возможностей. Не забывайте, что с помощью псевдокласса:hover можно изменить вид границы (и не только) при наведении курсора. А если при этом еще и задействовать CSS-анимацию, то из обычной ссылки может получиться настоящее произведение искусства! Убедитесь в этом сами, взглянув на несколько оригинальных способов выделения ссылок в CSS .
Ссылки позволяют добавлять к ним фон через уже изученное нами свойство background . И если обычный фоновый цвет для ссылки вряд ли удивит кого-либо, то с помощью фоновых рисунков можно добиться более интересных результатов. К примеру, можно сымитировать рукописное подчеркивание, а также разместить другую графику, задуманную в дизайне ссылки.
Как обозначить ссылки, которые открываются в новом окне/вкладке? Для этого поведения даже существует привычная иконка. Но добавлять ее через тег будет не очень хорошим тоном. Желательно, чтобы иконка открытия в новом окне появлялась автоматически, если у ссылки есть соответствующий HTML-атрибут target="_blank" . Здесь нам на помощь придет селектор атрибутов:
A { background-image: url(open-in-new-tab.png); background-position: center right; background-repeat: no-repeat; padding-right: 13px; } Ссылка с иконкой открытия в новом окне
В качестве фонового изображения мы задаем иконку, определяем ее расположение, отменяем дублирование фона и добавляем небольшой отступ от текста. Как видите, всё довольно просто, а посетитель уже проинформирован о поведении ссылки, и открытие новой вкладки/окна не станет для него неожиданностью.
Вот уж когда точно можно фантазировать, так это при создании стиля для ссылки в виде кнопки. Даже несмотря на то, что современный веб-дизайн отказался от объемных фигур с детальной прорисовкой в пользу плоских и простых форм, все равно вариантов оформления кнопок остается огромное множество.
Несколько примеров (чтобы просмотреть код CSS для каждого примера, кликните по изображению):
Код CSS для данного примера:
A { font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #ffffff; padding: 16px 26px; background: -moz-linear-gradient(top, #42aaff 0%, #003366); background: -webkit-gradient(linear, left top, left bottom, from(#42aaff), to(#003366)); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #003366; -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5); -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5); box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5); text-shadow: 0px -1px 0px rgba(000,000,000,0.7), 0px 1px 0px rgba(255,255,255,0.3); display: inline-block; text-decoration: none; } a:hover { background: -moz-linear-gradient(top, #42aaff 0%, #0d5aa7); background: -webkit-gradient(linear, left top, left bottom, from(#42aaff), to(#0d5aa7)); } a:active { background: -moz-linear-gradient(top, #003366 0%, #42aaff); background: -webkit-gradient(linear, left top, left bottom, from(#003366), to(#42aaff)); }
Код CSS для данного примера:
A { font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #fafafa; padding: 16px 26px; display: inline-block; text-decoration: none; border-radius: 3px; box-shadow: 0px 6px #27ae60; background: #2ecc71; } a:hover { background: #36d479; } a:active { position: relative; top: 6px; box-shadow: 0px 0px #23a33d; background: #23a33d; }
В этих примерах определены стили как для обычного состояния ссылки-кнопки, так и для состояний:hover (наведение) и:active (нажатие/удержание). Как видите, CSS позволяет имитировать внешний вид настоящей кнопки до мельчайших деталей.
Важно: чтобы иметь возможность подобным образом стилизовать ссылку, нужно заставить ее вести себя как блочный (block ) либо строчно-блочный элемент (inline-block ). Дело в том, что если вы будете добавлять отступы к строчному элементу (коим по умолчанию является ссылка), то не увидите никакого эффекта.
И . Также тут использована разметка .
Нумеровать CSS сноски нет необходимости. Это сделано с помощью нумерованного списка и CSS счётчика. Также тут использована разметка HTML5.
CSS сноски
Более простой способ только на HTML .
Более простой способ только на HTML.
Гиперссылка - базовый, основополагающий элемент не только любого сайта, но и Интернета в целом (без ссылок Интернет был бы чем-то иным). Гиперссылки окружают нас везде, наверное, поэтому веб-мастера начали относиться к оформлению ссылок халатно, а ведь гиперссылка - важнейшая, требующая к себе внимания вещь. В данной статье я решил подготовить для вас ряд советов и рекомендаций по оформлению ссылок (на основании оригинальной заметки про Designing Hyperlinks .
Но, вначале немного справочной информации:
Элемент может принимать несколько «состояний», определяемых псевдо-классами CSS:
Один из классических примеров:
Распространенные свойства CSS для оформления ссылок
Иногда веб-мастера используют довольно экзотические стили, что редко упрощает жизнь пользователю. Ссылка должна обязательно отличаться от остального текста, причем отличие это должно быть очевидным. Не обязательно делать это ярким «кричащих» образом, иногда просто достаточно выделить ссылку другим цветом. В целом новому пользователю должно быть сразу понятно, что это именно ссылка.
Нет ничего плохого в том чтобы использовать традиционные стилистические схемы для ссылок. Классический синий цвет гиперссылки широко узнаваем, при этом не обязательно оставлять синий цвет по умолчанию, можно запросто подобрать подходящий вашему сайту оттенок. Если веб-мастер делает ссылки, например, красными, не каждый пользователь сразу разберется что к чему, потому что такая ссылка может сойти за выделение. В таком случае можно, в принципе, добавить подчеркивание.
Кстати, по этой же причине не используйте стили предназначенные для гиперссылок к другим элементам, это так же породит путаницу. Если вы сильно отходите от классических схем, делайте это с толком (см. примеры ниже).
В обязательном порядке следует определять все псевдо-классы, хотя ссылки вполне будут работать если стили псевдо-классов не определены, поэтому веб-мастера часто их игнорируют. Не стоит забывать так же что, большое количество людей не используют мышь, поэтому даже о таком “ерундовом” состоянии как a:focus, забывать нельзя. В идеале желательно определить стиль для каждого из состояний. К тому же следует помнить, что по умолчанию разные браузеры имеют разное оформление для псевдо-клссов. Так, например, в Firefox:active и:focus выделяются с помощью серой рамки, в то время как в Google Chrome ссылки с:active идут без стиля, а:focus имеет рамку желтого цвета.
Ну и напоследок, несколько хороших примеров для подражания:
G4Tv
Демонстрирует массу «ссылочных» эффектов, гулять по сайту просто интересно!
Сarsonified
Очень четкие состояния a:hover. Пример для подражания!
Надеюсь, эти несколько примеров вдохновили вас на серьезное оформление ссылок! Главное в этом деле — не забывать о деталях (мелочах). Можно не создавать отдельные оригинальные эффекты для состояния наведения на ссылку (hover), а просто хотя бы изменить цвет. Не обязательно делать ссылки яркими и привлекающими внимание, достаточно просто «отделить их от текста». Ну и, конечно, проверяйте работу ссылок во всех браузерах.
P.S. Постовой. Вот, например, как раз по теме — интернет магазин парфюмерии Vanilla имеет очень красивый дизайн и продуманное оформление ссылок.
Чтобы сайт радовал посетителей дизайном и стабильно работал закажите хостинг у надежной хостинговой компании с хорошими ценами.
Крайне полезной для вебмастеров окажется статья где купить ссылки в биржах статей или ссылок — автоматических или с размещением навсегда.
Зачастую эта ссылка не слишком заметна. Специально ее искать будет лишь тот, кто сообразит, что статья не закончилась на втором-третьем абзаце, и есть там что-то еще. Чтобы как-то выделить данную ссыль, нужно ее соответствующим образом оформить. Но как это грамотно сделать? Ведь если заглянуть в код большинства шаблонов WordPress, то можно обнаружить, что текст данной ссылки как бы «зашит» в php-код вывода статьи. Вот в таком, например, виде:
Во-первых, у движка WordPress уже есть на сей счет заготовка в виде класса more-link . То есть, как бы вы не извращались с шаблоном, но сам движок в любом случае подставит к данной ссылке class="more-link" . И это очень полезная штуковина. Она говорит о том, что мы преспокойно можем использовать данный класс, просто добавив для него некоторый набор правил в лист стилей css нашей темы. По сути, нам остается лишь дописать в файле style.css шаблона что-то вроде:
More-link {
background: #ffc;
}
Но! Здесь есть небольшая засада. Дело в том, что слишком вольно с данной ссылкой мы обращаться не можем по одной простой причине: ссылка эта наследует все те правила, которые уже предопределены для ссылок в посте. Фон изменить можно, размер шрифта тоже можно. Но цвет ссылок уже не поменяешь. Кроме того, заменить текстовую ссылку картинкой - тоже задачка не из простых. Поэтому читаем другой способ.
Во-вторых, можно эту ссылку вынести вообще в отдельный блок, которому задать какие угодно правила отображения. Как это сделать? Леххко и непринужденно! Для начала в файле index.php немного исправим то место, где говорится о выводе содержимого статьи. Это все та же часть:
Здесь мы просто удалим все, что находится между одинарными кавычками и оставим вот такую запись:
Если за вывод текста отвечал какой-либо класс типа entry, то самое время здесь закрыть данный блок (ставим
Понятно, что картинка уже должна лежать в папке images вашего шаблона и иметь заданные размеры и название bg-more.gif .
Все просто! Если у вас есть другие варианты решения данной проблемы, буду рад услышать.
Между открывающим и закрывающим тегом могут содержаться строчные и строчно-блочные элементы, такие как: span, code, strong, img .. ,
а также перенос строки
Предупреждение!
Тег а может содержать несколько атрибутов. Наряду с общими для большинства тегов class, style, id , используется с некоторыми специфическими атрибутами.
URL (Uniform Resource Locator) - универсальный указатель ресурсов.
Значением href может быть любой допустимый абсолютный или относительный url, включающий идентификатор фрагмента или фрагмент кода JavaScript.
Не обязательный. Обычно этот атрибут использует 2 значения:
target="_self" - значение по умолчанию для тега a . Документ, на который указывает гиперссылка, должен быть отображен в том же окне.
target="_blank" - Документ, на который указывает гиперссылка, будет открыт в новом безымянном окне.
Необязательный атрибут. Позволяет определить текст, который вы сочтете нужным вывести на экран в виде подсказки, при наведении указателя на гиперссылку.
Значением атрибута является произвольная строка, заключенная в кавычки. Можно использовать для вывода названия документа, или при использовании вместе с атрибутом target="_blank" , вежливо предупредить, что документ откроется в новом окне
"откроется в новом окне" > "название изображения" / > </ a >Остальные атрибуты, при необходимости, вы можете посмотреть в справочнике. Они не так часто употребляются, поэтому здесь не рассматриваются.
путь/документ.html
Обычно в относительном URL имя сервера опущено, и указывается сокращенный адрес документа, который автоматически комбинируется с базовым адресом.
× Базовый URL
Должен быть определен в документе при помощи тега
Разберем как будет формироваться относительный URL, в зависимости от расположения файлов. Легче понять на примере.
Основной документ - ссылающийся документ в котором находится ссылка
Текущая папка - где расположен основной документ
Вложенная папка - внутри текущей
Соседняя папка - вместе с текущей, располагается в общей родительской
Родительская папка - внешняя по отношению к текущей
Цель-1</ a > "вложенная/цель-2.html" > Цель-2</ a > "../соседняя/цель-3.html" > Цель-3</ a > Цель-4</ a >Бывают и более сложные варианты с большим числом уровней вложенности.
Можно сформулировать несколько простых правил:
Если цель находится в другой папке текущего каталога (вложенной),
путь = имя_каталога/цель
Имя внешнего (по отношению к текущему) каталога не указывается, а в начале пути ставится 2 точки и слэш - ../ и далее путь
Если запрашиваемый документ находится на другом сервере, то необходимо указывать абсолютный URL
http://сервер/путь/документ.html
Самый обычный URL, наиболее часто применяемый в качестве цели гиперссылки. Выглядеть может вот так:
http://www.site-name.com
В общем виде данный тип имеет следующий формат: http://сервер:порт/путь
Путь
- это иерархическая последовательность, указывающаяся местоположение документа на сервере.
Одно или несколько имен, разделенных наклонной чертой. Все имена, кроме последнего - имена каталогов. Последнее имя - имя документа (по умолчанию веб-серверы принимает имя файла index.html)
Сервер - компьютерная система, хранящая и выдающая по внешнему запросу веб-ресурс и обладающая уникальным IP-адресом. Имя состоит из нескольких частей, включая собственное имя сервера и последовательность доменных имен, отделенных друг от друга точками.
Порт - (обычно может быть опущен, указывается редко) - номер коммуникационного порта сервера, через который подключается браузер клиента.
Файловый URL указывает на файл, хранящийся на компьютере, без регламентирования протокола, применяемого для его загрузки. Это позволяет вам загружать и выводить на экран локальный документ.
File://сервер/путь
File-сервер, как и http-сервер, должен быть доменным именем или IP-адресом компьютера, содержащего скачиваемый файл. Отличие - протокол соединения не указывается. Файловый сервер может быть неквалифицированным, но уникальным именем компьютера в личной сети, или устройством хранения информации.
Путь к запрашиваемому файлу на указанном сервере может различаться в зависимости от операционной системы на сервере
Указатель ресурса типа ftp используется для получения документов с FTP-серверов. В общем виде выглядит так:
ftp://пользователь:пароль@сервер:порт/путь;тип=код_типа
FTP
(Fail Transfer Protocol) - служба, требующая аутентификации. Значит для получения документа с сервера, вы должны быть зарегистрированным пользователем и знать пароль.
Многие FTP-серверы дают ограниченный доступ к своему содержимому всем желающим под логином - anonymous или quest, а порой и без всякого логина (подразумевается по умолчанию)
Никогда
!
Не помещайте ftp URL с именем пользователя и паролем ни в какой документ!
Браузер сам предложит вам их ввести после соединения с сервером
Сервер и порт указываются по тем же правилам, что и в http URL (если порт не указан, то по умолчанию назначается порт 21)
Путь - последовательность каталогов, разделенных символом наклонной черты, ведущей к запрашиваемому файлу.
Код_типа передачи - по умолчанию файлы передаются как двоичные. Если указать type=
d - название каталога
a - файл содержащий ASCII-текст
остальное смотрите в справочнике...
Для создания фрагмента применяется атрибут id , с помощью которого мы помещаем цель ссылки прямо в определяющий тег, например в заголовок.
Если бы фрагмент, созданный выше, находился на другой странице, например somepage.html, то адрес этой страницы должен быть включен в URL перед знаком #
Фрагмент на другой странице</ a >При использовании абсолютного URL, адрес формируется аналогично:
"http://site-name.com/somepage.html#Atribut_link" > Абсолютная ссылка на фрагмент </ a >Изображение по умолчанию является строчно-блочным элементом и может быть использовано как содержимое гиперссылки.
"Изображение-ссылка" / > </ a >В приведенном примере при клике на изображение в этом же окне откроется document.html
Если нужно, чтобы при клике открылось полноразмерное фото в новом окне, нужно в качестве цели указать адрес этого фото и добавить атрибут target .
</ a >Для оформления гиперссылок используются встроенные стили, присваиваются классы и идентификаторы, т.е применяются те же методы оформления, что и к прочим тегам.
Обойти это правило очень легко. Любой строчный элемент можно сделать блочным с помощью CSS.
/* CSS. Создаем классы и индексы для ссылки */ /* делаем ссылку блочной */ a.block_link { display : block ; } /* плавающей (автоматически становится блочной */ a#float_link { float : left ; } /* абсолютной (автоматически становится блочной */ а.absolut_link { position : absolute ; } Блочная ссылка</ a >можно обращаться как с блочным элементом.
Примечание
href - обязательный атрибут. Если мы хотим чтобы ссылка никуда не вела, используем url #/ .При указании в качестве url # без слэша, будет осуществлен переход к началу страницы.
Рассмотрим особенности отображения гиперссылок браузером (у разных браузеров возможны варианты):
- Цвет
. Обычно браузеры отображают не посещенную ссылку синим цветом
- Подчеркивание
- При наведении
на ссылку, вид курсора меняется
- При клике
, цвет ссылки меняется на красный
- После посещения
, цвет ссылки становится фиолетовым
При отображении гиперссылок большинство браузеров по умолчанию использует определенные стилевые правила.
Мы можем установить по умолчанию собственные правила для отображения ссылок. Например, выводить их более крупным и/или плотным шрифтом, задать цвет по-вкусу, применить курсив, убрать подчеркивание и многое другое.
Но что делать с изменением цвета при клике на ссылку, или после посещения?
Браузеры способны изменять внешний вид содержимого тега в зависимости от состояния. Управлять этими изменениями можно с помощью псевдоклассов
a:псевдокласс { набор стилевых правил;}
Различают 4 специальных состояния гиперссылок.
Внимание специфичность!
Почему иногда псевдоклассы не работают?
Т.к все рассмотренные псевдоклассы имеют одинаковый приоритет, то следующий переопределяет предыдущий. Здесь важен порядок записи стилей .
"L oV e & HA te" - любовь и ненависть (Link, Visited, Hover, Active). Придерживайтесь указанного порядка, и все будет хорошо.
Что можно делать с помощью только CSS без использования сценариев JavaScript и пр.
Секрет достаточно прост. Псевдокласс:hover позволяет управлять параметрами элементов, содержащихся в теге a , А он может содержать разные элементы, например изображение или текст.
Значит при наведении курсора на ссылку, содержащую определенный элемент, мы можем изменять цвет текста (color), видимость элемента (visibility: hidden|visible), управлять выводом элементов (display: none|block|inline|...), цветом фона, адресом фонового рисунка (background: цвет url(имя файла)) и т.п.
Этот элемент мы можем позиционировать абсолютно (position:absolute)! Он тут же выпадет из общего потока и прилипнет к верхнему левому углу ближайшего позиционированного родительского блока.
Остается лишь поместить элементы в нужную область содержащего позиционированного блока с помощью свойств left, top, right и bottom (более того, мы можем вынести элемент за пределы родительского блока, присвоив соответствующему из перечисленных свойств отрицательное значение), при необходимости, задав размеры, отступы и прочие параметры.
Вот и все. Создается визуальная иллюзия самостоятельности элемента.
Не забываем, что наш "независимый элемент" остается частью ссылки и при наведении на него курсора (если не отменен вывод) происходит то же, что и при наведении на ссылку. Это можно считать минусом рассмотренного метода. Немного смягчить столь явную связь ссылки с удаленным объектом можно, присвоив свойству cursor:default . По крайней мере, при наведении курсора на объект он будет выглядеть как обычный указатель.