Един от маркерите, които ще научите в началото на уеб дизайн образованието е двойка маркери, известни като „маркери за акценти“. Нека да разгледаме какви са тези тагове и как се използват в уеб дизайна днес.
Обратно към XHTML
Ако сте научили HTML преди години, много преди възхода на HTML5, вероятно сте използвали както получер, така и курсив тагове. Както бихте очаквали, тези тагове превърнаха елементите съответно в получер текст или в курсив. Проблемът с тези тагове и защо те бяха изтласкани в полза на нови елементи (което ще разгледаме скоро) е, че те не са семантични елементи. Това е така, защото те определят как трябва да изглежда текстът, а не информация за текста. Не забравяйте, че HTML (където ще бъдат написани тези тагове) е всичко за структурата, а не за визуалния стил! Визуалните изображения се обработват от CSS и най-добрите практики за уеб дизайн отдавна твърдят, че трябва да имате ясно разделение на стила и структурата на своите уеб страници. Това означава да не се използват елементи, които са несемантични и които детайлно изглеждат, а не структура. Ето защо смелите и
курсив етикетите обикновено са заменени със силни (получер) и ударение (курсив).и
Силните и акцентиращи елементи добавят информация към вашия текст, детайлизирайки съдържанието, което трябва да се третира по различен начин и да се подчертае, когато това съдържание се говори. Използвате тези елементи почти по същия начин, както бихте използвали удебелен шрифт и курсив в миналото. Просто обградете текста си с отварящите и затварящите тагове ( и за акцент и и за силен акцент) и приложеният текст ще бъде подчертан.
Можете да влагате тези маркери и няма значение кой е външният етикет. Ето няколко примера.
Този текст е подчертан и повечето браузъри ще го показват като курсив.
Този текст е силно подчертан и повечето браузъри ще го показват като получер шрифт.
И в двата примера не диктуваме визуален поглед с HTML. Да, външният вид на таг ще бъде курсив и би било удебелено, но този външен вид може лесно да бъде променен в CSS. Това е най-доброто от двата свята. Можете да използвате стиловете на браузъра по подразбиране, за да получите курсив или получер текст във вашия документ, без действително да пресичате линията и да смесвате структура и стил. Кажете, че сте искали това текст не само да е удебелен, но и да е червен, можете да добавите това към SCS.
силен {
цвят: червен;
}
В този пример не е нужно да добавяте свойство за получер шрифт, тъй като това е по подразбиране. Ако обаче не искате да оставите това на случайността, винаги можете да го добавите в:
силен {
шрифт-тегло: получер;
цвят: червен;
}
Сега ще бъдете почти гарантирани да имате страница с удебелен (и червен) текст навсякъде таг се използва.
Удвоете акцента
Едно нещо, което забелязахме през годината, е какво се случва, ако се опитате да удвоите акцента. Например:
Този текст трябва да съдържа и двете получер и курсив текст вътре в него.
Бихте си помислили, че този ред ще създаде област с текст, който е получер и ИЗ курсив. Понякога това наистина се случва, но виждаме, че някои браузъри почитат само втория от двата стила на ударение, този, който е най-близък до въпросния текст, и го показват само в курсив. Това е една от причините, поради които не удвояваме маркерите за ударение.
Друга причина да се избегне това „удвояване“ е за стилистични цели. Обикновено една форма на ударение е достатъчна, за да предаде тона, който искате да зададете. Не е необходимо да удебелявате, курсив, оцветявате, увеличавате и подчертавате текста, за да се откроява. Този текст, ще подчертае ли всички тези различни видове, ще стане невероятен. Затова бъдете внимателни, когато използвате маркери за подчертаване или CSS стилове, за да осигурите акцент и не прекалявайте.
Бележка за получер и курсив
Една последна мисъл - докато смелият () и курсив () етикетите вече не се препоръчват да се използват като акценти, има някои уеб дизайнери, които използват тези маркери, за да оформят вградени области от текст. По принцип те го използват като a елемент. Това е хубаво, защото таговете са много кратки, но използването на тези елементи по този начин обикновено не се препоръчва. Споменаваме го в случай, че го видите там на някои сайтове, които се използват не за създаване на удебелен или курсив текст, а за създаване на CSS кука за някакъв друг вид визуален стил.