Web dizaynı həmişə qrafik və çap dizaynı dünyasından müdirlər və təriflər götürmüşdür. Bu veb tipoqrafiyasına və veb-səhifələrimizə məktublar əldə etdiyimiz üsula gəldikdə xüsusilə doğrudur. Bu paralellik həmişə 1-dən 1-ə tərcümə deyildir, lakin bir nizamın digərinə təsir etdiyini mütləq görürsünüz. Ənənəvi tipoqrafiya termini "aparıcı" və "xətt hündürlüyü" kimi tanınan CSS mülkiyyəti arasındakı əlaqəni nəzərə alanda bu xüsusilə aydındır.
Öndərin məqsədi
İnsanlar çaplı bir səhifə üçün mətbəə yaratmaq məqsədilə metal və ya taxta məktubları əllə bağladıqda, bu xətlərin arasına boşluq yaratmaq üçün üfüqi mətn xətləri arasında nazik parçalar yerləşdirilib. Daha böyük bir yer istəyirsənsə, daha böyük qurğuşun parçaları əlavə edərdiniz. Bu, "aparıcı" termini tərtib edilmişdir. Tipografik dizayn və prinsiplər haqqında kitabda "aparıcı" terminini nəzərdən keçirsəniz, "bir növbəsində növbənöv xətlərin təməlləri arasındakı məsafə" nin təsirinə bir şey oxuyardı.
Web Dizaynında Liderlik
Rəqəmsal dizaynda aparıcı terim hələ də mətn xətləri arasındakı boşluqlara istinad etmək üçün istifadə olunur. Bir çox proqram bu dəqiq dövrdən istifadə edir, həqiqi qurğunun bu proqramlarda istifadə edilməməsinə baxmayaraq, bu prinsipin dəqiq həyata keçirilməsinə baxmayaraq, bu, ənənəvi olanlardan dizaynın yeni dizayn formalarının böyük nümunəsidir.
Veb dizaynına gəlincə, "aparıcı" üçün CSS mülkiyyəti yoxdur. Bunun əvəzində, mətnin bu vizual görünüşünü işləyən CSS xüsusiyyətinə line-height deyilir. Mətnin üfüqi mətn xətləri arasında əlavə yer olmasını istəyirsinizsə, bu əmlakı istifadə edərsiniz. Məsələn, sitenizin
Bu, normal xəttin hündürlüyü 1,5 dəfə, səhifənin default font ölçüsünə əsasən (normalda 16px) olur.
Line-Height istifadə edərkən
Yuxarıda qeyd edildiyi kimi, xətt hündürlüyü, məkanda mətn xətləri və ya digər mətn bəndlərində istifadə etmək üçün uyğundur. Xəttlər arasında çox az boşluq varsa, mətn sitenizin tamaşaçıları üçün oxumaq çətin və çətin ola bilər. Eynilə, əgər xətlər səhifədə çox uzaq məsafədədirsə, normal oxunma axını kəsiləcək və oxucular sizin mətninizlə bu səbəbdən narahat olacaqlar. Buna görə istifadə etmək üçün müvafiq həcmli boşluq aralığını tapmaq istəyirik. Ayrıca , səhifənizin okunabilirliği konusunda geribildirim almaq üçün tasarınızı gerçek kullanıcılarla sınayabilirsiniz .
Line-Height istifadə etmədikdə
Satır hündürlüsünü, səhifənin dizaynına boşluq əlavə etmək üçün istifadə etdiyiniz padding və ya boşluqlarla, o cümlədən başlıq və ya paraqrafların altına çəkməyin. Bu boşluq aparıcı deyil və buna görə də xətt hündürlüyü ilə idarə olunmur.
Müəyyən mətn elementləri altında yer əlavə etmək istəyirsinizsə, marjin və ya padding istifadə edərdiniz. Biz istifadə etdiyimiz əvvəlki CSS nümunəsinə geri qayıtdığımızda bunu əlavə edə bilərik:
Əsas p {line-height: 1.5; margin-bottom: 24px; }Bu, səhifənin paraqrafı üçün ("əsas" elementdə olanlar) mətn xətləri arasında 1.5 satır hündürlüyünə malik olacaq. Həmin paraqraflarda hər birinin altında 24 piksel boşluq olacaq, oxuculara bir paraqrafı digərindən asanlıqla müəyyən etməyə və veb səhifəni asanlaşdırmağa imkan verən əyani fasilələrə imkan verir. Burada da boşluqların yerləşdiyi yerdən istifadə edə bilərsiniz:
Əsas p {line-height: 1.5; padding-bottom: 24px; }Demək olar ki, bütün hallarda bu, əvvəlki CSS ilə eyni göstəricidir.
"Xidmətlər-menyudan" bir sinifə daxil olan siyahıdakı siyahıların altına aralıq əlavə etmək istədiyini söyləyərək, xətt hündürlüyü deyil, marjinlər və ya padding istifadə edərdiniz. Buna görə də uyğun olardı.
.services-menu li (