Подчертаване за блокови елементи като етикет

може да се направи по два начина. Например, задайте линията под текста по цялата ширина на блока, независимо от обема на текста. И също така подчертайте само текста. След това ще разгледаме и двата варианта.

Ред под текста по цялата ширина на блока

За да създадете линия под текста, трябва да добавите стиловото свойство border-bottom към елемента; неговата стойност е както дебелината на линията, така и нейния стил и цвят (пример 1).

Пример 1. Линия с пълна ширина

HTML5 CSS 2.1 IE Cr Op Sa Fx

Примерен текст

Разстоянието от линията до текста може да се коригира чрез добавяне на свойството padding-bottom към селектора H1. Резултат този примерпоказано на фиг. 1.

Подчертаване на текст

За да подчертаете само текста, трябва да използвате свойството text-decoration със стойността underline, като отново го добавите към селектора H1 (пример 2).

Пример 2. Ширина на ред към текст

HTML5 CSS 2.1 IE Cr Op Sa Fx

Примерен текст

Черното заглавие привлича вниманието, въпреки че е черно, а не бяло.

Резултатът от този пример е показан на фиг. 2.

Когато се използва свойството text-decoration, линията е твърдо свързана с текста, така че нейната позиция и стил не могат да бъдат определени.

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

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

В този пример ще премахнем подчертаването от връзките и след това ще ги добавим или премахнем при задържане на мишката.

Пример за HTML и CSS: как да премахвате и добавяте подчертавания от връзки

Описание на примера

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

Първоначално подчертаването на връзките е плътна тънка линия, притисната почти плътно до текста. И в повечето случаи тази опция е напълно достатъчна. Понякога обаче дизайнът изисква връзките да бъдат подчертани с пунктирана линия, а не с плътна линия, или разстоянието от подчертаването до връзките да е по-голямо от стандартното, или самото подчертаване да е по-удебелено. И понякога трябва да направите някакво екзотично подчертаване, например с вълнообразна или многоцветна линия. Всички тези опции ще бъдат разгледани в този пример.

Пример за HTML и CSS: Пунктирана връзка Подчертана

Описание на примера

1. Първо премахваме стандартното подчертаване от всички връзки, тъй като ще използваме нестандартни методи. След това добавяме долна граница към първата връзка с помощта на свойството CSS и я правим пунктирана. Това ще бъде нашето подчертаване. За да премахнем подчертаването, когато задържите курсора на мишката върху връзка, ние използваме псевдоклас и правим фона на рамката същия като фона на страницата, тоест просто го скриваме. На теория би било по-добре да направите фона на рамката прозрачен, но IE6 не разбира това значение.
2. С втората връзка правим същото като с първата, но просто начертаваме плътна линия. За да увеличим разстоянието от текста до подчертаването, ние даваме на връзката малко долно поле с помощта на свойството CSS.
3. Третата ни връзка има многоцветно подчертаване, така че ще го добавим с помощта на фоново изображение. За целта използваме малко изображение, което свързваме чрез CSS. Позиционирайте фона долна частвръзки (0 100%) и позволява да се дублира само хоризонтално (repeat-x). Подчертаната линия е готова, но е твърде близо до текста; за да поправим това, добавяме малък отстъп към връзката по-долу. Сега това е всичко.
4. В старите IE6 и IE7 може да има проблеми с показването на долната черта на първата и втората връзка. За да коригирате това, добавете свойството zoom :1, което включва т.нар оформление. Това свойство е невалидно и само тези браузъри го разбират, така че е по-добре да го активирате условни коментари.

Много често, за да създадете меню, трябва да направите не просто текстови връзки, а блокови връзки, в които активната област ще бъде както самият текст, така и определена област около него.

Описание на примера

1. За създаване на блокови връзки използваме CSS свойството :block, което ги превръща в блокови елементи, създавайки нов ред преди и след себе си. Ако не са необходими нови редове, можете да замените стойността с inline-block.
2. Тъй като нашите връзки вече са блокове, ако е необходимо, можем да променим тяхната ширина (CSS) или височина (CSS).
3. В този пример изобщо не посочваме височината на връзките, а просто им даваме вътрешна подложка (CSS), която разширява блоковете.

Описание на примера

1. Всичко е много просто - използвайки свойството CSS, добавяме желаната рамка към връзките под курсора. Все пак, имайте предвид, че добавяме точно същата рамка към обикновените връзки, но я правим със същия цвят като фона на страницата. Тоест ние просто скриваме рамката за момента. Това се прави така, че когато задържите курсора на мишката, връзките не започват да „скачат“ поради рисунката на рамката.

