Web Blog Web development tutorijali

CSS Dizajn sajta

CSS (Cascading Stile Sheets) je jezik stilova koji se koristi za opisivanje prezentacije dokumenta napisanog u markup jeziku. Najčešće se koristi za stilizovanje vizuelnog izgleda veb stranica napisanih u HTML-u i XHTML-u.

CSS vam omogućava da kontrolišete izgled, boje, fontove i druge vizuelne aspekte veb stranice, odvojeno od njene strukture i sadržaja. Ovo razdvajanje prezentacije i sadržaja olakšava održavanje i ažuriranje dizajna veb stranice.

CSS pruža širok spektar opcija za stilizovanje, kao što je podešavanje boja pozadine, određivanje veličina i stilova fontova i kreiranje rasporeda korišćenjem svojstava položaja, prikaza i savijanja.

CSS stilovi su definisani u posebnoj datoteci ili u elementu <stile> u <head> HTML dokumenta. Jednom definisani, stilovi se mogu primeniti na određene elemente na stranici korišćenjem selektora i atributa klase ili id u HTML-u.

Upotreba CSS stilova

Evo primera korišćenja CSS-a na različite načine:

Inline CSS

Inline CSS se koristi za primenu stilova na određeni HTML element korišćenjem atributa 'style'. Ovaj metod je koristan za primenu jednokratnih stilova na određene elemente, ali može postati glomazan ako treba da primenite iste stilove na više elemenata.

<p style="color: blue; font-size: 16px;">This is some text</p>

U ovom primeru, boja elementa teksta je postavljena na plavu, veličina fonta od 16 piksela, koristeći inline CSS.

Interni CSS

Interni CSS se koristi za definisanje stilova u odeljku <head> HTML dokumenta, koristeći element <stile>. Ovaj metod je koristan za primenu stilova na više elemenata na jednoj veb stranici.

<head>
    <style>
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>This is some text</p>
    <p>This is some more text</p>
</body>

Eksterni CSS

Eksterni CSS se koristi za definisanje stilova u zasebnoj CSS datoteci, koja se može povezati sa više HTML dokumenata. Ovaj metod je koristan za doslednu primenu stilova na više veb stranica i omogućava vam da odvojite prezentaciju (CSS) od sadržaja (HTML).

Evo primera kako možete da koristite eksternu CSS datoteku:
Napravite novu datoteku pod nazivom "stiles.css" i definišite svoje stilove u ovoj datoteci kako sledi:

p {
    color: blue;
    font-size: 16px;
}

U odeljku <head> vašeg HTML dokumenta povežite se sa spoljnom CSS datotekom pomoću elementa <link>:

<head>
    <link rel="stylesheet"  href="styles.css">
</head>

Koristite iste selektore i svojstva u HTML dokumentu koje ste definisali u CSS datoteci:

<body>
    <p>This is some text</p>
    <p>This is some more text</p>
</body>

U ovom primeru, boja teksta svih elemenata je postavljena na plavu, a veličina fonta na 16 piksela, koristeći spoljnu CSS datoteku.

Prednost korišćenja eksternog CSS-a je u tome što možete da menjate stilove u jednoj datoteci i ona će se automatski primeniti na sve stranice povezane sa tom datotekom. Ovo olakšava održavanje i ažuriranje dizajna veb stranice.

Takođe je vredno napomenuti da možete koristiti više spoljnih CSS datoteka i povezati ih u HTML dokumentu, ovo je korisno kada želite da odvojite različite tipove stilova ili kada radite sa velikim projektom i želite da podelite stilove na različite fajlovi.

CSS Selektori

CSS selektori se koriste za odabir elemenata na HTML stranici i za primenu stilova na njih. Postoji nekoliko tipova selektora dostupnih u CSS-u, od kojih svaki ima svoju sintaksu i svrhu.
Evo nekoliko primera često korišćenih CSS selektora:

Element Selektor

Ovaj selektor bira elemente na osnovu naziva njihove oznake. Na primer, p selektor bira sve elemente.

p {
    color: blue;
}

ID selektor

Ovaj selektor bira elemente na osnovu njihovog id atributa. Id selektor počinje simbolom "#". Na primer, #myId selektor bira element sa ID-om "myId". U jednom HTML dokumentu može da postoji samo jedan element sa ID selektorom.

<p id="myId">This is some text</p>

#myId {
    color: blue;
}

Class selektor

Ovaj selektor bira elemente na osnovu njihovog atributa klase. Selektor klase počinje sa "." simbol. Na primer, .myClass selektor bira sve elemente sa klasom "myClass".

<p class="myClass">This is some text</p>

.myClass {
    color: blue;
}

Descendant selektor

Ovaj selektor bira elemente koji su potomci određenog elementa. Na primer, 'p em' selektor bira sve elemente koji se nalaze unutar elemenata.

<p>This is <em>some</em> text</p>

p em {
    color: blue;
}

Child Selektor

Ovaj selektor bira elemente koji su direktni potomci određenog elementa. Na primer, 'p > em' selektor bira sve elemente koji su direktni potomci elemenata.

CSS tekst stilovi

Evo nekoliko primera uobičajenih CSS stilova teksta:

Veličina teksta

'font-size:' Ovo svojstvo postavlja veličinu teksta. Može se podesiti u pikselima (px), poenima (pt) ili kao procenat (%).

p {
    font-size: 16px;
}

Porodica fontova teksta

'font-famili': Ovo svojstvo postavlja porodicu fontova za tekst. Može se postaviti na određenu porodicu fontova kao što je „Arial“, „Helvetica“ ili „Verdana“, ili na generičku porodicu fontova kao što je „serif“, „sans-serif“ ili „monospace“.

p {
    font-family: Arial, sans-serif;
}

Boja teksta

'color:' Ovo svojstvo postavlja boju teksta. Može se podesiti korišćenjem imenovane boje, kao što je „plava“, ili heksadecimalnog koda, kao što je „#0000ff“.

p {
    color: blue;
}