Hesablar 

CSS-də float və aydın blok əsaslı layout alətləridir. HTML atributları: növləri və tətbiqi. HTML arayışı Ümumi sinif aydınlaşdırması

Salam, blog saytının əziz oxucuları! Çox əhəmiyyətli bir fasilədən sonra mən CSS-nin öyrənilməsi mövzusunu davam etdirmək qərarına gəldim və bugünkü məqaləmiz float istifadə edərək üzən elementlərin yaradılmasına həsr olunacaq, praktik nümunələrdən istifadə edərək bu qaydanın aydın xüsusiyyəti ilə birlikdə sütunlar yaratmaq üçün təsirinə baxacağıq. və üfüqi menyu.

Təcrübəsizlər üçün, məncə, kaskad üslub vərəqlərindəki digər materialları oxumaqla başlamaq daha yaxşı olardı. Nəzərinizə çatdırım ki, bu mövzuda bütün məqalələr lazımi məlumatları əldə edə biləcəyiniz bölmədədir.

Üzən elementlər HTML-də eyni təsvirlər ətrafında mətn sarğısı yaratmaq lazım olduqda da tapılır (img teqinin sol və sağ parametrlərlə align atributu). Beləliklə, bu aspekt veb səhifə məzmunu hazırlayarkən olduqca populyardır.

Bugünkü nəşrimiz boyu təhlil edəcəyik float (sol, sağ, heç biri) və aydın qaydaları hərəkətlər o cümlədən blok tərtibatı üçün əsas olan ilə əlaqədar. Əlbəttə ki, indiki mərhələdə böyük əksəriyyət veb-sayt yaratarkən mütərəqqi CMS-dən (xüsusən də WordPress) istifadə edir. Bununla belə, üslubların əsasları və hipermətn işarələmə dili haqqında biliklərin gələcəkdə sizə yaxşı xidmət edəcəyinə inanın.

float istifadə edərək CSS-də üzən elementləri necə yaratmaq olar

Başlamaq üçün sizə xatırlatmaq istərdim ki, normal axın zamanı veb-elementlər kodda göstərilən ardıcıllıqla ciddi şəkildə veb-səhifədə yerləşdirilir. Ancaq bildiyiniz kimi, həmişə istisnalar var. Bu məntiqlidir, çünki qeyri-standart problemləri həll etmək üçün leveraj lazımdır.

Bu vasitələrdən biri, məsələn, verilmiş linkdə onun haqqında ətraflı oxuya bilərsiniz. Yaxşı, veb elementlərinin standart nümayişi qaydasını dəyişdirməyin başqa bir yolu float qaydasıdır.

İstənilən CSS mülkiyyəti (mülkiyyəti) və onun dəyərləri haqqında məlumat tam məlumatın verildiyi W3C spesifikasiya səhifəsindən əldə edilə bilər (üslub cədvəllərinin ikinci versiyası üçün məlumatlar, lakin bu, artıq rəsmi olaraq mövcud olan CSS3 üçün də doğrudur. güc, tam inkişaf etməsə də):


Gördüyünüz kimi, float üç mümkün parametrdən birini (sol, sağ, heç biri) və (miras) götürə bilər. float none parametri default olaraq tətbiq edilir və o deməkdir ki, elementlər normal axından sonra ardıcıllıqla göstəriləcək. Ancaq sağ və ya sol üzən bloklar yaratmağa imkan verir müvafiq olaraq sağa və ya sola ofset ilə.

Xatırlayırsınızsa, ən çox istifadə olunanlar fərqli davranırlar (ümumiyyətlə, bütün elementlərin ekran növü Display xüsusiyyətindən istifadə edərək CSS istifadə edərək həyata keçirilir). Blok olanlar, genişlik dəyəri göstərilmədikdə, bütün mövcud eni tutur. Hündürlük parametri göstərilməyibsə, hündürlük məzmunla müəyyən edilir.

Daxili etiketlər bir sətirdə yerləşdirilir və yalnız mövcud genişlik sahəsi bitdikdə digərinə köçürülür. Normal halda, onlar üçün hündürlüyü və eni təyin etmək mümkün deyil. Bu məlumat əsasında konkret misala baxaq.

Aydınlıq üçün CSS qaydalarını daxil edək (bu üsul praktikada adətən nadir hallarda istifadə olunur, lakin sınaq üçün çox əlverişlidir).

Yuxarıdakıların düzgün olduğuna əmin olmaq üçün gəlin onların eni və hündürlüyü xassələrini göstərən iki sətirli teq, həmçinin bir blok teq götürək. Aydınlığı təmin etmək üçün fondan istifadə edərək hər blok üçün rəng çalarlarını təyin edək (eynini edə bilərsiniz):

Daxili element 1 Daxili element 2

Blok elementi

Nəticədə görüntü aşağıdakı kimi olacaq:

Gördüyünüz kimi, daxili olan SPAN teqi üçün göstərilən hündürlüyün (hündürlük:50px) və eninin (en:450px) normal şəraitdə işləməməsinin praktiki təsdiqini almışıq. Sonra, birinci inline veb elementi üçün float right xassəsini, ikincisi üçün float left xassəsini təyin etməyə çalışaq:

Daxili element 1 Daxili element 2

Blok elementi

Nəticədə əldə edirik:


Tamamilə aydındır ki, bu halda birinci və ikinci veb elementləri üzən olur (biri sola, digəri sağa doğru hərəkət etmişdir). Bundan əlavə, onlar CSS üslublarında göstərilən eni və hündürlüyü əldə etdilər.

Bundan əlavə, SPAN inline teqi ilə müəyyən edilmiş veb elementləri qonşu DIV konteyneri ilə fərqli şəkildə qarşılıqlı əlaqədə olur. Hər iki SPAN teqinin üslublarından genişlik atributunu daha da çıxarsaq, onda onların eni məzmunla müəyyən ediləcək (bizim vəziyyətimizdə elementlərin adları ilə mətnin uzunluğu):

