Bir Web səhifəsində mətnin soluna bir şəkil çəkmək üçün necə

Bir veb səhifə Layout'un sol tərəfinə bir görüntüyü hizalamaq üçün CSS istifadə

Bu gün demək olar ki, hər hansı bir veb səhifəyə baxın və bu səhifələrin böyük hissəsini təşkil edən mətn və şəkillərin birləşməsini görəcəksiniz. Bir səhifəyə mətn və şəkillər əlavə etmək çox asandır. Mətn paraqraflar, siyahlar və başlıqlar kimi standart HTML teqləri istifadə olunur, şəkillər elementi ilə daxil edilir.

Bu mətni və bu şəkilləri yaxşı bir yerdə işləmək qabiliyyəti böyük veb-dizaynerləri ayırır! Yalnız mətninizi və şəkillərinizi bir-birinizin ardınca gəlməsini istəmirsiniz, bu blok-səviyyəli elementlərin default olaraq yerləşdirilməsidir. Xeyr, mətn və şəkillərin nəticədə veb-saytınızın vizual dizaynı olacaq şəkildə bir-birinə necə axış etdiyini nəzərə alsın.

Bu səhifənin mətni ətrafında axan bir səhifənin sol tərəfində hizalanan bir şəkil olması bədii dizayn və ayrıca veb səhifələr üçün ümumi dizayn müalicəsidir. Veb baxımından, bu təsvir görünüşü üzən kimi tanınır . Bu üslub "float" üçün CSS mülkiyyəti ilə əldə edilir. Bu xüsusiyyət mətnin sağ tərəfinə sola hizalı təsvirin ətrafında axın etməyə imkan verir. (Və ya sol sağ tərəfə doğru bir hizalı şəkil ətrafında.) Bu vizual effektə necə nail olacağına bir nəzər salaq.

HTML ilə başlayın

Birincisi, sizə lazım olan bəzi HTML ilə işləmək lazımdır. Məsələn, mətnin bir bəndini yazırıq və bəndin əvvəlində (mətndən əvvəl, lakin açılışdan sonra

etiketi) bir şəkil əlavə edəcəyik. HTML formatlaşdırma işarəsi aşağıdakılardır:

Paragrafın mətni buraya aiddir. Bu nümunədə biz başlıqlı bir şəkil çəkirik, buna görə də bu mətn başlıqlı olan şəxs haqqında olacaqdır.

Varsayılan olaraq, web səhifəmiz mətnin yuxarı hissəsində göstərilir. Görüntülər HTML-də blok səviyyəli elementlərdir. Bu, brauzer default elementdən əvvəl və sonra line elementləri göstərilir. CSS-ə dönərək bu default görünüşünü dəyişəcəyik. Birincisi, bizim image elementimizə bir sinif dəyərini əlavə edəcəyik. Bu sinif CSS-də daha sonra istifadə edəcəyimiz bir "çəngəl" kimi çıxış edəcəkdir.

Paragrafın mətni buraya aiddir. Bu nümunədə biz başlıqlı bir şəkil çəkirik, buna görə də bu mətn başlıqlı olan şəxs haqqında olacaqdır.

Qeyd edək ki, bu "sol" sinfi heç bir şey etməz! İstədiyimiz stilimizə nail olmaq üçün, növbəti CSS- dən istifadə etmək lazımdır.

CSS Styles

HTML-lərimizdə, "sol" sinif xüsusiyyətimiz daxil olmaqla, indi CSS-ə müraciət edə bilərik. Görünüşümüzü çəkə biləcək və sonradan şəkil ətrafında dolaşacağına dair mətn ona qarşı sıxlaşmır ki, bu görünüşü silmək və yanında bir az padding əlavə etmək üçün üsluba bir qayda əlavə edəcəyik. Aşağıda yaza bilərsiniz CSS:

.left {float: sol; padding: 0 20px 20px 0; }

Bu üslub soldan sola çəkir və şəkilin sağ və altına bir az padding əlavə edir (bəzi CSS stenoqrafiyasından istifadə edir).

Bir brauzerdə bu HTML olan səhifəni nəzərdən keçirsəniz, şəkil indi sola həkk olunacaq və bəndin mətni iki arasında aralıq boşluğun hüququ ilə görünür. İstifadə etdiyimiz "sol" un sinif dəyəri qeyd edin. Biz bunu bir şey deyə bilərdik, çünki "sol" sözü öz-özlüyündə heç nə etməzdi. Bunun üçün aradığınız görsel dəyişiklikləri diktə edən faktiki CSS tərzi ilə işləyən HTML-də bir sinif özniteliğinin olması lazımdır.

Bu üslublara nail olmaq üçün alternativ yollar

Görünüş elementini bir sinif xüsusiyyətinə vermək və sonra elementi yığılan ümumi CSS tərzini istifadə edərək bu yanaşma bu "sola bərabər görünüş" görünüşünü əldə edə bilərsiniz. Daha dəqiq bir seçici yazaraq təsvirin sinif dəyərini və CSS ilə stilini də götürə bilərsiniz. Məsələn, bu təsvirin "əsas məzmun" bir sinif dəyəri olan bir bölmənin içərisində olduğu bir nümunə nəzər salaq.