Un element de nivel bloc într-un document HTML (de exemplu, o pagină Web) apare în ordine succesivă. Pentru a modifica ordinea pentru a face ca pagina să fie mai atrăgătoare sau pentru a îmbunătăți utilitatea acesteia, va trebui să înfășurați blocuri, inclusiv imagini, astfel încât textul acelei pagini să curgă în jurul acesteia.
În termeni web, acest efect este cunoscut ca "plutirea" imaginii. Acest stil este realizat cu proprietatea CSS pentru "float". Această proprietate permite ca textul să curgă în jurul imaginii aliniate la stânga spre partea dreaptă. Sau în jurul unei imagini aliniate la dreapta în partea stângă.
Începeți cu HTML
Primul lucru pe care va trebui să faceți este să aveți la dispoziție un cod HTML. Pentru exemplul nostru, vom scrie un paragraf de text și vom adăuga o imagine la începutul paragrafului (înainte de text, dar după deschidere
etichetă). Iată ce arată marcajul HTML:
Textul paragrafului este aici. În acest exemplu, avem o imagine a unei fotografii headshot, așadar acest text ar fi probabil despre persoana căreia îi aparține capul.
În mod implicit, pagina noastră web va fi afișată cu imaginea deasupra textului, deoarece imaginile sunt elemente de nivel bloc în HTML. Aceasta înseamnă că browserul afișează pauze de linie înainte și după elementul imagine în mod implicit. Vom schimba aspectul implicit prin accesarea CSS. În primul rând, cu toate acestea, vom adăuga o valoare de clasă elementului nostru de imagine. Această clasă va acționa ca un "cârlig" pe care îl vom folosi mai târziu în CSS.
Textul paragrafului este aici. În acest exemplu, avem o imagine a unei fotografii headshot, așadar acest text ar fi probabil despre persoana căreia îi aparține capul.
Rețineți că această clasă de "stânga" nu face nimic deloc pe cont propriu. Pentru ca noi să realizăm stilul dorit, trebuie să folosim CSS în continuare.
Stiluri CSS
Cu HTML-ul nostru în loc (inclusiv atributul nostru de clasă "stânga") putem acum să apelăm la CSS. Vom adăuga o regulă în foaia de stil care ar pluti în acea imagine și, de asemenea, va adăuga o mică căptușeală lângă ea, astfel încât textul care va înfășura în cele din urmă imaginea nu se va împotrivi prea mult. Aici este CSS pe care îl puteți scrie:
.stânga { plutește la stânga; umplutura: 0 20px 20px 0;}
Acest stil plutește imaginea din stânga și adaugă o mică căptușeală (utilizând o cotitură CSS) în partea dreaptă și de jos a imaginii. Dacă ați revizuit pagina care conține acest cod HTML într-un browser, imaginea va fi acum aliniată spre stânga, iar textul paragrafului va apărea în partea dreaptă, cu o distanță corespunzătoare între cele două. Rețineți că valoarea clasei "stânga" pe care am folosit-o este arbitrară. Am fi putut spune ceva, deoarece termenul "stânga" nu face nimic singur. Orice termen pe care îl folosiți trebuie să aibă un atribut de clasă în HTML care funcționează cu un stil CSS actual care dictează modificările vizuale pe care vreți să le faceți. Această abordare de a da elementului de imagine un atribut de clasă și apoi, folosind un stil CSS general care plutește elementul este doar o modalitate de a realiza acest aspect "aliniat la stânga". De asemenea, ați putea să scoateți valoarea de clasă în afara imaginii și să o stylizați cu CSS scriind un selector mai specific. De exemplu, să examinăm un exemplu în care imaginea se află în interiorul unei diviziuni cu o valoare de clasă "principal". Pentru a modela această imagine, puteți scrie acest CSS: .main-content img { plutește la stânga; umplutura: 0 20px 20px 0;}
În acest scenariu, imaginea noastră ar fi aliniată la stânga, textul plutea în jurul acesteia ca în trecut, dar nu era nevoie să adăugăm o valoare suplimentară a clasei la markup-ul nostru. A face acest lucru la scară poate ajuta la crearea unui fișier HTML mai mic, care va fi mai ușor de gestionat și poate, de asemenea, ajuta la îmbunătățirea performanței. În sfârșit, puteți chiar să adăugați stilurile direct în marcajul dvs. HTML, cum ar fi:
Această metodă se numește "stiluri inline". Nu este recomandabil deoarece combină stilul unui element cu markupul său structural. Cele mai bune practici web dictează că stilul și structura unei pagini trebuie să rămână separate. Această segregare este utilă în special atunci când pagina dvs. trebuie să își schimbe aspectul și să caute diferite dimensiuni ale ecranului și dispozitive cu un site web receptiv. Având stilul paginii interconectate în HTML, va fi mult mai dificil să creați interogări media care să ajusteze aspectul site-ului dvs. după cum este necesar pentru acele ecrane diferite. Căi alternative de realizare a acestor stiluri
Textul paragrafului este aici. În acest exemplu, avem o imagine a unei fotografii headshot, așadar acest text ar fi probabil despre persoana căreia îi aparține capul. Evitați stilurile inline
Textul paragrafului este aici. În acest exemplu, avem o imagine a unei fotografii headshot, așadar acest text ar fi probabil despre persoana căreia îi aparține capul.
