Jednostavni selektori


Jednostavni selektori (eng. type selectors) najjednostavniji su od svih. Odgovaraju imenu HTML oznake i primjenjuju se na svaki istovrsni element u dokumentu.

Primjerice, razmotrimo sljedeći stil:

p {
font-family: Verdana, Helvetica, sans-serif;
}
h1 {
color: #9b5c98;
font-size: 24px;
font-weight: bold;
}

Ovakav stil povezan s HTML dokumentom sugerira web pregledniku da tekst u svim paragrafima na stranici prikaže ispisan prvim raspoloživim od navedenih fontova te da sav tekst unutar <h1> oznaka u dokumentu prikaže podebljan, ljubičaste boje i veličine 24px.

Prednost korištenja ovakve vrste selektora je u tome što, osim samog povezivanja stila s dokumentom, ne zahtijeva intervencije u HTML kôd. Primjerice, ako želimo definirati tip i veličinu fonta za sve stranice, dovoljno je to napraviti ovim selektorom:

body {
font-family: Verdana, Helvetica, sans-serif;
font-size: 12px;
}

Zbog toga što je selektor body na vrhu hijerarhije vidljivog dijela HTML dokumenta – prisjetimo se slike iz lekcije Selektori – svi elementi koji se hijerarhijski nalaze niže od njega, poprimit će navedena svojstva. Više o tome u lekciji o nasljeđivanju.

Nedostatak primjene CSS-a putem jednostavnih selektora je u tome što se definirani stil primjenjuje na sve HTML elemente bez izuzetaka. Ne možemo postići da se, primjerice, paragrafi u tablici prikazuju različito od paragrafa izvan tablice, što nam mogu omogućiti selektori koje ćemo upoznati u jednoj od sljedećih lekcija.

  • Kopirajte ovaj kôd i snimite ga u tijelo HTML dokumenta. Kreirajte CSS datoteku i pridružite je snimljenom dokumentu ili stil definirajte unutar zaglavlja HTML dokumenta. Pokušajte promijeniti parametre veličine i boje slova na paragrafima i naslovima onako kako ste to vidjeli u CSS primjerima iz ove lekcije.
  • <h1>Lorem ipsum</h1>
    <p>Lorem ipsum je tekst koji se sastoji
    od niza slučajnih riječi bez značenja.
    Iako njegove riječi ne znače ništa,
    pretpostavlja se da je nastao na temelju
    Ciceronovog djela „O krajnostima
    dobra i zla”. Ovaj tekst se već
    stotinama godina koristi za testiranje
    ispisa i punjenje prostora tekstom.
    </p>
    <p>"Lorem ipsum dolor sit amet,
    consectetur adipisicing
    elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut
    aliquip ex ea commodo consequat".
    </p>
  • Rješenje



CARNet
Accessibility

Background Colour

Font Face

Font Size

1

Text Colour