abc HTML5 i CSS TUTORIAL - Linijski CSS /INLINE CSS/

Promjena parametara u paragrafu /SPAN/ SPAN STYLE="


Slika 1. Izbor vrijednosti atributa - Linijski CSS /INLINE CSS/

Promjena parametara u paragrafu /SPAN/   Sintaksa: <SPAN STYLE="Atribut:vrijednost">/

Grupisanje parametara unutar jedne linije se izvodi nardbom SPAN. Najčešće su to parametri promjene imena fonta, veličine fonta i boja fonta.


Slika 2. Promjena parametara u paragrafu /SPAN/

Primjer 1. Promjena izgleda fonta.

<!DOCTYPE html>
<html>
<head>
<title>Izgled fonta</title>
</head>
<body>
<p style="font-family:Arial;">Arial, promjena u <span style="font-family:Comic Sans MS;">Comic Sans MS</span> ponovo Arial.</p>
</body>
</html>

Arial, promjena u Comic Sans MS ponovo Arial.
 

Primjer 2. Promjena veličine fonta.

<!DOCTYPE html>
<html>
<head>
<title>Veličina fonta</title>
</head>
<body>
<p>Njegov brat je <span style="FONT-SIZE:2em">dva puta viši </span> od Petra.</p>
</body>
</html>

Njegov brat je dva puta viši od Petra.

Primjer 3. Promjena boje fonta.

<!DOCTYPE html>
<html>
<head>
<title>Boja fonta</title>
</head>
<body>
<p>Moja djevojka ima <span style="color:blue">plave</span> oči.</p>
</body>
</html>

Moja djevojka ima plave oči.

Primjer 4. Promjena stila fonta podvučeno /UNDERLINE/.

<!DOCTYPE html>
<html>
<head>
<title>Boja fonta</title>
</head>
<body>
<p>Marko kad čita <span style="text-decoration:underline">podvlači</span> bitne dijelove.</p>
</body>
</html>

Marko kad čita podvlači bitne dijelove.

Primjer 5. Promjene jednog pa drugog atributa (boja pa veličina fonta).

<!DOCTYPE html>
<html>
<head>
<title>Boja pa veličina fonta</title>
</head>
<body>
<p>Promjena <span style="font-size:2em">veličine </span> normal <span style="color:blue">plava </span> vrati.</p>
</body>
</html>

Promjena veličine normal plava vrati.

Daljnji rad:
Primjer 1: Isisati tekst "Ko lopovu gleda kroz prste i sam je lopov."sa dvije veličine.

Primjer 2. Isisati tekst "Bogatstvo mijenja ćud, rjetko nabolje.."sa dvije veličine i dvije boje fonta.

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