Mbivendosja CSS: si të shkruani tekst në një imazh. Imazhet në tekst Shfaq përshkrimin kur rri pezull mbi imazh

Ekzistojnë tre imazhe të letrave të lojës në faqen e internetit (Figura 3.51). Për sa kohë që ato janë krah për krah, renditja e tyre nuk ka rëndësi, por nëse aplikoni pozicionimin ndaj tyre dhe lëvizni imazhet në mënyrë që ato të mbivendosen njëra me tjetrën, njëra kartë do të jetë më e lartë se tjetra (Figura 3.52).

Oriz. 3.51. Kartat pranë njëra-tjetrës

Oriz. 3.52. Kartat njëra mbi tjetrën

Nëse imagjinoni një faqe interneti në formën e një hapësire tre-dimensionale (Fig. 3.53), mund të shihni se kartat ndodhen gjithashtu përgjatë boshtit Z. Vlerat përgjatë këtij boshti përcaktojnë se cila kartë është më afër ne, që është më larg, me fjalë të tjera, radha në të cilën ato janë mbivendosur mbi njëra-tjetrën. Në kodin e dokumentit (Shembulli 3.38), rendi përcaktohet automatikisht në bazë të rrjedhës së dokumentit. Sa më i ulët të jetë elementi në kod, aq më i lartë është përgjatë boshtit Z, kështu që imazhi me Ace, si ai i poshtëm, ndodhet në krye të kartave të tjera.

Oriz. 3.53. Koordinatat imagjinare të një faqe interneti

Shembulli 3.38. Renditja normale e kartës

Në CSS, pozicioni i boshtit Z kontrollohet nga vetia z-index, e cila përcakton nëse elementi është "më afër" me ne ose "më larg". Një numër i plotë merret si vlerë; sa më i madh të jetë, aq më i lartë është elementi në raport me të tjerët. Elementeve u caktohet automatikisht një vlerë prej 0, kështu që edhe një z-indeks prej 1 do të bëjë që elementi të mbivendoset me të gjitha ato themelore. Le të modifikojmë shembullin 3.38 në mënyrë që rendi i kartave të kthehet mbrapsht, dhe vetëm duke edituar stilin, duke e lënë kodin HTML të njëjtë.

Karta IMG ( pozicioni: relative; ) .tre ( lart: 50 px; majtas: 55 px; z-indeksi: 5; ) .shtatë ( majtas: -120 px; lart: 25 px; z-indeksi: 2; ) .ace ( majtas: -295 px; indeksi z: 1;)

Vetia e indeksit z për klasën e tretë është vendosur në mënyrë specifike në 5 për të demonstruar se rendi i vlerave të indeksit z nuk ka rëndësi. Gjëja kryesore është se një numër është më i madh se tjetri.

Vetia z-indeks funksionon vetëm për elementë, vlera e pozicionit të të cilëve është absolute, fikse ose relative.

Kur dëshironi të poziciononi një element mbi çdo gjë tjetër në faqe, atij i jepet një vlerë shumë e lartë e indeksit z, si p.sh. 9999. Kjo siguron që edhe nëse stilet përdorin një indeks z, ai do të jetë më i vogël se specifikuar një. Në shembullin 3.39, kur kaloni pezull mbi harta, indeksi z ndryshon në 10. Këtu nuk nevojiten skripta, gjithçka bëhet përmes pseudo-klasës :hover.

Shembulli 3.39. Ndryshimi i indeksit z kur rri pezull mbi një hartë

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Etiketat HTML që përcaktojnë shtrirjen dhe dhëmbëzimin e tekstit

Teksti i justifikuar i përdorur në tipografi

Shembulli i mëposhtëm tregon se si të përafrohet teksti në gjerësi faqet:

rresht = "majtas"	rresht = "djathtas"
	Numri i punëtorëve të punësuar në sektorin e shërbimeve dhe shpërndarjes së informacionit po rritet çdo ditë. Nëse simbolet e shekujve të kaluar ishin ferma dhe fabrika, atëherë simboli i shekullit të 21-të aktual është një zyrë e pajisur me kompjuterë që kanë akses në rrjedhën e informacionit.
