Vse za Joomlo
Izdelava spletnih strani - Joomla CMS sistem.
Izobraževanja in delavnice. Vodiči in nasveti. Joomla podpora.

CSS

CSS (Cascading Style Sheets) je jezik, ki se uporablja za opisovanje videza in oblikovanja spletnih strani, napisanih v HTML. Medtem ko HTML določa strukturo in vsebino spletne strani, CSS skrbi za njeno vizualno podobo. Z uporabo CSS-ja lahko nadzorujemo barve, pisave, postavitev elementov in odzivnost strani.

V tem vodiču za začetnike bomo razčlenili osnove CSS-ja, razložili njegove glavne koncepte in prikazali praktične primere.

1. Kaj je CSS?

CSS je jezik za oblikovanje spletnih strani. Z njim lahko urejamo videz HTML elementov, ne da bi spreminjali samo strukturo strani. CSS sledi hierarhiji in lahko vsebuje tako specifična kot splošna pravila.

Osnovna CSS pravila se oblikujejo v parih lastnost-vrednost, kjer določimo lastnost, ki jo želimo urediti, in njeno vrednost.

Primer CSS pravila:

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

V tem primeru:

  • p je selektor, ki cilja vse HTML elemente <p>.
  • color in font-size sta lastnosti, ki določata barvo besedila in velikost pisave.

2. Načini vključevanja CSS-ja

CSS lahko vključimo v HTML na tri načine: notranje, zunanje in kot vgrajeni slog.

Zunanji CSS

Najboljši način je uporaba zunanjega slogovnega lista, kar omogoča, da eno datoteko s slogi uporabimo na več straneh. Ustvarimo datoteko .css in jo povežemo z HTML-jem.

Primer povezave zunanjega CSS:

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

Notranji CSS

Notranji CSS se nahaja v samem HTML dokumentu, znotraj oznake <style> v glavi.

Primer:

<head>
    <style>
        p {
            color: blue;
        }
    </style>
</head>

Vgrajeni CSS

Vgrajeni CSS se uporablja neposredno znotraj posameznega HTML elementa, s pomočjo atributa style.

Primer:

<p style="color: blue;">To je modro besedilo.</p>

3. Selektorji

Selektorji v CSS-ju določajo, kateri elementi bodo oblikovani. Obstaja več različnih vrst selektorjev, s katerimi lahko ciljate različne elemente.

Osnovni selektorji:

  • Element selektor: Oblikuje vse elemente določene vrste.

p {
    color: red;
}

  • ID selektor: Oblikuje en sam element z določenim ID-jem (uporabite oznako #).

#naslov {
    color: green;
}

  • Razredni selektor: Oblikuje elemente, ki imajo določen razred (uporabite oznako .).

.poudarjeno {
    font-weight: bold;
}

Kombinacija selektorjev:

  • Kombinacija razredov: Lahko kombinirate selektorje za bolj natančno ciljanje.

p.poudarjeno {
    color: orange;
}

  • Potomci: Cilja elemente, ki so potomci določenega elementa.

div p {
    color: blue;
}

4. Barve in ozadja

Barve v CSS lahko določimo z imeni barv, heksadecimalnimi vrednostmi, RGB ali HSL vrednostmi.

Barve:

  • Določanje barve besedila:

h1 {
    color: red;
}

  • Določanje ozadja:

body {
    background-color: #f0f0f0;
}

Ozadje slike:

Poleg barv lahko kot ozadje uporabimo tudi slike.

body {
    background-image: url('slika.jpg');
    background-size: cover;
}

5. Pisave in besedilo

CSS omogoča spreminjanje pisav, velikosti, sloga in poravnave besedila.

Pisave:

  • Spreminjanje pisave:

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

  • Velikost pisave:

h1 {
    font-size: 24px;
}

  • Debelina pisave:

h2 {
    font-weight: bold;
}

Slog besedila:

  • Ležeče besedilo:

