Css cədvəli və şrifti azaldır. müxtəlif modellərin adları ilə. Google Plus bağlanır

Bədən şrift ölçüsünü 11px olaraq təyin etdiyim bir problemim var, lakin cədvəllər şrifti 16px olaraq göstərir. Buna nəyin səbəb olduğu barədə heç bir fikrim yoxdur - mən CSS-dən və çıxışdan (səhifəyə keçərkən mənbədən) dəfələrlə keçdim. Cədvəl şrift ölçüsünü 11px olaraq təyin etmək aydın şəkildə istədiyiniz effekti verir, lakin onu bədən üslubundan ayrı bir yerə qoymağa ehtiyac yoxdur.

Məndə aşağıdakı CSS var:

Bədən ( şrift ailəsi:Verdana, Arial, Helvetica, sans-serif; şrift ölçüsü: 11px; kənar: 0px; fon rəngi: #E7D2B8; rəng: #863F2B; ) img.headerImg ( en: 100%; ) . menyu zolağı ( float: sol; en: 20%; ) .main-content ( float: sol; en: 80%; ) .clear ( aydın: hər ikisi; ) ul.menu ( kənar: 0px; sol kənar: 10px ; padding: 0px; list-style: none; : 20%; ) ul.footer-links ( list-style: none; ) ul.footer-links li ( float: left; padding: 20px; ) ul.footer-links li:son ( clear: right; ) table ( eni: 100% sərhəd-daralma: çökmə ) td ( şaquli hizalama: yuxarı; )

Və nəticə belədir:

Kod Ad soyad Ünvan Poçt indeksi Telefon Faks Redaktə et
Yaradın
kod4 James Mavi ünvan 11
ünvan 24
ünvan 32
şəhər 5
poçt kodu 4 fone4 fone2 Redaktə et
kod5 Fred ünvan 13
ünvan 24
ünvan 31
şəhər 1
poçt kodu 2 fone5 fone3 Redaktə et


Cədvəldə şrift ölçüsünü 16px olaraq təyin edə biləcək heç bir şey görmürəm. Bu, hər üç hissə üçün baş verir (baş, ayaq, bədən). Həmçinin görünür ki, Netbeans 6.9 cədvəli deyil, sənədin qalan hissəsini (əvvəl və sonra) düzgün formatlaşdıracaq. Demək olar ki, masada nəsə səhv var, amma nə olduğunu görə bilmirəm. Bu, Firefox və Opera-da baş verir (ən çox son versiyalar hər ikisi). Mən onu IE-də sınaqdan keçirməmişəm, çünki IE-də heç vaxt istifadə olunmayacaq.

Cədvəlin ölçüləri, hündürlüyü və eni hüceyrələrin içərisində nə olduğundan asılı olaraq avtomatik olaraq müəyyən edilir. Hüceyrələr nə qədər çox doldurulsa, o qədər çox olur daha böyük ölçülər masalar və əksinə.

Lakin CSS xüsusiyyətləri sizə lazım olan eni və hündürlüyü dəqiq göstərərək HTML-də cədvəlin ölçüsünü dəyişməyə imkan verir. Ədalətli olmaq üçün qeyd etmək lazımdır ki, cədvəl atributları da təyin etməyə imkan verir tələb olunan ölçülər. Bununla belə, in hal-hazırda biz yalnız CSS haqqında danışacağıq.

Hər bir cədvəlin məzmunundan təsirlənən öz minimum eni və minimum hündürlüyü olduğunu vurğulamaq lazımdır. Genişlik və hündürlük dəyərlərini daha da kiçik təyin etsəniz də, heç bir şey olmayacaq. Cədvəlin tərəfləri minimumdan çox olmayacaq.

Cədvəlin enini təyin etmək üçün CSS xüsusiyyətindən istifadə etməlisiniz eni, və hündürlüyü təyin etmək üçün əmlakdan istifadə etməlisiniz hündürlük.

Bir nümunədə belə görünür.

Cədvəl (en: 500px; hündürlük: 100px; )

Brauzerdə nəticə:

Tam kod:

ilə masa <a href="https://redcomrade.ru/az/multimedia/kak-zadat-fotografii-nuzhnyi-razmer-izobrazheniya-i-ih-svoistva-v-css/">verilmiş ölçülər</a>

Verilmiş ölçüləri olan cədvəl
1 2 3 4 5
1 2 3 4 5
1 2 3 4 5


Cədvəl eni və hündürlüyü dəyərləri olaraq təyin edilə bilər mütləq dəyər(piksellə) və nisbi - faizlə. Məsələn, müvafiq olaraq 20px və 20%.

Cədvəl ölçülərini təyin etmək üçün faizlərdən istifadə etsəniz, onlar ölçülərə əsasən hesablanacaq ana element. Əgər nümunəmizdən danışsaq, onda haqqında danışırıq brauzer pəncərəsi haqqında.

Başqa bir məna var - avtomatik. Və bu xüsusidir, çünki onun köməyi ilə masanın eni və hündürlüyü avtomatik olaraq avtomatik olaraq hesablanır. Praktikada bu dəyərin təyin edilməsi belə görünür.

Eni: avtomatik;

Hündürlük: avtomatik;

Bir məsələyə də diqqətinizi çəkmək istərdik: vacib məqam. Hündürlüyü faizlə göstərməmək daha yaxşıdır, çünki bir qayda olaraq, bu halda işləməyəcəklər.

Fərdi xanaların və sütunların ölçülərinin təyin edilməsi

Brauzerin hüceyrələrin məzmununa əsasən sütunların enini düzgün təyin etmədiyini düşünürsünüzsə, o zaman xanaların və sütunların ölçülərini özünüz təyin etmək hüququnuz var. İndi biz HTML cədvəlində hüceyrə ölçüsünü necə dəyişdirmək barədə danışacağıq.

Hüceyrələrin ölçüsünün dəyişdirilməsi cədvəl ölçüləri ilə eyni CSS xüsusiyyətlərindən istifadə etməklə həyata keçirilir, yəni: enihündürlük.

Hüceyrələrə üslub əlavə etmək üçün iki seçimdən birini istifadə edə bilərsiniz:

  1. Hüceyrələrə fərdi sinif adlarını verin. Bu belə görünəcək: class="cell-50px"

    Bundan sonra bu siniflər üçün üslubları tətbiq etməlisiniz.

  2. Atributu aktiv edin üslub, içərisində lazımi CSS kodunu yazın.

Praktikada ikinci seçim belə görünəcək:

...

Bununla belə, qeyd etmək istərdik ki, hüceyrə ölçülərini çox tez-tez fərdi olaraq dəyişdirmək lazım deyil. Bir qayda olaraq, bu, cədvəl sütunları üçün müəyyən bir eni təyin etmək lazım olduğu hallarda edilir. Bu vəziyyətdə problem daha asan həll olunur. Sadəcə birinci sıradakı hüceyrələrin enini təyin etməlisiniz.

Verilmiş ölçüləri olan cədvəl
1 2 3 4 5
1 2 3 4 5
1 2 3 4 5

Brauzerdə nəticə:

Cədvəldəki şrift ölçüsünü necə dəyişdirmək olar

Tez-tez cədvəldəki mətnin ölçüsünü dəyişdirməyə ehtiyac var. Məsələn, başlıq xanalarında. Bu, CSS xüsusiyyətindən istifadə etməklə edilə bilər şrift ölçüsü. Elementlər üçün şrift ölçüsünü təyin edək :

Th (şrift ölçüsü: 30px; )

Bu barədə bu dərs bitir. Ev tapşırığını diqqətlə düşünməyi təklif edirəm. Sadəcə diqqətlə öyrənin və bu barədə düşünün. Hər kəsə ən yaxşısı!

Deyəsən, indi demək olar ki, hər hansı bir idarəetmə panelində onları avtomatik təyin edən rahat bir panel varsa, niyə mətn üçün HTML teqlərini bilirsiniz?

Fakt budur ki, vebsaytdakı məzmunun formatlanması üzərində işləməkdən köklü şəkildə fərqlənir ofis proqramları. Burada mətnə ​​sadəcə cəlbedici görünüş vermək kifayət deyil, çünki düzgün dizayn Yalnız veb səhifənin nümayişi deyil, həm də onun axtarış sistemlərində tanıtımı asılıdır.

HTML Teqləri və Atributları: Əsas Sintaksis

Hər hansı bir mətn var gizli kod, ekranda nəyin və necə göstəriləcəyini kompüterə “izah edən”. Bütün məlumatlar universal elementlər dəsti istifadə edərək qeyd olunur.

Əslində, HTML mətn teqləri səhifəyə müəyyən bloklar əlavə edən və ya dəyişdirən əmrlərdir. görünüş. Düzgün format giriş belə görünür:

Nəzərə alın ki, bütün teqlər qoşalaşdırılmayıb. Misal üçün,
(sətir atlama) və ya


(əlavə üfüqi xətt) ümumiyyətlə bağlanmağa ehtiyac yoxdur.

Word və digər proqramlardan məqalələri niyə veb-sayt redaktoruna köçürə bilmirsiniz?

Müasir olsa da ofis proqramları mətn üçün eyni HTML teqlərindən istifadə edin, 99% hallarda yerli kod veb səhifələr üçün yararsızdır. Sənəd proqramın özündə normal şəkildə göstərilsə belə, veb-sayta daxil edildikdə formatlaşdırma itirilə bilər. Üstəlik, səbəbiylə böyük miqdarəlavə etiketlər və atributlar, axtarış motorları səhifənin məzmununu adekvat təhlil edə bilmir. Bu da öz növbəsində resursunuzu tanıtmağı çətinləşdirir.

Təmiz və uyğun kodu əldə etmək üçün əvvəlcə adi redaktor tərəfindən yaradılmış HTML teqlərinin mətnini təmizləməlisiniz. Bunu etmək üçün bir neçə yol var:

  1. Məqaləni Notepad vasitəsilə “çalışdırın” və yalnız bundan sonra sayta daxil edin. Tətbiq bütün HTML-ni silir, ona görə də bundan sonra mətni yenidən formatlamalı olacaqsınız (redaktor alətlərindən istifadə etməklə və ya əl ilə).
  2. LiveWriter istifadə edərək məqalələr yazın və dərc edin. Məşhur bloq redaktoru dərhal düzgün kodu yaradır. Və ayrıca sekmədə saytdakı mətnin necə görünəcəyini görə bilərsiniz.
  3. HTML Təmizləyicisini istifadə edin. Bu onlayn xidmət bütün kodu yox, yalnız lazımsız fraqmentləri məhv edir. Filtrlərdən istifadə edərək hansı teqləri saxlamaq istədiyinizi seçirsiniz. Güclü də var vizual redaktor koda artıq optimallaşdırılmış əmrlər əlavə edən formatlaşdırma üçün.

Paraqraflar

Bu element demək olar ki, bütün məqalələrdə mövcuddur. Hər bir abzas belə bir konteynerin içərisində yerləşməlidir - bu formatlaşdırmanı asanlaşdırır və saxlamağa imkan verir vahid üslub saytın bütün səhifələrində. Rahatlıq üçün etiket

Həmişə ilə yazın yeni xətt.

Hizalanma

Ayrı-ayrı HTML "Text Alignment" teqi uzun müddətdir istifadə olunmur. Əvəzində ümumi ALIGN atributu yaradıldı. Səhifədəki mətn blokunun yerini dəyişmək üçün 3 dəyərdən birini seçməlisiniz - MƏRKƏZƏ, SAĞ və ya SOL. Siz eyni şəkildə başlıqlar kimi digər elementlər üçün düzülməni təyin edə bilərsiniz.

Bəzi hallarda, hizalanma üçün digər teqlər istifadə olunur, məsələn, elementdən istifadə edərək yerləşdirə bilərsiniz

...
. Niyə əlverişlidir ayrı etiket? Atributdan fərqli olaraq, o, hər hansı məzmunla işləyir, o cümlədən fotolar, videolar, flaş və s.

Başlıqlar və alt başlıqlar

Alt başlıq sistemi məntiqi məzmun strukturu yaratmağa imkan verir. Mətn mənalı bloklara bölündükdə oxucunun diqqətini cəmləmək və yeni məlumatları mənimsəməsi çox asan olur. Axtarış motorları həmçinin səhifənin hansı sorğuların təşviq edilməsini anlamaq üçün başlıqları təhlil edir. Buna görə SEO mütəxəssisləri onlarda aktual açar sözlərdən istifadə etməyi tövsiyə edirlər.

HTML altı səviyyəli alt başlıqdan istifadə edir - from

əvvəl

. Bu sistemdə aydın bir iyerarxiya var:

  • ...

    . Əsas məqalə, onlayn mağazada məhsul və s.). Mətndə yalnız bir ola bilər

    . Bir qayda olaraq, əsas açar sözü ehtiva edir.

  • ...

    . İkinci səviyyəli alt başlıqlar mətni mənalı bloklara ayırır. Məsələn, noutbukları qiymətləndirirsinizsə, bir neçə edə bilərsiniz

    müxtəlif modellərin adları ilə.

  • ...

    . Mətn iki arasındadırsa, üçüncü səviyyə lazımdır

    kiçik bloklara da parçalanır. Bizim nümunəmizdə bunlar qiymətləndirmə meyarları ola bilər - hər bir model üçün “Performans”, “Yaddaş”, “Video kart” və s.

  • ,

    ,
    . Praktikada onlar olduqca nadirdir. Ancaq ümumi prinsip eynidir - onlar yuxarı səviyyəli alt başlığı olan bir blokda "yerləşməlidirlər".