Вместо цветът на рамката да съответства на фона на страницата, той може да бъде настроен на прозрачен и да стане прозрачен, но както казах, IE6 не го обработва правилно.

Пример за HTML и CSS: Създаване на 3D връзки

Описание на примера

1. С помощта на свойството CSS добавяме рамки към връзките и с помощта им задаваме цвета им. В същото време посочваме светъл нюанс на цвета за лявата и горната граница и тъмен нюанс за долната и дясната. Именно благодарение на това разпределение на цветовете получаваме връзки, които приличат на триизмерни бутони.
2. За да изглежда, че бутоните се натискат, когато задържате курсора на мишката, ние обръщаме цветовете на границите на връзките с псевдоклас. За допълнителен ефект на щракване задайте относителното позициониране (CSS :relative) и направете отместване с един пиксел нагоре (CSS :-1px).
3. Е, за да направим всичко абсолютно красиво, задаваме цвета на текста и фона на връзките под курсора малко по-тъмен от обичайните. Готови.

В този пример ще направим връзки с икони, които ще съдържат не само изображения на тези икони, но и текст под тях. Въпреки това, в бъдеще можете лесно да ги промените и да оставите, например, само икони.

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

Описание на примера

1. За да съкратим кода, използваме два класа във връзките - „линкове“ (с общи свойства) и „изображение“, „аудио“, „видео“ (персонални за всяка връзка). Тази точка е описана подробно в класове CSS справка.
2. Нашите икони са с размер 50x50 пиксела и ще присъстват на връзките като фон (CSS), който ще центрираме в горната част (50% 0) и ще го предотвратим от репликиране (без повторение).
3. Добавяме подложка (CSS) към връзките, така че текстът в връзките да не залепва по краищата. В същото време правим горния отстъп равен на височината на иконите, така че текстът да не се припокрива с тях, защото нашите икони са фон.
4. Ако във връзките има много малко текст, тогава изображенията на иконите ще бъдат отрязани отстрани. За да предотвратим това да се случи, ние задаваме минимална ширина на връзките (CSS), така че да е поне равна на ширината на иконите. В нашия случай трябва да получим минимална ширина от 50px, но я задаваме на 40px, тъй като ще бъдат добавени още 10px поради страничната подложка.
5. За да работи минималната ширина, ние преобразуваме връзките във вградени блокове (CSS: inline-block).

IE6 ще трябва да „лекува“ малко:

1. IE6 не разбира свойството минимална ширина, но интерпретира свойството CSS като минимална ширина. Затова използваме прост за него хакванекоето ще реши този проблем.

В този пример ще закръглим ъглите на връзките, като използваме един от методите заоблени ъгли, описани в следващия подраздел. Няма да разглеждаме опцията с помощта на CSS 3, тъй като там всичко е много просто, но би било по-добре да направите закръгляния с помощта на изображения.

За да направите това, първо ще изрежем няколко празни изображения в два комплекта - за обикновени връзки и връзки под курсора. За нас ще се различава по наличието/отсъствието на сенки в изображенията.

абсолютно позициониране*/ отгоре: 0; /* нулево горно отместване */ ) .links:before ( content: url("images/left_bok.png"); /* ляво странично изображение */ ляво: 0; /* нулево ляво отместване */ ) .links:hover: преди ( съдържание: url("images/left_bok_hover.png"); /* изображение на лявата страна под курсора на мишката */ ) .links:after ( съдържание: url("images/right_bok.png"); /* изображение от дясната страна * / дясно: 0; /* нулево отместване вдясно */ ) .links:hover:after ( content: url("images/right_bok_hover.png"); /* изображение на дясната страна под мишката курсор */ )

Описание на примера

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

1. Използвайки свойството CSS :inline-block, ние правим връзки вградени блокове. По-специално, това е необходимо, за да можем да дадем на връзките точна височина, която съответства на височината на изображенията.
2. Премахнете подчертаването и центрирайте текста (CSS:center). По принцип в нашия случай не е необходимо да центрирате текста, тъй като връзките се приспособяват към размера на текста в тях и просто няма къде да се подравни. Но ако трябва да увеличите ширината на връзките (например до 150px), тогава това подравняване ще бъде полезно.
3. Да се ​​промени външен видвръзки, когато са под курсора на мишката - добавяме допълнителни селектори към стиловете с CSS псевдоклас, в който посочваме нашите части от изображенията, но без сянка.

