Стилизиране на линкове

Чрез прилагането на стил върху нашата уеб страница, ние всъщност я открояваме от всички останали страници в интернет. Дизайн, функционалност, съдържание, стил и всичко останало са фактори, които я правят различна. Създаването на подходящ стил е също толкова важно, колкото и добавянето на оригинално съдържание. В този урок ще разгледаме няколко CSS и HTML техники, чрез които ще положим основите за подобряване на стила на линковете в нашата уеб страница.

Структура на урока:

Добавяне на HTML атрибут title

Атрубута title е един често използван атрибут, който служи за предоставяне на допълнителна информация към (почти) всеки елемент от уеб страницата. Обикновено, съдържанието на този атрибут се представя като “балонче”, което се показва при поставяне на курсора на мишката върху конкретния елемент. Балончето е видимо до момента, в който премахнем мишката от елемента. Следващата снимка показва работата на title.

Показване на балонче при поставяне на мишката върху html елемент.

Най-често, title атрибута се прилага към линкове (елемента <а>) като целта му е да предостави допълнителна информация за дестинацията на линка.

Title не е задължителен атрибут и използването му може да варира от линк до линк. Понякога самият текст на линка е достатъчно ясен и няма нужда от допълнително разяснение. Друг път показването на “балонче” може да разсея посетителя и да понижи доброто му преживяване в страницата (например при прилагане на title към линковете в главното меню). Като цяло ситуацията може да определи дали е необходимо добавянето на допълнителна информация или не.

Структура

Title атрибута се поставя в отварящия таг на желания елемент. Стойността му може да бъде само текст. Следващия пример показва използването на title в елемента <а>:

Начин на използване на атрибута title.

И все пак кога е добре да се използва title?

Като правило запомни, че title има за цел да подобри преживяването в страницата като предостави допълнитела информация за елемента. В никакъв случай title не е заместител на оригиналното и качествено съдържание. Когато имаш съмнение, че посетителя може би ще има нужда от допълнителна информация, за завършването на определена задача, тогава е точното време да му я предоставиш.

Пример:

  • Когато от текста на линка не е напълно ясно къде ще го отведе. Добра идея е в този момент да обясниш с няколко думи дестинацията на линка;
  • Когато текста е достатъчно ясен, но кликането върху него ще предизвика отварянето на нов прозорец. Това също е удобен момент да предупредим посетителя за тази евентуална промяна като добавим текст “Линка ще се отвори в нов прозирец”.
  • Когато искаме да окуражим посетителя да извърши някакво действие. Например, на страницата ни има иконка на принтер, а при поставяне на мишката върху нея може да добавим текст “Принтирай тази страница”.

Това са само няколко примера, но ситуациите могат да бъдат безкрайно много.

Упражнение

Ще създадем една обикновенна html страница, която ще съдържа изображение и текстов линк. Линка ще води към Flickr страницата на автора заснел изображението. Към двата елемента ще приложим кратко описание с атрибута title.

Стъпка 1

Създай нов html документ и въведи следния код:

ИзчистенПрозорец
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.     <head>
  5.         <meta http-equiv="Content-Type" content="text/html; 
  6.             charset=utf-8" />
  7.         <title>Атрибут title</title> 
  8.     </head>
  9.     <body>
  10.         <h1>Упражнение на title</h1>
  11.         <p><img src="hameleon.jpg" alt="Забавен хамелеон" 
  12.         title="Забавен хамелеон сливащ се с обстановката" /></p>
  13.         <p><a href="http://www.flickr.com/photos/xjrlokix/2529980495/" 
  14.         title="Линк към снимката във Flickr">Благодарности на Ben Fredericson</a></p>
  15.     </body>
  16. </html>
Стъпка 2

Страницата съдържа h1 заглавие последвано от два параграфа.

В първият параграф поставяме изображение, което се намира в една папка с html файла, затова в src атрибута въвеждаме единствено името на изображението последвано от файловото му разширение. В alt атрибута пък има кратък текст, който ще се покаже в случай, че снимката не успее да зареди. Title атрибута от своя страна съдържа текст, който ще бъде видим само когато посетителя сложи мишката върху снимката.

Вторият параграф съдържа текстов линк. В href атрибута въвеждаме адреса на страницата на фотографа във Flickr, а текста в title ни дава по-ясно описание на линка и евентуалното място, в което ще ни отведе.

Резултат:

Предоставяне на допълнителна информация чрез атрибута title.

Ако намираш затруднение в упражнението, не се колебай да зададеш своите въпроси в коментарите след урока.

От урока “Прилагане на CSS чрез външен файл” научихме, че чрез CSS можем да контролираме стила на всеки елемент съдържащ се в <body> на нашата страница. В това число, разбира се, се включват и всички линкове.

По подразбиране браузъра прилага свой собствен стил върху всеки линк от нашата страница.

Всеки линк от своя страна има 4 ключови състояния, които трябва да се имат в предвид при прилагането на стил. Всички те могат да се контролират със CSS чрез т.нар. псевдо-класове (pseudo-classes). Тези състояния са:

  • :link – Съответства на линковете, с които посетителя все още не е взаимодействал т.е. не е посетил страницата, към която линка би го отвел;
  • :visited – Обратно на предишното. Съответсва на всички посетени линкове;
  • :hover – Състояние, при което мишката е поставена върху линка (елемента);
  • :active – Състояние, при което посетителя е кликнал върху линка, но е задържал бутона на мишката. Това състояние се активира в периода между кликването върху бутона на мишката и неговото освобождаване.

Визуално, стила на гореспоменатите състояния изглежда така:

Всяко състояние на линка има свой стил.

Целта ни в следващото упражнение ще бъде да стилизираме нормалното състояние на линка като използваме псевдо-класа :link.

Стъпка 1

Ще се нуждаем от нов html документ, към който ще прикачим CSS файл. Кода в двата документа ще изглежда така:

index.html

ИзчистенПрозорец
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.     <head>
  5.         <meta http-equiv="Content-Type" content="text/html; 
  6.             charset=utf-8" />
  7.         <title>Промяна на стила на линк</title>
  8.         <link href="style.css" type="text/css" 
  9.             rel="stylesheet" />
  10.     </head>
  11.     <body>
  12.         <h2>Промяна на стила на линк</h2>
  13.         <p><a href="#">Линк</a></p>
  14.     </body>
  15. </html>

style.css

ИзчистенПрозорец
  1. p a:link {}

Резултата до тук е следния:

h2 заглавие и текстов линк със стил по подразбиране.

Стъпка 2

Селектора, който използваме е p a, което значи, че селектираме всички <а> елементи (линкове) намиращи се в елемента <p> (параграф). Чрез псевдо-класа :link пък прихващаме първото състояние на линка. Нека въведем малко CSS.

Отвори файла style.css и въведи следния код:

ИзчистенПрозорец
  1. p a:link {
  2.     background-color:#ffea82;
  3.     border-bottom:1px dashed black;
  4.     color:#006eb7;
  5.     font-family:Verdana,Arial,sans-sarif;
  6.     font-size:18px;
  7.     text-decoration:none;    
  8. }

Кода по-горе ще ни даде следния резултат:

Добавяне на начален стил върху линк.

Обяснение на декларациите:

  • background-color:#ffea82; - определя фона на елемента. В урока Усвояване на CSS background (част 1) можеш да научиш повече за това свойство
  • border-bottom:1px dashed black; - поставя черна, прекъсната линия с 1px дебелина в долната страна на елемента
  • color:#006eb7; - променя цвета на текста
  • font-family:Verdana,Arial,sans-sarif – контролира шрифта на текста
  • font-size:18px; – променя размера на текста на 18px
  • text-decoration:nonе; – Стойността none премахва декорация, която браузъра прилага по подразбиране върху всеки линк. Повече за това свойство можеш да научиш в урока Стилизиране на текст чрез CSS

(Не се тревожи, ако не разбираш всички CSS свойства. Всички ще ги разгледаме в бъдещи уроци.)

Оттук насетне всеки следващ линк, който отговаря на избрания селектор, ще се приеме този стил. Пробвай го.

Интересно е да се отбележи, че останалите 3 състояния на линка също приеха стила поставен върху a:link. Единствената разлика е, че браузъра все още прилига върху текста цвета по подразбиране на посетените страници.

По същия начин по-горе можем да стилизираме и останалите 3 състояния.

Добра практика е по някакъв начин да променим стила на линка, в случаите когато поставим мишката върху него (т.нар. mouse hover). Това състояние е идеалната възможност да предоставим на посетителя мигновен отзвук на действиято му, което пък има за цел да подобри престоя му в страницата.

За да прихванем това състояние, ще използваме друг псевдо-клас - :hover. Той ни предоставя възможност да приложим специален стил само и единствено в случаите, когато мишката попадне върху конкретния елемент.

В html документа добави втори линк като копираш параграфа още веднъж.

index.html

ИзчистенПрозорец
  1. <p><a href="#">Линк</a></p>
  2. <p><a href="#">Линк</a></p>

Сега отвори CSS файла, който създадохме в предишното упражнение, и добави следния код:

ИзчистенПрозорец
  1. ...
  2. p a:hover {
  3.     background-color:#006eb7;
  4.     color:#ffea82;
  5. }

При mouse hover променяме фона и цвета на текста. Тези две декларации презаписват декралациите поставени по-рано чрез селектора p a:link. Всички други остават непроменени.

Резултат:

Динамична промяна на стила при mouse hover.

<a> елемента принадлежи към групата на инлайн елементите (в урока Разлики между block и inline елементи можеш да научиш повече за тях), което значи че ширината и височината му се определят от съдържанието.

За активно пространство на един линк се счита пространството върху и около линка, което го прави активен. Обикновено това се забелязва, когато поставим мишката върху линка (mouse hover) и тя се промени на ръчичка показваща ни, че можем да кликнем върху него.

Когато активното пространство е прекалено малко, това прави линка труден за активиране (т.е. кликане върху него), защото е по-трудно да бъде уцелен. Понякога е добра идея изкуствено да се увеличи активното пространство, което да направи линковете по-достъпни.

Това може да се постигне изключително лесно чрез използването на CSS свойството padding.

Отвори CSS файла style.css и в селектора p a:link добави следната декларация:

ИзчистенПрозорец
  1. p a:link {
  2.     ...
  3.     padding:6px;
  4. }

Стойността 6px прибавя допълнителни 6px към всяка от страните (горе, дясно, долу, ляво) на елемента <а>. Padding свойството ни позволява да увеличим/намалим вътрешното разстояние между ръба и съдържанието на избрания елемент.

Не се тревожи, ако в момента не разбираш всичко, padding свойството ще бъде тема на някой от бъдещите уроци.

В резултата виждаме много по-достъпни и лесни за уцелване линкове.

Чрез увеличаване на вътрешното разстояние, линка става по-достъпен.

До тук разгледахме само няколко техники за стилизиране на линкове. Всъщност начините са безкрайно много, но общото между тях е, че са базирани върху използването на псевдо-класовете :link, :visited, :hover и :active.

Не се колебай да експериментираш в своята следваща уеб страница и се постарай да направиш стила ѝ уникален.