Düzgün iyerarxiyanı saxladığınızdan əmin olun. Nümunəmizə qayıdaraq, bu o deməkdir ki, siz dərhal model adlarını daxil edə bilməyəcəksiniz

və ya

. Bundan əlavə, homojen mənalı bloklar üçün müxtəlif səviyyəli alt başlıqlardan istifadə edin (məsələn, istifadə edərək reytinqdə sonuncu yeri tutan noutbuku vurğulayın.
).

HTML-də başlıqların düzgün strukturunu dərhal başa düşməyə və yadda saxlamağa kömək edəcək bir diaqramdır.

Siyahılar

İstənilən siyahıları və təlimatları mətn üçün xüsusi HTML teqlərindən istifadə edərək siyahılar şəklində formatlaşdırmaq daha yaxşıdır ( tipik səhv- bir neçə paraqraf

Hansı ki, defis və ya rəqəmlə başlayır).

Belə blokların quruluşu çox sadədir. Birincisi, siyahının növünü müəyyənləşdiririk - markerli və ya nömrələnmiş.

Bütün elementlər açılış və bağlama etiketləri arasındadır. Hər bir siyahı elementi yeni sətirdən başlayır və formata malikdir. Elementlərin sayı məhdud deyil.

Seçim və onun atributları

Bu şrift və rəngdən istifadə edərək və CSS-ə yeni siniflər əlavə etmədən nəyi dəyişdirmək olar. Yalnız bir cümlə və ya fraqmenti vurğulamaq lazım olduqda bu çox rahatdır.

