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