p {
    font-style: italic;
}

  • Podčrtano besedilo:

a {
    text-decoration: underline;
}

Poravnava besedila:

  • Sredinska poravnava besedila:

h1 {
    text-align: center;
}

6. Robovi, obrobe in zamiki

CSS omogoča nadzor nad prostori okoli elementov, kar vključuje robove (margin), oblazinjenje (padding) in obrobe (border).

Robovi:

  • Dodajanje prostora zunaj elementa:

div {
    margin: 20px;
}

Oblazinjenje:

  • Dodajanje prostora znotraj elementa:

div {
    padding: 10px;
}

Obrobe:

  • Dodajanje obrob okoli elementa:

div {
    border: 2px solid black;
}

7. Postavitev elementov (Layout)

CSS omogoča nadzor nad postavitvijo elementov na strani. Obstaja več načinov, kako lahko postavimo elemente, najpogostejši so: block, inline, float in flexbox.

Blokovni in vrstični elementi:

  • Block elementi zavzamejo celotno širino (npr. <div>, <p>).
  • Inline elementi zavzamejo samo toliko prostora, kot ga potrebujejo (npr. <span>, <a>).

Plavajoči elementi (float):

Elementi lahko plavajo levo ali desno in tako omogočajo, da se drugi elementi ovijajo okoli njih.

img {
    float: left;
}

Flexbox:

Flexbox je moderni način za oblikovanje postavitve elementov, ki omogoča bolj fleksibilno porazdelitev prostora med elementi.

.container {
    display: flex;
    justify-content: space-between;
}

8. Medijske poizvedbe (Responsive Design)

Medijske poizvedbe omogočajo, da se spletna stran prilagaja različnim velikostim zaslonov.

Primer medijske poizvedbe:

@media (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

To pomeni, da bo barva ozadja spremenjena na svetlo modro, če bo širina zaslona manjša od 600px.

9. Sence in efekti

CSS omogoča dodajanje senc besedilu in blokom ter uporabo animacij in tranzicij.

Sence:

  • Senca besedila:

h1 {
    text-shadow: 2px 2px 5px grey;
}

  • Senca blokov:

div {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

Tranzicije:

Tranzicije omogočajo gladke prehode med stanji.

 

button {
    transition: background-color 0.3s ease;
}

 

button:hover {
    background-color: red;
}

 

10. Praktični primer: Ustvarjanje preproste strani s CSS

Poglejmo, kako lahko uporabimo naučene koncepte za oblikovanje osnovne spletne strani.

HTML:

 

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/styles.css">
    <title>Moja prva CSS stran</title>
</head>
<body>
    <header>
        <h1>Dobrodošli na moji spletni strani</h1>
    </header>

 

    <section>
        <p>To je preprost primer uporabe CSS-ja za oblikovanje strani.</p>
    </section>

 

    <footer>
        <p>Avtorske pravice © 2024</p>
    </footer>
</body>
</html>

 

CSS:

 

body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

 

header {
    background-color: #4CAF50;
    color: white;
    text-align: center;
    padding: 20px;
}

 

section {
    padding: 20px;
}

 

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
    position: fixed;
    width: 100%;
    bottom: 0;
}

 

11. Povzetek

S tem izobraževanjem ste spoznali osnove CSS-ja, ki vključujejo:

  • Načine vključevanja CSS-ja v HTML.
  • Uporabo selektorjev za ciljanje elementov.
  • Spreminjanje barv, pisav in videza besedila.
  • Oblikovanje s pomočjo robov, obrob in zamikov.
  • Uporabo CSS za postavitev elementov na strani.
  • Medijske poizvedbe za odziven dizajn.

CSS je izredno zmogljivo orodje za ustvarjanje estetsko privlačnih in uporabniško prijaznih spletnih strani. Z vadbo boste lahko še bolje obvladali oblikovanje in se posvetili naprednejšim tehnikam, kot so CSS animacije, transformacije in prehodi.