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

<!doctype html>
<html>
<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>
</html>

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?