kufijtë notues. Float dhe clear janë vetitë CSS për elementët lundrues në paraqitjen e bllokut. Si funksionon Flexbox

Çdo atribut, me përjashtim të booleans, ka një vlerë që është një nga llojet e mëposhtme: fjalen, vargun, adresën, numrin, përqindjen, kodin e gjuhës. Këto nuk janë të gjitha llojet, por më të zakonshmet.

Fjalë kyçe

Disa atribute kanë vlera të rezervuara të quajtura "fjalë kyçe". Për shembull, vlera e atributit tip të elementit përcakton llojin e elementit të formës. Më poshtë artikull krijon një buton.

Fjalët kyçe i nënshtrohen specifikimit, lista e vlerave të tyre është e kufizuar dhe nuk mund të ndryshohet në mënyrë arbitrare.

Linjë

Vargu është tekst i mbyllur në thonjëza të dyfishta ose të vetme.

Thonjëza përcakton fillimin dhe fundin e vargut, kështu që të njëjtat thonjëza nuk mund të shtohen brenda vargut. Për shembull, rreshti i mëposhtëm përdor kombinimin e gabuar të thonjëzave.

Për të shkruar saktë një varg me thonjëza të brendshme, ka disa opsione.

1. Ikja nga thonjëza e brendshme si kjo - \". Në këtë rast, ai nuk do të perceptohet më nga shfletuesi si thonjëza, por konsiderohet një karakter.

2. Përdorni një kombinim thonjëzash të vetme dhe të dyfishta.

Këtu vargu në atributin titull është i mbyllur në thonjëza të vetme, kështu që ne mund të shkruajmë me siguri brenda një thonjëze të dyfishtë.

E gjithë kjo funksionon në të njëjtën mënyrë për citate të vetme.

Adresë

Një adresë është një shteg drejt një dokumenti, siç është skedari grafik. Adresa nevojitet në rastet kur bëhet një lidhje me një sajt, një faqe tjetër ueb ose shkarkohet një skedar specifik. Për shembull, në elementin adresa përdoret si vlerë e atributit src, ajo specifikon rrugën drejt skedarit të imazhit.

Dalloni adresat absolute dhe relative.

Adresat absolute

Adresa të tilla funksionojnë kudo dhe kudo, pavarësisht nga emri i faqes ose faqes së internetit ku jepet adresa, dhe gjithmonë fillojnë me një protokoll transferimi të të dhënave. Për faqet e internetit, kjo është zakonisht HTTP (HyperText Transfer Protocol), kështu që adresat absolute fillojnë me fjalën kyçe http://. Shembulli 1 tregon një lidhje që përdor një adresë absolute.

Shembulli 1: Përdorimi i një adrese absolute në një lidhje

Lidhje

Google

Përveç protokollit HTTP, ekziston edhe një protokoll i sigurt HTTPS. Nuk është gjithmonë e qartë se cili protokoll përdoret në sit, kështu që mund të hiqet fare në adresën e lidhjes. Në këtë rast, adresa do të shkruhet si kjo:

Google

Adresat absolute përdoren kryesisht për të treguar një burim tjetër rrjeti dhe përdoren rrallë për lidhje të brendshme.

Adresat relative

Adresat relative përcaktohen nga rrënja e faqes ose dokumenti aktual. Për shembull, kodi do të thotë të shkarkosh një skedar grafik të quajtur pic.png, i cili ndodhet në të njëjtën dosje si vetë faqja e internetit. Le të shohim disa shembuj të adresave të tilla.

/
Adresa zakonisht tregon skedarin index.html, i cili ndodhet në rrënjën e faqes. Nëse nuk ka skedar index.html, shfletuesi zakonisht do të shfaqë një listë skedarësh në atë direktori. Emri i skedarit nuk duhet të jetë index.html, ky parametër ndryshohet përmes cilësimeve të serverit në internet - ky është emri i programit që analizon kërkesat që vijnë nga shfletuesi dhe i dërgon atij dokumentet e shfaqura tek përdoruesi.

/images/pic.png
Një vizë (/) përpara adresës tregon se adresimi fillon nga rrënja e faqes. Lidhja të çon te skedari pic.png, i cili ndodhet në dosjen e imazheve. Dhe kjo, nga ana tjetër, ndodhet në rrënjën e faqes.

../help/me.html
Dy pikat përpara emrit i tregojnë shfletuesit të ngjitet një nivel në listën e dosjeve të faqes dhe aty të "kërkojë" në dosjen e ndihmës për një skedar të quajtur me.html.

manual/info.html
Nëse nuk ka karaktere shtesë përpara emrit të dosjes, si pika ose viza, atëherë dosja ndodhet brenda dosjes aktuale dhe skedari info.html është tashmë në të.

URL-të në lidhje me rrënjën e sitit si /demo/ funksionojnë vetëm nën kontrollin e serverit të uebit dhe nuk janë të zbatueshme në kompjuterin lokal.

Lidhjet

Shikoni foton time!

Si të bëni të njëjtën foto?

Ndonjëherë mund të gjeni adresa në formën ./file/doc.html. Një pikë përpara do të thotë që numërimi mbrapsht është nga dosja aktuale. Një hyrje e tillë është e tepërt dhe mund të shkurtohet në file/doc.html.

Numrat

Numrat përbëhen nga numrat nga 0 deri në 9; për numrat negativ, nëse është e nevojshme, vendoset një shenjë minus (-45) përpara. Shembulli 3 tregon përdorimin e numrave si vlera të atributeve.

Shembulli 3: Përdorimi i numrave

Numrat

Temperatura e ujit

E ulët Normale nxehtë Ujë të vluar

Përveç numrave të plotë, lejohet përdorimi i thyesave dhjetore, ndërsa pjesët e plota dhe të pjesshme janë të ndara nga njëra-tjetra me një pikë - 36.6, siç tregohet në shembullin 4.

Shembulli 4. Numrat thyesorë

hyrje, atribut maksimal

Interesi

