Uvod u css

Što je Cascade Style Sheet?

StyleSheet jezik - skup svojstava i vrijednosti koji određuju izgled web stranice.
Oni određuju izgled html elementa: font, boju, veličinu, margine...
Izgled elementa u označnom jeziku: <p>Tekst odlomka</p>

Cascade - pravila koja određuju primjenu svojstva označnog elementa koji se nalazi unutar drugog elementa.

CSS nasljeđivanje

Dopuštanje nasljeđivanja stilova od roditeljskih elemenata.
Ono omogućava smanjenje css kôda elemenata potomaka.
Ako nisu zadana specifična svojstva potomaka, element izgleda kao i roditeljski.

Cascade - pravila koja određuju primjenu svojstva označnog elementa koji se nalazi unutar drugog elementa.

CSS sintaksa

Selektor - dio html kôda na kojem se mijenja vrijednost svojstva
Svojstvo - osobina html kôda koju mijenjamo
Vrijednost - nova vrijednost css svojstva

Osnovni selektori

Selektor može biti:
Oznaka svih elemenata (* { })
Pojedinačni element (body {} div {}, h1 {}, p {} ...)
Skupina elemenata (h1, h2, h3, h4, h5, h6 {})
Identifikator (#wrapper { })
Klasa (.obojano { })

Primjer dodavanja stilova

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="stil.css" />
    <title>CSS počinjemo </title>
</head>
<body>
<h1>Glavni naslov stranice</h1>
<h2>Elementi kao selektori</h2>
<p class="boja">Lorem ipsum</p>
<h2 id="jedino">Identifikatori selektori</h2>
<p>Lorem ipsum</p>
<h2 class="boja">Klase selektori</h2>
<p>Lorem ipsum</p>
</body>

Svi ili pojedinačni elementi

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: Tahoma, Arial, sans-serif;
  font-size: 62.5%;
  color: black;
}

Skupina elemenata

Omogućava istovremeno definiranje svojstava više elemenata:
h1, h2, h3, h4, h5, h6 {
  font-family: Tahoma, Arial, sans-serif;
}

a:link, a:visited {
  text-decoration: none;
  color: black;
}

Selektor identifikatora

Samo jedan elemenat u može imati jedan naziva identifikatora.
<div id="wrapper">
  <h1>Naslov</h1>
  <p>Tekst i tekst u blok elementu</p>
</div>

#wrapper {
  color: blue;
  background-color: gold;
}

Selektor klase

Više elemenata u html dokumentu može biti istog naziva klase.
<h2 class="boja">Naslov klase boja</h2>
<p class="boja">Tekst klase boja</p>

.boja {
  color: green;
  background-color: silver;
}

Identifikator ili klasa

Identifikator je jedinstven u html dokumentu.

Naziv klase se može više puta koristiti u html dokumentu.

Predlaže se korištenje identifikatora za oznake odjeljaka i pododjeljaka.

Elementi potomci

<div id="wrapper">Numerirani popis
  <ul>Nenumerirani popis
    <li>Stavka popisa</li>
  </ul>
</div>


#wrapper ul li {
    color: green;
}
Selektor stavku popisa simboličkog popisa li omotanog identifikatorom #wrapper

Hvala na pozornosti!

Pitanja?

← →