İndi DIV blokunun məzmunu float: left ilə veb elementinin sağına axmağa başlayır. Baxış sahəsini özünüz dəyişdirməyə cəhd edə və blokların bir-birinə münasibətdə necə davrandığını müşahidə edə biləcəyiniz bu veb-səhifədə xüsusi praktiki tədqiqatın nəticələri ilə daha aydın şəkildə tanış olmaq mənasızdır:


Xülasə etmək üçün, float xüsusiyyətinin (sağ və ya sol) bu və ya digər dəyəri olan konteynerə xas olan bəzi xüsusiyyətləri müəyyən edək:

  • Element sol və ya sağ kənara uyğunlaşdırılır;
  • Əvvəl nə olduğundan asılı olmayaraq bloklu olur;
  • Qonşu blok veb elementləri (ekran: blok qaydası ilə) mövcud deyilmiş kimi davranır. Məqalənin bu hissəsinin ekran görüntülərinə bir daha nəzər salsanız, bunu yoxlaya bilərsiniz;
  • Eyni zamanda, daxili teqlər (displey: inline) üzən blokları əhatə edəcək. Əvvəlki skrinşota yenidən baxsanız, görərsiniz ki, DIV ("Blok Elementi") konteynerinin məzmunu sağda solda float:left ilə SPAN ətrafına sarılır.
  • Əgər siz üzən blokun enini açıq şəkildə göstərməsəniz (bizim nümunəmizdə eni:450px), o zaman onun məzmunu ilə müəyyən ediləcək;

Bu nümunədə biz müxtəlif float xassə parametrləri ilə üzən blokların əsas xüsusiyyətlərini nəzərdən keçirdik və tapşırığı çətinləşdirmək üçün həm daxili, həm də blok veb elementlərini (müxtəlif Ekran dəyərləri ilə) seçdik. Materialı gücləndirmək üçün E. Popovdan məlumatlandırıcı videoya baxmağınızdan əmin olun:

CSS (float) istifadə edərək üfüqi menyunu necə etmək olar