Shënimi i përqindjes ju lejon të lidheni me madhësinë e elementit prind dhe të vendosni madhësinë në lidhje me të. Supozoni se kemi kodin e mëposhtëm:

Elementi ndodhet brenda

Prandaj elementi

do të jetë një prind për të . E kundërta është gjithashtu e vërtetë - element është një fëmijë i

Prandaj, në këtë rast, gjerësia e figurës si përqindje llogaritet nga paragrafi mëmë, i cili si parazgjedhje zë të gjithë hapësirën e lirë të dritares në gjerësi.

Shfletuesi kupton që po flasim për përqindje nëse simboli % shtohet pas numrit, për shembull: width="40%" .

Shembulli 5 tregon kodin e një faqe interneti, në të cilën gjerësia e imazhit tregohet si përqindje.

Shembulli 5. Dimensionet e imazhit në përqindje

Imazhi

Rezultati i këtij shembulli është paraqitur në Fig. 1. Gjerësia e imazhit është vendosur në 100%, kështu që ajo merr gjerësinë e plotë të dritares së shfletuesit. Lartësia nuk është e specifikuar dhe llogaritet automatikisht nga shfletuesi.

Oriz. 1. Madhësia e imazhit në përqindje

Avantazhi i shënimit të përqindjes është se madhësia e imazhit ndryshon me gjerësinë e dritares së shfletuesit dhe nuk mbetet statike. Disavantazhet përfshijnë përkeqësimin e cilësisë së imazhit kur shtrihet fort.

Kodi i gjuhës

Jetojmë në një epokë globalizimi, kur faqet e internetit përmbajnë tekste në gjuhë të ndryshme. Për të treguar Motorë kërkimi, në cilën gjuhë është shkruar teksti dhe vendosni cilësimet tuaja gjuhë të ndryshme(llojet e thonjëzave, për shembull) dhe gjuha e tekstit tregohet si kod. Atributi lang përdoret për të vendosur gjuhën (shembulli 6).

Shembulli 6: Përdorimi i atributit lang

gjuhe

Frazë në frëngjisht

Je n "ai pas mange depuis gjashtë ditë

Në këtë shembull, e gjithë faqja është vendosur në Rusisht me atributin lang të vendosur në ru . Për të treguar se gjuha zbatohet për të gjithë faqen, elementit i shtohet një atribut . Për tekstin francez, elementit i shtohet atributi lang me vlerë fr

Vlerat e vlefshme të atributit lang mund të gjenden në këtë faqe.

Përshkrim

Përcakton se në cilën anë do të rreshtohet elementi, me elementë të tjerë që mbështillen rreth tij në anët e tjera. Kur vlera e vetive float është none, elementi paraqitet në faqe si normal, duke lejuar që një rresht i tekstit të mbështjelljes të jetë në të njëjtën linjë me vetë elementin.

Sintaksë

noton: majtas | drejtë | asnjë | trashëgojnë

vlerat

majtas Rreshton elementin në të majtë dhe të gjithë elementët e tjerë, si teksti, e mbështjellin atë në të djathtë. djathtas Rreshton elementin në të djathtë dhe të gjithë elementët e tjerë e mbështjellin atë në të majtë. Asnjë Mbështjellja e elementit nuk është vendosur. inherit Trashëgon vlerën e prindit.

HTML5 CSS 2.1 IE 9 Cr 15 Op 11 Sa 5 Fx 8

noton

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 zzril delenit au tegue duissii dolore.

Rezultati i këtij shembulli është paraqitur në Fig. 1.

Oriz. 1. Përdorimi i vetive float

Modeli i objektit

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

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

Shfletuesit

Internet Explorer 6 ka një gabim me dyfishimin e vlerës së mbushjes majtas ose djathtas për elementët lundrues të vendosur brenda elementëve prindër. Mbushja që është ngjitur me anën e prindit dyfishohet. Problemi zakonisht zgjidhet duke shtuar ekran: inline në elementin lundrues. Ky shfletues shton gjithashtu një mbushje 3 pikselë (i ashtuquajturi "bug me tre piksel") në drejtimin e specifikuar nga vlera float.

Internet Explorer deri në versionin 7.0 nuk e mbështet vlerën trashëgimore.

Saga e gjatë e shkrimit të një artikulli për pronën "float" ka marrë fund. Edhe pse u desh shumë kohë, mendoj se arrita të bashkoj sa më qartë të gjithë larminë e sjelljeve të kësaj prone të fuqishme dhe disi të çuditshme në një sistem të përbashkët.

Për më tepër, ky artikull përmban një numër rekord ilustrime midis të gjithë "Librit shkollor" :-)

Fati i vetive "float" në CSS është paksa i ngjashëm me fatin e etiketës "table" në HTML: asnjëra nuk ishte menduar fare si një mjet për të krijuar kolona dhe në përgjithësi për të shtruar elementë. Megjithatë, për shkak të papërsosmërive të caktuara në mekanizmin e pozicionimit, notuesit përdoren gjerësisht për këtë qëllim. Dhe fakti që u shpik për një tjetër shpesh manifestohet nga efekte të ndryshme jo të dukshme. Megjithatë, përpara se t'i tregoj ato, unë do t'ju tregoj akoma se si lundrojnë Mund aplikoni për paraqitjen.

Në fillim - një vërejtje e vogël për kushtet. Nuk ka asnjë term të njohur për këtë instrument në Rusisht (të paktën jo ende). Prandaj, preferoj ta shkruaj në drejtshkrimin e tij origjinal - "float". Ai lexon diçka si "float" (nuk keni nevojë të thyeni mollëzat tuaja me shqiptimin "float"). Në të njëjtën kohë, ju kërkoj menjëherë të më falni liri të tilla si "noto" atë, "noton" zogth, etj. :-)

Parimi i funksionimit

Ashtu si pozicionimi, float përdoret për të lëvizur kutitë. Por ndryshe nga pozicionimi, i cili mund të lëvizë kutitë pothuajse në mënyrë arbitrare, gjithçka që mund të bëjë një float është të lëvizë një element në secilën anë të rrjedhës, djathtas ose majtas.