bir sıra atributlara malikdir:

  • Üz. Mətn şriftini dəyişməyə imkan verir. Vergüllə ayrılmış bir neçə variantı sadalaya bilərsiniz (Tahoma, Verdana). Əgər istifadəçinin ilk şrifti quraşdırılmayıbsa, sistem sadəcə alternativdən istifadə edir.
  • Ölçü. Mətni böyütmək və ya kiçiltmək üçün dırnaq içərisində 1 ilə 7 arasında bir dəyər daxil edin.
  • Rəng. Dizayndan asılı olaraq standart çalarlardan (qırmızı, yaşıl, mavi) birini seçə və ya istədiyiniz rəng üçün kod daxil edə bilərsiniz.

ilə formatlanmış paraqraflardan istifadə etməyin , alt başlıqlar yerinə. Eyni dizayn parametrlərini düzgün etiketlə təyin etmək daha yaxşıdır.

Mətni vurğulamaq yolları

Monoton mətn yorucudur, hətta paraqraflara bölünür. Oxucunun diqqətini cəlb etmək və marağını artırmaq üçün əsas məqamlar Qrafik olaraq vurğulamaq tövsiyə olunur. Bu tapşırığın öhdəsindən gəlməyə kömək edəcək bəzi əmrlər var.

... . Çox populyar HTML etiketi. Miniatür dərhal diqqəti çəkir və buna görə də onun köməyi ilə mühüm tezisləri və faktları vurğulamaq rahatdır.

