Sąskaitos 

„Float and Clear“ CSS yra blokais pagrįsti išdėstymo įrankiai. HTML atributai: tipai ir taikymas. HTML nuoroda Generic class clearfix

Sveiki, mieli tinklaraščio svetainės skaitytojai! Po labai didelės pertraukos nusprendžiau tęsti CSS studijų temą ir šiandienos straipsnis bus skirtas slankiųjų elementų kūrimui naudojant plūduriuojančius elementus, naudodamiesi praktiniais pavyzdžiais apžvelgsime šios taisyklės poveikį, kartu su aiškia savybe, kuriant stulpelius. ir horizontalus meniu.

Nežinantiems, manau, būtų geriau pradėti nuo kitos medžiagos skaitymo kaskadiniuose stiliaus lapuose. Leiskite jums priminti, kad visi straipsniai šia tema yra skiltyje, kurioje galite gauti reikiamą informaciją.

Plūduriuojantys elementai taip pat randami HTML, kai reikia sukurti tekstą, apvyniojantį tuos pačius vaizdus (img žymos atributas sulygiuoti su kairiuoju ir dešiniuoju parametrais). Taigi šis aspektas yra gana populiarus kuriant tinklalapio turinį.

Šiandienos leidinyje analizuosime plūduriuoti (kairėn, dešinėn, jokio) ir aiškių taisyklių veiksmusįskaitant, atsižvelgiant į tai, kurie yra bloko išdėstymo pagrindas. Žinoma, šiuo metu kurdama svetainę didžioji dauguma naudoja progresyvią TVS (ypač WordPress). Tačiau tikėkite, kad stilių ir hiperteksto žymėjimo kalbos pagrindų žinios jums pravers ateityje.

Kaip sukurti slankiuosius elementus CSS naudojant float

Pirmiausia priminsiu, kad įprastu srautu žiniatinklio elementai tinklalapyje išdėstomi griežtai laikantis kode nurodytos tvarkos. Tačiau, kaip žinote, visada yra išimčių. Tai logiška, nes norint išspręsti nestandartines problemas, reikia sverto.

Pavyzdžiui, vienas iš šių įrankių yra, apie kurį daugiau galite perskaityti pateiktoje nuorodoje. Na, o dar vienas būdas pakeisti standartinio žiniatinklio elementų rodymo tvarką yra plūduriavimo taisyklė.

Duomenis apie bet kurią CSS ypatybę (propety) ir jos reikšmes galima surinkti iš W3C specifikacijų puslapio, kuriame pateikiama visa informacija (duomenys apie antrą stilių lentelių versiją, tačiau tai galioja ir CSS3, kuris jau oficialiai yra jėga, nors ir nevisiškai išvystyta):


Kaip matote, plūdė gali turėti vieną iš trijų galimų parametrų (kairėn, dešinėn, jokio) ir (paveldėti). float jokio parametro taikoma pagal numatytuosius nustatymus ir reiškia, kad elementai bus rodomi įprasta tvarka. Bet į dešinę arba į kairę leidžia kurti plaukiojančius blokus su poslinkiu atitinkamai į dešinę arba į kairę.

Jei prisimenate, dažniausiai naudojami elgiasi skirtingai (apskritai visų elementų rodymo tipas įgyvendinamas naudojant CSS naudojant Display ypatybę). Nebent nurodyta pločio reikšmė, blokiniai užima visą galimą plotį. Aukštis nustatomas pagal turinį, jei aukščio parametras nenurodytas.

Įterptosios žymos dedamos vienoje eilutėje ir perkeliamos į kitą tik tuo atveju, jei baigiasi laisva pločio vieta. Įprastu atveju jų aukščio ir pločio nurodyti neįmanoma. Remdamiesi šia informacija, pažvelkime į konkretų pavyzdį.

Aiškumo dėlei įtraukime CSS taisykles (praktikoje šis metodas dažniausiai naudojamas retai, bet labai patogus testavimui).

Kad įsitikintume, ar aukščiau nurodyta teisinga, paimkime dvi eilutes, nurodant pločio ir aukščio ypatybes, ir vieną bloko žymą. Norėdami užtikrinti aiškumą, nustatykime kiekvieno bloko spalvų atspalvius naudodami foną (galite padaryti tą patį):

1 eilutinis elementas 2 eilutinis elementas

Bloko elementas

Gautas vaizdas bus toks:

Kaip matote, gavome praktinį patvirtinimą, kad nurodytas aukštis (aukštis: 50 pikselių) ir plotis (plotis: 450 pikselių) normaliomis sąlygomis neveikia SPAN žymai, kuri yra įterpta. Tada pabandykime nustatyti pirmojo eilutinio žiniatinklio elemento slankiąją dešinę ypatybę ir antrojo slankiojo kairiojo elemento ypatybę:

1 eilutinis elementas 2 eilutinis elementas

Bloko elementas

Rezultate gauname:


Visiškai akivaizdu, kad tokiu atveju pirmasis ir antrasis tinklo elementai tampa plūduriuojantys (vienas pasislinko iki galo į kairę, kitas į dešinę). Be to, jie įgijo plotį ir aukštį, kurie nurodyti CSS stiliuose.

Be to, SPAN įterptosios žymos apibrėžti žiniatinklio elementai skirtingai sąveikauja su gretimu DIV sudėtiniu rodiniu. Jei toliau pašalinsime, tarkime, plotis atributą iš abiejų SPAN žymų stilių, tada jų plotį lems turinys (mūsų atveju teksto ilgis su elementų pavadinimais):

