abc HTML5 i CSS TUTORIAL

Uvlačenje teksta /INDENT/ { text-indent: }


Sllika 1. Izbor vrijednosti atributa - Eksterni CSS /EXTERNAL CSS/

Uvlačenje teksta /INDENT/ { text-indent: }

Sintaksa:

  • CSS fajl: TAB {text-indent: Vrijednost_u_pikselima px;}
  • HTML FAJL - HEAD dio: <link rel="stylesheet" type="text/css" href="Putanja/ImeCssFajla.css">
  • HTML FAJL - BODY dio: <TAG>Sadržaj</TAG>

Oznake:
TAG - p | h1 | h2 | h3 | h4 | h5 | h6 | BODY | DIV | SPAN - TAG može da primi jednu od navedenih vrijednosti
p paragraf /PARAGRAPH/
h1 | h2 | h3 | h4 | h5 | h6 - zaglavlje teksta /HEADINGS/
BODY - Tekst u cijelom dokumentu
DIV - Tekst u cijeloj DIV sekciji

text-indent - Atribut za uvlačenje teksta
Vrijednost _u_pikselima - Vrijednost je u pikselima.
px - Mjerna jedinica.

Atribut INDENT se koristi u paragrafu ili zaglavlju teksta (h1, h2, ..h6). Vrijednost uvlačenja je u pikselima, mjerna jedinica se ne navodi.


Slika 2. Uvlačenje teksta /INDENT/

Primjeri 1. Uvlačenje teksta za 55 piksela
Opis rješenja: Definisanje uvlačenje za 55 piksela se izvodi sa { text-indent:55px  }

Interni CSS (CSS u HTML fajlu)

html5 fajl

.css (Eksterni CSS fajl)

Ispis na ekranu

<html>
<head><title>Uvlacenje teksta</title></head>
<style>
   p { text-indent: 55px; }
</style>
<body>
<h2>Naslov</h2>
<p>Kulturni</p>
</body></html>

<!DOCTYPE html>
<html>
<head><title>Crven dokument</title>
<link rel=stylesheet href="css/10_INDENT_55.css" type="text/css">
</head>
<body>
<h2>Naslov</h2>
<p>Kulturni</p>
</body></html>

Fajl: 10_INDENT_55.css

p { text-indent: 55px; }

Naslov

Kulturni;

Primjer 2. Uvlačenja promjene parametra fonta masno /BOLD/ i Comic Sans MS.  (<p style="text-indent:></p>)  primjer ostalih parametara
Opis rješenja: INDENT style="text-indent:nn" 

Interni CSS (CSS u HTML fajlu)

html5 fajl

.css (Eksterni CSS fajl)

Ispis na ekranu

<html>
<head><title>Uvlacenje teksta</title></head>
<style>
  p { text-indent: 25px;
      font-family:Comic Sans MS; }
</style>
<body>
<h2>Bez pomjeranja</h2>
<p>Nije podebljan</p>
<p><b>Kulturni</b></p>
</body></html>

<!DOCTYPE html>
<html>
<head><title>Crven dokument</title>
<link rel=stylesheet href="css/10_INDENT_55_font.css" type="text/css">
</head>
<body>
<h2>Bez pomjeranja</h2>
<p>Nije podebljan</p>
<p><b>Kulturni</b></p>
</body></html>

Fajl: 10_INDENT_55_font.css

body { color:red; }

Bez pomjeranja

Nije podebljan

Kulturni

Prozor na dnu stranice je namjenje za provjeru koda:
- kopirajte kod (edit, copy, paste ili CTRL+C, CTRL+V ili DRAG&DROP metodom), editovanje je moguće u prozoru

Index