Mərkəzləri qurarkən mərkəz şəkilləri, mətn və blok elementləri
Veb-saytların necə qurulacağını öyrənirsinizsə , usta lazım olan ən çox istifadə edilən məqamlardan biri, brauzer pəncərəsindəki maddələrin necə mərkəzləşdirilməsidir. Bu, bir görüntüyü səhifə üzərində mərkəzləşdirmək deməkdir və ya dizaynın bir hissəsi kimi başlıqları kimi mərkəzə əsaslanan mətn ola bilər.
Mərkəzləşdirilmiş şəkillərin və ya mətnin və ya hətta bütün web səhifənizin bu vizual görünüşünü yerinə yetirmək üçün düzgün yol Cascading Style Sheets (CSS) istifadə etməkdir . Mərkəzləşdirmə üçün xassələrin əksəriyyəti 1.0-ci ildən CSS-də olmuşdur və onlar CSS3 və müasir veb brauzerləri ilə yaxşı işləyirlər.
Veb dizaynın bir çox aspekti kimi, CSS-nin elementləri veb səhifəsində elementlərdən istifadə etmək üçün bir çox yol var. Bu vizual görünməyə nail olmaq üçün CSS-dən istifadə etmək üçün müxtəlif yollara nəzər salaq.
CSS-in Mərkəz Elementlərinə CSS-lərin istifadəsinə baxış
CSS ilə mərkəzləşdirmə bu bir vizual üslubu yerinə yetirmək üçün bir çox müxtəlif yollar var, çünki web dizaynerləri başlamağın bir problem ola bilər. Müxtəlif metodlar müxtəlif üsulların hər elementdə işləməyəcəyini bilən gözəl və ya təcrübəli web developers ola bilər, baxmayaraq ki, müxtəlif üsullardan istifadə edildikdən sonra, hansı yeni yanaşma istifadə edəcəyini bilmək lazımdır, çünki yeni veb peşəkarları üçün çox çətin ola bilər. Ən yaxşı şey bir neçə yanaşma anlayışını əldə etməkdir. Onları istifadə etməyə başladığınız zaman, hansı hallarda hansı üsul yaxşı işlədiyini öyrənəcəksiniz.
Yüksək səviyyədə CSS-i istifadə edə bilərsiniz:
- Mərkəzi mətn
- Bir blok səviyyəli element (bir bölmə kimi)
- Bir şəkil çəkin
- Dikey bir blok və ya bir şəkil mərkəzi
Bir çox (bir çox) illər əvvəl veb-dizaynerlər mərkəz və elementləri mərkəzi şəkillərdən və mətndən istifadə edə bilirdilər, ancaq HTML elementi artıq mövcud deyil və müasir veb brauzerlərdə artıq dəstəklənmir. Bu, sayfalarınızın düzgün görüntülenmesini və müasir standartlara uyğun olmasını istəyirsinizsə, bu HTML elementindən istifadə etməməlisiniz! Bu elementin köhnəlməsi səbəbi, əsasən, müasir veb saytların strukturu və üslubunu dəqiq bir şəkildə ayırması lazımdır. HTML stil tərtib edərkən struktur yaratmaq üçün istifadə olunur. Mərkəzləşdirmə bir elementin vizual xarakteristikası olduğundan (bunun nə olduğundan çox görünür), bu stil HTML deyil, CSS ilə işlənir. Buna görə HTML strukturuna
CSS ilə mətni mərkəzləşdirmək
Bir web-səhifənin mərkəzində yerləşdirilməsi ən asan şey mətndir. Bunu etmək üçün bilmək üçün lazım olan yalnız bir stil var: text-align. Aşağıdakı CSS stilinə baxın, məsələn:
p.center {text-align: center; }
CSS bu xətti ilə mərkəzi siniflə yazılmış hər paraqraf ana elementin içərisində üfüqi olaraq mərkəzləşdiriləcəkdir. Məsələn, əgər paraqraf bölünmənin içərisindədirsə, bu bölünmənin bir uşağı idi, o,
HTML sənədində tətbiq olunan bu sinifin nümunəsi:
Bu mətn mərkəzli.
Mətn ardıcıllığı ilə mətni mərkəzləşdirərkən, onu ehtiva bütün səhifənin özü daxilində deyil, tərkib elementi daxilində mərkəzləşdirəcəyini unutmayın. Həm də yadda saxlamalı mətnin böyük miqyaslı məzmun blokları üçün oxunması çətin ola bilər, yəni bu üslubu az miqdarda istifadə edin. Bir başlıq və ya digər məzmun üçün teaser mətn kimi başlıqları və kiçik blokları, mərkəzləşdirildikdə tez-tez oxumaq və sadələşdirmək üçün asandır, lakin tam mətnin özü kimi böyük mətn bloğu məzmunun tam mərkəz olduğu təqdirdə istehlak etmək çətindir haqlıdır. Veb sayt mətninə gəldikdə, okunabilirlik həmişə vacibdir!
CSS ilə məzmun bloklarının mərkəzləşdirilməsi
Bloklar, səhifənizdə müəyyən bir eni olan və blok səviyyəli element kimi yaradılan hər hansı bir elementdir. Çox vaxt bu bloklar HTML
div.center {
margin: 0 avtomatik;
eni: 80em;
}
Marjın əmlakı üçün bu CSS steneri yuxarı və aşağı marginləri 0 dəyərinə, sola və sağa isə "avtomatik" istifadə edərdi. Bu, əsasən, mövcud olan hər hansı bir yer tutur və görünüş penceresinin iki tərəfi arasında bərabər bir şəkildə bölünür, effektiv elementi səhifə üzərində mərkəzləşdirir.
Burada HTML-də tətbiq olunur:
lakin içərisindəki mətn hizalı olaraq qalır.
Blokunuz müəyyən bir genişliyə malik olduğu müddətcə, özü tərkib elementinin içərisində özünü mərkəzləşdirir. Bu blokdakı mətn onun içərisində mərkəzləşdirilməyəcək, lakin sola əsaslanacaqdır. Bunun səbəbi, veb-brauzerlərdə default olaraq sola əsaslanan mətndir. Mətnin mərkəzləşdirilməsini istəsəniz, bölmənin mərkəzləşdirilməsi üçün daha əvvəl bu metodla əlaqəli mətn align xüsusiyyətini istifadə edə bilərsiniz.
Şəkillər CSS ilə mərkəzləşdirilmişdir
Baxmayaraq ki, bir çox brauzerlər eyni mətn align xüsusiyyətindən istifadə edərək mərkəzləşdirilmiş şəkilləri göstərəcəklər, baxmayaraq ki, biz artıq zəhmət olmasa, bənddə baxdıqda , W3C tərəfindən tövsiyə olunmur. Tövsiyə edilməmiş olduğundan, brauzerlərin gələcək versiyalarının bu üsulu görməməyi seçə biləcəyi bir şans var.
Bir görüntüyü ortadan qaldırmaq üçün mətn align istifadə etmək əvəzinə, brauzerinizə, şəkilin blok səviyyəli bir element olduğunu açıq şəkildə bildirməlisiniz. Bu yolla, hər hansı digər blokun olduğu kimi onu mərkəzləşdirə bilərsiniz. Bunun üçün CSS-nin edilməsi:
img.center {
ekran: blok;
margin-left: auto;
margin-right: auto;
}
Və burada mərkəzləşdirilmək istərdik ki, imic üçün HTML:
Ayrıca in-line CSS-də (aşağıya bax) istifadə edərək, obyektlərin mərkəzini aça bilərsiniz, ancaq bu yanaşma HTML tərtib olunmağınıza görsel üslublar əlavə edildikdən sonra tövsiyə edilmir. Unutmayın ki, stil və quruluşu ayırmaq istəyirik, beləliklə, CSS-nin üslublarını HTML kodunuza ayırmaqla ayırın və mümkün olduğu qədər qaçınmaq lazımdır.
CSS ilə şaquli elementlərin mərkəzləşdirilməsi
Nəzarət obyektləri dikey olaraq hər zaman veb dizaynında çətin olmuşdur, lakin CSS3-də CSS CSS-nin Layiqli Layout Layout Modulunun buraxılması ilə bunu etmək üçün bir yol var.
Şaquli hizalama, yuxarıda göstərilən üfüqi hizaya oxşar şəkildə işləyir. CSS mülkiyyəti orta dəyəri ilə şaquli-hizalı olur.
.vcenter {
şaquli-align: orta;
}
Bu yanaşma ən azı bu yeni CSS layout metoduna yaxınlaşsa da, bütün brauzerlər CSS FlexBox-u dəstəkləməyəcəkdir! Əslində, bu gün bütün müasir brauzerlər bu CSS stilini dəstəkləyirlər. Bu, Flexbox'la olan yeganə narahatlığınız daha böyük bir brauzer versiyası olacaq.
Köhnə brauzerlər ilə əlaqədar məsələləriniz varsa, W3C mətni aşağıdakı metoddan istifadə edərək, bir konteynerə vertikal olaraq yerləşdirilməsini təklif edir:
- Elementləri bir div kimi bir element daxilində yerləşdirilməlidir.
- Əlavə elementdə minimum hündürlüyü seçin.
- Elementi bir masa hüceyrəsi olaraq verdiyini bildirin.
- Şaquli hizanı "orta" vəziyyətinə qoyun.
Məsələn, burada CSS:
.vcenter {
min yükseklik: 12em;
ekran: masa hüceyrəsi;
şaquli-align: orta;
}
Və burada HTML:
Bu mətn qutusuna dikey olaraq ortalanmışdır.
Dikey Mərkəzləşdirmə və Internet Explorer'ın Daha Köhnə Versiyaları
İnternet Explorer (IE) mərkəzini məcbur etmək üçün bəzi yollar var və şərti şərhlər yalnız IE'nin üslubları görməsi üçün istifadə edir, lakin onlar bir az verbose və çirkindir. Yaxşı xəbərdir ki, Microsoft-un yeni versiyalarına dəstək verməkdən imtina edən brauzerlər tezliklə qısa müddətdə çıxış etməlidirlər və veb-dizaynerlər CSS FlexBox kimi müasir layout üsullarından istifadə etməyi asanlaşdıracaqlar, bütün veb-dizaynerlər üçün daha asanlaşdırıcı deyil.