Text-Indent сипатын және іргелес біріктірілген селекторларды пайдалану
Жақсы веб-дизайн жиі жақсы типография туралы. Веб-беттегі мазмұнның көп бөлігі мәтін ретінде берілгендіктен, бұл мәтіннің тартымды әрі тиімді болуын қалау мүмкіндігі веб-дизайнер ретінде маңызды дағды болып табылады. Өкінішке орай, басып шығаруда бізде типографиялық бақылаудың бірдей деңгейі жоқ. Бұл дегеніміз, біз әрдайым веб-сайтқа мәтінді сенімді түрде басып шығара аламыз, бұл біз баспа түрінде жасай аламыз.
Бірыңғай параграф стилі сіз басып шығаратын жиі көресіз (және біз он-лайн режимінде қайта жасай аламыз) - бұл параграфтың бірінші сызығы бір қойынды кеңістігін шоғырландыру . Бұл оқырмандарға бір абзацтың қайда басталып, екіншісінің аяқталуын көруге мүмкіндік береді.
Веб-беттерде бұл визуалды стильді көп көрмейсіз, себебі браузерлер әдепкі бойынша олардың астындағы бос орындарды көрсетіп, олардың қайда және қайда басталатынын көрсететін жол ретінде көрсетеді, бірақ сіз бетті басып шығару үшін стиль жасағыңыз келсе, абзацтардағы шабытты шабытты стилі, сіз мәтіндік- жеке мәтіннің сипаты арқылы жасай аласыз.
Бұл сипаттың синтаксисі қарапайым. Құжаттағы барлық параграфтарға мәтіндік-шифрды қалай қосатыныңыз.
p {text-indent: 2em; }Шегіністерді теңшеу
Параграфтардың шегінісін дәл көрсете алудың бір жолы сіз өзіңіз қалаған абзацтарға сынып қосуға болады, бірақ ол үшін әрбір абзацты өңдеуді қажет етеді. Бұл тиімсіз және HTML кодтаудың үздік тәжірибелеріне сәйкес келмейді.
Оның орнына, сіз абзацтарды шегіндірген кезде ескеруіңіз керек. Сіз басқа абзацты тікелей бақылайтын параграфтарды шегеріңіз. Бұл әрекетті орындау үшін сіз іргелес біріңғай селекторын қолдана аласыз. Осы селектор арқылы Сіз басқа абзацпен тікелей алдында тұрған әрбір абзацты таңдайсыз.
p + p {text-indent: 2em; }Сіз бірінші жолды шығарып тастағандықтан, сіздің ежелеріңіз арасында олардың арасында қосымша орын жоқ екеніне көз жеткізіңіз (браузердің әдепкі мәні). Стилистикалық тұрғыдан, параграфтар арасында бос орын болуы немесе бірінші жолды шегіну керек, бірақ екеуі де емес.
p {margin-bottom: 0; толтыру төменгісі: 0; } p + p {margin-top: 0; толтыру үсті: 0; }Теріс шегінулер
Сонымен қатар, жолдың басталуы сол жаққа қалыпты шегініс сияқты оңға қарай өтуіне себеп болу үшін, мәтіндік- жеке сипатты теріс мәнмен бірге пайдалануға болады. Сіз сызық тырнақшадан басталса, бұл тырнақша таңбасының абзацтың сол жағындағы ең төменгі шетте пайда болғанын және әріптердің өздері сол жағынан жақсы сол жақ тігуді қалыптастыратындай етіп жасай аласыз.
Мысалға, сізде блоктаудың ұрпағы болып табылатын параграф бар және оның теріс шегінуін қалайтыныңызды айтыңыз. Сіз бұл CSS-ты жаза аласыз:
blockquote p {text-indent: -5em; }Бұл тармақтың басталуына әкеледі, ол, болжанғандай, ашылатын тырнақша сипатын қамтиды, солға солға қарай жылжытылған тыныс белгілерін жасау үшін біраз жылжытылады.
Margins және Padding туралы
Жиі веб-дизайнда элементтерді жылжыту және ақ кеңістік жасау үшін маржа немесе толтырғыш мәндерін қолданасыз. Дегенмен, бұл қасиеттер ширатылған параграфтың тиімділігіне жету үшін жұмыс істемейді. Егер сіз осы мәндердің біреуін абзацқа қолдансаңыз, онда осы параграфтың барлық мәтіні, соның ішінде әрбір жол, тек бірінші жолдың орнына аралық болады.