abc HTML5 i CSS TUTORIAL

Poravnanje teksta dokumenta /ALIGN BODY/ .css


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

Poravnanje /ALIGN/ Korištenje eksternog CSS-a se izvodi u oba dijela HTML fajla:

Sintaksa:

  • CSS fajl: hn { text-align: Vrsta_poravananja;}
  • HTML FAJL - HEAD dio: <link rel="stylesheet" type="text/css" href="Putanja/ImeCssFajla.css">
  • HTML FAJL - BODY dio: <hn>Sadržaj_za_izabrani_tag</hn>

Oznake:
BODY - TAG za poravnanje teksta
text-align - Atribut poravnanja teksta

Vrsta poravnanja:
LEFT - lijevo
CENTER - centrirano
RIGHT - desno
JUSTIFY - obe strane


Slika 2. Poravnanje /text-align/

Mnogi tagovi podržavaju atribute poravnanja /ALIGN/. Ako želite poravnanje (lijevo, desno, centrirano ili obe strane) kreirate stil u .css fajlu.

Primjer 1. Primjeri poravnanja teksta dokumenta /ALIGN BODY/.
Opis rješenja: Fajl .css sadrži samo parametre za BODY poravnanje teksta (centralno poravnanje).

Interni CSS (CSS u HTML fajlu)

html5 fajl

.css (Eksterni CSS fajl)

Ispis na ekranu

<!DOCTYPE html>
<html>
<head><title>Naslov /HEADINGS/ - centrirano</title>
<style>
  body { text-align:center; }
</style>
</head>
<body>
<h2>Naslov poglavlja</h2>
<h5>LUPUS IN FABULA.</h5>
<p>Mi o vuku vuk na na vrata</p>
</body></html>

<!DOCTYPE html>
<html>
<head><title>Naslov /HEADINGS/ - centrirano</title>
<link rel=stylesheet href="css/10_BODY_align_center.css" type="text/css">
</head>
<body>
<h2>Naslov poglavlja</h2>
<h5>LUPUS IN FABULA.</h5>
<p>Mi o vuku vuk na na vrata</p>
</body></html>

Fajl: 10_BODY_align_center.css

body { text-align:center }

Naslov poglavlja

LUPUS IN FABULA.

Mi o vuku vuk na na vrata

Primjer 2. Primjeri poravnanja u zaglavlja teksta h2 i h5.
Opis rješenja: Fajl .css sadrži samo parametre za h2 zaglavlje teksta (centralno poravnanje).

Interni CSS (CSS u HTML fajlu)

html5 fajl

.css (Eksterni CSS fajl)

Ispis na ekranu

<!DOCTYPE html>
<html>
<head><title>Naslov /HEADINGS/ - centrirano</title>
<style>
  body { text-align:center; }
  h5 { text-align:right; }
</style>
</head>
<body>
<H2>Naslov poglavlja</h2>
<h5>LUPUS IN FABULA.</h5>
<p>Mi o vuku vuk na na vrata</p>
</body></html>

<!DOCTYPE html>
<html>
<head><title>Crven dokument</title>
<link rel=stylesheet href="css/10_BODY_align_center_h5_right.css" type="text/css">
</head>
<body>
<h2>Naslov poglavlja</h2>
<h5>LUPUS IN FABULA.</h5>
<p>Mi o vuku vuk na na vrata</p>
</body></html>

Fajl: 10_BODY_align_center_h5_right.css

body { text-align:center }
h5 { text-align:right }

Naslov poglavlja

LUPUS IN FABULA.

Mi o vuku vuk na na vrata

Daljnji rad:

Zahtjevi

Ekran

1. Izvesti slijedeće naredbe
Zaglavlje teksta h2 - Ovo je naslov (desno poravnannje)
Zaglavlje teksta h5 - Novo pojašnjenje (centrirano poravnannje)
Paragraf -Da bi vidjeli poravnanje mora biti dovoljno teksta. Da bi vidjeli poravnanje mora biti dovoljno teksta. Da bi vidjeli poravnanje mora biti dovoljno teksta. Da bi vidjeli poravnanje mora biti dovoljno teksta. ( I lijevo i desnov. - obostrano poravnanje).
Koristiti .css fajl 10_ALIGN_h2_h5_p.css. (h2 { text-align:right } h5 { text-align:center } p { text-align:justify } .

 

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