Bundan sonra, veb saytın inkişafında çox istifadə olunan üzən bloklardan istifadə edərək üfüqi menyu yaratmaq üçün çox xüsusi bir vəzifəni təhlil edəcəyik. Əvvəlcə kodu belə görünəcək birini quraq:

  • 1-ci bənd
  • Nöqtə 2
  • Nöqtə 3
  • Nöqtə 4
  • Nöqtə 5

      • Bu kimi bir şey alırıq:

      İndi CSS xassələrindən istifadə edərək yaranan menyunu bir az redaktə edək: siyahı üslubundan istifadə edərək hər bir elementin qarşısındakı markerləri silin, onlara ekran bloku qaydasını tətbiq etməklə kiçik hərfi bloka çevirin və həmçinin müxtəliflik üçün onların hər birinə gözəl fon verin. .

      Menyu elementlərini bir-birindən bir qədər uzaqlaşdıraraq dizaynı daha da təkmilləşdirmək üçün bir kənar qoymaq da yaxşı olardı. WordPress saytının veb səhifələri üçün STYLE.CSS faylında lazımi üslubları təyin etdiyiniz UL etiketi "menyu" təyin edə bilərsiniz:

      Menyu (siyahı üslubu: heç biri; kənar: 0; doldurma: 15 piksel;) .menyu li a(ekran: blok; doldurma: 10px; fon:#EFCDB8;) .menu li(margin:10px;)

      Bu halda mən qəsdən STYLE atributundan istifadə etmirəm, çünki o, məni hər LI teqi üçün eyni CSS xassələrini bir neçə dəfə təyin etməyə məcbur edəcək. Hərəkətlərimiz nəticəsində menyu belə görünəcək:


      Əvvəlki versiya ilə fərq təəccüblüdür, elə deyilmi? İndi daha çox klassik menyuya bənzəyən bir şəkilimiz var. Düzdür, içindəki nöqtələr üfüqi deyil, şaquli olaraq yerləşir. Problemi tam həll etmək üçün LI siyahısının HTML elementinə float left xassəsini əlavə etməlisiniz, onun üçün tam CSS qaydası belə olacaq:

      Menyu li(margin:10px;float:sol;)

      Nəticədə menyu üfüqi bir versiyaya çevriləcək:


      Düşünürəm ki, yuxarıda verilən məlumatlara əsaslanaraq, belə bir metamorfozun baş verməsinin səbəbini başa düşürsünüz. Solda float olan menyunun hər bir veb elementi konteynerin yerini, onun sərhədlərini rəhbər tutur və mümkün qədər yuxarı və sola hərəkət edərək yer tutmağa çalışır. Bu, müvafiq olaraq yerləşdirilən “1-ci nöqtə” bloku ilə baş verdi.

      "2-ci maddə" də sola keçdi, lakin onun sonrakı hərəkəti menyunun ilk veb elementi tərəfindən bloklandı. Və s. Nəticədə, bütün menyu komponentlərinin üfüqi ardıcıl zəncirini aldıq. Bütün detalları özünüz görə bilərsiniz. İndi görüntünün enini süni şəkildə azaltmağa çalışaq:

      Üzən element yuxarıda yer tapmadıqda, o, aşağıdakı cərgədə ən yüksək mövqenin şaquli mövqeyini tutur və ən sol mövqeyə keçir. Praktikada tez-tez olur ki, müəyyən bir maddənin adı daha uzun ola bilər və standart sərhədlərə uyğun gəlmir. Əgər bu birinci elementdirsə, onda bütün menyu belə görünə bilər:

      Bu halda, “4-cü maddə” əvvəlcə ən yuxarı həddi nəzərə alır və yalnız bundan sonra ən sol mövqeyə keçir, lakin ilk veb elementinə çırpılır. Tutaq ki, üçüncü nöqtənin hündürlüyü daha böyük olarsa, şəkil aşağıdakı kimi dəyişir:

      Sonra "3-cü maddə" öz mövqeyini yuxarı cərgədəki sonuncu veb elementinin alt sərhədi ilə uyğunlaşdıracaq və yalnız sonra sola keçəcəkdir. Yuxarıda təsvir edilən bütün hərəkətlər bir səhifədə veb elementlərinin düzülüşündə float təsirinin mahiyyətini anlamağa kömək etməlidir.

      Praktik tərtibatda oxşar problemlər yaranarsa, CSS float xüsusiyyətinin əvəzinə üfüqi menyu yaratmaq üçün başqa üsullardan istifadə edə bilərsiniz. Ancaq bu, gələcəkdə mütləq müraciət edəcəyimiz ayrıca bir mövzudur.

      Aydın (hər ikisi, sol, sağ) xüsusiyyətinin tətbiqinin təsiri

      İndi üzən elementlərin xüsusiyyətlərindən öz xeyrinizə necə istifadə edəcəyinizi görək, lakin eyni zamanda veb-səhifədə aşağıdakı blokları öz mövqeyini və ölçüsünü nəzərə almağa məcbur edin. Buna aydın qaydadan istifadə etməklə nail olmaq olar. Yenə də bütün məlumatları orijinal mənbədən əldə etmək olar (W3C konsorsiumu):


      Qayda CSS clear dörd mümkün dəyərə malikdir, heç biri standart kod axını təmin etdiyi üçün bu, təbiidir. Həmçinin aydın (heç biri, sol, sağ, hər ikisi) ana teqdən miras alınır (miras).

      Müəyyən bir blok üçün yazılmış bu qaydanın mahiyyəti, dəyərindən asılı olaraq bir hərəkəti ləğv etməkdir:

      • heç biri - aydın xüsusiyyətin özünün təsirini ləğv edir, nəticədə etiketin məzmunu (məsələn, mətn) float şəklində onun üçün müəyyən edilmiş üslublara uyğun olaraq veb elementi əhatə edir;
      • sol və sağ - müvafiq olaraq sol və ya sağ kənarın ətrafında axını aradan qaldırır;
      • hər ikisi - həm sağ, həm də sol ətrafında axının qarşısını alır. Bu, praktik istifadədə aydının ən ümumi dəyəridir.

      Heç nə başa düşə bilmirsən? Mənanı qeyri-müəyyən və yalnız intuisiya ilə dərk edirsiniz? Heç nə, aydın nümunəyə baxdıqdan sonra hər şey öz yerinə düşəcək. Bunu etmək üçün tapşırığı təyin edək: iki bloku üfüqi olaraq bir-birinin yanında yerləşdirin və aşağıya bir neçə mətn qoyun. Bu dizayn layoutda olduqca yaygındır.

      Beləliklə, sxematik olaraq 2 sütunu təmsil edə bilən iki DIV konteynerini götürək. O cümlədən onlar üçün CSS xassələrini yazaq sabit eni(en), fon rəngi və sol float istifadə edərək onları üzənlərə çevirmək. Gəlin onlara, bildiyiniz kimi, kiçik hərf olan P teqinə daxil edilmiş mətn əlavə edək:

      Sol sütun
      Sağ sütun

      DIV-lər üfüqi cərgədə düzüləcək, birincisi mümkün qədər solda olacaq. İkincisi isə sağ kənarında dayanacaq (bunun üçün bu, soldakı yer olacaq) və birinci div-in irəli getməsinə imkan verməyəcək. Lakin mətn bu sıranı davam etdirəcək, çünki ümumi genişlik buna imkan verir:

      Anladığınız kimi, bu vəziyyətdə tapşırığımız başa çatmış hesab edilə bilməz. Birincisi, görünüş pəncərəsini divlərin ümumi genişliyindən daha az miqdarda daraldarkən, sağ sütun aşağı sıçrayır və solun altında yerləşir. İkincisi, mətni olan üçüncü veb elementin məzmunu sütunların altında deyil, yanında yerləşir:


      Yenə də bütün elementlərin necə davrandığını, baxış sahəsini süni şəkildə daraltdığını və genişləndirdiyini özünüz görə bilərsiniz. Təsvir edilən çatışmazlıqları aradan qaldırmaq üçün biz CSS xüsusiyyətləri olan bir konteyner əlavə edəcəyik və bütün mövcud təbəqələri içərisinə yerləşdirəcəyik. Aşağı blokun (mətn) məzmununun sağ və soldakı sütunlar ətrafında axmasının qarşısını almaq üçün CSS hər iki qaydanı təmizləyən əlavə boş DIV əlavə edəcəyik:

      Sol sütun
      Sağ sütun

      Nəzərə alın ki, böyük diva üslublarına I əlavə marja: 0 avtomatik qayda, konteyneri mərkəzləşdirmək üçün istifadə edilə bilər. Nəticə görünüş belə görünəcək:


      İndi problemimiz həll olundu, çünki nəticə müəyyən edilmiş şərtlərə cavab verir: iki sütun üfüqi cərgədə yerləşir və kodun (TEXT) altındakı veb elementinin məzmunu sütunlar altında öz layiqli yerində möhkəm qalacaqdır.

      Baxış sahəsinin eni azaldılsa, dizayn orijinal formada qalacaq (və üfüqi sürüşmə baş verəcək), bu nümunənin həlli ilə müvafiq veb səhifəyə keçərək yoxlaya bilərsiniz. Əlavə olaraq, float və clear istifadə edərək veb səhifənin işarələnməsinə nümunə verən Evgeni Popovdan videoya baxın:

      Elementin hansı tərəfə düzüləcəyini, digər tərəflərdə onun ətrafında digər elementlərin axacağını müəyyənləşdirir. float none olaraq təyin edildikdə, element səhifədə normal olaraq göstərilir, elementin özü ilə eyni sətirdə ən çox bir bükmə mətn sətirinə icazə verilir.

      Sintaksis

      float: sol | sağ | heç biri

      Arqumentlər

      sol Elementi sola düzür və mətn kimi bütün digər elementlər onun ətrafında sağa axır. sağ Elementi sağa, bütün digər elementlər isə onu sola çəpərləyir. heç biri Elementin sarılması təyin edilməyib.





      sal



      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.


      Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum doore eu feugiat nulla facilisis at accumsan and accumsan and iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue guesidocil dollore.


      Obyekt Modeli

      document.getElementById("elementID ").style.styleFloat

      Formatlama

    • aydın dəstlər elementin hansı tərəfində digər elementlərin onun ətrafına sarılmasına icazə verilmir. Əgər float parametrindən istifadə edərək elementi üzmək üçün təyin etsəniz, aydın xüsusiyyət onu göstərilən tərəflər üçün ləğv edir.
    • klip, məzmununun göstəriləcəyi yerləşdirilmiş elementin sahəsini müəyyənləşdirir. Bu sahəyə uyğun olmayan hər şey kəsiləcək və görünməz olacaq. Hazırda yeganə mövcud sahə forması düzbucaqlıdır.
    • displey çoxməqsədli atributdur və sənəddə elementin necə göstərilməsini müəyyən edir.

      • Biz bunu artıq başa düşmüşük. Onların məzmunu olduğunu öyrəndik. Lakin, bu, hamısı deyil. Teqlər də öz imkanlarını artıran atributlara malikdir və atributlar öz növbəsində dəyərlərə malikdir. Onların köməyi ilə bir element üçün parametrlər təyin edə və dizayn tərzini təyin edə bilərsiniz. Məsələn, etiketlə

      paraqrafı qeyd etdiniz. Bəs onu sağa necə düzləşdirmək olar? Bunu etmək üçün müvafiq dəyəri olan xüsusi bir atribut lazımdır. Bəzi teqlərin bir cütü olmadığı kimi, bəzi atributlar dəyərsiz istifadə edilə bilər.

      Atributları necə yazmaq olar?

      Atributlar qorunan sözlərdir (teqlər kimi, yalnız bucaqlı mötərizələr olmadan), lakin onların mənaları fərqli ola bilər. Teqlər kimi, atributları kiçik hərflərlə dəyərlərlə yazmaq tövsiyə olunur, baxmayaraq ki, brauzerlər ümumiyyətlə vecinə deyil - bu, sadəcə olaraq yaxşı davranış qaydasıdır: rus dilində CAPS LOCK ƏLFƏSİNİ YAZMAQ ÜÇÜN DƏ İSTİFADƏ EDİLMİR AKTİVDİR. HTML niyə daha pisdir?

      Atribut dəyərləri aşağıdakı formatda yazılır:

      Atribut = "dəyər" lang = "az"

      Siz həmişə atributları açılış teqinin içərisində, qorunan sözdən sonra yazmalısınız.

      Paraqraf

      Tipik olaraq bir teq üçün çoxlu atributlar mövcuddur. Onların hansı ardıcıllıqla qeyd olunmasının əhəmiyyəti yoxdur.

      Universal atributlar

      Hər bir HTML teqinin öz atributları dəsti var. Bəzi atributlar birdən çox teq üçün mövcud ola bilər, digərləri isə yalnız biri ilə işləyə bilər. İstənilən etiketlə istifadə oluna bilən universal (qlobal) atributlar qrupu da mövcuddur. Bu kateqoriyanın atributlarına qısaca nəzər salaq.

      • giriş açarı xüsusi səhifə obyektinə daxil olmaq üçün klaviatura qısayolunu təyin etməyə imkan verir. Məsələn, klaviatura qısa yolundan istifadə edə bilərsiniz Alt+1 istifadəçi müəyyən bir keçidi izlədi. Beləliklə, əsas naviqasiya sistemini inkişaf etdirin.

      Atribut dəyəri 0-9 rəqəmləri və ya Latın əlifbasının hərfləri ola bilər:

      Bir düymə kombinasiyasına basmaqla link açılacaq

      • sinif CSS istifadə edərək etiketi əvvəlcədən təyin edilmiş dizaynla əlaqələndirməyə imkan verir. Bir atributdan istifadə kodu əhəmiyyətli dərəcədə azaltmağa imkan verir, çünki eyni CSS blokuna dəfələrlə daxil olmaq əvəzinə, sadəcə müvafiq sinfin adını daxil edə bilərsiniz.
      • İstifadə etməklə redaktə edilə bilən istifadəçiyə HTML səhifəsinin istənilən elementini redaktə etməyə icazə verə bilərsiniz: mətni silmək, daxil etmək, dəyişdirmək. Eyni atribut redaktə etməyə və söndürməyə imkan verir. Bunun yalnız iki mənası var: doğru- redaktə etməyə icazə verin, yalan- qadağan etmək.
      • Atributdan istifadə kontekst menyusu Sənədin istənilən elementini öz mülahizənizlə unikal kontekst menyusu elementləri ilə təyin edə bilərsiniz. Menyu özü etiketdə yaradılmışdır , və contextmenu atributuna onun identifikatoru verilir.
      • rejissor mətnin istiqamətini müəyyən edir: soldan sağa (ltr) və ya sağdan sola (rtl).
      • sürüklənən qadağan etməyə imkan verir (yalan) və ya icazə verin (doğru) istifadəçi bu atributla təchiz edilmiş səhifə elementini sürükləyib buraxa bilər.
      • düşmə zonası brauzerə sürüklənmiş elementlə nə edəcəyini söyləyir: copy(value surəti), hərəkət ( hərəkət) və ya ona keçid yaradın (link).
      • gizli- elementin məzmununu brauzerdə göstərməmək üçün gizlətməyə imkan verən atribut. Atribut false olaraq təyin edilərsə, obyekt göstərilir, true - gizlədilir.
      • id element identifikatorunu müəyyən edir - sadəcə olaraq obyektin üslubunu dəyişdirmək, həmçinin skriptlərin ona daxil ola bilməsi üçün lazım olan bir növ ad. Atributun dəyəri onun adı olacaq. O, Latın hərfi ilə başlamalıdır və rəqəmlər, eyni Latın əlifbasının hərfləri (böyük və kiçik), həmçinin defislərdən ibarət ola bilər. (-) və vurğulayır (_) . Rus hərfləri ola bilməz.
      • dil brauzerə məzmunun hansı dildə yazıldığını başa düşməyə və ona uyğun üslubda saxlamağa kömək edir (məsələn, dillər müxtəlif sitatlardan istifadə edə bilər). Dəyərlər dil kodlarıdır (rus - ru, İngilis - az və s.).
      • orfoqrafiya yoxlanışı daxildir (doğru) və ya söndürür (yalan) orfoqrafiya yoxlanışı. Xüsusilə istifadəçinin mətn daxil edəcəyi forma sahəsində teqlərdə atributdan istifadə etmək faydalıdır.
      • üslub CSS kodundan istifadə edərək elementin dizaynını təyin etməyə imkan verir.
      • tabindex fokus almaq üçün istifadəçinin bu atributlu obyekt üçün Tab düyməsini neçə dəfə basmalı olacağını müəyyən etməyə imkan verir. Kliklərin sayı atribut dəyərini müəyyən edir - müsbət tam ədəd.
      • başlıq- siçanı elementə aparıb onu bir müddət hərəkətsiz qoysanız görünən alət ipucu. Mənadakı xətt bir işarə olacaq.
      • tərcümə etmək imkan verir (bəli) və ya qadağan edir (yox) etiket məzmununun tərcüməsi.
      • hizalayın elementin düzülməsini təyin edir. Məsələn, siz ondan mətni sola uyğunlaşdırmaq üçün istifadə edə bilərsiniz (dəyər sol), sağ kənar boyunca ( sağ), Mərkəzdə (Mərkəz) və ya eni (əsaslandırmaq). Şəkillər üçün (etiket ) sətirdəki ən hündür elementin yuxarı sərhədinə düzülmə də mövcuddur ( üst), aşağı sərhəd boyunca (aşağı), və orta dəyər şəklin orta xəttini sıranın əsas xətti ilə üst-üstə düşür.

      Atributdan istifadə etdiyini nəzərə almağa dəyər hizalayın Tövsiyə olunmur və mətni CSS-dən istifadə edərək düzləşdirmək daha yaxşıdır.

      Atributlardan istifadə nümunəsi

      Nümunə olaraq, HTML kodunun xəttini nəzərdən keçirin:

      Bu mətn redaktə edilə bilər

      Bütün sətir istifadəçinin brauzerdə redaktə edə biləcəyi mətn paraqrafını yaradır.

      Xəttin hər bir elementinə nəzər salaq.

      - paraqrafı saxlayan qabın açılış etiketi.

      - bağlama etiketi.

      Personajlar arasında > Və < mətn yerləşir Bu mətn redaktə edilə bilər. Bu, etiketlərdən kənarda (onların arasında) bir yazıdır, yəni səhifəni açan istifadəçiyə görünəcək. Brauzer onu ekranda göstərilməli olan sadə mətn kimi qəbul edir.

      redaktə edilə bilən=”doğru” - bu xüsusiyyət və onun mənasıdır. Məktəbdə necə olduğunu xatırlayın: x=3. Beləliklə, burada: redaktə edilə bilən=”doğru" Atribut redaktə edilə bilən istifadəçinin elementin məzmununu, dəyərini redaktə edə biləcəyini müəyyən edir doğru, bərabər işarəsi ilə ayrılmış dırnaqlarla yazılmış, redaktə imkan verir:

      Atribut = "dəyər" contenteditable = "doğru"

      Kaskad cədvəllərinin formatlanması). Bu dil 1996-cı ildən mövcuddur və indi də inkişaf edir. Hazırda tərtibatçılar artıq CSS-in üçüncü versiyasından istifadə edirlər. CSS proqramlaşdırma dilindən istifadə edərək, JavaScript-dən ümumiyyətlə istifadə etməsəniz belə, istifadəçi üçün köhnəlmiş və ya əlverişsiz görünməyəcək tamamilə gözəl və xoş veb sayt yaratmaq mümkündür. Üçüncü versiyanın müasir imkanları bunu etməyə imkan verir.

      Tərtibatçılar saytdakı elementin yerini dəyişmək üçün Flexbox və ya Mövqe kimi daha rahat formatlama seçimlərindən də istifadə edə bilərlər, lakin ilk növbədə. Əvvəlcə Float əmlakının üstünlüklərini və mənfi cəhətlərini başa düşməlisiniz.

      CSS Float - niyə lazımdır?

      Float elementləri yerləşdirmək üçün bir xüsusiyyətdir. Bunu hər gün qəzet və jurnalların səhifələrində, onların ətrafında çox səliqə ilə axan şəkillərə və mətnlərə baxanda görmək olar. HTML və CSS kodu dünyasında Float funksiyasından istifadə edərkən eyni şey baş verməlidir. Ancaq xatırlamağa dəyər ki, şəkil redaktəsi həmişə bu funksiyanın əsas məqsədi deyil. İki, üç, dörd sütunda sayt elementlərinin məşhur aranjımanı yaratmaq üçün istifadə edilə bilər. Əslində, Float CSS xüsusiyyəti demək olar ki, hər hansı bir html elementinə aiddir. Float funksiyasından və sonra Mülkiyyətdən istifadə edərək elementlərin düzülüşündə redaktə edilməsinin əsaslarını bilmək, istənilən veb-sayt dizaynını yaratmaq çətin olmayacaq.

      Layout dizaynerlərinin xüsusi proqramları bəzən şəkilləri fərq edə bilməz, lakin onların üstünə çıxır. Veb dizaynında buna bənzər şeylər baş verir, yalnız onu nəzərə alsaq ki, mətn şəklin üzərinə qalxmaq əvəzinə onun yanında və ya altında göstərilir (əgər Float xüsusiyyəti səhv istifadə olunursa), lakin həmişə tərtibatçının ehtiyac duyduğu yerdə deyil.

      CSS Float əmlakının təsviri

      Əslində, Float xüsusiyyətindən necə istifadə edəcəyinizi bilmək hər hansı bir veb dizayneri üçün çox yaxşı bir işdir. Ancaq təəssüf ki, bu funksiyanın necə işlədiyini başa düşməmək sayt elementlərinin toqquşmasına və digər oxşar məyusluqlara səbəb ola bilər. Əvvəllər oxşar hallar brauzerlərdəki səhvlərə görə də baş verirdi. İndi Float əmlakından düzgün istifadə etməyin sirri açılacaq və bununla bağlı daha heç bir problem yaranmamalıdır.

      Float xüsusiyyətinin dörd dəyəri var:

      • Float: varis;
      • Float:sağ;
      • float:sol;
      • Float: heç biri;

      İngilis dilini bilənlər üçün Float xüsusiyyət parametrlərinin dəyərləri aydın olmalıdır. Ancaq bilməyənlər üçün kiçik bir izahat var. Parametr :sol; Elementin gövdəsini əsas elementin ən sol küncünə köçürür. Eyni şey bcgjkmpjdfybb parametri ilə də baş verir (yalnız digər istiqamətdə) :sağ;. Məna :miras; elementə ana ilə eyni parametrləri qəbul etməyi bildirir. Belə elementlərə uşaq elementlər də deyilir, çünki onlar birbaşa html kodunda valideynin daxilində yerləşirlər. Mülkiyyət :heç biri; elementə sənədin normal axınını pozmamağa imkan verir, kodun bütün hissələri üçün standart olaraq təyin olunur.

      Float necə işləyir?

      Float CSS xüsusiyyəti olduqca sadə işləyir. Yuxarıda təsvir edilən hər şey çox çətinlik çəkmədən edilə bilər. Sonra hər şey sadə olacaq. Ancaq Float xüsusiyyətini öyrənməyə davam etməzdən əvvəl bir az nəzəriyyəni başa düşməyə dəyər. Veb saytın hər bir elementi blokdur. Ctrl + Shift + J düymələrini basaraq Google Chrome-da konsolu açaraq bunu asanlıqla yoxlaya bilərsiniz. Mətn, başlıq, şəkil, keçidlər və saytın bütün digər komponentləri bloklar şəklində, sadəcə olaraq müxtəlif ölçülərdə göstəriləcək. Əvvəlcə bütün bu bloklar bir-birinin ardınca gəlir. Aşağıdakı nümunədə gördüyünüz kimi, kod sətirləri bir-birini izləyir, buna görə də onlar bir-birinin ardınca ciddi şəkildə göstəriləcək.

      Buna normal axın deyilir. Bu axınla bütün bloklar bir-birinin üstündə (elementlərin gövdələri ilə kəsişmədən) şaquli şəkildə yatır. Əvvəlcə veb səhifənin bütün məzmunu bu şəkildə yerləşdirilir. Lakin, məsələn, CSS Float Left dil xassəsindən istifadə edərkən, element səhifədəki təbii mövqeyini tərk edir və ən sola sürüşür. Bu davranış istər-istəməz normal axın içində qalan elementlərlə toqquşmaya səbəb olur.

      Başqa sözlə, elementlər şaquli düzülmək əvəzinə indi bir-birinin yanındadır. Əgər ana elementin içərisində iki uşağı yerləşdirmək üçün kifayət qədər yer varsa, o zaman toqquşma baş vermir, amma əgər olmasa, bir obyektin digəri ilə üst-üstə düşməsi qaçılmazdır. CSS Float xassəsinin necə işlədiyini başa düşmək üçün bunu xatırlamaq son dərəcə vacibdir.

      Problemləri həll etmək üçün aydın funksiya

      Float funksiyasının əziz dostu var - Clear. Birlikdə onlar - Bu funksiyaların hər ikisi bir-birini tamamlayır və tərtibatçını xoşbəxt edir. Yuxarıda qeyd edildiyi kimi, bitişik elementlər öz normal axınından çıxır və Float xüsusiyyətinə malik element kimi (məsələn, CSS Float Top) "üzənməyə" başlayırlar. Nəticədə, bir üzən element əvəzinə, ikisini alırsınız və ümumiyyətlə tərtibatçının onları yerləşdirməyi nəzərdə tutduğu yerdə deyil. Bu andan etibarən bütün problemlər başlayır.

      Clear funksiyasının beş dəyəri var:

      • :sol;
      • :sağ;
      • :hər ikisi;
      • :miras;
      • heç biri;

      Analoji olaraq, Clear funksiyasından nə vaxt istifadə etməyin ən yaxşı olduğunu başa düşə bilərsiniz. Əgər kodda bir xətt varsa Float:sağ;(CSS kodu nəzərdə tutulur), onda funksiya olmalıdır aydın: sağ;. Eyni şey əmlaklara da aiddir float:sol; tamamlayacaq Təmiz: sol;. Kod yazarkən Təmiz: hər ikisi; Belə çıxır ki, bu funksiyanın tətbiq olunduğu element Float funksiyasının tətbiq olunduğu elementlərdən aşağıda olacaq. İnherit əsas elementdən parametrləri götürür və heç biri sayt strukturunda heç bir dəyişiklik etmir. Float və Clear funksiyalarının necə işlədiyini başa düşərək, veb saytınızı bənzərsiz edəcək unikal və qeyri-adi HTML və CSS Float kodu yaza bilərsiniz.

      Sütunlar yaratmaq üçün Float istifadə

      Float xüsusiyyəti vebsaytda sütunlar yaratdıqda (və ya veb-səhifədə CSS Float məzmununu mərkəzləşdirərkən) xüsusilə faydalıdır. Məhz bu kod ən praktik və rahatdır, ona görə də iki sütundan ibarət tanış sayt şablonu yaratmaq üçün bir neçə variantı nəzərdən keçirməyə dəyər. Məsələn, solda məzmunu, sağda naviqasiya paneli, başlıq və altbilgi olan standart veb-saytı götürək. Kod belə olacaq:

      İndi burada nə yazıldığını anlamaq lazımdır. Html kodunun əsas hissəsini ehtiva edən ana element konteyner adlanır. Bu, Float funksiyasının tətbiq olunduğu elementlərin müxtəlif istiqamətlərə səpilməsinin qarşısını almağa imkan verir. Əgər orada olmasaydı, bu elementlər brauzerin ən hüdudlarına qədər üzəcəkdi.

      Sonra kodda #content və #navigation var. Bu elementlərə Float funksiyası tətbiq edilir. #content sola, #naviqasiya isə sağa gedir. Bu, iki sütunlu bir sayt yaratmaq üçün lazımdır. Obyektlərin bir-birini üst-üstə düşməməsi üçün genişliyi dəqiqləşdirmək lazımdır. Genişlik də faizlə müəyyən edilə bilər. Bu, piksellərlə müqayisədə daha rahatdır. Məsələn, #content üçün 45% və #navigation üçün 45%, qalan 10% isə marja xüsusiyyətinə verin.

      #footer-də yerləşən Clear xüsusiyyəti altbilginin #naviqasiya və #məzmunu izləməsinə mane olur, lakin onu olduğu yerdə qoyur. Nə ola bilər? Clear xüsusiyyətini göstərməsəniz? Bu kodda #footer sadəcə yuxarı qalxacaq və #naviqasiya altında bitəcək. Bu baş verəcək, çünki #naviqasiya daha bir elementi yerləşdirmək üçün kifayət qədər yerə malikdir. Bu vizual nümunə Clear və Float xüsusiyyətlərinin bir-birini necə tamamladığını aydın şəkildə göstərir.

      Kod yazarkən qarşılaşa biləcəyiniz problemlər

      Yuxarıdakı nümunələr olduqca sadədir. Ancaq onlarla da problemlər yarana bilər. Ümumiyyətlə, əslində Float funksiyası ilə bir çox gözlənilməz çətinliklər baş verə bilər. Nə qədər qəribə olsa da, problemlər adətən CSS ilə deyil, html kodu ilə yaranır. Float funksiyalı elementin html kodunda yerləşdiyi yer sonuncunun işinə birbaşa təsir göstərir. Müxtəlif çətinliklərin qarşısını almaq üçün sadə bir qaydaya riayət etmək daha yaxşıdır - Float funksiyası ilə elementləri kodda birinci yerləşdirin. Bu, demək olar ki, həmişə işləyir və onların gözlənilməz davranışlarını minimuma endirir.

      Elementlərin toqquşması

      Çox uşaqdan ibarət ana element onların hamısını yerləşdirə bilmədiyi və bir-birini üst-üstə düşdüyü zaman toqquşma baş verir. Hətta elə olur ki, elementlər göstərilmir, lakin saytdan yox olur. Bu brauzer səhvi deyil, Float funksiyası ilə elementlərin olduqca gözlənilən və düzgün davranışıdır.

      Bu elementlər əvvəlcə normal axın içində olduğundan və sonra Float xüsusiyyəti tərəfindən pozulduğundan, brauzer onları sayt səhifəsindən silə bilər. Bununla belə, ümidsiz olmayın, çünki həll sadə və aydındır - Cear əmlakından istifadə edin. Mümkündür ki, bu problemdən qurtulmağın bütün yolları arasında Clear-dan istifadə ən təsirli olur.

      Lakin web səhifə elementlərinin toqquşması problemi başqa yolla həll oluna bilər. Ən azı daha iki yol var:

      • Mövqe funksiyasından istifadə etməklə;
      • Flexbox istifadə edərək.

      Mövqe funksiyası bəzən CSS Float-a yaxşı alternativdir. Mövqedən istifadə edərkən şəkilləri veb səhifənin ortasına yerləşdirmək daha yaxşıdır. Əgər:mütləq və:nisbi dəyərləri düzgün tətbiq etsəniz, elementlər yerinə düşəcək və bir-biri ilə üst-üstə düşməyəcək.

      Mövqe və Float funksiya kodunun təhlili

      HTML və CSS kodunda Float-ın Mövqe ilə necə əvəz olunacağına daha yaxından nəzər salmağa dəyər. Əslində çox sadədir. Tutaq ki, #container və #div elementi var.

      Bu nümunədə ikinci konteynerdə (CSS Div) Float funksiyasından istifadə standart iki sütunlu sayt yaratmağa kömək edəcək. Clear funksiyasını heç vaxt unutma. Onsuz, yalnız bir-birinin üzərinə qoyulmuş elementləri əldə edəcəksiniz.

      Beləliklə, Postiondan istifadə etmək üçün CSS və Float kodunuzu necə dəyişdirmək olar? Çox sadə:

      mövqe: qohum;

      mövqe: qohum;

      Bu halda, #container və #div ana elementdə tərtibatçıya lazım olan mövqeyi tutacaq. Əsas? #div və #container-i ölçülərinə uyğun gələn bir ana elementə yerləşdirin.

      Flexbox - bu xüsusiyyət CSS Float-ı əvəz etməyə necə kömək edəcək?

      Flexbox hazırda veb-saytlar yaratmaq üçün ən qabaqcıl üsuldur, ona görə də bu funksiya brauzerlərin köhnə versiyaları tərəfindən dəstəklənmir. Bu fakta güzəşt edilməməlidir, çünki brauzerlərin köhnə versiyaları olan istifadəçilər saytın düzgün versiyasını görə bilməyəcəklər.

      Flexbox mülkiyyət deyil, ayrıca moduldur. Buna görə də, flexbox yalnız onunla işləyən bir sıra xüsusiyyətləri dəstəkləyir. Bundan əlavə, flexbox-da inline, block və inline-block üç parametri olan displey funksiyası yalnız bir flex-flowa malikdir.

      Flexbox necə işləyir?

      Bu texnologiya tərtibatçıya elementləri üfüqi və şaquli olaraq asanlıqla hizalamağa kömək edəcək. Flexbox həmçinin elementlərin göstərildiyi istiqaməti və sırasını dəyişə bilər. Bu texnologiyanın iki oxu var: Əsas ox və Çarpaz ox, ətrafında bütün Flexbox qurulur. O, həmçinin Float və Clear funksiyalarının təsirini aradan qaldırır. O, sistemini kodda qurur, burada özünəməxsus xassələrdən istifadə edir, ona görə də təəssüf ki, elementlərdə Float və Position kimi digər xassələri təkrarlamaq mümkün olmayacaq. Və bu çox faydalı olardı, çünki yuxarıda qeyd edildiyi kimi, Flexbox yalnız brauzerlərin yeni versiyalarında işləyir.

      Yadda saxlamaq lazımdır ki, sonda Position, Flexbox və Float eyni işi görür - saytınız üçün qeyri-adi və orijinal dizayn yaradır. Məqalədə müzakirə olunan hər bir seçim bunu öz yolu ilə edir və buna görə də həm üstünlükləri, həm də mənfi cəhətləri var. Bundan əlavə, belə olur ki, Float funksiyası bir yerdə mükəmməldir (məsələn, sadə quruluşa malik bir saytda), lakin haradasa Position və ya Flexbox istifadə etmək daha yaxşıdır.

      İkiqat kənar xəta

      Ancaq bəzən, təəssüf ki, hər bir tərtibatçının yazılı kodla deyil, müəyyən bir brauzer növündə səhvlərlə bağlı problemləri var. Məsələn, Internet Explorer-də Double Margin Bug adlı bir səhv var. Margin parametrini ikiyə vurur, bu da sayt elementlərinin brauzerin hüdudlarından kənarda yerdəyişməsinə səbəb olur. Bunun qarşısını almaq üçün sadəcə Margin parametrini faiz kimi göstərin. Tipik olaraq bu səhv Margin və Float xassələrinin dəyərləri uyğunlaşdıqda baş verir.

      sol kənar: 10px;

      Bu kod elementi Internet Explorer 20 px-də sola köçürəcək. Kodu belə dəyişə bilərsiniz:

      margin-sol:10%;

      ya da belə,

      kənar-sağ: 10px;

      Bu variantların hər ikisi elementin yerdəyişməsi problemini həll edəcəkdir.

      Brauzer səhvləri və saytın düzgün göstərilməməsi

      Yadda saxlamaq lazımdır ki, Internet Explorer səhvlərin baş verə biləcəyi yeganə brauzer deyil. Google Chrome və Mozilla-nın köhnə versiyaları da müasir veb-saytların bəzi elementlərini səhv göstərir. Bu səhvlərin hər biri üçün bir həll tapıla bilər. Ümumilikdə qeyd etmək istərdim ki, Float-dan istifadə orijinal və cəlbedici veb-sayt dizaynı yaradacaq. Bu əmlakın əsaslarını və iş prinsiplərini başa düşmək səhvlərdən qaçınmanıza və hər hansı bir tərtibatçının həyatını asanlaşdırmağa kömək edəcəkdir.

      Təsvir

      CSS float xassəsi hansı dəyər təyin olunduğundan asılı olaraq onu əsas elementin sol və ya sağ kənarına köçürməklə elementi float etməyə imkan verir. Üzən elementin açıq şəkildə təyin edilmiş eni yoxdursa, məzmuna uyğunlaşdırmaq üçün eni sıxılır.

      Brauzer yuxarıdan aşağıya doğru hərəkət edən sənədin HTML kodunu emal edir, kodun işlənməsi üzən elementə çatdıqda, brauzer onu sənədin axınına uyğun olaraq ilk növbədə yerləşdirir, yəni. sənəd kodunda yerləşdiyi elementin altında, sonra üzən elementi normal axından çıxarır və onu mümkün qədər əsas elementin sol və ya sağ kənarına köçürür:

      Üzən element sənədin axınından çıxarıldığı üçün kodda yerləşdikdən sonra qalan blok elementləri öz yerinə köçürülür, sanki element heç vaxt orada olmayıb.

      Üzən element normal axından çıxarılsa da, daxili məzmun hələ də təsirlənir. Blok elementlərindən fərqli olaraq, üzən elementdən sonra kodda yerləşdirilən sətirli məzmun onun sərhədlərini nəzərə alır və onun ətrafına sarılır, yəni mətn üzən blokun ətrafına sarılır:

      Mətn məzmunu ilə üzən blok əvəzinə üzən şəkil edə bilərsiniz. Bu halda mətn şəklin ətrafına sarılacaq:

      Sənədin adı

      CSS float xüsusiyyətindən istifadə edərək, şəkil sol tərəfdə üzmək üçün hazırlanmışdır. Şəklin altındakı HTML kodunda yerləşən mətn şəklin sağ və aşağı tərəflərini əhatə edəcək.

      cəhd edin »

      Ana elementin eni icazə verirsə, eyni cərgədə birdən çox üzən element yerləşdirə bilərsiniz. Ana element kifayət qədər geniş deyilsə, digər üzən elementlərlə uyğun gəlməyən üzən elementlər aşağı itələnəcək.

      Üzən elementlər valideynin hündürlüyünə təsir etmir, yəni konteyner varsa və yalnız üzən elementləri ehtiva edirsə, konteynerin hündürlüyü sıfır olacaq. Bu problemi aşağıdakı yollarla həll edə bilərsiniz:

      1. Sabit bir hündürlüyü təyin edin - konteynerin hündürlüyünün nə olduğunu bildiyiniz hallarda.
      2. Daşma xüsusiyyətini avtomatik və ya konteynerə gizlədilmiş dəyəri ilə tətbiq edin, sonra konteynerin hündürlüyünü hesablayarkən üzən elementlər nəzərə alınacaq. Bu üsul qabın hündürlüyünün nə qədər olması əvvəlcədən bilinməyəndə istifadə edilə bilər.

      float xassəsi yalnız blok elementlərində işləyir, ona görə də float xassəsi başqa tipli elementlərə tətbiq edilərsə, onlar blok tipinə çevrilir.

      Qeyd: Mütləq və sabit yerləşdirilmiş elementlər float xassəsinə məhəl qoymur. Həmçinin, float xüsusiyyətinin flexboxlara heç bir təsiri yoxdur.