Në të njëjtën kohë, vetë kutia dhe ata që e ndjekin atë në rrjedhë fitojnë sjellje interesante:

Float" Një kuti noton horizontalisht dhe ngjitet në njërën anë të prindit të saj.
Float" kutia me dado nuk shpërndahet më në të gjithë gjerësinë e kutisë së kontejnerit mëmë (siç ndodh me blloqet në rrjedhë). Me anën e lirë të pa shtypur te prindi, shfaqet hapësira e lirë.
duke e ndjekur atë bllokoj kutitë tërhiqen lart dhe zënë vendin e saj, sikur kutia notuese të mos ishte në rrjedhë.
Shkronjat e vogla kutitë brenda blloqeve që janë zhvendosur lart fillojnë të rrjedhin rreth kutisë notuese nga ana e lirë.

Dua të theksoj edhe një herë një gjë që nuk është menjëherë e dukshme: vetë kutia e bllokut që ndjek lundrimin zvarritet nën të dhe zë të gjithë gjerësinë e rrjedhës, por teksti brenda këtij blloku zhvendoset anash dhe mbështillet rreth noton.

Më tej, është interesante se si sillen kutitë "float" që shkojnë në një drejtim njëra pas tjetrës. Në këtë rast, kutia tjetër do të përpiqet të përshtatet në anën e asaj të mëparshme, në anën e saj të lirë. Dhe vetëm nëse nuk ka hapësirë të mjaftueshme për të, atëherë ajo do të lëvizë poshtë dhe do të përpiqet të përshtatet tashmë atje.

Ekziston edhe një aspekt i vogël teknik, jo i nevojshëm për të kuptuar të gjithë "mekanikën". Ju mund të notoni si kutitë e bllokut ashtu edhe ato inline.Në të njëjtën kohë, kutitë inline bëhen menjëherë automatikisht kuti blloku. Kjo do të thotë, shkrimi i ekranit: bllok; për float është i panevojshëm.

Nga dy tiparet e përshkruara të float "s - shtypja në buzë dhe ngjitja në anën e njëri-tjetrit - dy aplikime kryesore të tyre në paraqitje vijojnë:

duke e ndarë faqen në kolona
menytë horizontale

folësit

Kolonat janë kur blloqet e tekstit janë pranë njëri-tjetrit dhe kanë të njëjtën lartësi.

Unë do të shqyrtoj të gjitha paraqitjet e kolonave në kodin e mëposhtëm të thjeshtë HTML me dy blloqe:

...

Duhet thënë menjëherë se bërja e kolonave në një enë që shtrihet në gjerësi është më e vështirë sesa me një gjerësi të caktuar. Ekzistojnë dy qasje thelbësisht të ndryshme, të përshtatshme për raste të ndryshme.

Gjerësia proporcionale

Nëse dëshironi që gjerësia e kolonave të ndryshojë proporcionalisht kur ndryshon gjerësia e faqes, atëherë qasja është si më poshtë:

#content ( float:djathtas; gjerësia:70%; ) #sidebar (float:majtas; gjerësia:30%; )

Kjo do të thotë, dy blloqe notuese janë krah për krah në drejtime të ndryshme dhe gjerësia e tyre ndahet në përqindjen e dëshiruar. Kjo metodë e bën të lehtë shkëmbimin e kolonave - thjesht duke ndryshuar vlerat e djathta dhe majtas.

Shtrihet vetëm një kolonë

Nëse keni nevojë të ndryshoni vetëm gjerësinë e kolonës kryesore, atëherë metoda e mëparshme nuk është e përshtatshme. Fakti është se në CSS, për fat të keq, është e pamundur drejtpërdrejt për të formuluar një gjë të tillë si "e gjithë gjerësia e disponueshme minus një numër specifik".

Tani le të kthehemi te një nga artikujt e mëparshëm rreth blloqeve në rrjedhë, ku përmenda një nga veçoritë e tyre të dobishme për t'u përshtatur automatikisht në gjerësinë e kutisë mëmë. Kjo do të thotë, nëse një blloku në rrjedhën përpara i jepet, të themi, një diferencë e majtë, atëherë gjerësia e tij do të tkurret në përputhje me rrethanat. Dhe kjo është pikërisht sjellja që kemi dashur të arrijmë nga njëra prej kolonave.

Pra, për efektin që duam, ne do t'i japim bllokut kryesor një diferencë të majtë në mënyrë që të tkurret në të djathtë dhe shiriti anësor të notojë në vend:

#bari anësor ( float:majtas; gjerësia:200px; ) #content (margin-left:200px; )

Por metoda e dytë ka një pengesë shumë serioze. Vini re se në HTML origjinale, blloku "sidebar" shkon përpara bllokoni "përmbajtjen" me përmbajtjen kryesore. Nuk ka nevojë të mendoni se është bërë rastësisht :-). Kjo është bërë me qëllim, sepse përndryshe kjo metodë e dytë me një mbivendosje kolone në majë të marzhit nuk do të funksiononte.

Siç shkrova në fillim të artikullit, notat lëvizin vetëm anash dhe bëjnë vend për blloqet e radhës që lëvizin lart. Prandaj, është e rëndësishme që "shiriti anësor" të jetë tashmë në krye dhe më pas blloku kryesor do të lëvizë. deri në të.Nëse "shiriti anësor" vjen pas bllokut kryesor, atëherë ai do të mbetet më i ulët dhe nuk do të duket si asnjë kolonë.

Kjo është vërtet e keqe sepse minon një nga idetë kryesore të CSS: ndarjen e stilimit nga përmbajtja. Rezulton se ne donim vetëm të ndryshonim modelin, dhe nëse blloqet janë të vendosura "gabimisht", atëherë do të duhet të shkojmë edhe në shabllonet HTML. Për më tepër, nga pikëpamja e strukturës, mund të ketë arsye të mira për të rregulluar blloqet në një mënyrë dhe jo në një tjetër. Për shembull, në mënyrë që përdoruesi të fillojë të lexojë tekstin kryesor të faqes pa pritur që lundrimi të ngarkohet.

