Выкарыстоўваць шрыфты, межы і малюнкаў Упрыгожыць навіны
Загалоўкі з'яўляюцца агульнымі для большасці вэб-старонак. На самай справе, амаль любы тэкставы дакумент, як правіла, маюць па крайняй меры адзін загаловак, так што вы ведаеце назву таго, што вы чытаеце. Гэтыя загалоўкі кадуюцца з выкарыстаннем HTML загаловак элементы - h1, h2, h3, h4, h5, і h6.
На некаторых сайтах вы можаце выявіць, што загалоўкі кадуюцца без выкарыстання гэтых элементаў. Замест гэтага, загалоўкі могуць выкарыстоўваць пункты з пэўнымі атрыбутамі класа, дададзеных да іх, або падкласаў з элементамі класа. Таму я часта чую пра гэта няправільнай практыцы з'яўляецца тое, што дызайнер «не падабаецца, як загалоўкі выглядаюць». Па змаўчанні загалоўкі адлюстровываюцца тлустым шрыфтам, і яны больш па памеры, асабліва h1 і h2 элементы, якія адлюстроўваюць ў значна большым памеры шрыфта, чым астатняя частка тэксту старонкі. Майце на ўвазе, што гэта толькі выгляд па змаўчанні гэтых элементаў! З дапамогай CSS, вы можаце зрабіць загаловак паглядзець, як вы! Вы можаце змяніць памер шрыфта, выдаліць тоўсты, і многае іншае. Загалоўкі належным чынам кадзіраваць загалоўкі старонкі толькі. Вось некалькі прычын, чаму.
Навошта выкарыстоўваць тэгі загалоўкаў Замест DIVs і стылізацыі
Пашукавікі Як загалоўкі тэгі
Гэта лепшая прычына, каб выкарыстоўваць загалоўкі, і выкарыстоўваць іх у правільным парадку (гэта значыць. H1, h2, то, тады h3 і г.д.). Пошукавыя сістэмы даюць найбольшы вага ў тэкст, які ўключаны ў тэгі загалоўкаў, таму што ёсць семантычнае значэнне гэтага тэксту. Іншымі словамі, шляхам маркіроўкі вашай старонкі ў загалоўку H1, вы скажыце робату пошукавіка, што гэта з'яўляецца # 1 фокус старонкі. H2 загалоўкі маюць # 2 акцэнт, і гэтак далей.
Вы Don & # 39; т павінны памятаць, якія класы, якія выкарыстоўваюцца для вызначэння вашых загалоўкаў
Калі вы ведаеце, што ўсе вашыя вэб-старонкі будзе мець H1 тлустым, 2em, і жоўты, то вы можаце вызначыць, што адзін раз у табліцы стыляў і зрабіць. 6 месяцаў праз, калі вы дадаеце яшчэ адну старонку, вы проста дадаць H1 тэг у верхняй частцы старонкі, вы не павінны вярнуцца на іншыя старонкі, каб даведацца, што ID стыль ці клас, які вы выкарыстоўвалі для вызначэння асноўнай загаловак і падзагалоўкі.
Яны забяспечваюць трывалую Outline старонкі
Контуры зрабіць тэкст лягчэй чытаць. Вось чаму большасць амерыканскіх школ вучаць студэнтаў пісаць план, перш чым яны пішуць паперы. Калі вы выкарыстоўваеце тэгі загалоўкаў у фармаце структуры, тэкст мае выразную структуру, якая становіцца відавочнай вельмі хутка. Акрамя таго, ёсць інструменты, якія можна прагледзець схему старонкі, каб забяспечыць кароткі агляд, і яны належаць на тэгі загалоўкаў для структуры контуру.
Ваша старонка будзе мець сэнс нават са стылямі выключаны
Не кожны можа праглядаць або выкарыстаць табліцы стыляў (і гэта вяртаецца да # 1 - пошукавыя сістэмы праглядаць змесціва (тэкст) вашай старонкі, а не табліцы стыляў). Калі вы выкарыстоўваеце тэг загаловак, вы робіце вашы старонкі больш даступнымі, паколькі загалоўкі падаюць інфармацыю пра тое, што DIV тэг не будзе.
Гэта карысна для чытання з экрана і даступнасці сайта
Правільнае выкарыстанне загалоўкаў стварае лагічную структуру дакумента. Гэта тое, што чытачы экрана будуць выкарыстоўваць «чытаць» сайт для карыстальніка з парушэннем зроку, што робіць ваш сайт даступным для людзей з абмежаванымі магчымасцямі.
Стыль тэксту і шрыфта на Headlines
Самы просты спосаб адысці ад «вялікай, смелай і выродлівай» праблемы тэгаў загалоўкаў, каб стыль тэксту так, што вы хочаце, каб яны выглядалі. На самай справе, калі я працую на новым вэб-сайце, я звычайна пішу абзац, h1, h2, h3 і стылі перш за ўсё. Я звычайна прытрымлівацца толькі сямейства шрыфтоў і памер / вага. Напрыклад, гэта можа быць папярэдняй табліца стыляў для новага сайта (гэта толькі некаторыя прыклады стылі, якія могуць быць выкарыстаны):
Цела, HTML {маржа: 0; абіўка: 0; } {Р шрыфта: 1em Арыяна, Жэнева, Helvetica, без засечак; } H1 {шрыфт: тоўсты 2em "Times New Roman", Times, з засечкамі; } H2 {шрыфта: тоўсты 1.5em "Times New Roman", Times, з засечкамі; } H3 {шрыфт: тоўсты 1.2em Arial, Geneva, Helvetica, без засечак; }Вы можаце змяніць шрыфты загалоўкаў ці змяніць стыль тэксту ці нават колер тэксту . Усё гэта ператворыць ваш «пачварны» загаловак ў нешта больш энергічна і ў адпаведнасці з вашым дызайнам.
h1 {шрыфта: тоўсты курсіў 2em / 1em "Times New Roman", "MS Serif", "Нью-Ёрк", засечак; Маржа: 0; абіўка: 0; колер: # e7ce00; }Межы могуць прыбрацца навіны
Межы выдатны спосаб палепшыць свае загалоўкі. А мяжы лёгка дадаць. Але не забывайце эксперыментаваць з межамі - вам не патрэбна мяжа на кожным боку вашага загалоўка. І вы можаце выкарыстоўваць больш чым проста сумныя мяжы.
h1 {шрыфта: тоўсты курсіў 2em / 1em "Times New Roman", "MS Serif", "Нью-Ёрк", засечак; Маржа: 0; абіўка: 0; колер: # e7ce00; мяжы зверху: цвёрды # e7ce00 асяроддзя; мяжа дно: пункцірнай # e7ce00 тонкія; шырыня: 600px; }Я дадаў верхнюю і ніжнюю мяжу на мой ўзор загалоўка, каб ўвесці некаторыя цікавыя візуальныя стылі. Вы можаце дадаць мяжы ў любым выпадку, што вы хацелі дасягнуць стыль дызайну вы хочаце.
Дадаць фонавыя выявы ў вашы загалоўкі для яшчэ большага Pizazz
Многія вэб-сайты маюць раздзел загалоўка ў верхняй частцы старонкі, якая ўключае ў сябе загаловак - як правіла, назва сайта і графікі. Большасць дызайнераў думаць пра гэта як два асобных элемента, але вы не павінны. Калі малюнак ёсць толькі ўпрыгожыць загаловак, то чаму б не дадаць да стыляў загалоўкаў?
h1 {шрыфта: тоўсты курсіў 3em / 1em "Times New Roman", "MS Serif", "Нью-Ёрк", засечак; фон: #fff URL ( "fancyheadline.jpg") паўтарыць-х знізу; абіўка: 0.5em 0 90px 0; выраўноўвання тэксту: цэнтр; Маржа: 0; мяжа дна: цвёрды # e7ce00 0.25em; колер: # e7ce00; }Хітрыкі гэтага загалоўка з'яўляецца тое, што я ведаю, што маё малюнак 90 пікселяў ў вышыню. Таму я дадаў пракладку да ніжняй частцы загалоўка 90px (абіўка: 0.5 0 90px 0p;). Вы можаце гуляць з поля, радкі вышыні і дапаўненні, каб атрымаць тэкст загалоўка, каб адлюстраваць менавіта там, дзе вы хочаце.
Адна рэч , каб памятаць пры выкарыстанні малюнкаў з'яўляецца тое , што калі ў вас ёсць адаптыўны вэб - сайт (які вы павінны) з макетам , які змяняецца ў залежнасці ад памераў экрана і прылад, вы загаловак не заўсёды будзе мець той жа памер. Калі вам патрэбен загаловак, каб быць дакладным памерам, гэта можа выклікаць праблемы. Гэта адна з прычын, чаму я наогул пазбегнуць фонавых малюнкаў у загалоўку, так крута, як часам яны могуць выглядаць.
Замена выявы ў загалоўках
Гэта яшчэ адзін папулярны метад для вэб-дызайнераў, таму што яна дазваляе стварыць графічны загаловак і замяніць тэкст загалоўка тэга з гэтым малюнкам. Гэта праўдзіва практыка ад даўніну вэб-дызайнераў, мела доступ да вельмі мала шрыфтам і хацела выкарыстоўваць больш экзатычныя шрыфты ў сваёй працы. Рост вэб - шрыфтоў сапраўды змянілася , як дызайнеры набліжаюцца сайты. ня Headlines зараз могуць быць устаноўлены ў самых розных шрыфтоў і малюнкаў з гэтымі ўбудаванымі шрыфтамі больш не патрэбныя. Такім чынам, вы знойдзеце толькі CSS замены малюнка для загалоўкаў на старых сайтах, якія яшчэ не былі абноўленыя да больш сучасных метадаў.
Арыгінал артыкула Джэніфер Krynin. Пад рэдакцыяй Джэрэмі Girard на 9/6/17