Bir çox insanlar etiketləri qarışdırırlar . Vizual fərq yoxdur, amma fərqli işləyirlər. Birincisi sadəcə olaraq mətnin görünüşünü dəyişdirir, ikincisi isə “indeks” kimi çıxış edir və ən vacib fraqmentləri (SEO üçün tematik açar sözlər və ifadələr) vurğulayır.

... . Zərif və sərt kursiv elmi terminlərin, xarici sözlərin və müxtəlif sitatların tərtibatı üçün idealdır. Ciddi nəşrlərdə bədii əsərlərin adları da kursiv mətnlə vurğulanır.

... . Bəlkə də heç bir başqa HTML teqi bu qədər mübahisəyə səbəb olmamışdır. Mətnin altından xətt çəkmək çox az istifadə olunur, çünki bu üsulƏsas məqamlar tarixən hiperlinklərə təyin edilmişdir. İstifadə etsəniz məqalələrdə, bunun yalnız qısa fraqmentlər üçün uyğun olduğunu unutmayın - 1 sətirdən çox olmamalıdır.

... . Reklamda çox aktual bir hissə yaratmağa imkan verən maraqlı etiket - məsələn, köhnə və yeni qiymətlər arasındakı kontrastı vurğulamaq.

... . Heç bir əlavə seçim etmədən şrift ölçüsünü artırmağın ən asan yolu.