gjerësi fikse

Gjërat thjeshtohen në mënyrë dramatike kur kolonat futen në një enë me gjerësi fikse. Në këtë rast, është mirë të përdorni metodën e parë (float" të gjitha kolonat), dhe gjerësia tashmë mund të vendoset jo vetëm në përqindje, por në çfarëdo që dëshironi, pasi mund të llogaritet saktësisht.

Lartësia e altoparlantit

Përsëri, nuk ishte aspak e rastësishme që "preva" pjesën e poshtme të blloqeve në foto :-). Përndryshe, ato nuk do të dukeshin fare si kolona, sepse, siç e shihni, nëse aplikoni fragmentet CSS që kam dhënë dhe ngjyrosni kolonat me ngjyra të ndryshme, atëherë lartësia e tyre rezulton të jetë e ndryshme. Varet nga sasia e përmbajtjes në këto blloqe.

Ky efekt i shëmtuar mund të anashkalohet në disa mënyra.

Metoda e parë quhet "Kollonat e rreme", botuar në revistën autoritare të internetit A List Apart në shtator 2004 dhe ka qenë shumë e njohur që atëherë. Unë rekomandoj të gjithë të lexojnë ose origjinalin ose përkthimin në rusisht. Sidoqoftë, nëse nuk jeni në humor të klikoni sot, atëherë këtu është një përmbledhje e shkurtër e thelbit të saj.

Në vend që të caktohet një sfond për vetë kolonat, ato lihen transparente, por kontejnerit të tyre i caktohet një imazh sfondi që është gjerësia e të gjithë kontejnerit dhe përsëritet vertikalisht. Pjesë të kësaj tabloje, të vendosura nën kolona të ndryshme, janë pikturuar ngjyra të ndryshme dhe kur përsëritet poshtë jep efektin e dëshiruar vizual.

Ajo që është e mrekullueshme në lidhje me kolonat false është se nuk duhet të kufizoheni në ngjyra të forta në imazhin e sfondit. Mbi të, për shembull, mund të vizatoni një efekt hije midis kolonave, duke përsëritur vija horizontale si sfond, një zbukurim përgjatë skajeve.

Disavantazhi i kësaj metode është se meqenëse imazhi i sfondit ka vetëm një madhësi, ai nuk mund të përdoret për shtrirje proporcionale të kolonave, pasi imazhi nuk shtrihet. Por për rastin kur njëra prej kolonave është e fiksuar në gjerësi, sfondi mund të rregullohet (ky rast, nga rruga, nuk konsiderohet në "Kollonat Faux").

Çështja është të vendosni imazhin e sfondit vetëm nën kolonën gjerësia e së cilës dihet. Pjesa tjetër e hapësirës do të jetë e zënë nga sfondi ngjyrë enë, jo një foto.

Le të marrim shembullin tonë dhe të bëjmë kolonën "sidebar" në të djathtë 200 piksele të gjerë dhe le të shtrihet "përmbajtja". Për "shiritin anësor" do të përgatisim një foto me dimensione 200x1, për shembull, një nuancë uniforme blu. Dhe nën "përmbajtje" do të marrim të verdhë.

Në stile duket kështu:

#sidebar ( float:djathtas; gjerësia:200px; ) #content (margin-djathtas:200px; ) body ( sfond:url(bg.png) #FFD djathtas lart përsëritje-y; )

Rregulli i vetëm për kontejnerin (trupin) specifikon të gjithë sjelljen e sfondit:

specifikoni URL-në e imazhit (bg.png)
ngjyra e sfondit në vendet ku nuk do të jetë (#FFD)
pozicioni i imazhit të shtypur në skajin e djathtë (sipër djathtas)
përsërit imazhin poshtë (përsërit-y)

NË shembull real CSS gjithashtu kishte disa rregulla për ngjyrën e shkronjave dhe trajtimin e kufijve, të cilat tani janë të parëndësishme.

Një mënyrë tjetër për të barazuar kolonat në lartësi ishte përshkruar kohët e fundit dhe tashmë i njohur për shkak të komoditetit të tij.

Ideja pas saj është që të fshihen lartësitë e pabarabarta të kolonave duke i shtrirë ato jashtëzakonisht poshtë në mënyrë që skajet e tyre të jenë jashtë përmbajtjes reale të faqes. Ata e arrijnë këtë duke vendosur fillimisht një dhëmbëzim (mbushje) shumë të madhe poshtë në kolona, e cila është e lyer me ngjyrën e sfondit. Dhe në mënyrë që pjesa tjetër e përmbajtjes të mos lëvizë shumë atje, kolonat janë caktuar negativ kufiri (margjina) me të njëjtën madhësi:

Numri i çuditshëm është për faktin se ky është maksimumi që mund të lejojë shfletuesi Safari. Në fakt nuk është aq e çuditshme. Për këdo që pyet, ky është numri i plotë maksimal i nënshkruar kur përfaqësohet nga 16 bit.

Si rezultat, gjithçka pas kolonave zhvendoset dhe ndodhet direkt nën përmbajtjen e më të gjatëve prej tyre, dhe kolonat shtrihen poshtë. Një gjë është e shëmtuar - për shkak të kolonave të gjata, faqja bëhet po aq e gjatë. Për ta luftuar këtë, ju duhet të vendosni pronën overflow:hidden në kontejnerin e tyre, gjë që e detyron kontejnerin thjesht të shkëputet dhe të mos tregojë se çfarë shkon përtej kufijve të tij.

Shembulli im, të cilin e mora që në fillim, ka megjithatë një pengesë. Atje, kolonat shtrihen pikërisht në trup. Dhe nëse trupi është caktuar si overflow:hidden , atëherë shfletuesit anulojnë plotësisht lëvizjen e faqes. Edhe nëse përmbajtja e vërtetë është mbi dritare. Prandaj, kolonat duhet të mbështillen me një element tjetër, si p.sh. një div. Por me drejtësi, duhet thënë se në praktikë kolonat tashmë janë mbështjellë me diçka.

Pritë

Ku të bëni pa të :-). Siç e la të kuptohet jo veçanërisht transparente që në fillim, meqenëse notat nuk u shpikën si një mjet për të krijuar kolona, kjo patjetër do të dalë me diçka të shëmtuar dhe do të kthehet në një rritje të konsumit të analginit (disa preferojnë tempalgin ose paracetamol) .