За IE6 и IE7 свързваме допълнителни стилове с помощта на условни коментари, но променяме малко самия CSS код и го правим различен от използвания в начини за заобляне на ъгли:

1. Същността на промяната е, че с помощта на express ние интегрираме същите два тагова вътре във връзките, но само без атрибутите, съдържащи стилове. Вместо това добавяме класовете „left_bok“ и „right_bok“ към таговете и добавяме стилове за тях и ги записваме по-долу. Тези стилове са почти напълно същите като в основния CSS код, но тук всички изображения се използват като фон на таговете.

Заоблени ъгли на връзки (вариант две)

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

Описание на примера

Тук също няма да говорим за самото закръгляване, а само ще очертаем отличителните моменти.

1. Използвайки свойството CSS :inline-blok, ние преобразуваме връзките във вградени блокове. След това премахваме подчертаването от тях, добавяме рамка и подравняваме текста към центъра.
2. Тъй като псевдоелементите, с които закръгляме ъглите, се намират вътре във връзките, тяхното съдържание също е центрирано и следователно ъглите на картината, добавени от свойството CSS, не се поставят в ъглите, както ни е необходимо. За да коригираме това, добавяме :left към него, връщайки стойността, която браузърите използват по подразбиране.

Представям кратки фрагменти от CSS код (фрагмент) за прилагане на подчертаване на котви на връзки с плавно подчертаване при задържане.
Защо трябва да отделяте текста от общата бъркотия, не е ясно. Има голямо разнообразие от начини и видове дизайн на връзки, всичко е ограничено само от въображението на майстора.
С помощта на псевдокласа: hover и магията можете да прикачите почти всеки ефект към стандартни, скучно проектирани цианотични връзки.
Решенията, които ще бъдат обсъдени днес, не са нещо особено удивително или необичайно. Всичко е просто, без никакви специални звънци и свирки, просто подчертаване на връзката в цвят и лесна анимацияподчертаване на линии.

Ще опиша подробно само CSS кода, тъй като няма нужда да променяте или добавяте нищо от страна на Html.

CSS

Първо, с помощта свойства на височината на линията: инсталирайте разстояние между редоветев зависимост от основната линия на шрифта, вашето значение може да е различно. Нека направим връзката блокова връзка, вградена в текстовата структура, като зададем нейното свойство за показване на inline-block. Нека се отървем от стандартното подчертаване, като напишем text-decoration:none; и запълнете връзката с цвета, от който се нуждаем.