rresht = "justifikoj"	rresht = "qendër"
Numri i punëtorëve të punësuar në sektorin e shërbimeve dhe shpërndarjes së informacionit po rritet çdo ditë. Nëse simbolet e shekujve të kaluar ishin ferma dhe fabrika, atëherë simboli i shekullit të 21-të aktual është një zyrë e pajisur me kompjuterë që kanë akses në rrjedhën e informacionit.	Numri i punëtorëve të punësuar në sektorin e shërbimeve dhe shpërndarjes së informacionit po rritet çdo ditë. Nëse simbolet e shekujve të kaluar ishin ferma dhe fabrika, atëherë simboli i shekullit të 21-të aktual është një zyrë e pajisur me kompjuterë që kanë akses në rrjedhën e informacionit.

Vlera justifikuese siguron uniforme rreshtoni tekstin djathtas dhe majtas, kjo eshte në gjerësi. Kjo metodë përdoret gjerësisht në shtypje.

Përafrimi i tekstit në HTML në qendër dhe gjerësi

Rreshtoni tekstin në qendër HTML, teksti në të djathtë:

Rezultati:

Atributet dhe vlerat

• align="majtas" - përcakton rreshtimi i tekstit në të majtë(e parazgjedhur).
• align = "qendër" - rreshton tekstin në qendër.
• rresht = "djathtas" - rreshton tekstin në të djathtë.

Rreshtoni | Dhënia e tekstit HTML

Teksti HTML dhe dhëmbëzimi i tij në anën e majtë të faqes

ne do të prodhojmë dhëmbëzimi i tekstit në të majtë në dy mënyra:

Rezultati:

Shikoni në dritare të re.

Shpesh shoh në komentet e mësimeve ose në forume kur fillestarët pyesin: "Dua të postoj tekst mbi imazh, dhe rezulton të jetë nën ose sipër figurës. Ndihmë." Le të shohim një shembull specifik se si të shkruajmë teksti në foto kudo.

Duhet të nënshkruajmë emrin e saj pranë secilës perime në ilustrimin e mëposhtëm. Detyra duket e thjeshtë, por më besoni, mund të çmendë çdo webmaster fillestar.

Kam marrë qëllimisht një imazh të madh 1280x733 si shembull për të treguar gjithashtu se si ta përshtat atë me rezolucione të ndryshme të ekranit. Kanë ikur kohët kur mjaftonte të mësoje se si të vendosesh vetëm për rezolucionet e desktopit. Kur bëni paraqitjen, duhet të kujdeseni menjëherë për përshtatshmërinë.

Shënimi HTML

Para së gjithash, ne krijojmë një enë për foton e perimeve dhe për mbishkrimet. Ju lutemi vini re se ne vendosim çdo mbishkrim në një bllok të veçantë me klasa të ndryshme. Dhe kjo është logjike, pasi të gjitha mbishkrimet do të kenë koordinatat e tyre në faqe dhe ne do t'i menaxhojmë ato duke shkruar vetitë në div.

Pasi është bërë HTML- shënimi, ne shohim vetëm një fragment të figurës dhe tekstin që shfaqet nën figurë. Një foto e njohur, apo jo?

Fotografia është zgjeruar në të gjithë pikselët e saj mjaft të mëdhenj dhe është shfaqur një shirit lëvizës horizontal, por për fat të mirë kjo është e lehtë për t'u rregulluar duke vendosur gjerësinë e figurës në 100%, duke e bërë atë përshtatëse. Të paktën një problem u zgjidh.

img (
gjerësia: 100%;
}

Tani le të kalojmë te teksti.

Stilet CSS

Në stilet e kontejnerëve, vetia kryesore do të jetë pozicioni: i afërm. Me këtë ne ndryshojmë rregullat dhe kërkojmë që koordinatat të numërohen jo nga këndi i sipërm i majtë i dritares së shfletuesit, por nga këndi i kontejnerit, i cili është prindi i të gjithë elementëve të vendosur në të dhe zë 90% të dritares.

