Как да използвате CSS за стил на хипервръзки на уеб страници

Април 28, 2024

Ако сте запознати с HTML, знаете, че можете да контролирате цвета на текста и хипервръзките на уеб страница. Но с каскадни таблици за стилове можете да направите много повече. Определени тагове като хипервръзката котва за свързване имат това, което се нарича псевдокласове, свързани с различните състояния на маркера. Например, маркерът за хипервръзка има четири състояния; връзка, посетена, задръжте и активна

Когато дадена връзка не се използва (не е избрана), това е връзка псевдоклас или държава. Най- посетена състояние е след като връзката е била използвана. Най- мътя състояние е, когато мишката премине над връзката и активен състояние е, когато щракнете върху връзката. Магията на CSS е, че всяко състояние на връзката се контролира независимо чрез псевдокласове. Така че можете да зададете различни свойства за всяка държава. Можете да използвате всяко свойство, свързано с маркер за закрепване на хипервръзка в CSS.

В примера по-долу ще зададем състоянието на връзката на червено, посетеното състояние на лилаво (# 400040), курсора на движение и активните състояния на червено, подчертано и курсив.

Забележка--Стрелата

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

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

Уеб браузърите се различават по начина, по който се справят с това. Обикновено, ако зададете свойство на определена стойност, то ще бъде наследено от (предадено на) всички състояния, изброени след него. В нашия пример по-горе, първото състояние, изброено в нашия код, беше състоянието на връзката и зададохме свойството за цвят на червено. През повечето време това ще бъде предадено на другите три състояния, освен ако не го променим с код, както направихме за посетената държава. Освен това, ако не бяхме настроили текстовата декорация обратно да се подчертае, текстът за курсора и активните състояния нямаше да бъде подчертан, защото го изключихме в първото състояние. Но не можете да разчитате на всички браузъри да правят това. Следователно, най-добре е да зададете всички свойства за всяка държава поотделно.

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

Редът, в който изброявате кода за тези псевдокласове, се влияе от каскадния ред. Ще обсъдим реда за каскада в по-късен урок. За сега просто не забравяйте, че за да предотвратите конфликти, кодирайте състоянията в реда, който използвахме по-горе; връзка, посетена, задръжте и активна.

Инструкции Видео: How to use marquee tag in HTML(scrolling images and text in web page ) (Април 2024).

Как да използвате CSS за стил на хипервръзки на уеб страници, HTML, псевдокласове, свързани с различните състояния на маркера, псевдоклас, хипервръзка, кодиране на хипервръзки в CSS, псевдоклас CSS, състояния на CSS, състояние на таг, модни връзки на уеб страница с CSS, фантазирани връзки

Предишна Статия

Следваща Статия

Свързани Статии

компютри

Проектирайте шаблон за визитка в Photoshop CC

Април 2024

В този урок ще изградим шаблон за визитка в Photoshop CC. Ще използваме Artboards за организиране на дизайнерските слоеве за предната и задната страна на картата.Нека започнем със създаването на нов...

компютри

The Sims Средновековие

Април 2024

Вариант на класическия модел Sims, „The Sims Medieval“, съчетава симулацията на живота на Sims с по-насочен стил на игра, заложен във фентъзи свят на Ren-Faire. The Sims Medieval поставя играча под...