a (височина на линия: 1; дисплей: вграден блок; цвят: #ffeb3b; декорация на текст: няма; курсор: показалец;)

a (line-height: 1; display: inline-block; color:#ffeb3b; text-decoration:none; cursor: pointer; )

След това използваме псевдо елемента:after, за да можем да добавяме допълнителен елемент, в нашия случай това е линия и ще дефинираме прост ефект на преход в свойството за преход: . Първоначално ще зададем ширината на линията на нулева стойностширина: 0%; , височината се определя в 2px. Цветът на линията може да бъде всякакъв; в примера не бях твърде креативен и зададох цветовете на текста на връзката да съвпадат.

a: след ( дисплей: блок; съдържание: "" ; височина: 2px; ширина: 0%; цвят на фона: #ffeb3b; преход: ширина. 3s леко навътре-навън; )

a:after ( дисплей: блок; съдържание: ""; височина: 2px; ширина: 0%; цвят на фона: #ffeb3b; преход: ширина .3s леко навътре; )

Всичко, което остава, е да добавим малко движение към нашата връзка. За да направим това, използваме няколко псевдо-класа: hover и: focus. Първият ще определи стила на връзката при задържане, вторият ще работи, когато курсорът е поставен „плътно“ върху връзката. Тук ще променим стойността на ширината и ще я зададем на 100%.
Сега, когато задържите или фокусирате върху връзка, стилизирана подчертана линия ще се появи в окото на потребителя, плавно с едва забележимо забавяне, времето на което сме предпазливо дефинирали по-рано в свойството за преход: .

a: курсор: след, a: фокус: след (ширина: 100 %; )

a:hover:after, a:focus:after ( ширина: 100%; )

В резултат на това получаваме следната картина:

Целият сглобен код ще изглежда така:

a (дисплей: inline-block; цвят: #ffeb3b; line-height: 1; text-decoration: none; cursor: pointer;) a: after (background-color: #ffeb3b; display: block; content: ""; височина: 2px; webkit-transition: ширина .3s-навън; ширина .3s; ширина: 100% ;)

a (дисплей: inline-block; цвят:#ffeb3b; line-height: 1; text-decoration:none; cursor: pointer; ) a:after (background-color: #ffeb3b; display: block; content: ""; височина: 2px; -webkit-transition: width .3s ease-in-out; a:hover:after ( ширина: 100% )

Разбира се, това е само една от най-простите и скромни опции за дизайн на връзки. Експериментирайте повече, добавяйте цветове, използвайте анимация, движете се надясно или наляво, правете обърнати линкове, например и т.н., и т.н., основното е да не прекалявате, всичко трябва да е с чувство, смисъл и подредба .

Актуализация и допълнения от 22.10.2017г

В коментарите имаше въпроси за това как да направите подчертаване от центъра на текста на връзката, с плавно разтягане в страни. Ако има търсене, значи ще има и предлагане))).

Всичко е съвсем просто, просто трябва да добавите няколко нови свойства, тоест за основния елемент a, дефинирайте позиционирането като относителна позиция: относителна; , и за псевдоелемента a:after absolute position:absolute; с разстояние от левия край на родителския елемент вляво: 50%; , както и използване на свойството transform за определяне на хоризонталното изместване на елемента с определената стойност transform:translateX(-50%).

На изхода получаваме този резултат:

Всички сглобени css код, за плавно подчертаване на връзката от центъра, трябва да изглежда по следния начин:

a (дисплей: inline-block; цвят: #ffeb3b; line-height: 1; text-decoration: none; cursor: pointer; position: relative;) a: after (background-color: #ffeb3b; display: block; content : ""; позиция: абсолютна; -webkit-transition: width .3s-in-out; -webkit-transform: translateX(-50%) ; след , a: фокус : след ( ширина : 100% ; )

a ( дисплей: inline-block; цвят: #ffeb3b; line-height: 1; text-decoration: none; cursor: pointer; position: relative; ) a: after ( background-color: #ffeb3b; display: block; content : ""; позиция: абсолютна; преход .3s; преход .3s: translateX ; след, a:focus:after ( ширина: 100%; )

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

С най-добри пожелания, Андрей

Позволява ви да създавате различни подчертавания в HTML: подчертаване, надчертаване, текст през ред и т.н. Нека комбинираме тази функция с предишната и да получим:

Вторият ред показва как всичко е изписано в един ред с текст-украса.

text-decoration-style — стил на подчертаване на текста

Опцията определя външния вид на декоративната линия за връзката /. Новите указания за CSS добавиха вълнообразни и двойни стойности, така че вече има 5 от тях:

• плътна - плътна линия;
• двойно - двойно (от първия пример по-горе);
• пунктиран - състои се от последователност от точки;
• пунктиран - позволява ви да създадете пунктирано CSS подчертаване;
• вълнообразна - ефектна вълнообразна линия.

text-underline-position - CSS позициониране на подчертаване

Използвайки това свойство, можете да контролирате позицията на линията спрямо глифа на шрифта.
Налични са общо 4 опции:

• auto — намира се възможно най-близо до основната линия на текста;
• under - под най-долната граница на шрифта;
• ляво и дясно - ляво/дясно за публикации, показвани вертикално.

Ето визуална разлика между подчертаване на текст с помощта на under и auto:

Разликата според мен е доста очевидна.

text-decoration-skip - премахване на подчертаването за елементи

Използвайки тази опция, можете да отмените (пропуснете) декорацията на някои елементи в HTML ред. За по-добро разбиране валидни стойностипространства, обекти, кутия-декорация, ръбове, мастило Ще дублирам снимката от предишния пост:

Тоест, например, използвайки мастило, можете да направите долна черта в CSS, която няма да се пресича със знаците. Стойните обекти ви позволяват да пропускате вградени елементи (inline-block) - вмъкнете обхват и плътната линия ще се прекъсне на подходящото място:

Параметрите box-decoration, spaces, edges се поддържат много по-слабо от браузърите, така че техните резултати понякога се различават от очакваните. Ето състоянието на съвместимостта/поддръжката на декорация на текст към момента на писане:

Допълнителни трикове за подчертаване на връзки

Начинаещите потребители често питат някои типични въпросипо темата, затова решихме да разгледаме и тях. Общ примере най-долу след обясненията.

Как да премахнете подчертаването на връзката

a:hover (украса на текст: подчертаване;)

И двата примера по-долу ви позволяват да разберете логиката на това как работи задържането на курсора на мишката: или първоначално указвате подчертаване на връзката в CSS, а след това го премахвате при задържане на мишката, или обратното.

Ако имате други въпроси по темата, задайте ги в коментарите. Ще се опитаме да го разгледаме по-късно или ще ви дадем някои съвети в отговорите. Основното в този въпрос е практиката - опитайте да добавите различни свойства за опцията за декориране на текст директно в примерите или създайте свои собствени тестов файл. Надяваме се, че всичко стана ясно по темата за подчертаване на текст и връзки в CSS / HTML.

Оформлението на всеки информативен текст включва включването на семантични хипервръзки или котви. Тези елементи се добавят с помощта на маркера „a“ (anchor). Съвременни браузърипо подразбиране показва подобен елемент с Често дизайнерите на оформление или уеб дизайнерите предпочитат или да променят този стил, или да го премахнат напълно.

В някои случаи това е наистина необходимо. Например в плътен референтен блок, където ненужен дизайнсамо ще претовари възприятието и ще затрудни четенето на документа. В някои случаи обаче е подходящо да се поддържа разграничение между текст и връзки. Ако дизайнът на сайта напълно изключва такова форматиране, тогава си струва да използвате всеки друг тип подчертаване на такива елементи. Най-често срещаният вид разграничение днес е цветен контрасткотви в текста. Това е ефективно. Единственият малък недостатък на тази опция ще бъде проблемът с подчертаването на текст от хора, които не могат да възприемат различни цветове (цветна слепота). Но това е толкова нисък процент потребители, че може да бъде пренебрегнат.

Ако решите да премахнете подчертаването на връзките, тогава ще ви трябват известни познания за структурата на интернет страницата, а именно CSS.

Премахнете подчертаването на връзката от целия сайт

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

текст-декорация: няма;

Този малък ред ще премахне напълно подчертаването на всички елементи, написани с помощта на тага „a“ в целия сайт.

Но какво ще стане, ако нямате достъп до CSS файл?

В този случай е препоръчително да използвате тага Style в началото на документа. Работи по същия начин като CSS файл. За да приложите стилове, трябва да добавите конструкция в самото начало на документа (или HTML страницата), в която обичайните CSS правиластилове.

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

Премахнете подчертаването на връзката при задържане

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

текст-декорация: няма;

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

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

текст-декорация: няма;

текст-декорация: подчертаване;

Използване на идентификатори и класове

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

Има няколко варианта за решаване на този проблем.

Можете да премахнете подчертаването на връзките в ред. Въпреки че това е строго непрепоръчително от гледна точка на оптимизиране на сайта.

За да направите това, трябва да посочите параметъра Style директно в етикета за връзка:

Вторият вариант е по-приемлив.

Въвеждаме допълнителен клас или идентификатор в елемента и присвояваме необходимите стилове на тези селектори:

Класът се записва с точка преди името си:

None_decoration(

текст-декорация: няма;

Идентификаторът се обозначава със знака #:

#няма_декорация(

текст-декорация: няма;

Това правило важи както за CSS файла, така и за тага Style

Промяна на стила на показване на връзките в текста

Това също е доста лесно да се направи:

цвят :*посочете желан цвятвъв всеки формат (*червено, #c2c2c2, rgb (132, 33, 65)*)*;

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

Подмяна на стандартния стил

Една последна бележка. Вместо да отмените подчертаването CSS връзкидава възможност за подмяна стандартни стойностирегистрация За да направите това, просто заменете следните стойности в конструкцията за украса на текст:

text-decoration-style:

• Ако имате нужда от плътна линия, посочете стойността плътна.
• За вълнообразна линия - вълнообразна.
• Двойна линия - съответно двойна.
• Линията може да бъде заменена с последователност от точки - пунктирана.
• Подчертайте дума като пунктирана линия - прекъсната

Можете също да промените позицията на реда спрямо текста:

Конструкцията line-text-decoration-line може да приема следните стойности:

И цветът (да не се бърка с цвета на текста!):

text-decoration-line: (всеки цвят във всеки формат * червено, #c2c2c2, rgb (132, 33, 65)*).

За удобство и трите позиции могат да бъдат написани заедно в конструкцията:

текст-украса: червен, преминаващ, вълнообразен.