enë (
gjerësia: 90%;
pozicioni: i afërm;
text-align: qendër;
ngjyra: #000;
font-familja: arial i zi;
madhësia e shkronjave: 250%;
}

majtas(
pozicioni: absolut;
krye: 26%;
majtas: 6%;
}

qendra (
pozicioni: absolut;
krye: 17%;
majtas: 42%;
}

E drejta(
pozicioni: absolut;
krye: 1%;
djathtas: 27%;
}

Ne vendosëm koordinatat jo në piksel, por në %, jo rastësisht; kur madhësia e ekranit zvogëlohet, atëherë teksti do të mbetet në të njëjtin vend ku e rregulluam. Ky është një lajm i mirë, por lajmi i keq është se madhësia e tekstit nuk zvogëlohet së bashku me imazhin. Vetë fotografia është reduktuar, por teksti duhet të reduktohet me forcë.

Pyetjet në media

Me një rezolucion të barabartë ose më të vogël se 768 piksele, zvogëloni madhësinë e shkronjave në 150%. Si e dinim se duhet të zvogëlojmë madhësinë në 768 piksele? Nëpërmjet inspektorit të kodit, ne pamë se në cilën pikë teksti hidhet mbi elementët ngjitur.

Disa njerëz gjejnë rrugën e gabuar: vizatojnë tekst në një fotografi në redaktuesit grafikë dhe më pas vendosin imazhin me tekstin në dokumentet html. Por, çka nëse teksti duhet të zëvendësohet? Rivizatoni sërish figurën? Ka zgjidhje më të thjeshta.

Si rezultat marrim:

Gjithçka ishte e mbuluar me borë të bardhë: si pemët ashtu edhe shtëpitë, një erë me krahë të lehtë fishkëllinte: "Përshëndetje, dimër-dimër!"

Thelbi i metodës së paraqitur është që ne të bëjmë një enë div që do të përmbajë një imazh dhe tekst. Në këtë rast, ne do ta pozicionojmë tekstin në këndin e poshtëm të majtë të kontejnerit.

Kodi HTML:

kodi css:

.container ( display:inline-block; position:relative; ) .container div (ekrani: inline-block; pozicioni: absolute; fund: 10px; majtas: 0px; background-color: rgba(0,0,0,.4 ); mbushje: 5px 5px 5px 10px; ngjyra: e bardhë )

• shfaqja: inline-block - ne kemi nevojë që kontejneri të mos shtrihet në gjerësinë e të gjithë faqes.
• pozicioni: relativ - detyron të gjitha blloqet e mbivendosur me pozicionin: absolut të numërojnë koordinatat e pozicionit të tyre jo nga dritarja e shfletuesit, por nga blloku.container

• shfaqja: inline-block - në mënyrë që stilet që lidhen me elementët e bllokut të mund të aplikohen në tekstin tonë.
• pozicioni: absolut - për të vendosur një bllok duke përdorur koordinata specifike: poshtë, majtas - poshtë dhe majtas dhëmbëzimet (koordinatat) është e mundur të përdoren lart dhe djathtas në vend të tyre

Shfaq përshkrimin kur rri pezull mbi imazh

Metoda e treguar më sipër mund të përdoret për të shfaqur tekstin kur rri pezull mbi një imazh me miun (mund të jetë e dobishme për përshkrimin e produkteve në një dyqan online).

Çdo ditë në forumet html, fillestarët pyesin: "Si të vendosim tekst në krye të një imazhi?" Disa njerëz gjejnë rrugën e gabuar: vizatojnë tekst në një fotografi në redaktuesit grafikë dhe më pas vendosin imazhin me tekstin në dokumentet html. Por, çka nëse teksti duhet të zëvendësohet? Rivizatoni sërish figurën? Ka zgjidhje më të thjeshta.

Duke përdorur metodat e përshkruara në mësim, mund të marrim rezultatin e mëposhtëm:

Përgatitja

Le të bëjmë një foto

