Стилизиране на линкове 2
Сподели урока
Чрез прилагането на стил върху нашата уеб страница, ние всъщност я открояваме от всички останали страници в интернет. Дизайн, функционалност, съдържание, стил и всичко останало са фактори, които я правят различна. Създаването на подходящ стил е също толкова важно, колкото и добавянето на оригинално съдържание. В този урок ще разгледаме няколко CSS и HTML техники, чрез които ще положим основите за подобряване на стила на линковете в нашата уеб страница.
Структура на урока:
- Добавяне на HTML атрибут title
- Промяна на цвят, фон, размер, шрифт, рамка и декорация на линк
- Промяна на стил на линк при mouse hover
- Увеличаване на активното пространство на линк
Добавяне на HTML атрибут title
Атрубута title е един често използван атрибут, който служи за предоставяне на допълнителна информация към (почти) всеки елемент от уеб страницата. Обикновено, съдържанието на този атрибут се представя като “балонче”, което се показва при поставяне на курсора на мишката върху конкретния елемент. Балончето е видимо до момента, в който премахнем мишката от елемента. Следващата снимка показва работата на title.
Най-често, title атрибута се прилага към линкове (елемента <а>) като целта му е да предостави допълнителна информация за дестинацията на линка.
Title не е задължителен атрибут и използването му може да варира от линк до линк. Понякога самият текст на линка е достатъчно ясен и няма нужда от допълнително разяснение. Друг път показването на “балонче” може да разсея посетителя и да понижи доброто му преживяване в страницата (например при прилагане на title към линковете в главното меню). Като цяло ситуацията може да определи дали е необходимо добавянето на допълнителна информация или не.
Структура
Title атрибута се поставя в отварящия таг на желания елемент. Стойността му може да бъде само текст. Следващия пример показва използването на title в елемента <а>:
И все пак кога е добре да се използва title?
Като правило запомни, че title има за цел да подобри преживяването в страницата като предостави допълнитела информация за елемента. В никакъв случай title не е заместител на оригиналното и качествено съдържание. Когато имаш съмнение, че посетителя може би ще има нужда от допълнителна информация, за завършването на определена задача, тогава е точното време да му я предоставиш.
Пример:
- Когато от текста на линка не е напълно ясно къде ще го отведе. Добра идея е в този момент да обясниш с няколко думи дестинацията на линка;
- Когато текста е достатъчно ясен, но кликането върху него ще предизвика отварянето на нов прозорец. Това също е удобен момент да предупредим посетителя за тази евентуална промяна като добавим текст “Линка ще се отвори в нов прозирец”.
- Когато искаме да окуражим посетителя да извърши някакво действие. Например, на страницата ни има иконка на принтер, а при поставяне на мишката върху нея може да добавим текст “Принтирай тази страница”.
Това са само няколко примера, но ситуациите могат да бъдат безкрайно много.
Упражнение
Ще създадем една обикновенна html страница, която ще съдържа изображение и текстов линк. Линка ще води към Flickr страницата на автора заснел изображението. Към двата елемента ще приложим кратко описание с атрибута title.
Стъпка 1
Създай нов html документ и въведи следния код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Атрибут title</title> </head> <body> <h1>Упражнение на title</h1> <p><img src="hameleon.jpg" alt="Забавен хамелеон" title="Забавен хамелеон сливащ се с обстановката" /></p> <p><a href="http://www.flickr.com/photos/xjrlokix/2529980495/" title="Линк към снимката във Flickr">Благодарности на Ben Fredericson</a></p> </body> </html>
Стъпка 2
Страницата съдържа h1 заглавие последвано от два параграфа.
В първият параграф поставяме изображение, което се намира в една папка с html файла, затова в src атрибута въвеждаме единствено името на изображението последвано от файловото му разширение. В alt атрибута пък има кратък текст, който ще се покаже в случай, че снимката не успее да зареди. Title атрибута от своя страна съдържа текст, който ще бъде видим само когато посетителя сложи мишката върху снимката.
Вторият параграф съдържа текстов линк. В href атрибута въвеждаме адреса на страницата на фотографа във Flickr, а текста в title ни дава по-ясно описание на линка и евентуалното място, в което ще ни отведе.
Резултат:
Ако намираш затруднение в упражнението, не се колебай да зададеш своите въпроси в коментарите след урока.
Промяна на цвят, фон, размер, шрифт, рамка и декорация на линк
От урока “Прилагане на CSS чрез външен файл” научихме, че чрез CSS можем да контролираме стила на всеки елемент съдържащ се в <body> на нашата страница. В това число, разбира се, се включват и всички линкове.
По подразбиране браузъра прилага свой собствен стил върху всеки линк от нашата страница.
Всеки линк от своя страна има 4 ключови състояния, които трябва да се имат в предвид при прилагането на стил. Всички те могат да се контролират със CSS чрез т.нар. псевдо-класове (pseudo-classes). Тези състояния са:
- :link – Съответства на линковете, с които посетителя все още не е взаимодействал т.е. не е посетил страницата, към която линка би го отвел;
- :visited – Обратно на предишното. Съответсва на всички посетени линкове;
- :hover – Състояние, при което мишката е поставена върху линка (елемента);
- :active – Състояние, при което посетителя е кликнал върху линка, но е задържал бутона на мишката. Това състояние се активира в периода между кликването върху бутона на мишката и неговото освобождаване.
Визуално, стила на гореспоменатите състояния изглежда така:
Упражнение
Целта ни в следващото упражнение ще бъде да стилизираме нормалното състояние на линка като използваме псевдо-класа :link.
Стъпка 1
Ще се нуждаем от нов html документ, към който ще прикачим CSS файл. Кода в двата документа ще изглежда така:
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Промяна на стила на линк</title>
<link href="style.css" type="text/css"
rel="stylesheet" />
</head>
<body>
<h2>Промяна на стила на линк</h2>
<p><a href="#">Линк</a></p>
</body>
</html>
style.css
p a:link {}
Резултата до тук е следния:
Стъпка 2
Селектора, който използваме е p a, което значи, че селектираме всички <а> елементи (линкове) намиращи се в елемента <p> (параграф). Чрез псевдо-класа :link пък прихващаме първото състояние на линка. Нека въведем малко CSS.
Отвори файла style.css и въведи следния код:
p a:link {
background-color:#ffea82;
border-bottom:1px dashed black;
color:#006eb7;
font-family:Verdana,Arial,sans-sarif;
font-size:18px;
text-decoration:none;
}
Кода по-горе ще ни даде следния резултат:
Обяснение на декларациите:
- 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
Добра практика е по някакъв начин да променим стила на линка, в случаите когато поставим мишката върху него (т.нар. mouse hover). Това състояние е идеалната възможност да предоставим на посетителя мигновен отзвук на действиято му, което пък има за цел да подобри престоя му в страницата.
За да прихванем това състояние, ще използваме друг псевдо-клас - :hover. Той ни предоставя възможност да приложим специален стил само и единствено в случаите, когато мишката попадне върху конкретния елемент.
Упражнение
В html документа добави втори линк като копираш параграфа още веднъж.
index.html
<p><a href="#">Линк</a></p> <p><a href="#">Линк</a></p>
Сега отвори CSS файла, който създадохме в предишното упражнение, и добави следния код:
...
p a:hover {
background-color:#006eb7;
color:#ffea82;
}
При mouse hover променяме фона и цвета на текста. Тези две декларации презаписват декралациите поставени по-рано чрез селектора p a:link. Всички други остават непроменени.
Резултат:
Увеличаване на активното пространство на линк
<a> елемента принадлежи към групата на инлайн елементите (в урока Разлики между block и inline елементи можеш да научиш повече за тях), което значи че ширината и височината му се определят от съдържанието.
За активно пространство на един линк се счита пространството върху и около линка, което го прави активен. Обикновено това се забелязва, когато поставим мишката върху линка (mouse hover) и тя се промени на ръчичка показваща ни, че можем да кликнем върху него.
Когато активното пространство е прекалено малко, това прави линка труден за активиране (т.е. кликане върху него), защото е по-трудно да бъде уцелен. Понякога е добра идея изкуствено да се увеличи активното пространство, което да направи линковете по-достъпни.
Това може да се постигне изключително лесно чрез използването на CSS свойството padding.
Упражнение
Отвори CSS файла style.css и в селектора p a:link добави следната декларация:
p a:link {
...
padding:6px;
}
Стойността 6px прибавя допълнителни 6px към всяка от страните (горе, дясно, долу, ляво) на елемента <а>. Padding свойството ни позволява да увеличим/намалим вътрешното разстояние между ръба и съдържанието на избрания елемент.
Не се тревожи, ако в момента не разбираш всичко, padding свойството ще бъде тема на някой от бъдещите уроци.
В резултата виждаме много по-достъпни и лесни за уцелване линкове.
До тук разгледахме само няколко техники за стилизиране на линкове. Всъщност начините са безкрайно много, но общото между тях е, че са базирани върху използването на псевдо-класовете :link, :visited, :hover и :active.
Не се колебай да експериментираш в своята следваща уеб страница и се постарай да направиш стила ѝ уникален.
Ако имаш въпроси относно упражненията към урока или искаш да споделиш своя коментар, можеш да го направиш чрез формата след урока.
Използвани снимки
Снимка към урока: Mike Melrose
Снимка към упражненията: Ben Fredericson
Поздравления, това е краят на този урок!
За награда получаваш вкусен мъфин.
Хареса ли ти урока? Сподели го със света :)
1
Здравейте, може ли да попитам не разбрах защо се слага този адрес тук
и той променя ли се с нов документ? Аз изпозвам само това:
2
Преди няколко години официалния HTML стандарт беше обновен (т.нар. HTML5). Вече е задължително новите HTML документи да започват единствено с
Все още не съм обновил урока да следва този стандарт, затова примера започва по този начин.