Uvod u CSS

Sjedište:	CARNET - Arhiva 2021 Loomen
E-kolegij:	Informatika 3 PMG - Gimnazija Đakovo
Knjiga:	Uvod u CSS

Otisnuo/la:	Gost (anonimni korisnik)
Datum:	petak, 22. studenoga 2024., 18:47

Opis

vježbe i zadaci

Sadržaj

1. Što je CSS?
2. Selektori
- 2.1. Klasni selektori
3. Povezivanje CSS-a s HTML dokumentom
- 3.1. Povezivanje s vanjskim dokumentom
4. Zadatak - uvod u CSS

1. Što je CSS?

CSS (Cascading Style Sheets) je jezik za oblikovanje mrežnih stranica i, uz HTML, osnovna tehnologija na kojoj se temelji današnji web. Prva inačica CSS-a definirana je potkraj 1996. godine.

Glavna ideja CSS-a je odvajanje dizajna u zasebne datoteke te određivanje dizajna pomoću jednostavnih pravila koja se mogu odnositi na više elemenata odjednom.

CSS kôd sastoji se od CSS pravila (stilova). CSS pravilo može se napisati tako da bude primijenjeno na sve elemente, na samo neke elemente ili tako da vrijedi samo za točno određeni element.

CSS je donio niz načina za uređivanje prikaza podataka kakvi do tada nisu postojali u HTML-u.

2. Selektori

Dio pravila koje određuje (selektira) elemente na koje se pravilo odnosi naziva se selektorom. Najjednostavniji selektori su nazivi elemenata (p, h1, body…), tzv. jednostavni selektori ili selektori HTML elemenata.

Oni odgovaraju imenu html oznake i primjenjuju se na svaku istovrsnu oznaku u dokumentu.

Kako pišemo CSS pravila?

Svako pravilo započinje nazivom selektora.

Iza naziva selektora slijede vitičaste zagrade.
U zagradama se piše svojstvo koje se postavlja (npr. color).
Iza svojstva ide dvotočka i vrijednost(i) na koju se svojstvo želi postaviti.
Svojstva se odvajaju oznakom ;

Primjer:

body
{
    background-color: #DCDCDC;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 10pt;
}
p
{
    text-align: justify;
}
h2
{
    text-align: center;
}

2.1. Klasni selektori

Jednostavni selektori su praktični, jer se definirane postavke odnose na sve oznake istog tipa. Međutim, često se pojavljuje potreba za dodatnim oblikovanjem. Ponekad poželimo dio teksta istaknuti tako da ga uokvirimo ili obojamo pozadinu. Ili pišemo kod (npr HTML kod) koji prikazujemo fontom Courier New. U tom slučaju koristimo klasne selektore - definiramo stil za pojedinu klasu i pridruživanjem te klase nekom elementu određujemo njegov izgled.

Postoje dvije vrste klasa:

klase koje određuju sve elemente i
klase koje određuju određene elemente

Pri definiranju klasnih selektora koristimo točku (.) kojom određujemo da se radi o klasi.

Kao što možete primjetiti, prethodni odlomak drugačijeg je oblikovanja od ostalih na ovoj stranici. Oblikovan je klasnim selektorom!

Primjer:

CSS kod kojim je definiran izgled prethodnog paragrafa izgleda ovako:

.istaknuto
{
    background-color: Silver;
    margin-left: 5%;
    margin-right: 10%;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: bold;
}

Kod kojim je definiran stil pisanja koda:

.kod
{
    font-family: "Courier New", Courier, monospace;
    font-size: 10pt;
    padding-left: 10px;
}

U oba ova primjera pokazane su klase koje određuju sve elemente (mogu se pridružiti bilo kojoj oznaci, npr. p, table i slično).
Korištenjem klasa koje određuju određene elemente ograničava se njihova primjena samo na elemente nekog tipa. Selektor takve klase počinje s elementom na koji se primjenjuje, u sredini je točka, a završava nazivom klase.

Primjer klasnog selektora koji će se koristiti samo za oznaku p:

p.istaknuto
{
    background-color: Silver;
    margin-left: 5%;
    margin-right: 10%;
    padding-left: 10px;
    padding-right: 10px;
    font-weight: bold;
}

Povezivanje klasnih selektora sa HTML kodom

Klase se pridružuju elementima korištenjem atributa class:

<p class="kod">Tekst na koji se odnosi oblikovanje tipa kod</p>

3. Povezivanje CSS-a s HTML dokumentom

Postoji više načina za povezivanje CSS i HTML koda:

dodavanjem u liniji atributom style
umetanjem u zaglavlje dokumenta
povezivanjem s vanjskim dokumentom
uvoženje vanjskog dokumenta

Stilovi definirani unutar HTML dokumenta

Stilovi definirani unutar HTML dokumenta koriste se kada među nizom stranica postoji potreba za stilom koji se koristi na samo jednoj od njih.

Povezivanje umetanjem CSS koda u zaglavlje html datoteke

CSS se može definirati u zaglavlju html dokumenta u oznaci style uz uporabu atributa type=”text/css”

Primjer:

    p
    {
        text-align: justify;
    }
    h1
    {
        text-align: center;
    }

</style>
...
</head>

3.1. Povezivanje s vanjskim dokumentom

Kod povezivanja s vanjskim dokumentom, pretpostavlja se da postoji dokument, najčešće imena stil.css u kojem se nalazi naveden CSS stil.

Za povezivanje s dokumentom koristi se oznaka <link> koja se dodaje u zaglavlje HTML dokumenta - između oznaka <head> i </head>. Oznaka <link> sastavni je dio HTML standarda i služi povezivanju s vanjskim dokumentima. Završna oznaka </link> ne postoji.

Uz oznaku <link> postoji više atributa od kojih su najvažniji:

rel - definira odnos između oznake i odredišnog dokumenta. Kada služi za povezivanje CSS-a, poprima vrijednost "stylesheet";
type - definira tip odredišnog dokumenta. U ovom slučaju tip dokumenta je "text/css";
href - putanja i naziv dokumenta koji se povezuje.

Primjer:

Pretpostavimo da se datoteka stil.css nalazi u istoj mapi kao i .html datoteka s kojom se povezuje. Tada ih povezujemo na sljedeći način:

<head>
...
<link rel="stylesheet" type="text/css" href="stil.css">
...

</head>

4. Zadatak - uvod u CSS

Pogledaj video lekciju Uvod u CSS
Napravi sve zadatke iz videolekcije
Riješi kviz sa zadnjeg slajda. Mjesto na kojem završiš igru, broj bodova i broj točnih odgovora objavi na Yammeru ispod posta za današnji zadatak.