abc HTML5 i CSS TUTORIAL

Izgled i veličina fonta u grupi naredbi /DIV/ <STYLE> div {} </STYLE>


Slika 1. Korištenje atributa - Interni CSS /INTERNAL CSS/

Promjena parametara unutar grupe naredbi /DIV/   
Sintaksa:

  • HEAD dio : <style> div { font-family: Ime fonta; font-size:Vrijednost_mjerna_jedinica;} </style>
  • BODY dio: <div> <TAG>Sadržaj</TAG> </div>

Oznake:
TAG - p | h1 | h2 | h3 | h4 | h5 | h6 | BODY | DIV - TAG može da primi jednu od navedenih vrijednosti
p paragraf /PARAGRAPH/
h1 | h2 | h3 | h4 | h5 | h6 - zaglalje teksta /HEADINGS/
DIV - Tekst u cijeloj DIV sekciji DIV - interni css /INTERNAL CSS/

Opis
Atribut - prikazan u ovom dokumentu:
font-family: Ime fonta;
font-size:Vrijednost_mjerna_jedinica;


Slika 2. Promjena parametara unutar grupe naredbi /DIV/ DIV STYLE="

Primjer 1. Promjena izgleda fonta grupe naredbi.

<!DOCTYPE html>
<html> <head>
<style>
  div { font-family:Comic Sans MS; }
</style>
<title>DIV - Izgled fonta</title>
</head>
<body style="font-family:Arial;">
<p>Arial, tekst prije DIV</p>
<div>
  <h2>Naslov poglavlja</h2>
  <p>Comic Sans MS</p>
</div>
<p>Arial, tekst poslije DIV</p>
</body> </html>

Arial, tekst prije DIV

Naslov poglavlja

Comic Sans MS

Arial, tekst poslije DIV

Primjer 2. Promjena veličine fonta grupe naredbi.

<!DOCTYPE html>
<html> <head>
<style>
  div { FONT-SIZE:2em; }
</style>
<title>DIV - Veličina fonta</title>
</head>
<body>
<p>Normalna veličina , tekst prije DIV</p>
<div>
  <p>Dvostruka veličina.</p>
  <p>Druga rečenica.</p>
</div>
<p>Tekst poslije DIV</p>
</body> </html>

Normalna veličina , tekst prije DIV

Dvostruka veličina.

Druga rečenica.

Tekst poslije DIV

Daljnji rad:
Primjer 1: Isisati tekst "Primjer pisanja teksta." Zatim promjeniti veličinu fonta i ispisati naslov "Poštenje" i ispod tekst "Ko lopovu gleda kroz prste i sam je lopov.". Zatim u normalnoj veličini ispisati tekst "Narodne poslovice"..

Primjer 2. IsPisati 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