Dhe "dil jashtë" - në kuptimin më të vërtetë. Le ta afrojmë shembullin tonë "të zhveshur" pak më afër realitetit duke shtuar një kokë sipër kolonave dhe një bllok me tekst më poshtë.

...

Për thjeshtësi, ne do të zgjedhim një dizajn të thjeshtë kolone me një gjerësi fikse. Le ta bëjmë kokën dhe bllokun e poshtëm blu me shkronja të bardha, përmbajtja kryesore është e bardhë, dhe kolona shtesë është gjithashtu blu, por pak më e lehtë. Ne do të vendosim ngjyrat për kolonat duke përdorur metodën "Kollonat e rreme".

/* Paraqitja e kolonës */ trupi ( gjerësia: 600 px; margjina: 0 automatik; ) #përmbajtje ( float: majtas; gjerësia: 450 px; ) #bari anësor ( float:djathtas; gjerësia: 150 px; ) /* Ngjyrat */ #main ( sfond:url(bg.png) djathtas lart përsëritje-y; ) #header, #footer ( sfond:#238; ngjyra: e bardhë; )

Për lehtësinë e perceptimit, hoqa çdo indent dhe font përsëri. Shtoni tekstin e testimit dhe ekzekutoni:

Hmm... Epo, kolonat, në përgjithësi, edhe mund të shihen! Mos u përmba! Megjithatë, çfarëdo që të thotë, gjithçka nuk duket ashtu siç është planifikuar, madje mund të thuhet se gjithçka është kthyer në një lloj rrëmuje lulesh dhe letrash.

Për të kuptuar pse ndodh kjo, duhet të kujtojmë përshkrimin se si funksionon float. Domethënë, që blloqet që ndjekin notat nuk i vënë re këto nota dhe tërhiqen lart. Për më tepër, vetë kontejneri, në të cilin ndodhen notat, gjithashtu pushon t'i vërejë ato, dhe blloqet notuese bien nëpër pjesën e poshtme të enës nëse përfundon më herët.

Tani le të shohim kodin tonë. Të dy blloqet float "content" dhe "sidebar" janë brenda bllokut "main". Dhe nuk ka asgjë tjetër në "main". Dhe meqenëse nuk ka asgjë më shumë për të përmbajtur, lartësia e tij bie në zero! Prandaj, nuk mund të shihni çdo të bardhë në foto sfondi "përmbajtje", as sfondi "sidebar" blu i hapur, sepse ato ngjyra janë caktuar si sfondi "kryesor".

Tjetra - "futër". Ai, duke iu bindur të njëjtit rregull, gjithashtu nuk e sheh notën "blloqe arrat dhe tërhiqet drejtpërdrejt në vetë titullin (pasi "kryesore" është lartësi zero). Por ka tekst në "footer". Ky tekst duhet tashmë mbështilleni rreth notës "s": në të djathtë "përmbajtje" dhe në të majtë "shiritin anësor". Nuk ka hapësirë midis kolonave, kështu që teksti mund të fillojë vetëm nën njërën prej kolonave që përfundon së pari. Ja ku eshte. Pra, "footeri" ngrihet poshtë titullit dhe vazhdon poshtë derisa i gjithë teksti të jetë zhdukur. Dhe i gjithë ky sfond blu që është poshtë titullit është "footer" dhe është.

Pse një kompleksitet i tillë

Sjellja e përshkruar duhet të frymëzojë hutim. Pse ishte e nevojshme të dilnim me komplikime të tilla: të ndash konceptin e një blloku në mënyrë që ngjyrat dhe kornizat të jenë në krye, dhe teksti të jetë në vend? Por sigurisht që ka kuptim. Kjo, së bashku me kolapsin e kufirit, është një përpjekje për të bërë modelin e kutisë CSS të sillet normalisht në kushtet e rrjedhës së thjeshtë të tekstit. Një shpjegim i detajuar klasik i këtij fenomeni është dhënë nga i njëjti Eric Meyer në artikullin "Përmbajnë float" (në anglisht). Do të përpiqem të përcjell shkurtimisht thelbin.

Imagjinoni një rrjedhë normale të paragrafëve - blloqe teksti - pa ndonjë pozicionim. Në një nga paragrafët, ka një fotografi që dëshironi ta zhvendosni, të themi, në të majtë në mënyrë që teksti të rrjedhë rreth saj. Kjo është arritur më parë në HTML me veçorinë align="majtas", por në frymën e zhvendosjes së stilimit nga HTML në stile, për këtë funksion, ata sapo dolën me pronën float. Kjo do të thotë, në vend të rreshtimit, kjo imazh është caktuar float:left.

Lëreni imazhin e zhvendosur të marrë më shumë lartësi se teksti i paragrafit. Nëse ajo e shtrin paragrafin e saj dhe e shtyn fillimin e një tjetër më poshtë, atëherë do të duket e shëmtuar për shkak të rritjes së ndarjes së rreshtave të paragrafëve ngjitur. Prandaj, ai bie nëpër të gjitha kufijtë e blloqeve, duke mbajtur dhëmbëzime të bukura midis tyre dhe teksti rrjedh rreth tij.

Zgjidhjet

Pra, sjellja e rënies është e kuptueshme, por është e përshtatshme për tekst të papozicionuar dhe është krejtësisht e papërshtatshme për paraqitjen. Ekzistojnë dy mënyra që eliminojnë të dyja manifestimet e kësaj vepre: tërheqja e kutive të ardhshme lart dhe rënia në fund të enës.