Madhësia e saj është 350 × 200 px. Dhe ky informacion është i mjaftueshëm për të filluar.
Tani le të përpiqemi të vendosim tekstin sipër tij në disa mënyra.

Metoda e parë: imazhi si sfond div

Unë do të them menjëherë se unë vetë nuk më pëlqen kjo metodë për shkak të rezultatit përfundimtar primitiv, por megjithatë ekziston, kështu që unë do t'ju tregoj për të.

Thelbi i metodës është që ne marrim një etiketë div, i japim dimensione që përputhen me madhësinë e imazhit dhe vendosim imazhin si sfond.
Ju lutemi vini re se madhësia e etiketës = madhësia vendase + madhësia e mbushjes. Kështu, nëse duam të futim përmbajtjen nga skaji i imazhit me 20 pikselë, atëherë madhësia e vetë div duhet të specifikohet të jetë 20 px më e vogël. Kjo është: 350-20 = 330 në gjerësi dhe 200-20 = 180 në lartësi.

Shembulli 1 (
padding-top:20px;
gjerësia: 330 px;
mbushje-majtas:20px;
lartësia: 180 px;
background-image:url("/examples/20120821/bg.png");

/*formatimi i tekstit*/
ngjyra:#FFF;

madhësia e shkronjave: 40 px;
}

Rezultati:

Metoda është e thjeshtë në strukturën e kodit HTML (kërkohet vetëm një etiketë), por nuk ju lejon të vendosni ndonjë stil të veçantë në tekst. Si rezultat, teksti mund të jetë i vështirë për t'u lexuar. Për më tepër, blloku është i lidhur rreptësisht me madhësinë e imazhit, që do të thotë se nëse imazhi ndryshon, css do të duhet të rishkruhet

Metoda e dytë: mbivendosja e dy etiketave njëra mbi tjetrën

Thelbi i kësaj metode është se ne bëjmë një enë div që do të përmbajë një imazh dhe tekst. Në këtë rast, ne do ta pozicionojmë tekstin në këndin e sipërm të majtë të kontejnerit.

Shembulli 2 (
shfaqja:inline-blloku;
pozicioni: i afërm;

}
.shembulli 2 hapësirë ​​(
shfaqja:inline-blloku;
pozicioni:absolut;
sipër: 30 px;
majtas: 0px;

/* Dekorimi i tekstit */
ngjyra:#FFF;
font-familja:Arial, Helvetica, sans-serif;
madhësia e shkronjave: 20 px;

/* Sfondi */
sfond-ngjyra:rgba(0,0,0,.4);
mbushje:10px 30px;
}

Shembulli 2:
Ne kemi nevojë për display:inline-block në mënyrë që kontejneri të mos shtrihet në gjerësinë e të gjithë faqes.
pozicion:relativ detyron të gjitha blloqet e mbivendosur me pozicion:absolute të numërojnë koordinatat e pozicionit të tyre jo nga dritarja e shfletuesit, por nga block.example2.

Shtrirja e shembullit 2:
display:inline-block - në mënyrë që stilet që lidhen me elementët e bllokut të mund të aplikohen në tekstin tonë.
pozicion:absolute - për heqjen e një etikete nga rrjedha e përgjithshme dhe vendosjen e mëtejshme të tij duke përdorur detyrën e koordinatave specifike. sipër, majtas - dhëmbëzimet (koordinatat) sipër dhe majtas. është e mundur të përdoren në vend të tyre fundi (poshtë) dhe djathtas (djathtas).

Rezultati:

Disavantazhi i kësaj metode është se semantika e kodit është shkelur dhe shfaqen shumë etiketa të panevojshme. Por nuk është i lidhur me madhësinë e figurës, ju lejon të krijoni një sfond për tekstin, duke e bërë atë më të lexueshëm dhe në përgjithësi na jep liri të plotë në përshtatjen e stileve.

Duke luajtur me css dhe strukturën e etiketës mund të arrini rezultatin e mëposhtëm:

Ky rezultat është mjaft i mirë për dizajnimin e galerive, dritareve të dyqaneve online dhe shërbimeve të tjera.

Kodi i fundit i rezultatit: