Пазнанне Вядучы ў вэб-дызайне

Вэб-дызайн заўсёды запазычаў прынцыпы і вызначэнне са свету графікі і друку дызайну. Гэта асабліва дакладна , калі гаворка ідзе пра вэб - тыпаграфікі і тым, як мы атрымліваем літарных на нашых вэб - старонках. Гэтыя паралелі не заўсёды 1 да 1 пераклад, але вы, вядома, можаце ўбачыць, дзе адна дысцыпліна пад уплывам іншага. Гэта асабліва відавочна , калі ўлічыць сувязь паміж традыцыйным тэрмінам тыпаграфікі «вядучым» і CSS уласцівасцю , вядомым як «вышыня радкі.»

мэта Leading

Калі людзі выкарыстоўваюцца для ручной трубкі металічныя ці драўляныя літары, каб стварыць друкарню для друкаванай старонкі, тонкія кавалачкі свінцу былі змешчаныя паміж гарызантальнымі радкамі тэксту, каб стварыць прамежак паміж гэтымі лініямі. Калі вы хочаце большага прасторы, вы ўставілі б вялікія кавалкі свінцу. Гэта, як быў прыдуманы тэрмін «вядучы». Калі вы глядзелі на тэрмін «вядучы» ў кнізе пра друкарскім дызайне і прынцыпалам, ён чытаў што-то эфект - «адлегласць паміж базавымі лініямі паслядоўных ліній тыпу.»

Вядучы ў вэб-дызайне

У лічбавым дызайне, тэрмін вядучы па-ранейшаму выкарыстоўваецца для абазначэння адлегласці паміж радкамі тэксту. Многія праграмы выкарыстоўваюць гэты дакладны тэрмін, нават калi сапраўдны свінец, відавочна, не выкарыстоўваюцца ў гэтых programs.This з'яўляецца выдатным прыкладам новых форм ідэй дызайну запазычанні з традыцыйных, хоць дакладнай рэалізацыі гэтага прынцыпу змянілася.

Калі справа даходзіць да вэб-дызайну, няма CSS ўласцівасць для "вядучых". Замест гэтага, ўласцівасць CSS, які будзе апрацоўваць гэта візуальнае адлюстраванне тэксту называецца вышыня радкі. Калі вы хочаце, каб ваш тэкст, каб мець дадатковае прастору паміж гарызантальнымі радкамі тэксту, вы б выкарыстоўваць гэтую ўласцівасць. Напрыклад, скажам , вы хочаце павялічыць вышыню радка для ўсіх абзацаў ўнутры ў <асноўнага> элемента вашага сайта , вы можаце зрабіць так , як гэта:

Асноўны р {вышыня радкі: 1,5; }

Зараз гэта было б у 1,5 разы нармальная вышыня лініі, у залежнасці ад памеру шрыфта па змаўчанні старонкі (якая звычайна 16px).

Калі выкарыстоўваць вышыню радка

Як апісана вышэй, вышыня лініі мэтазгодна выкарыстоўваць для прасторы радкоў тэксту ў пунктах або іншых блокаў тэксту. Калі ёсць занадта мала месца паміж радкамі, тэкст можа стаць заблытаным і цяжка чытаць для гледачоў на ваш сайт. Сапраўды гэтак жа, калі лініі размешчаны занадта далёка адзін ад аднаго на старонцы, нармальны паток чытання будзе перапынены, і чытачы будуць мець праблемы з тэкстам па гэтай прычыне. Вось чаму вы хочаце, каб знайсці адпаведную колькасць лініі вышыні разносу выкарыстоўваць. Вы таксама можаце праверыць свой дызайн з рэальнымі карыстальнікамі , каб атрымаць іх меркаванне аб чытальнасці старонкі .

Калі не выкарыстоўваць вышыню радка

Не варта блытаць вышыню радкі з насычэннем або палямі, якія вы будзеце выкарыстоўваць, каб дадаць пустое прастору для дызайну вашай старонкі, у тым ліку пад загалоўкам або пунктаў. Гэтая адлегласць не вядзе, і таму ён не апрацоўваецца лініяй вышыні.

Калі вы хочаце дадаць прастору пры пэўных тэкставых элементах, можна выкарыстоўваць поле або водступы. Вяртаючыся да папярэдняга прыкладу CSS мы выкарыстоўвалі, мы маглі б дадаць да гэтага:

Асноўны р {вышыня радкі: 1,5; край дно: 24px; }

Гэта будзе па-ранейшаму мець вышыню 1,5 лініі паміж радкамі тэксту абзаца нашай старонкі (тыя, ўнутры элемента <галоўная>). Тыя ж пункты будуць таксама мець 24 кропак прабельных пад кожным з іх, дазваляючы візуальныя парывы, якія дазваляюць чытачам лёгка ідэнтыфікаваць адзін абзац ад іншага і зрабіць сайт чытання прасцей. Вы можаце таксама выкарыстоўваць ўласцівасць абіўкі замест краёў тут:

Асноўны р {вышыня радкі: 1,5; абіўка-дно: 24px; }

Амаль ва ўсіх выпадках гэта будзе адлюстроўваць тое ж самае, што і папярэдні CSS.

Дапусцім, вы хочаце дадаць інтэрвал пад спіс элементаў, якія былі ўнутры спісу з класам «паслугі меню», вы будзеце выкарыстоўваць поля або водступы, каб зрабіць гэта, а не парадкова вышыню. Так што гэта было б дарэчы.

.Услуги меню Li {<абіўка-дно: 30px; }

Вы павінны выкарыстоўваць толькі вышыню радкі тут, калі вы хочаце, каб усталяваць інтэрвал тэксту ўнутры саміх складнікі спісаў, мяркуючы, што яны мелі працяглыя прабегі тэксту, які можа выконвацца ў некалькіх радкоў для кожнай кропкі кулі.