Ekziston një veçori e veçantë për të eliminuar tërheqjen e bllokut lart. E bën elementin të lëvizë poshtë derisa të mos ketë mbetur asnjë notues në anën e tij. Për më tepër, ju mund të kontrolloni se nga cila anë nuk duhet të ketë nota:

qartë: e majta sigurohet që të mos ketë nota në të majtë qartë: djathtas siguron që të mos ketë nota në të djathtë qartë: të dyja sigurohet që të mos ketë nota në të dyja anët

Kështu, nëse i themi "futësit" tonë:

#footer (e qartë: të dyja; )

Në mënyrë që të mos ketë kolona notuese në të majtë dhe në të djathtë të saj, ajo do të lëvizë poshtë pikërisht aty ku përfundojnë të dyja.

Por kjo nuk e zgjidh problemin tjetër: që notat bien përmes "main" dhe ai shembet, duke e lënë të padukshëm sfondin e kolonës që i është caktuar.

Ju mund ta poziciononi në mënyrë të qartë enën në një farë mënyre. Me sa kuptoj logjikën e specifikimit, sjellja e dështimit konsiderohet logjike vetëm në një fije të thjeshtë. Në raste të tjera, thjesht pengohet. Dhe kështu është, siç e kemi parë. Kjo do të thotë, mjafton t'i caktoni kontejnerit, për shembull, pozicionin: absolut ose notues: majtas, dhe asgjë nuk do të bjerë, kontejneri do të përmbajë plotësisht tekst dhe notues. Në rastin tonë (dhe në shumicën e rasteve, nga mënyrë) kjo zgjidhje është mjaft e përshtatshme.

Një mënyrë tjetër interesante lidhet me efektin anësor të vetive të tejmbushjes. Në vetvete, synohet të përcaktojë se si kontejneri do të tejmbushet kur nuk mund të përmbajë përmbajtjen e tij. Ka katër kuptime:

Përmbajtja e dukshme kalon skajin dhe normalisht është e dukshme (kjo është sjellja e parazgjedhur) përmbajtja e fshehur është shkëputur jashtë kontejnerit dhe nuk është e dukshme atje në asnjë mënyrë automatikisht nëse përmbajtja del nga kontejneri, ajo ka një shirit lëvizës që ju lejon të lëvizni përmbajtja, nëse jo, asnjë lëvizje nuk shfaqet si automatike, vetëm kontejneri ka gjithmonë një shirit lëvizës, edhe kur përmbajtja nuk e tejmbush atë

Pra këtu efekt anësorështë se nëse vendosni ndonjë tejmbushje në enë, përveç të dukshmes së zakonshme, ai papritmas shtrihet dhe përfshin notat që ulen në të, duke eliminuar shembjen.

Çfarë lloj tejmbushjeje të përdorni? Lëvizja zhduket menjëherë - shiritat lëvizës gjithmonë të varur nuk nevojiten qartë. Ajo që mbetet është automatike dhe e fshehur, të cilat ndryshojnë vetëm nëse shiriti i lëvizjes shfaqet në tejmbushje apo jo. Por nuk kemi asnjë tejmbushje, përkundrazi, me këtë veti e kemi detyruar enën të shtrihet më tej në mënyrë që të mbulojë të gjithë elementët e saj. Prandaj, çdo vlerë mund të përdoret.

Në mënyrë supersticioze përpiqem të përdor të fshehtën në mënyrë që shiritat e lëvizjes të mos shfaqen nëse, për shkak të disa defekteve, ndodh papritmas një tejmbushje.

Zgjidhja e tejmbushjes ka një pengesë që lidhet me sjelljen e Some Browser™. Funksionon vetëm nëse kontejnerit i është caktuar në mënyrë eksplicite një gjerësi ose lartësi. Për shkak të kësaj, ato ndonjëherë janë të papërshtatshme për t'u përdorur kur keni nevojë për madhësi automatike dhe jo për ato të ngurta.

Pra, në fund, për të rregulluar shembullin tonë me kolona, duhet ta bëjmë këtë:

#main (gjerësia:100%; tejmbushje: fshehur; )

Meqe ra fjala! Nëse nuk do të përdorja kolona faux për të vizatuar sfondin nën kolona, por një metodë të gjatë mbushjeje, atëherë do të kërkuar përdorni overflow:hidden për "main", i cili gjithashtu zgjidh problemin e rënies. Por atëherë si do të flisja për të?

Kaq me altoparlantët... Koha për të shkuar t'i derdhni vetes një çaj të shijshëm (shumë njerëz preferojnë kafenë) dhe t'i shtoni pak kifle të shijshme, pushoni për të futur gjithë këtë rrëmujë në kokën tuaj. Tjetra, ne jemi duke pritur për një shtesë të vogël - në lidhje me menunë.

float:left nevojitet për elementet e listës në mënyrë që ato të zgjerohen horizontalisht dhe për vetë listën në mënyrë që elementët të mos bien përmes saj;
marzhi zero dhe mbushja eliminojnë mbushjen që bëjnë shfletuesit për listat si parazgjedhje, por ata e bëjnë atë shumë ndryshe, kështu që është më e lehtë të thuash "çdo gjë është zero" sesa të kujtosh se çfarë të vendosësh veçmas për cilin element.

Morali

Mekanizmi notues është një mjet tjetër i paraqitjes së bashku me pozicionimin absolut.

Ato ndryshojnë për mirë, duke ju lejuar të lini elementin në rrjedhë, gjë që është shumë e përshtatshme për një plan urbanistik.

Megjithatë, ai ka disavantazhet e të qenit më pak fleksibël për shkak të faktit se elementët nuk mund të zhvendosen në mënyrë arbitrare dhe për shkak se aftësia për ta përdorur atë mund të varet nga renditja e elementeve në shënjimin HTML.