Dabar DIV bloko turinys pradeda tekėti į dešinę nuo žiniatinklio elemento su float: left. Tikslinga aiškiau susipažinti su konkrečių praktinių tyrimų rezultatais šiame tinklalapyje, kuriame galite patys pabandyti pakeisti žiūrėjimo sritį ir stebėti, kaip blokai elgiasi vienas kito atžvilgiu:


Apibendrinant, apibrėžkime kai kurias ypatybes, kurios bus būdingos konteineriui su viena ar kita plūduriuojančios savybės verte (dešinėje arba kairėje):

  • Elementas paslinktas į kairįjį arba dešinįjį kraštą;
  • Jis tampa blokuotas, nepaisant to, kas buvo anksčiau;
  • Elgiasi taip, lyg gretimų bloko žiniatinklio elementų (su ekrano: bloko taisykle) nebūtų. Galite tai patikrinti, jei dar kartą pažvelgsite į šios straipsnio dalies ekrano kopijas;
  • Tuo pačiu metu įterptosios žymos (display:inline) bus apvyniotos aplink slankiuosius blokus. Jei dar kartą pažvelgsite į ankstesnę ekrano kopiją, pastebėsite, kad konteinerio DIV ("Blokuoti elementą") turinys apvyniotas aplink SPAN su float:left dešinėje.
  • Jei aiškiai nenurodysite slankiojo bloko pločio (mūsų pavyzdyje plotis: 450 pikselių), tada jis bus nustatytas pagal jo turinį;

Šiame pavyzdyje apžvelgėme pagrindines slankiųjų blokų su skirtingais slankiosios ypatybės parametrais ypatybes ir pasirinkome tiek įterptuosius, tiek blokinius žiniatinklio elementus (su skirtingomis rodymo reikšmėmis), kad apsunkintume užduotį. Norėdami sustiprinti medžiagą, būtinai pažiūrėkite informacinį E. Popovo vaizdo įrašą:

Kaip sukurti horizontalų meniu naudojant CSS (plaukiojantį)

