Element blokovne ravni v dokumentu HTML (npr. Spletna stran) se pokaže v zaporednem vrstnem redu. Če želite spremeniti naročilo, da bo stran izgledala bolj privlačna ali izboljšala njegovo uporabnost, boste morali zaviti bloke, vključno s slikami, tako da besedilo te strani teče okoli njega.
V spletnem smislu je ta učinek znan kot »plavajoča« slika. Ta slog se doseže s premoženjem CSS za »float«. Ta lastnost omogoča prikaz besedila okoli slike na levi strani na svojo desno stran. Ali okrog desne poravnane slike na njegovo levo stran.
Začni z HTML-jem
Prva stvar, ki jo boste morali storiti, je, da imate nekaj HTML-jev. V našem primeru bomo napisali odstavek besedila in dodali sliko na začetku odstavka (pred besedilom, vendar po odprtju
oznaka). Tukaj je tisto, kar izgleda oznaka HTML:
Besedilo odstavka gre tukaj. V tem primeru imamo sliko fotografije na naslovu, zato bo to besedilo verjetno o osebi, za katero gre za glavo.
Privzeta bi bila, da bi bila naša spletna stran prikazana s sliko nad besedilom, ker so slike elementi na ravni blokov v HTML-ju. To pomeni, da brskalnik prikazuje privzete prelome pred in za slikovnim elementom. Ta privzeti videz bomo spremenili tako, da se obrnemo na CSS. Prvič, k našemu slikovnemu elementu dodamo vrednost razreda. Ta razred bo deloval kot "kavelj", ki ga bomo uporabili v našem CSS kasneje.
Besedilo odstavka gre tukaj. V tem primeru imamo sliko fotografije na naslovu, zato bo to besedilo verjetno o osebi, za katero gre za glavo.
Upoštevajte, da ta razred "levo" sploh ne dela sama. Za dosego želenega sloga moramo uporabiti CSS naslednji.
Styles CSS
Z našim HTML-jem (vključno z našim atributom razreda "levo") se zdaj lahko obrnemo na CSS. Pravili bi dodali v našo slogovnico, ki bi plavala to sliko, poleg tega pa dodali še malo blazinice, tako da besedilo, ki se bo na koncu dotaknilo slike, ne bo preveč pozorno spremljalo. Tukaj je CSS, ki ga lahko napišete:
.left { float: levo; padding: 0 20px 20px 0;}
Ta slog lebdi to sliko v levo in doda malo blazinice (z uporabo nekaterih CSS kratkih sten) na desni in spodnji del slike. Če ste pregledali stran, ki vsebuje ta HTML v brskalniku, bi bila slika zdaj poravnana na levo in besedilo odstavka bi se zdelo v desno z ustreznim razmikom med njima. Upoštevajte, da je vrednost razreda "levo", ki smo jo uporabili, poljubna. Lahko bi jo klicali karkoli, ker izraz "left" ne dela ničesar sam. Ne glede na izraz, ki ga uporabljate, mora imeti atribut razreda v HTML-ju, ki deluje z dejanskim slogom CSS, ki narekuje vizualne spremembe, ki jih želite narediti. Ta pristop, ki daje slikovnemu elementu atribut razreda in nato s splošnim slogom CSS, ki plavajo element, je le en način, s katerim lahko dosežete to sliko "levo poravnano sliko". Lahko tudi izklopite vrednost razreda slike in jo vtipkate s CSS s pisanjem natančnejšega izbirnika. Na primer, poglejmo si primer, v katerem je ta slika znotraj razdelka z vrednostjo razreda »glavna vsebina«. Če želite sliko slikovno oblikovati, lahko vnesete ta CSS: .main-content img { float: levo; padding: 0 20px 20px 0;}
V tem scenariju bi bila naša slika poravnana na levo, z besedilom, ki je lebdelo po njem, kot prej, vendar naši oznaki ni bilo treba dodati dodatne vrednosti razreda. Če to naredite na lestvici, lahko ustvarite manjšo datoteko HTML, ki jo boste lažje upravljali in lahko tudi izboljšali učinkovitost. Končno lahko celo dodate sloge neposredno v oznako HTML, na primer:
Ta metoda se imenuje "inline slogi." Ni priporočljivo, ker združuje slog elementa s svojo strukturno oznako. Spletne najboljše prakse narekujejo, da slog in struktura strani ostanejo ločena. Ta ločitev je še posebej v pomoč, kadar mora vaša stran spremeniti postavitev in poiskati različne velikosti zaslona in naprave z odzivno spletno stranjo. Ob slogu prepletene strani v HTML bo veliko bolj težko avtorsko poizvedbo medijev, ki bo prilagodila izgled vašega spletnega mesta, kot je potrebno za te različne zaslone. Alternativni načini za doseganje teh stilov
Besedilo odstavka gre tukaj. V tem primeru imamo sliko fotografije na naslovu, zato bo to besedilo verjetno o osebi, za katero gre za glavo. Izogibajte se Inline Styles
Besedilo odstavka gre tukaj. V tem primeru imamo sliko fotografije na naslovu, zato bo to besedilo verjetno o osebi, za katero gre za glavo.