Ky artikull është pjesë e një cikli në proces të shkrimit nën titullin e punës “Libër mësuesi”. Unë ju rekomandoj të lexoni artikuj të tjerë që mund të gjenden në kategorinë "Teksti shkollor", ku tani janë mbledhur në mënyrë të kundërt kronologjike.

Tashmë e kemi kuptuar. Mësuam se kanë përmbajtje. Megjithatë, kjo nuk është e gjitha. Etiketat gjithashtu kanë atribute që zgjerojnë aftësitë e tyre, dhe atributet, nga ana tjetër, kanë vlera. Me ndihmën e tyre, ju mund të vendosni parametra për elementin, të përcaktoni stilin e dizajnit. Për shembull, etiketa

keni shënuar një paragraf. Por si ta bëni atë të rreshtuar djathtas? Për ta bërë këtë, ju nevojitet një atribut i caktuar me një vlerë të përshtatshme. Ashtu si disa etiketa nuk kanë një çift, ashtu edhe disa atribute mund të përdoren pa vlera.

Si të shkruani atributet?

Atributet janë fjalë të rezervuara (si etiketat, vetëm pa kllapa këndore), por vlerat e tyre mund të jenë të ndryshme. Ashtu si etiketat, atributet e vlerësuara inkurajohen të shkruhen me shkronja të vogla, megjithëse shfletuesit në përgjithësi nuk u interesojnë - është thjesht një rregull i madh. sjellje te mira: në rusisht, GJITHASHTU NUK PRANOHET TË SHKRUARIT ME KYÇIM TË KAPITALEVE. Pse HTML është më keq?

Vlerat me atribute shkruhen në formatin e mëposhtëm:

atribut=”value” lang=”en”

Atributet duhet të shkruhen gjithmonë brenda etiketës hapëse, pas fjalës së rezervuar.

Paragraf

Zakonisht, ka shumë atribute të disponueshme për një etiketë të vetme. Nuk ka rëndësi se në çfarë radhe janë renditur.

Atributet gjenerike

Çdo etiketë HTML ka grupin e vet të atributeve. Disa atribute mund të jenë të disponueshme në etiketa të shumta, ndërsa të tjera mund të funksionojnë vetëm në një. Ekziston gjithashtu një grup atributesh universale (globale) që mund të përdoren me çdo etiketë. Le të hedhim një vështrim të shpejtë në atributet e kësaj kategorie.

çelësi i hyrjes ju lejon të vendosni një shkurtore të tastierës për të hyrë në një objekt specifik faqeje. Për shembull, mund ta bëni atë në mënyrë që duke përdorur shkurtoren e tastierës Alt+1 përdoruesi klikoi në një lidhje specifike. Kështu zhvilloni një sistem navigimi me tastierë.

Vlera e atributit mund të jetë numrat 0-9 ose shkronjat e alfabetit latin:

Lidhja do të hapet duke shtypur shkurtoren e tastierës me një

klasës ju lejon të lidhni një etiketë me stilin e paracaktuar të CSS. Përdorimi i atributit ju lejon të zvogëloni ndjeshëm kodin, sepse në vend që të përsërisni hyrjen e të njëjtit bllok CSS, thjesht mund të futni emrin e klasës që korrespondon me të.
Duke përdorur i kënaqshëm ju mund t'i lejoni përdoruesit të modifikojë çdo element të faqes HTML: fshini, futni, ndryshoni tekstin. I njëjti atribut bën të mundur modifikimin dhe çaktivizimin. Ka vetëm dy vlera: e vërtetë- lejo redaktimin i rremë- të ndalojë.
Me atributin menyja e kontekstit ju mund të pajisni çdo element të dokumentit me elementë unik të menysë së kontekstit sipas zgjedhjes suaj. Vetë menuja krijohet në etiketë , dhe atributit të menusë kontekstuale i jepet ID-ja e tij.
dir përcakton drejtimin e tekstit: nga e majta në të djathtë (ltr) ose djathtas në të majtë (rtl).
zvarritshëm ju lejon të ndaloni (i rremë) ose lejojnë (e vertete) përdoruesi të tërheqë elementin e faqes të pajisur me këtë atribut.
zona e rënies i tregon shfletuesit se çfarë të bëjë me elementin e zvarritur: kopje (vlera kopje), lëviz ( lëvizin) ose krijoni një lidhje me të (link).
i fshehur- një atribut që ju lejon të fshehni përmbajtjen e elementit në mënyrë që të mos shfaqet në shfletues. Nëse atributi është vendosur në false, objekti shfaqet, i vërtetë - i fshehur.
id vendos identifikuesin e elementit - një lloj emri që nevojitet për një ndryshim të thjeshtë në stilin e objektit, si dhe në mënyrë që skriptet të mund ta qasen atë. Vlera e atributit do të jetë emri i tij. Duhet të fillojë me një shkronjë latine dhe mund të përmbajë numra, shkronja të të njëjtit alfabet latin (të mëdha dhe të vogla), si dhe viza (-) dhe nënvizon (_) . Shkronjat ruse nuk mund të përmbajnë.
gjuhe ndihmon shfletuesin të kuptojë gjuhën në të cilën është shkruar përmbajtja dhe ta stilojë atë në përputhje me rrethanat (për shembull, thonjëza të ndryshme mund të përdoren në gjuhë). Vlerat janë kodet e gjuhës (rusisht - sq, anglisht - sq dhe kështu me radhë.).
kontrolli drejtshkrimor përfshin (e vertete) ose çaktivizon (i rremë) kontrolli drejtshkrimor. Është veçanërisht e dobishme të përdoret atributi në etiketat e fushave të formës ku përdoruesi do të fusë tekstin.
stil ju lejon të vendosni pamjen e një elementi duke përdorur kodin CSS.
tabindex bën të mundur përcaktimin se sa herë përdoruesi do të duhet të shtypë tastin Tab në mënyrë që objekti me këtë atribut të fokusohet. Numri i klikimeve përcakton vlerën e atributit - një numër i plotë pozitiv.
titullin- një këshillë veglash që do të shfaqet nëse lëvizni miun mbi elementin dhe e lini të palëvizur për pak kohë. Vargu në vlerë do të jetë aludim.

