Choose your language!

---

|

Web programiranje → Kreiranje web sajta → Logo kreator — naslovna strana → CSS stilovi i klase

CSS stilovi i klase — stilizacija naslovne strane

Lekcija 8 od 21

Web početna:
Povratak na vodič

Uvod

U prethodnim lekcijama naučili smo:

• kako funkcioniše web
• kako napraviti strukturu stranice pomoću HTML-a

Sada dodajemo stil pomoću CSS-a i pravimo kompletnu vizuelnu stranicu.

Cilj lekcije:

Naučiti kako da stilizuješ HTML elemente koristeći CSS klase i napraviš izgled stranice.

Struktura projekta

projekat/
│
├── naslovna.html
├── css/
│   └── main.css
└── images/
    ├── logo1.png
    ├── logo2.png

CSS fajl ide u css folder, a slike u images.

Povezivanje CSS fajla

<link rel="stylesheet" href="css/main.css">

CSS iz primera (osnovna verzija)

Ovo je CSS koji koristimo u video primeru. Preporuka je da ga prvo isprobaš bez izmena.

body{

}

.gornje_zaglavlje{
    width:100%;
    height:400px;
    background-image: url("../images/pozadina.png");
    background-size: contain;
}

.donje_zaglavlje{
    width:100%;
    height:300px;
    background:#aaaaff;   
    color:#fff;
}

.sadrzaj{
    width:100%;
    height: auto;
    background:#ffffff;
}

.logo_primeri img{
    width:32%;
    height:28vw;
    padding:4vw;
}

.logo_primeri{
    padding-top:20px;
    text-align:center;
}

.traka{
    background: linear-gradient(to right, #dd0022 , #ffaaaa);
    color: white;
    font-size:1.5vw;
    width:100%;
    height:15vw;
    text-align:center;
}

.polje{
    width:30%;
    height:100%;   
}

.linkovi{
    text-align:center;
}

.linkovi a{
    margin:15px;
    color:#fff;
    font-size:1.2vw;
    font-weight:bold;
}

Objašnjenje CSS-a

• width:100% → element zauzima celu širinu
• height → definiše visinu elementa
• background-image → slika kao pozadina
• background → boja pozadine
• text-align:center → centriranje teksta
• font-size: vw → veličina zavisi od širine ekrana

Eksperiment:

• promeni boje
• promeni visinu
• promeni veličinu fonta

Moderniji CSS (upgrade)

Sada ćemo unaprediti stil koristeći moderniji pristup.

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.gornje_zaglavlje {
  min-height: 300px;
  background: url("../images/pozadina.png") center/cover no-repeat;
}

.traka {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px;
}

.logo_primeri {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.logo_primeri img {
  width: 30%;
  max-width: 250px;
}

.donje_zaglavlje {
  padding: 20px;
  text-align: center;
}

Razlika:

• koristimo flex za raspored
• izbegavamo fiksne visine
• bolja prilagodljivost ekranima

Responsive dizajn (prilagođavanje za mobilne uređaje)

Danas većina korisnika pristupa web sajtovima putem telefona. Zato je važno da se stranica lepo prikazuje na različitim veličinama ekrana.

To postižemo pomoću media queries u CSS-u.

Osnovni primer

@media (max-width: 768px) {

  .traka {
    flex-direction: column;
  }

  .polje {
    width: 100%;
    margin-bottom: 10px;
  }

  .logo_primeri {
    flex-direction: column;
    align-items: center;
  }

  .logo_primeri img {
    width: 80%;
  }

}

Objašnjenje

• @media (max-width: 768px) → pravila važe za manje ekrane (tablet/mobilni)
• flex-direction: column → elementi idu jedan ispod drugog
• width: 100% → element zauzima celu širinu
• width: 80% → slike se povećavaju radi boljeg prikaza

Kako testirati:

1. Otvori stranicu u browseru 2. Desni klik → Inspect 3. Uključi mobile view 4. Smanjuj širinu ekrana Posmatraj kako se raspored menja.

Važno:

Bez responsive dizajna sajt može izgledati loše na telefonu. Moderni web sajtovi uvek koriste ovu tehniku.

Izazov:

Pokušaj da:

• napraviš da meni ide vertikalno na telefonu
• povećaš dugmad
• sakriješ neke elemente na malim ekranima

Uvod u JavaScript

<button onclick="poruka()">Klikni me</button>

<script>
function poruka() {
  alert("Zdravo!");
}
</script>

Mini eksperiment

Promeni:

• boje
• font
• raspored elemenata

Zašto je ovo važno?

• HTML — struktura
• CSS — izgled
• JavaScript — interakcija

Povezane lekcije

• Django projekat

Šta sledi?

• Django backend
• povezivanje sa bazom

---