... . Əvvəlki etiketlə eyni prinsiplə işləyir. İçəridə yerləşən mətn əsas mətnə ​​nisbətən azaldılır.

... . Düzgün ad bu format yuxarı işarədir. Bu etiket əsasən riyazi dərəcələr və qeydlər üçün nəzərdə tutulub. O, şriftin ölçüsünü azaldır və seçilmiş mətni yuxarı aparır.

... . Alt yazılara tez-tez müxtəlif düsturlarda rast gəlinir. Seçilmiş fraqment əsas mətnin altında yerləşir.

Mənalı qablar

Bir çox mətnlərdə bəzi bloklar tapıldığı üçün onlar üçün xüsusi etiketlər yaradılmağa başlandı. Bu, formatlaşdırmanı asanlaşdırır, çünki hər bir məzmun növünün özünəməxsus üslub dəsti varsa, sadəcə mətn parçasını vurğulamaq və onun hansı məlumatı ehtiva etdiyini göstərmək lazımdır.

... . Kompüter kodları əlavə etmək üçün etiket. Nümunələrlə proqramlaşdırmaya dair məqalələrdə əvəzolunmazdır - əmrlər yerinə yetirilmir, lakin düz mətn kimi göstərilir.

... . Sitatların formatlaşdırılması üçün nəzərdə tutulmuşdur - məsələn, müsahibədən əsas çıxarışlar.

