Preporučena metoda s CSS-om i HTML-om
Za uvlačenje teksta ili odlomka, najčešće korištena i preporučena metoda bila bi uporaba CSS-a. U nastavku su navedeni različiti primjeri načina na koji se CSS može koristiti za uvlačenje teksta. Svaki od ovih primjera bio bi smješten između vaših HTML oznaka.
Slijedeći primjer bi stvorio klasu stila pod nazivom "tab" koja uvlači tekst i paragraf 40 piksela s lijeve strane.
Kada se gornji kôd nalazi u odjeljku, možete ga koristiti u bilo kojem trenutku dodavanjem u svoj odlomak (
) oznake kao što je prikazano.
Primjer kartice
Uključivanje CSS-a u HTML dokument, kao što je prikazano gore, naziva se "in-line" CSS. To je korisno za brzo mijenjanje, ali dugoročno je teško promijeniti se kasnije.
Umjesto toga, možete uzeti sav vaš CSS kôd i smjestiti ga u zasebnu datoteku s ekstenzijom .css. Zatim možete povezati ovu datoteku iz bilo kojeg HTML dokumenta, a taj dokument može koristiti te CSS svojstva. Korištenje vanjske CSS datoteke olakšava kasnije promjenu CSS-a, jer je CSS definiran na jednom mjestu.
Da biste se povezali s vanjskom CSS datotekom, dodajte sljedeći redak u HTML dokument u elementu (nakon
Jednom kada je ova .css datoteka stvorena, uredite datoteku i dodajte isti CSS kod, izuzimajući oznake i komentare, kao što je prikazano.
.tab {margin-left: 40px; }
Konačno, kada se gore navedeni koraci dovrše, možete staviti isti tekst na bilo koji tekst
Primjer koji smo prikazali gore.
Postoje i drugi oblici uvlačenja. Na primjer, ako želite samo uvlačiti prvi redak odlomka, umjesto da koristite gornju CSS liniju, upotrijebite sljedeći redak.
.tab {text-indent: 40px}
Savjet: Možete i uvlačiti pomoću postotka. Na primjer, umjesto uvlačenja za 40 px (piksela), zamjenu alata s 5% možete zamijeniti tekstom uvlačenja za 5% trenutnog prikaza. Također možete koristiti em prostor prilikom definiranja širine uvlake.
Bonus Savjet: Također možete promijeniti iz lijevog otiska u desnu uvlačenje promjenom margine-lijevo na marginu-desno.
Preporučena metoda pomoću HTML-a
Gore navedene rezultate moguće je postići pomoću inline stila unutar HTML-a. Dok koristite gore navedeni CSS primjer može olakšati održavanje na više web stranica, ako trebate koristiti stil samo jednom možete koristiti sljedeći primjer.
Ovaj tekst je uvučen.
U ovom prvom primjeru sav tekst u oznaci odlomka je uvučen s 40 piksela s lijeve strane. Sve ostale oznake oznaka nisu uvučene.
Ovaj tekst je uvučen.
U ovom drugom primjeru, samo prvi redak teksta u paragrafu bit će uvučen s 40 piksela s lijeve strane. Bilo koji dodatni redak teksta u tom stavku neće biti uvučen.
Savjet: Možete i uvlačiti pomoću postotka. Na primjer, umjesto uvlačenja za 40 px (piksela), zamjenu alata s 5% možete zamijeniti tekstom uvlačenja za 5% trenutnog prikaza. Također možete koristiti em prostor prilikom definiranja širine uvlake.
Bonus Savjet: Također možete promijeniti iz lijevog otiska u desnu uvlačenje promjenom margine-lijevo na marginu-desno.
Alternativna metoda
Druga uobičajena (ali neispravna) metoda uvlačenja teksta je uporaba oznaka, kao što je prikazano u sljedećem primjeru. Iako je ovo mnogo lakše rješenje, postoje pitanja dostupnosti koja mogu biti uzrokovana korištenjem ovog rješenja za uvlačenje teksta. Ta je oznaka namijenjena navođenju teksta, a ne uvlačenju.
Ovaj tekst bi bio uvučen