përkthejnë lejon (po) ose ndalon (jo) përkthimi i përmbajtjes së etiketës.
rreshtoj vendos shtrirjen e elementit. Për shembull, mund të përdoret për të rreshtuar tekstin në të majtë (vlera majtas), në anën e djathtë ( drejtë), në qendër (qendër) ose nga gjerësia (arsyeto). Për imazhet (etiketë ) është gjithashtu i disponueshëm për t'u lidhur në krye të elementit më të lartë në rresht ( krye), përgjatë kufirit të poshtëm (poshtë), dhe vlera e mesme bën që vija e mesme e figurës të përputhet me vijën bazë të linjës.

Vlen të kihet parasysh se përdorimi i atributit rreshtoj nuk rekomandohet, dhe përafrimi i tekstit është më i mirë me CSS.

Një shembull i përdorimit të atributeve

Si shembull, merrni parasysh një linjë të kodit HTML:

Ky tekst mund të modifikohet

E gjithë rreshti krijon një paragraf teksti që përdoruesi mund ta modifikojë në shfletues.

Le të analizojmë çdo element të vargut.

- etiketa hapëse e kontejnerit që ruan paragrafin.

- etiketa mbyllëse.

Mes personazheve > Dhe < teksti i vendosur Ky tekst mund të modifikohet. Ky është një mbishkrim jashtë etiketave (midis tyre), që do të thotë se do të jetë i dukshëm për përdoruesin që hap faqen. Shfletuesi e trajton atë si tekst të thjeshtë që duhet të shfaqet në ekran.

i kënaqshëm=”e vërtetë” - ky është atributi dhe vlera e tij. Mbani mend si në shkollë: x=3. Po kështu këtu: i kënaqshëm=”e vërtetë". atribut i kënaqshëm përcakton nëse përdoruesi do të jetë në gjendje të modifikojë përmbajtjen e elementit, vlerën e vërtetë, shkruar në thonjëza të ndara me një shenjë të barabartë, redaktimi lejon:

Atribut=”vlera” contenteditable=”e vërtetë”

informacion të shkurtër

Shënimi

	Përshkrim	Shembull
<тип>	Përcakton llojin e vlerës.	<размер>
A&&B	Vlerat duhet të dalin në rendin e specifikuar.	<размер> && <цвет>
A \| B	Tregon që vetëm një nga vlerat e sugjeruara (A ose B) duhet të zgjidhet.	normale \| kapele të vogla
A \|\| B	Çdo vlerë mund të përdoret më vete ose në kombinim me të tjerat në çdo mënyrë.	gjerësia \|\| numëroj
	Vlerat e grupeve.	[ kulture \|\| kryq]
*	Përsëriteni zero ose më shumë herë.	[,<время>]*
+	Përsëriteni një ose më shumë herë.	<число>+
?	Lloji, fjala ose grupi i specifikuar është opsional.	futur?
(A, B)	Përsëriteni të paktën A, por jo më shumë se B herë.	<радиус>{1,4}
#	Përsëriteni një ose më shumë herë të ndara me presje.	<время>#

vlerat

Sandbox

Winnie the Pooh nuk ishte gjithmonë kundër një pije freskuese, veçanërisht në orën njëmbëdhjetë të mëngjesit, sepse në atë kohë mëngjesi kishte mbaruar prej kohësh dhe darka as që kishte menduar të fillonte. Dhe, natyrisht, ai u gëzua jashtëzakonisht shumë kur pa që Lepuri nxori gota dhe pjata.

img (float: asnjë ;)

Shembull

noton

Bihejviorizmi, pavarësisht sa paradoksal mund të duket, ndriçon një stimul të sublimuar, për shembull, Richard Bandler përdori një ndryshim në nënmodalitetet për të ndërtuar shtete efektive.

Rezultati i këtij shembulli është paraqitur në Fig. 1.

Oriz. 1. Përdorimi i vetive float

Modeli i objektit

Nje objekt.style.cssFloat

shënim

Specifikim

Çdo specifikim kalon nëpër disa faza të miratimit.

Rekomandim (Rekomandim) - specifikimi është miratuar nga W3C dhe rekomandohet si standard.
Rekomandimi i Kandidatit ( Rekomandim i mundshëm) - grupi përgjegjës për standardin është i kënaqur që ai përmbush qëllimet e tij, por kërkohet mbështetja e komunitetit të zhvillimit për zbatimin e standardit.
Rekomandimi i propozuar ( Rekomandim i sugjeruar) - në këtë fazë, dokumenti i dorëzohet Bordit Këshillimor të W3C për miratim përfundimtar.
Drafti Punues - Një draft më i pjekur pas diskutimit dhe amendamenteve për shqyrtim nga komuniteti.
Drafti i redaktorit ( Drafti editorial) është një draft version i standardit pasi janë bërë ndryshime nga redaktorët e projektit.
draft ( Drafti i specifikimeve) është versioni i parë draft i standardit.

kufijtë notues. Float dhe clear janë vetitë CSS për elementët lundrues në paraqitjen e bllokut. Si funksionon Flexbox

Fjalë kyçe

Linjë

Adresë

Adresat absolute

Adresat relative

Numrat

Interesi

Kodi i gjuhës

Përshkrim

Sintaksë

vlerat

Modeli i objektit

Shfletuesit

Parimi i funksionimit

folësit

Gjerësia proporcionale

Shtrihet vetëm një kolonë

gjerësi fikse

Lartësia e altoparlantit

Pritë

Pse një kompleksitet i tillë

Zgjidhjet

Menu

Morali

Si të shkruani atributet?

Atributet gjenerike

Një shembull i përdorimit të atributeve

informacion të shkurtër

Shënimi

vlerat

Sandbox

Shembull

Modeli i objektit

shënim

Specifikim