Bir web səhifəsində elementlərin yerləşdirilməsi onun ümumi dizaynı üçün vacibdir. Mətnlərdən istifadə etmək ( məsələn, biz məsləhət görməmişik ) kimi təsirə məruz qalan digər yollar olsa da, ən yaxşı CSS-dən istifadə etməkdir .
Aşağıda şəkilləri, cədvəlləri, paraqrafları və daha çox hizalamaq üçün basit bir CSS stilinin in-line xüsusiyyətindən necə istifadə edəcəyini nəzərdən keçirəcəyik.
Qeyd: Bu üsullar xarici stillərdə də istifadə edilə bilər, lakin bu fərdi əşyalara tətbiq oluna bilər və ehtimal ki, bu şəkildə qalmağınız lazımdır, aşağıda göstərilənlər kimi in-layn üslubu istifadə etmək yaxşıdır.
Mətn paraqraflarını hizalayın
Paraqraf etiketi web səhifənizin yerləşdirilməsinə başlamaq üçün ilk yerdir. Etiketlərin açılması və bağlanması belədir:
Paraqrafdakı mətnin hizalanması səhifənin sol tərəfindədir, ancaq paraqraflarınızı sağa və mərkəzə düzəldə bilərsiniz.
Float xüsusiyyətindən istifadə edərək, paraqrafları yuxarı elementin sağ və ya soluna düzəldə bilərsiniz. Bu ana elementin içərisində hər hansı digər elementlər floated element ətrafında axacaq.
Bir paraqrafla ən yaxşı təsiri əldə etmək üçün, konteyner (ana) elementdən daha az olan paraqrafa bir genişlik qoymaq yaxşıdır.
Mətnin içindəki Paraqrafları hizalayın
Müqayisə olar ki, paraqraf mətninin ən maraqlı uyğunluğu brauzerin mətnin, əsasən, həm pəncərənin sağ və sol tərəflərinə göstərməsini izah edən "haqq qazandır".
Bir paraqrafdakı mətni haqq qazandırmaq üçün mətn align xüsusiyyətini istifadə edirsiniz.
Mətn align xüsusiyyətini istifadə edərək, bir paraqrafın içərisindəki bütün mətni sağa və ya sola (default) uyğunlaşdıra bilərsiniz.
Mətn-align əmri elementin içərisində mətni düzəldəcəkdir. Texniki cəhətdən, paraqrafın və ya digər elementin içindəki şəkilləri uyğunlaşdırmaq olmur, lakin əksər brauzerlər bu təsvir üçün inline şəkillər kimi davranırlar.
Şəkillərə uyğunlaşma
Bir şəkil etiketində float xüsusiyyətindən istifadə edərək, şəkillərin yerləşdirilməsini və mətnin ətrafında necə sarılacağını müəyyən edə bilərsiniz.
Yuxarıdakı paraqraflar kimi, şəkil etiketi içərisində float stil mülkiyyəti təsvir səhifənizdə yerləşdiriləcək və brauzerinizə mətn və bu şəkil ətrafında olan digər elementləri necə axıracağını bildirir.
Yuxarıdakı şəkil etiketinin ardından mətn ekranın solunda görüntü kimi göstərildiyi kimi sağa doğru axacaq.
Mətn, resmin ətrafında dolaşmasını dayandırmaq istəmirəmsə, mən aydın əmlakdan istifadə edirəm:
style = "clearar: sol"
Paraqraflardan daha çox hizalanma
Ancaq bir paraqrafdan və ya bir görüntədən daha çox hizalanmaq istəyirsinizsə nədir? Hər bir paraqrafda stil mülkiyyətini sadəcə qoya bilərdiniz, ancaq istifadə edə biləcəyiniz bir etiket daha effektivdir:
Yalnız mətn və şəkilləri ( HTML teqləri də daxil olmaqla) etiket və stil mülkiyyəti (float və ya mətn-align) ilə əhatə edir və həmin bölgədə olan hər şeyi necə istəyə bilərsiniz.
Bölmənin içindəki paraqraflara və ya şəkillərə əlavə edilən hizaların qeyd olunacağından əmin olun.