Toliau išanalizuosime labai specifinę užduotį sukurti horizontalų meniu naudojant slankiuosius blokus, kurie labai dažnai naudojami kuriant svetaines. Pirmiausia sukurkime vieną, kurio kodas atrodys taip:

  • 1 dalis
  • 2 punktas
  • 3 punktas
  • 4 punktas
  • 5 punktas

      • Gauname kažką panašaus:

      Dabar šiek tiek redaguokite gautą meniu naudodami CSS ypatybes: pašalinkite žymeklius, esančius priešais kiekvieną elementą naudodami sąrašo stiliaus none, konvertuokite mažąsias raides į blokus, taikydami jiems rodymo blokavimo taisyklę, taip pat, kad būtų įvairovės, kiekvienam iš jų suteikite gražų foną. .

      Taip pat būtų naudinga nustatyti paraštę, kad būtų toliau tobulinamas dizainas, šiek tiek perkeliant meniu elementus vienas nuo kito. „WordPress“ svetainės tinklalapiams galite nustatyti UL žymą „meniu“, kuriai reikiamus stilius nurodote STYLE.CSS faile:

      Meniu (sąrašo stilius:none;margin:0;padding:15px;) .menu li a(display:block;padding:10px;background:#EFCDB8;) .menu li(margin:10px;)

      Šiuo atveju aš sąmoningai nenaudoju atributo STYLE, nes tai priverstų mane kelis kartus nurodyti tas pačias CSS ypatybes kiekvienai LI žymai. Dėl mūsų veiksmų meniu atrodys taip:


      Skirtumas nuo ankstesnės versijos yra stulbinantis, ar ne? Dabar turime paveikslėlį, kuris daug labiau panašus į klasikinį meniu. Tiesa, taškai jame išsidėstę ne horizontaliai, o vertikaliai. Norėdami visiškai išspręsti problemą, prie LI sąrašo HTML elemento turite pridėti slankiąją kairę ypatybę, visa CSS taisyklė bus tokia:

      Meniu li(paraštė: 10 tšk.; slankioji: kairė;)

      Dėl to meniu pavirs horizontalia versija:


      Manau, kad remiantis aukščiau pateikta informacija, jūs suprantate priežastį, kodėl įvyko tokia metamorfozė. Kiekvienas žiniatinklio elementas meniu su slankiuoju kairėje yra vadovaujamasi konteinerio vieta, jo kraštais ir stengiasi užimti vietą judėdamas kuo toliau aukštyn ir į kairę. Taip atsitiko su bloku „Taškas 1“, kuris buvo atitinkamai išdėstytas.

      „2 punktas“ taip pat perkeltas į kairę, tačiau jo tolesnį judėjimą užblokavo pirmasis žiniatinklio meniu elementas. Ir taip toliau. Dėl to gavome horizontalią nuoseklią visų meniu komponentų grandinę. Visas detales galite pamatyti patys. Dabar pabandykime dirbtinai sumažinti peržiūros srities plotį:

      Tuo atveju, jei plūduriuojantis elementas neranda vietos viršuje, jis užima vertikalią aukščiausios padėties padėtį žemiau esančioje eilutėje ir pasislenka į kairę. Praktikoje dažnai nutinka taip, kad konkretaus daikto pavadinimas gali būti ilgesnis ir netelpa į standartines ribas. Jei tai pirmasis elementas, visas meniu gali atrodyti taip:

      Šiuo atveju „4 elementas“ pirmiausia atsižvelgia į aukščiausią aukščiausią kraštinę ir tik tada pereina į kairę, bet atsitrenkia į patį pirmąjį žiniatinklio elementą. Jei, tarkime, trečiojo taško aukštis pasirodo didesnis, vaizdas pasikeičia į tokį:

      Tada „3 elementas“ sulygiuos savo poziciją su paskutinio žiniatinklio elemento apatine kraštine viršutinėje eilutėje ir tik tada pereis į kairę. Visi aukščiau aprašyti judesiai turėtų padėti suprasti plūdės poveikio žiniatinklio elementų išdėstymui puslapyje esmę.

      Jei panašių problemų iškyla praktinis išdėstymas, vietoj CSS plūduriuojančios savybės galite naudoti kitus horizontalaus meniu kūrimo būdus. Tačiau tai jau atskira tema, į kurią būtinai kreipsimės ateityje.

      Aiškios (tiek, kairės, dešinės) savybės taikymo efektas

      Dabar pažiūrėkime, kaip išnaudoti slankiųjų elementų ypatybes savo naudai, bet tuo pačiu priversti šiuos tinklalapio blokus atsižvelgti į jų padėtį ir dydį. Tai galima pasiekti naudojant aiškią taisyklę. Vėlgi, visą informaciją galima gauti iš pirminio šaltinio (W3C konsorciumas):


      Taisyklė CSS clear turi keturias galimas reikšmes, kai ypatybė nė viena nėra numatytoji, o tai natūralu, nes užtikrina standartinį kodo srautą. Taip pat aiškus (nėra, kairėn, dešinėn, abu) paveldimas iš pirminės žymos (paveldėti).

      Šios taisyklės, parašytos konkrečiam blokui, esmė yra atšaukti veiksmą, atsižvelgiant į jo reikšmę:

      • none - atšaukia pačios aiškios savybės poveikį, todėl žymos turinys (pavyzdžiui, tekstas) apgaubia žiniatinklio elementą pagal jam nurodytus stilius plūduriavimo forma;
      • kairė ir dešinė - pašalina srautą atitinkamai aplink kairįjį arba dešinįjį kraštą;
      • abu - neleidžia tekėti tiek dešinėje, tiek kairėje. Tai yra labiausiai paplitusi skaidrumo vertė praktikoje.

      Nieko negali suprasti? Ar suvokiate prasmę miglotai ir tik intuicija? Nieko, pažiūrėjus į ryškų pavyzdį, manau, kad viskas stos į savo vietas. Norėdami tai padaryti, nustatykime užduotį: padėkite du blokus horizontaliai vienas šalia kito, o apačioje padėkite šiek tiek teksto. Šis dizainas yra gana dažnas išdėstyme.

      Taigi, paimkime du DIV konteinerius, kurie schematiškai gali pavaizduoti 2 stulpelius. Parašykime jiems CSS ypatybes, įskaitant fiksuotas plotis(plotis), fono spalvą ir paverčiant jas plūdėmis, naudojant plūdę į kairę. Pridėkime prie jų tekstą, esantį P žymoje, kuri, kaip žinote, yra mažosiomis raidėmis:

      Kairysis stulpelis
      Dešinysis stulpelis

      DIV išsidės horizontalioje eilėje, o pirmasis bus kuo toliau į kairę. O antrasis stovės prie savo dešiniojo krašto (jam tai bus vieta kairėje) ir neleis pirmajam div pajudėti toliau. Tačiau tekstas tęsis šią eilutę, nes bendras plotis leidžia tai:

      Kaip jūs suprantate, šioje situacijoje mūsų užduotis negali būti laikoma baigta. Pirma, susiaurinus peržiūros sritį mažesne nei bendras dalelių plotis, dešinysis stulpelis šokinėja žemyn ir yra apačioje kairėje. Antra, trečiojo žiniatinklio elemento su tekstu turinys yra šalia, o ne stulpelių apačioje:


      Vėlgi, jūs patys matote, kaip elgiasi visi elementai, dirbtinai susiaurindami ir išplėsdami žiūrėjimo sritį. Norėdami pašalinti aprašytus trūkumus, pridėsime konteinerį su CSS savybėmis ir į jį patalpinsime visus esamus sluoksnius. Taip pat pridėsime papildomą tuščią DIV su CSS išvalymo taisykle, kad apatinio bloko turinys (tekstas) netekėtų aplink stulpelius dešinėje ir kairėje:

      Kairysis stulpelis
      Dešinysis stulpelis

      Atkreipkite dėmesį, kad didžiųjų divų stiliams I pridėta paraštė: 0 automatinė taisyklė, kuriuo galima centruoti konteinerį. Gautas vaizdas atrodys taip:


      Dabar mūsų problema išspręsta, nes rezultatas atitinka nustatytas sąlygas: du stulpeliai yra horizontalioje eilutėje, o žiniatinklio elemento turinys po kodu (TEKSTAS) tvirtai išliks savo teisėtoje vietoje po stulpeliais.

      Jei peržiūros srities plotis bus sumažintas, dizainas išliks originalus (ir bus horizontalus slinkimas), o tai galite patikrinti apsilankę atitinkamame tinklalapyje su šio pavyzdžio sprendimu. Be to, žiūrėkite Jevgenijaus Popovo vaizdo įrašą, kuriame pateikiamas tinklalapio žymėjimo, naudojant plūduriuojančią ir aiškią funkciją, pavyzdys:

      Nustato, kurioje pusėje elementas bus išlygiuotas, o kiti elementai tekės aplink jį kitose pusėse. Kai slankioji reikšmė nustatyta į None , elementas puslapyje pateikiamas kaip įprasta, o toje pačioje eilutėje kaip ir pats elementas leidžiama ne daugiau kaip viena įvyniojamo teksto eilutė.

      Sintaksė

      plūdė: kairė | dešinėje | nė vienas

      Argumentai

      į kairę Sulygiuoja elementą į kairę, o visi kiti elementai, pvz., tekstas, teka aplink jį dešinėje. dešinėje Sulygiuoja elementą į dešinę, o visi kiti elementai yra šalia jo kairėje. none Elemento apvyniojimas nenustatytas.





      plūdė



      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 dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum falisi null zzril delenit doloare teciu feuga.


      Objekto modelis

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

      Formatavimas

    • aiškūs rinkiniai, kurioje elemento pusėje neleidžiama aplink jį apsivynioti kitiems elementams. Jei nustatote elementą slankiojantį naudodami plūduriavimo parametrą, išvalymo ypatybė jį nepaisys nurodytose pusėse.
    • klipas apibrėžia išdėstyto elemento sritį, kurioje bus rodomas jo turinys. Viskas, kas netelpa į šią sritį, bus apkarpyta ir taps nematoma. Šiuo metu vienintelė galima ploto forma yra stačiakampis.
    • ekranas yra universalus atributas, nurodantis, kaip dokumente turi būti rodomas elementas.

      • Mes jau tai išsiaiškinome. Sužinojome, kad jie turi turinio. Tačiau tai dar ne viskas. Žymos taip pat turi atributų, kurie pagerina jų galimybes, o atributai savo ruožtu turi vertes. Su jų pagalba galite nustatyti elemento parametrus ir nustatyti dizaino stilių. Pavyzdžiui, su žyma

      pažymėjote pastraipą. Bet kaip jį sulygiuoti į dešinę? Norėdami tai padaryti, jums reikės konkretaus atributo su atitinkama reikšme. Kaip kai kurios žymos neturi poros, kai kurie atributai gali būti naudojami be reikšmių.

      Kaip rašyti atributus?

      Atributai yra rezervuoti žodžiai (kaip ir žymos, tik be kampinių skliaustų), tačiau jų reikšmės gali būti skirtingos. Kaip ir žymes, rekomenduojama atributus su reikšmėmis rašyti mažomis raidėmis, nors naršyklėms apskritai tai nerūpi – tai tik geros manieros taisyklė: rusiškai TAIP PAT NENAUDOJAMA RAŠYTI KAI CAPS LOCK YRA ĮJUNGTA. Kodėl HTML blogesnis?

      Atributų reikšmės rašomos tokiu formatu:

      Atributas=”value” lang=”en”

      Atributus visada turėtumėte rašyti pradinėje žymoje po rezervuoto žodžio.

      Pastraipa

      Paprastai vienai žymai galimi keli atributai. Nesvarbu, kokia tvarka jie išvardyti.

      Universalūs atributai

      Kiekviena HTML žyma turi savo atributų rinkinį. Kai kurie atributai gali būti prieinami kelioms žymoms, o kiti gali veikti tik su viena. Taip pat yra universalių (pasaulinių) atributų grupė, kurią galima naudoti su bet kokia žyma. Trumpai pažvelkime į šios kategorijos atributus.

      • prieigos raktas leidžia nustatyti spartųjį klavišą norint pasiekti konkretų puslapio objektą. Pavyzdžiui, galite naudoti spartųjį klavišą į Alt+1 vartotojas sekė konkrečią nuorodą. Taigi sukurkite pagrindinę navigacijos sistemą.

      Atributo reikšmė gali būti skaičiai 0–9 arba lotyniškos abėcėlės raidės:

      Nuoroda bus atidaryta paspaudus klavišų kombinaciją su vienu

      • klasė leidžia susieti žymą su iš anksto nustatytu dizainu naudojant CSS. Atributo naudojimas leidžia žymiai sumažinti kodą, nes užuot pakartotinai įvedę tą patį CSS bloką, galite tiesiog įvesti atitinkamos klasės pavadinimą.
      • Naudojant patenkintas galite leisti vartotojui redaguoti bet kurį HTML puslapio elementą: ištrinti, įterpti, keisti tekstą. Tas pats atributas leidžia redaguoti ir išjungti. Jis turi tik dvi reikšmes: tiesa- leisti redaguoti, klaidinga- uždrausti.
      • Naudojant atributą kontekstinis meniu Bet kuriam dokumento elementui galite priskirti unikalius kontekstinio meniu elementus savo nuožiūra. Pats meniu sukuriamas žymoje , o kontekstinio meniu atributui suteikiamas jo identifikatorius.
      • rež nustato teksto kryptį: iš kairės į dešinę (ltr) arba iš dešinės į kairę (rtl).
      • tempiamas leidžia uždrausti (klaidinga) arba leisti (tiesa) vartotojas gali vilkti ir mesti puslapio elementą su šiuo atributu.
      • išmetimo vieta nurodo naršyklei, ką daryti su nuvilktu elementu: copy(value kopija), judėti ( judėti) arba sukurkite nuorodą į jį (nuoroda).
      • paslėptas- atributas, leidžiantis paslėpti elemento turinį, kad jis nebūtų rodomas naršyklėje. Jei atributas nustatytas į false, objektas rodomas, tiesa – paslėptas.
      • id nurodo elemento identifikatorių – pavadinimą, kurio reikia norint paprasčiausiai pakeisti objekto stilių, taip pat kad scenarijai galėtų jį pasiekti. Atributo reikšmė bus jo pavadinimas. Ji turi prasidėti lotyniška raide, jame gali būti skaičiai, tos pačios lotyniškos abėcėlės raidės (didelės ir mažos), taip pat brūkšneliai (-) ir pabraukimus (_) . Negali būti rusiškų raidžių.
      • lang padeda naršyklei suprasti, kokia kalba parašyta turinys, ir atitinkamai pritaikyti jo stilių (pavyzdžiui, kalbos gali naudoti skirtingas kabutes). Reikšmės yra kalbos kodai (rusų k. ru, Anglų - lt ir taip toliau.).
      • Rašybos tikrinimas apima (tiesa) arba išjungia (klaidinga) Rašybos tikrinimas. Ypač naudinga atributą naudoti formos laukų žymose, kur vartotojas įves tekstą.
      • stilius leidžia nustatyti elemento dizainą naudojant CSS kodą.
      • tabindex leidžia nustatyti, kiek kartų vartotojas turės paspausti klavišą Tab, kad objektas su šiuo atributu būtų sufokusuotas. Paspaudimų skaičius lemia atributo reikšmę – teigiamą sveikąjį skaičių.
      • titulą- patarimas, kuris pasirodo, jei perkeliate pelę į elementą ir kurį laiką palikite jį nejudantį. Prasmės eilutė bus užuomina.
      • išversti leidžia (taip) arba draudžia (ne)žymos turinio vertimas.
      • lygiuotis nustato elemento išlygiavimą. Pavyzdžiui, galite jį naudoti norėdami lygiuoti tekstą į kairę (vertė paliko), išilgai dešiniojo krašto ( teisingai), centre (centras) arba plotis (pateisinti). Vaizdams (žym ) taip pat galima lygiuoti su aukščiausios eilutės elemento viršutine kraštine ( viršuje), palei apatinę ribą (apačioje), o reikšmė vidurys padaro, kad vaizdo vidurinė linija sutampa su eilutės bazine linija.

      Verta nepamiršti, kad naudojant atributą lygiuotis Tai nerekomenduojama, o tekstą geriau lygiuoti naudojant CSS.

      Atributų naudojimo pavyzdys

      Kaip pavyzdį apsvarstykite HTML kodo eilutę:

      Šį tekstą galima redaguoti

      Visa eilutė sukuria teksto pastraipą, kurią vartotojas gali redaguoti naršyklėje.

      Pažvelkime į kiekvieną linijos elementą.

      - konteinerio, kuriame saugoma pastraipa, pradžios žyma.

      - uždarymo žyma.

      Tarp personažų > Ir < tekstas yra Šį tekstą galima redaguoti. Tai užrašas už žymų ribų (tarp jų), o tai reiškia, kad jis bus matomas vartotojui, kuris atidaro puslapį. Naršyklė tai suvokia kaip paprastą tekstą, kuris turi būti rodomas ekrane.

      patenkintas=”tiesa“ – tai yra atributas ir jo reikšmė. Prisiminkite, kaip mokykloje: x=3. Taigi čia: patenkintas=”tiesa“ Atributas patenkintas nurodo, ar vartotojas gali redaguoti elemento turinį, reikšmę tiesa, parašytas kabutėse, atskirtose lygybės ženklu, redaguoti galima:

      Atributas = "value" contenteditable = "true"

      Kaskadinių lentelių formatavimas). Ši kalba egzistuoja nuo 1996 m. ir vis dar tobulėja. Šiuo metu kūrėjai jau naudoja trečiąją CSS versiją. Naudojant CSS programavimo kalbą, galima sukurti visiškai gražią ir malonią svetainę, kuri vartotojui neatrodys pasenusi ar nepatogi, net jei visiškai nenaudosite JavaScript. Šiuolaikinės trečiosios versijos galimybės leidžia tai padaryti.

      Kūrėjai taip pat gali naudoti patogesnes formatavimo parinktis, pvz., „Flexbox“ arba „Position“, norėdami pakeisti elemento vietą svetainėje, bet pirmiausia. Pirmiausia turėtumėte suprasti „Float“ nuosavybės privalumus ir trūkumus.

      CSS Float – kam to reikia?

      Plūdė yra elementų išdėstymo savybė. Kiekvieną dieną tai galima pamatyti laikraščių ir žurnalų puslapiuose, žiūrint į nuotraukas ir tekstą, kuris labai tvarkingai teka aplink juos. HTML ir CSS kodų pasaulyje tas pats turėtų nutikti naudojant funkciją „Float“. Tačiau verta atsiminti, kad vaizdo redagavimas ne visada yra pagrindinis šios funkcijos tikslas. Jis gali būti naudojamas kuriant populiarų svetainės elementų išdėstymą dviem, trimis, keturiais stulpeliais. Tiesą sakant, Float CSS ypatybė taikoma beveik bet kuriam html elementui. Žinant elementų išdėstymo redagavimo pagrindus naudojant funkciją „Float“, o vėliau „Property“, sukurti bet kokį svetainės dizainą nebus sunku.

      Specialios maketuotojų programos kartais gali nepastebėti vaizdų, o eiti ant jų. Gana panašiai nutinka ir web dizaine, tik atsižvelgiant į tai, kad tekstas, užuot lipęs ant paveikslėlio, rodomas (jeigu Float ypatybė naudojama neteisingai) šalia arba po juo, bet visada ne ten, kur reikia kūrėjui.

      CSS Float savybės aprašymas

      Tiesą sakant, žinojimas, kaip naudoti „Float“ savybę, yra labai geras dalykas bet kuriam žiniatinklio dizaineriui. Tačiau, deja, nesupratimas, kaip ši funkcija veikia, gali sukelti svetainės elementų susidūrimus ir kitus panašius nusivylimus. Anksčiau panašių situacijų pasitaikydavo ir dėl naršyklių klaidų. Dabar bus atskleista paslaptis, kaip tinkamai naudoti Float nuosavybę, ir dėl to neturėtų kilti daugiau problemų.

      „Float“ nuosavybė turi keturias vertes:

      • Plūduriuoti: paveldėti;
      • Plūdis:dešinė;
      • plūdė:kairėje;
      • Plūdis: nėra;

      Tiems, kurie moka anglų kalbą, Float savybių parametrų reikšmės turėtų būti aiškios. Bet tiems, kurie nežino, čia yra nedidelis paaiškinimas. Parametras :kairėje; Perkelia elemento kūną į kairįjį pagrindinio elemento kampą. Tas pats atsitinka (tik kita kryptimi) su parametru bcgjkmpjdfybb :teisingai;. Reikšmė :paveldėti; nurodo elementui priimti tuos pačius nustatymus kaip ir pirminiam elementui. Tokie elementai taip pat vadinami antriniais elementais, nes jie yra tiesiai pirminiame HTML kode. Turtas :nė vienas; leidžia elementui netrikdyti įprasto dokumento srauto, jis pagal nutylėjimą nustatomas visoms kodo dalims.

      Kaip veikia Float?

      Float CSS nuosavybė veikia gana paprastai. Viskas, kas buvo aprašyta aukščiau, gali būti padaryta be didelių sunkumų. Tada viskas bus taip pat paprasta. Tačiau prieš tęsdami Float savybės tyrimą, verta suprasti šiek tiek teorijos. Kiekvienas svetainės elementas yra blokas. Tai galite lengvai patikrinti atidarę konsolę Google Chrome paspausdami Ctrl + Shift + J. Tekstas, pavadinimas, vaizdas, nuorodos ir visi kiti svetainės komponentai bus rodomi blokais, tik skirtingų dydžių. Iš pradžių visi šie blokai ateina vienas po kito. Kaip matote toliau pateiktame pavyzdyje, kodo eilutės seka viena kitą, todėl bus rodomos griežtai viena po kitos.

      Tai vadinama normaliu srautu. Esant tokiam srautui, visi blokai guli vienas ant kito (nesikryžiavę elementų kūnų) vertikaliai. Iš pradžių visas tinklalapio turinys išdėstomas tokiu būdu. Tačiau naudojant, pavyzdžiui, CSS kalbos ypatybę „Float Left“, elementas palieka savo natūralią vietą puslapyje ir slankioja į kairę. Toks elgesys neišvengiamai veda prie susidūrimo su tais elementais, kurie lieka įprastame sraute.

      Kitaip tariant, elementai, užuot išdėstyti vertikaliai, dabar yra vienas šalia kito. Jei pirminis elementas turi pakankamai vietos, kad savo viduje galėtų tilpti du vaikai, tada susidūrimas neįvyksta, bet jei ne, tada vieno objekto sutapimas su kitu yra neišvengiamas. Tai labai svarbu atsiminti, kad suprastumėte, kaip veikia CSS Float nuosavybė.

      Aiški funkcija problemoms spręsti

      Funkcija Float turi brangų draugą – Clear. Kartu jie – abi šios funkcijos viena kitą papildo ir džiugina kūrėją. Kaip minėta pirmiau, gretimi elementai išeina iš įprasto srauto ir taip pat pradeda „plūduriuoti“, kaip ir elementas, kuriam taikoma „Float“ savybė (pavyzdžiui, CSS „Float Top“). Dėl to vietoj vieno slankiojo elemento jūs gaunate du ir visai ne toje vietoje, kur kūrėjas ketino juos įdėti. Nuo šios akimirkos prasideda visos problemos.

      Išvalymo funkcija turi penkias reikšmes:

      • :kairėje;
      • :teisingai;
      • : abu;
      • :paveldėti;
      • nė vienas;

      Pagal analogiją galite suprasti, kada geriausia naudoti funkciją Clear. Jei kode turime eilutę Plūdis:dešinė;(turimas omenyje CSS kodas), tada funkcija turėtų būti Aišku: dešinėje;. Tas pats pasakytina ir apie savybes plūdė:kairėje; jį papildys Išvalyti:kairėje;. Rašant kodą Aišku: abu; Pasirodo, elementas, kuriam taikoma ši funkcija, bus žemiau elementų, kuriems taikoma plūduriavimo funkcija. Inherit nustatymų paima iš pirminio elemento, o nė vienas neatlieka jokių svetainės struktūros pakeitimų. Suprasdami, kaip veikia „Float“ ir „Clear“ funkcijos, galite parašyti unikalų ir neįprastą HTML ir CSS „Float“ kodą, kuris pavers jūsų svetainę unikalia.

      „Float“ naudojimas stulpeliams kurti

      Savybė „Float“ yra ypač naudinga kuriant stulpelius svetainėje (arba centruojant CSS „Float“ turinį tinklalapyje). Būtent šis kodas yra praktiškiausias ir patogiausias, todėl verta apsvarstyti keletą variantų, kaip sukurti pažįstamą svetainės šabloną, susidedantį iš dviejų stulpelių. Pavyzdžiui, paimkime standartinę svetainę su turiniu kairėje, naršymo juosta dešinėje, antrašte ir porašte. Kodas bus toks:

      Dabar turime išsiaiškinti, kas čia parašyta. Pirminis elementas, kuriame yra pagrindinė html kodo dalis, vadinamas konteineriu. Tai leidžia neleisti elementams, kuriems taikoma „Float“ funkcija, išsibarstyti įvairiomis kryptimis. Jei jo nebūtų, šie elementai plūduriuotų iki pačių naršyklės kraštų.

      Tada kode yra #content ir #navigation. Šiems elementams taikoma plūduriavimo funkcija. #turinys eina į kairę, o #navigacija – į dešinę. Tai būtina norint sukurti dviejų stulpelių svetainę. Būtina nurodyti plotį, kad objektai nepersidengtų vienas su kitu. Plotis taip pat gali būti nurodytas procentais. Tai dar patogiau nei pikseliais. Pavyzdžiui, 45% #content ir 45% #navigation, o likusius 10% skirkite maržos nuosavybei.

      Ypatybė Clear, esanti #footer, neleidžia poraštei sekti #navigation ir #content, bet palieka ją toje pačioje vietoje, kur buvo. Kas gali nutikti? jei nenurodysite ypatybės Išvalyti? Šiame kode #footer tiesiog pakils ir atsidurs skiltyje #navigation. Taip atsitiks, nes #navigation turi pakankamai vietos, kad tilptų dar vienas elementas. Šis vaizdinis pavyzdys aiškiai parodo, kaip „Clear“ ir „Float“ savybės papildo viena kitą.

      Problemos, su kuriomis galite susidurti rašydami kodą

      Aukščiau pateikti pavyzdžiai yra gana paprasti. Tačiau problemų gali kilti ir su jais. Apskritai, naudojant „Float“ funkciją, gali nutikti daug netikėtų problemų. Kad ir kaip būtų keista, problemų dažniausiai kyla ne su CSS, o su html kodu. Vieta, kurioje yra elementas su Float funkcija html kode, tiesiogiai įtakoja pastarojo veikimą. Norint išvengti įvairių sunkumų, geriausia laikytis paprastos taisyklės – kode pirmiausia įdėti elementus su Float funkcija. Tai beveik visada veikia ir sumažina jų netikėtą elgesį.

      Elementų susidūrimas

      Susidūrimas įvyksta, kai pirminis elementas, kuriame yra keli vaikai, negali sutalpinti jų visų ir jie persidengia vienas su kitu. Netgi atsitinka, kad elementai gali būti nerodomi, bet išnyksta iš svetainės. Tai ne naršyklės klaida, o tikėtinas ir tinkamas elementų elgesys su Float funkcija.

      Kadangi iš pradžių šie elementai veikia įprastu būdu, o vėliau juos sutrikdo ypatybė „Float“, naršyklė gali juos pašalinti iš svetainės puslapio. Tačiau nenusiminkite, nes sprendimas paprastas ir aiškus – pasinaudokite Cear savybe. Gali būti, kad iš visų būdų, kaip išspręsti šią problemą, veiksmingiausias yra Clear naudojimas.

      Tačiau tinklalapio elementų susidūrimo problemą galima išspręsti ir kitu būdu. Yra dar bent du būdai:

      • naudojant pozicijos funkciją;
      • naudojant „Flexbox“.

      Funkcija Position kartais yra gera alternatyva CSS Float. Kai naudojate poziciją, geriausia dėti vaizdus tinklalapio centre. Jei teisingai pritaikysite reikšmes:absoliutus ir:santykinis, elementai atsidurs savo vietose ir vienas kito nepersidengs.

      Padėties ir plaukimo funkcijos kodo analizė

      Verta atidžiau pažvelgti į tai, kaip „Float“ pakeisti „Position“ HTML ir CSS kode. Iš tikrųjų tai labai paprasta. Tarkime, kad yra #container ir #div elementas.

      Šiame pavyzdyje naudojant (CSS Div) Float funkciją antrame konteineryje bus lengviau sukurti standartinę dviejų stulpelių svetainę. Niekada nepamirškite apie Clear funkciją. Be jo elementų gausite tik vienas ant kito.

      Taigi, kaip pakeisti CSS ir Float kodą, kad galėtumėte naudoti „Postion“? Labai paprasta:

      padėtis:santykinė;

      padėtis:santykinė;

      Tokiu atveju #container ir #div pirminiame elemente užims kūrėjui reikalingą poziciją. Pagrindinis? įdėkite #div ir #container į vieną pagrindinį elementą, kuris atitiks jų dydžius.

      „Flexbox“ – kaip ši funkcija padės pakeisti „CSS Float“?

      „Flexbox“ šiuo metu yra pažangiausias interneto svetainių kūrimo būdas, todėl šios funkcijos nepalaiko senesnės naršyklių versijos. Šis faktas neturėtų būti nuvertinamas, nes vartotojai, turintys pasenusias naršyklių versijas, negalės matyti teisingos svetainės versijos.

      „Flexbox“ yra ne nuosavybė, o atskiras modulis. Todėl „flexbox“ palaiko daugybę savybių, kurios veikia tik su juo. Be to, ekrano funkcija, turinti tris „flexbox“ eilutę, bloką ir eilutę blokuojančius parametrus, turi tik vieną „flex-flow“.

      Kaip veikia Flexbox?

      Ši technologija padės kūrėjui lengvai išlyginti elementus horizontaliai ir vertikaliai. „Flexbox“ taip pat gali pakeisti elementų rodymo kryptį ir tvarką. Ši technologija turi dvi ašis: pagrindinę ašį ir skersinę ašį, aplink kurią pastatytas visas „Flexbox“. Tai taip pat pašalina plūduriavimo ir išvalymo funkcijų poveikį. Savo sistemą ji kuria kode, kuriame naudoja tik jai būdingas ypatybes, todėl, deja, elementuose nebus galima dubliuoti kitų savybių, tokių kaip Float ir Position. Ir tai būtų labai naudinga, nes, kaip minėta aukščiau, „Flexbox“ veikia tik naujose naršyklių versijose.

      Verta prisiminti, kad galiausiai „Position“, „Flexbox“ ir „Float“ daro tą patį – sukuria neįprastą ir originalų savo svetainės dizainą. Kiekviena straipsnyje aptarta galimybė tai daro savaip, todėl turi ir privalumų, ir trūkumų. Be to, būna, kad kai kur funkcija „Float“ puikiai tinka (pavyzdžiui, paprastos struktūros svetainėje), bet kur geriau naudoti „Position“ arba „Flexbox“.

      Dvigubos maržos klaida

      Tačiau kartais, deja, kiekvienas kūrėjas turi problemų, susijusių ne su parašytu kodu, o su tam tikro tipo naršyklės klaidomis. Pavyzdžiui, „Internet Explorer“ yra klaida, vadinama „Double Margin Bug“. Jis padaugina parametrą Margin iš dviejų, todėl svetainės elementai perkeliami už naršyklės ribų. Norėdami to išvengti, tiesiog nurodykite maržos parametrą procentais. Paprastai ši klaida atsiranda, kai sutampa maržos ir slankiojo ypatybių reikšmės.

      paraštė kairėje: 10 pikselių;

      Šis kodas perkels elementą Internet Explorer 20 px į kairę. Galite pakeisti kodą taip:

      paraštė-kairė:10%;

      arba taip,

      paraštė-dešinė: 10px;

      Abi šios parinktys išspręs elementų poslinkio problemą.

      Naršyklės klaidos ir neteisingas svetainės rodymas

      Verta prisiminti, kad „Internet Explorer“ nėra vienintelė naršyklė, kurioje gali atsirasti klaidų. Senesnėse „Google Chrome“ ir „Mozilla“ versijose kai kurie šiuolaikinių svetainių elementai taip pat rodomi neteisingai. Kiekvienai iš šių klaidų galima rasti sprendimą. Apskritai noriu pastebėti, kad naudojant Float bus sukurtas originalus ir patrauklus svetainės dizainas. Šio turto pagrindų ir veikimo principų supratimas padės išvengti klaidų ir palengvins bet kurio kūrėjo gyvenimą.

      apibūdinimas

      CSS float ypatybė leidžia padaryti elementą plūduriuojančią perkeliant jį į kairįjį arba dešinįjį pagrindinio elemento kraštą, atsižvelgiant į tai, kokia vertė nustatyta. Jei slankiojo elemento plotis nėra aiškiai nustatytas, jis suglaudinamas pagal plotį, kad tilptų turinį.

      Naršyklė apdoroja dokumento HTML kodą judant iš viršaus į apačią, kodo apdorojimui pasiekus slankiojantį elementą, naršyklė pagal dokumento eigą jį deda pirmiausia, t.y. po elementu, kuriame jis yra dokumento kode, jis pašalina slankųjį elementą iš įprasto srauto ir perkelia jį kuo toliau į kairįjį arba dešinįjį pagrindinio elemento kraštą:

      Kadangi slankusis elementas buvo pašalintas iš dokumento srauto, likę bloko elementai, esantys kode po jo, perkeliami į savo vietą, tarsi elemento ten niekada nebūtų.

      Net jei plūduriuojantis elementas buvo pašalintas iš įprasto srauto, įtrauktas turinys vis tiek yra paveiktas. Skirtingai nuo bloko elementų, eilutinis turinys, įdėtas į kodą po slankiojo elemento, atsižvelgia į jo kraštus ir apvynioja jį, tai yra, tekstas apvyniojamas aplink slankųjį bloką:

      Vietoj slankiojo bloko su tekstiniu turiniu galite sukurti slankųjį vaizdą. Tokiu atveju tekstas bus apvyniotas aplink vaizdą:

      Dokumento pavadinimas

      Naudojant CSS float ypatybę, vaizdas buvo sukurtas plūduriuoti kairėje pusėje. Tekstas, esantis HTML kode po vaizdu, apvynios vaizdą išilgai dešinės ir apatinės pusės.

      Bandyti "

      Toje pačioje eilutėje galite įdėti daugiau nei vieną slankųjį elementą, jei tai leidžia pirminio elemento plotis. Jei pirminis elementas nėra pakankamai platus, slankieji elementai, kurie netelpa vienoje linijoje su kitais slankiaisiais elementais, bus nustumti žemyn.

      Plaukiojantys elementai neturi įtakos pirminio elemento aukščiui, tai yra, jei yra konteineris ir jame yra tik slankiojantys elementai, konteinerio aukštis bus lygus nuliui. Šią problemą galite išspręsti šiais būdais:

      1. Nustatykite fiksuotą aukštį – tais atvejais, kai žinote, koks turi būti konteinerio aukštis.
      2. Taikykite konteineriui perpildymo ypatybę su reikšme auto arba paslėpta, tada skaičiuojant konteinerio aukštį bus atsižvelgta į slankiuosius elementus. Šis metodas gali būti naudojamas, kai iš anksto nežinoma, koks turi būti konteinerio aukštis.

      „Float“ ypatybė veikia tik su bloko elementais, taigi, jei slankioji savybė taikoma kitokio tipo elementams, jie konvertuojami į bloko tipą.

      Pastaba: absoliutūs ir fiksuotos padėties elementai nepaiso slankiosios savybės. Be to, plūduriuojančios savybės neturi įtakos lankstiesiems dėžėms.