. Mətnin bir hissəsini ayrıca bloka yerləşdirir. Varsayılan olaraq, seçimdə daha çox sol padding var, lakin siz CSS-də mətnin ölçüsünü, şrift tərzini və rəngini də dəyişə bilərsiniz.

...
. Müəllif haqqında məlumatları, o cümlədən keçidləri ehtiva edən əlavə etiket.

Demarkasiya xətti

Böyük bir hissənin məntiqi sonunu qeyd etmək üçün sadə bir xətt istifadə edilə bilər.


qoşalanmış teqlərə tətbiq edilmir. Bu bağlama formatı elementi deməkdirlazım deyil.

WIDTH atributundan istifadə edərək, piksellərdə uyğun bir ölçü və ya pəncərə eninin faizini göstərərək ayırıcını qısalda bilərsiniz.

HTML-də mətni formatlaşdırmaq üçün teqlərdən düzgün istifadə etməyi öyrənməklə siz məqalələrinizin oxunmasını asanlaşdırmaqla yanaşı, SEO effektivliyinizi də artıracaqsınız.

Bədən şrift ölçüsünü 11px olaraq təyin etdiyim bir problemim var, lakin cədvəllər şrifti 16px olaraq göstərir. Buna nəyin səbəb olduğu barədə heç bir fikrim yoxdur - mən CSS-dən və çıxışdan (səhifəyə keçərkən mənbə) dəfələrlə keçdim. Cədvəl şrift ölçüsünü 11px olaraq təyin etmək aydın şəkildə istədiyiniz effekti verir, lakin onu bədən üslubundan ayrı bir yerə təyin etməyim lazım deyil.

Məndə aşağıdakı CSS var:

Bədən ( şrift ailəsi:Verdana, Arial, Helvetica, sans-serif; şrift ölçüsü: 11px; kənar: 0px; fon rəngi: #E7D2B8; rəng: #863F2B; ) img.headerImg ( en: 100%; ) . menyu zolağı ( float: sol; en: 20%; ) .main-content ( float: sol; en: 80%; ) .clear ( aydın: hər ikisi; ) ul.menu ( kənar: 0px; sol kənar: 10px ; padding: 0px; list-style: none; : 20%; ) ul.footer-links ( list-style: none; ) ul.footer-links li ( float: left; padding: 20px; ) ul.footer-links li:son ( clear: right; ) table ( eni: 100% sərhəd-daralma: çökmə ) td ( şaquli hizalama: yuxarı; )

Və çıxış belə görünür:

Kod Ad soyad Ünvan Poçt indeksi Telefon Faks Redaktə et
Yaradın
kod4 James Mavi ünvan 11
ünvan 24
ünvan 32
şəhər 5
poçt kodu 4 fone4 fone2 Redaktə et
kod5 Fred ünvan 13
ünvan 24
ünvan 31
şəhər 1
poçt kodu 2 fone5 fone3 Redaktə et


Cədvəldə şrift ölçüsünü 16px olaraq təyin edə biləcək heç bir şey görmürəm. Bu, hər üç hissə üçün baş verir (baş, ayaq, bədən). Həmçinin görünür ki, Netbeans 6.9 cədvəli deyil, sənədin qalan hissəsini (əvvəl və sonra) düzgün formatlaşdıracaq. Demək olar ki, masada nəsə səhv var, amma nə olduğunu görə bilmirəm. Bu, Firefox və Operada baş verir (hər ikisinin ən son versiyaları). Mən onu IE-də sınaqdan keçirməmişəm, çünki IE-də heç vaxt istifadə olunmayacaq.

Müəllifdən: Xoş gəldiniz, bu bloqun oxucuları. HTML-də şriftin ölçüsü rəngi ilə yanaşı mətnin əsas xarakteristikalarıdır ki, bu da informasiyanın qavranılmasına və nəticədə istifadəçilər üçün saytın rahatlığına böyük təsir göstərir. Bu məqalə html-də şrift ölçüsünü necə təyin etmək haqqındadır.

Mətnin ölçüsünü necə düzgün dəyişmək olar

Fakt budur ki, html şrift ölçüsünü idarə etmək baxımından çox məhdud imkanlar təqdim edir. Məsələn, kiçik və böyük etiketləri var. Onlar mətni bir qədər böyük və ya daha böyük göstərməyə imkan verir daha kiçik ölçü, səhifədəki normal mətnə ​​münasibətdə. Ancaq bu cür imkanlar azdır, çünki məzmun bir qədər dəyişdirilir və ümumiyyətlə bu cür etiketlərin istifadəsi xoşagəlməzdir.

Beləliklə, html-də şriftin ölçüsünü necə düzgün artırmaq olar? Əlbəttə, ilə css istifadə edərək. Həm də təkcə artırmaq deyil, həm də azalmaq lazımdır, çünki bu da lazımdır.

Məsələn, səhifədəki əhəmiyyətsiz sözlər, məsələn, səhifənin dərc olunduğu tarix və ya digər mülkiyyət məlumatları, adətən, mümkün qədər kiçik saxlanılır. Belə mətn üçün siz əsas mətndən daha kiçik şrift təyin edə bilərsiniz.

Başlıqlar, əksinə, əsas məzmundan ən azı 2-3 dəfə böyük olmalıdır. Siz həmçinin alt başlıqların düzgün göstərilməsinə diqqət yetirməlisiniz. Burada qayda belədir: heç bir halda h3 ölçüsü h2 ölçüsündən böyük olmamalıdır.

Məzmunun özündə, bir qayda olaraq, diqqəti cəlb etmək üçün böyüdülmüş hərflərdən istifadə etməməlisiniz. Onları bir növ fon ilə vurğulamaq, kursiv və ya qalın üslub vermək daha yaxşıdır, belə vurğulamaq daha çoxdur daha uyğun olardıəsas mətni və onun qavrayışını təkmilləşdirir. Yaxşı, bu bir az nəzəriyyə idi, indi isə keçək mətləbə.

CSS-dən istifadə

Bizə şrift ölçüsü xassəsi lazımdır. Bu, müxtəlif ölçü vahidlərində hərflərin ölçüsünü təyin etməyə imkan verir. Veb saytın hazırlanmasında piksel və nisbi vahidlər em, lakin gəlin bütün variantlara daha yaxından nəzər salaq.

Açar sözlər. Css-də bu xassə dəyəri daha kiçik və daha böyük açar sözlərə təyin edilə bilər ki, bu da şrifti ana elementə nisbətən daha kiçik və böyük edir. Effektin kiçik və böyük etiketlərin istifadəsinə bənzəyəcəyini söyləyə bilərik.

Mütləq ölçüdən istifadə olunur açar sözlər. Bu əmlak üçün başqa bir qrup açar - xx-kiçik, x-kiçik, kiçik, orta, böyük, x-böyük və xx-böyük - təyin etməyə imkan verir. mütləq dəyər. Baxmayaraq ki, əslində onu piksellərlə dəqiq hesablamaq mümkün olmayacaq, çünki brauzer parametrlərindən çox şey asılı olacaq. Əminliklə demək olar ki, bu cür dəyərlərdən istifadə saytı brauzerlər arası uyğunlaşdırmayacaq.

Ölçü vahidlərindən istifadə edərək mütləq ölçü. Çox vaxt şrift piksel (px) ilə müəyyən edilir. Ümumilikdə bu yaxşı qərar, lakin çox güman ki, hərflərin ölçüsünü bir az dəyişdirməli olacaqsınız müxtəlif qətnamələr. Məsələn, on geniş ekranlarşrifti artırın. Bu, həyata keçirən media sorğularından istifadə etməklə edilə bilər adaptiv dizayn.

Nisbi ölçü. Yaxşı mənada nisbi variant nəzərdən keçirilir mümkün olan ən yaxşı şəkildə html-də şrift ölçüsünü təyin edin, çünki bu, istənilən cihazda mətnin ideal oxunaqlılığına və yaxşı nümayişinə nail olmağa imkan verir.

Nisbi dəyər adətən ems və faizlərdən istifadə etməklə müəyyən edilir. Em əsas elementin şrift hündürlüyünü təmsil edir. Bunu bu şəkildə təyin edə bilərsiniz, məsələn:

bədən( şrift ölçüsü: 12px; ) a( şrift ölçüsü: 1.2em; ) h1( şrift ölçüsü: 2.8em; ) cədvəl td( şrift ölçüsü: 0.9em; )

bədən (

şrift ölçüsü: 12px;

şrift ölçüsü: 1.2em;

h1 (

şrift ölçüsü: 2.8em;

masa td (

şrift ölçüsü: 0.9em;

Beləliklə, yalnız bir mütləq dəyəri göstərməklə, qalanların hamısını nisbətən müəyyən etmək olar. Beləliklə, birinci səviyyəli başlıqlar 2,8 dəfə artacaq sadə mətn səhifədə bağlantılar bir az daha böyük olacaq və cədvəl xanalarında mətn, əksinə, daha kiçik olacaq.

Bu hansı üstünlükləri verəcək? Brauzerdə şrift qəflətən dəyişərsə, bütün elementlər mütənasib olaraq dəyişəcək və tərtibatınızdakı bir şeyin pozulma riski olmayacaq. Nisbi ölçü də faizlə yazıla bilər. Burada hər şey də sadədir - 100% əsas elementin şrift ölçüsüdür. Müvafiq olaraq, əgər paraqrafın ölçüsü 120%, paraqrafdakı sitatlar isə 150% ölçüsünə malikdirsə.

Mətnin məzmununa təsir edən digər amillər

Əsasən, əlbəttə ki, şrift ölçüsündən istifadə edərək, şrift ölçülərini aydın şəkildə təyin edə bilərsiniz, lakin bu və ya digər şəkildə onun ölçüsünə təsir edən bir neçə başqa xüsusiyyət var. Onlar haqqında qısaca:

Şrift-variant: kiçik hərflər – bu dəyərə malik bu xüsusiyyət bütün hərfləri böyük hərflərlə göstərir, lakin adi hərflərdən bir qədər kiçikdir. Bu, qeyri-standart davranışdır.

Text-transform: böyük hərf – bu xüsusiyyətə malik bütün mətnlər böyük hərflərlə göstəriləcək və bu, müvafiq olaraq onların ölçüsünə təsir edəcək.

Mətn-çevir: kiçik hərf - əks vəziyyət, belə mətndə olmayacaq böyük HƏRFLƏR.

Şriftin çəkisi: qalın – burada, məncə başa düşürsən. Bu xüsusiyyət mətni qalın edir və bu üslubda bir az böyüyür.

Hərf aralığı: pikseldə dəyər - bu parametr simvollar arasındakı məsafəni təyin etməyə imkan verir. Bu heç bir şəkildə simvolların ölçüsünə təsir etmir, lakin mətnin enini dəyişir. Siz müsbət və mənfi dəyərlər daxil edə bilərsiniz.

Alt xətt

Mətndə simvolların ölçüsünü müəyyən etmək üçün həm mütləq, həm də təyin edilə bilən font-size xassəsindən istifadə edin nisbi ölçülər. Buna mətni bir şəkildə çevirən digər xüsusiyyətlər də dolayı yolla təsir edə bilər. Bununla, bu gün üçün sizinlə vidalaşıram və axtarışda blogumuza baxmağı unutmayın yeni məlumatlar veb saytın qurulmasında.