WEBnSTUDY.com
CSS

CSS selektori HTML elemenata

Definisanje slektora može biti prilično komplikovan zadatak, koji ćemo savladati kroz naredne lekcije u više etapa. Srećom, danas se bavimo najjednostavnijim tipom selektora - HTML selektorima.

Njihovo definisanje je bar lako - kao selektor navodimo naziv HTML elementa na koji se stil primenjuje.

To bi značilo da ako želimo da se stil primenjuje na pasuse, kao selektor bismo naveli p, jer je to HTML oznaka za pasuse. Ako bismo želeli da se stil primeni na sam dokument, pogađate, kao selektor bismo naveli body.

Možda je ovo pravo mesto da odgovorimo na neka pitanja koja bi nas kasnije mučila.

Šta ako među stilovima navedem dva puta isti selektor?

Nećete napraviti grešku, naravno - ako ste to namerno uradili. Ta dva (ili više) ista selektora će u web čitaču biti "spojeni" u jedan i tada važi pravilo vezano za deklaracije - ono što dolazi poslednje je "najjače".

Kako se univerzalni selektor kombinuje sa HTML selektorima?

Bez ikakavih problema. Univerzalni selektor uobičajeno definišemo na početku, ali istina je da ga možemo smestiti bilo gde u CSS-u.

Na sve elemente će se najpre primeniti podešavanja iz univerzalnog selektora, a tek onda specifična podešavanja za njih same. To znači da ako stavimo univerzalni selektor na kraju, neće se desiti da njegova podešavanja "nadjačaju" podešavanja za bilo koji HTML element.

Šta se dešava sa stilovima kada se HTML elementi nalaze jedan unutar drugog?

To je veoma zanimljivo pitanje. Neki CSS atributi će se naslediti (npr. boja slova, podešavanja fonta, poravananje), dok većina neće imati nikakvog uticaja. Na primer - ako blok ima definisanu plavu boju slova, svi pasusi unutar bloka (ako za njih nije definisana njihova boja) će takođe imati plavu boju. Sa druge strane, ako blok ima definisan okvir, pojedini pasusi unutar njega neće imati svoje okvire.

Takođe, neki atributi nadređenog elementa (npr. širina, visina, margine i sl.) će, naravno uticati i na podređeni element.

Pogledajte primer da biste videli kako sve ovo funkcioniše.

HTML selektori

Ovo je uobičajena situacija kada kreiramo web stranice. Na jednom posebnom mestu imamo sav CSS:


    h1 {
    	color: red;
    	font-size: 14pt;
    }

    p {
    	color: blue;
    	font-size: 9pt;
    }
    

Na drugom mestu nalazi se HTML:


    <h1>Naslov</h1>

    <p>Ovo je tekst u prvom pasusu. Na njega se primenjuje stil za pasuse.</p>

    <p>Ovo je tekst u drugom pasusu. I na njega se takođe primenjuje taj isti stil.</p>
    

Rezultat bi izgledao ovako:

Naslov

Ovo je tekst u prvom pasusu. Na njega se primenjuje stil za pasuse.

Ovo je tekst u drugom pasusu. I na njega se takođe primenjuje taj isti stil.

Univerzalni selektor i HTML selektori

CSS sa HTML-om:


    <style>
    	p {
    		color: red;
    		font-size: 9pt;
    	}

    	* {
    		color: blue;
    	}
    </style>

    ...

    <h1>Naslov</h1>

    <p>
	    Ovo je tekst u prvom pasusu. Na njega se primenjuje stil za pasuse, bez obzira 
	    što je plava boja definisana u univerzalnom selektoru posle P selektora.
    </p>

    <div>
	    Ovo je tekst u blok elementu. I na njega utiču podešavanja univerzalnog selektora.
    </div>

Naslov

Ovo je tekst u prvom pasusu. Na njega se primenjuje stil za pasuse, bez obzira što je plava boja definisana u univerzalnom selektoru posle P selektora.

Ovo je tekst u blok elementu. I na njega utiču podešavanja univerzalnog selektora.

Dakle, prvo se svi elementi formatiraju prema atributima zadatim u univerzalnom selektoru, gde god se on nalazio. Tek onda se pojedini elementi formatiraju prema njihovim selektorima.

HTML oznaka style služi za definisanje CSS-a unutar same HTML stranice. Načine uvođenja CSS-a u HTML ćemo objasniti već u sledećoj lekciji.

Navođenje istog selektora


    <!--  CSS koji važi za sve stranice  -->
    <style>
	    h1 {
		    color: blue;
		    font-size: 13pt;
    		background-color: black;
	    	text-align: center;
	    }
    </style>

    <!--  CSS koji uključujemo samo na pojedinim stranicama  -->
    <style>
    h1 {
    	color: red;
    }
    </style>

    ...

    <h1>Naslov</h1>

    <p>
	    Vidimo kako naslov ima sva podešavanja zadata u prvom CSS-u, 
    	jedino što je dobio crvenu boju zahvaljujući drugom CSS-u.
    </p>

Naslov

Vidimo kako naslov ima sva podešavanja zadata u prvom CSS-u, jedino što je dobio crvenu boju zahvaljujući drugom CSS-u.

Kao što vidimo, naslov je formatiran prema pravilima zadatim u prvom CSS-u, ali pošto je kasnije ponovljen selektor h1, atributi koji su tu zadati "nadjačavaju" prethoden atribute, pa tako rezultujuća boja naslova postaje crvena.

Atribut koji do sada nismo videli je background-color. Kao što pretpostavljamo, njime se podešava boja pozadine.

Ugnježdeni HTML elementi


    <style>
	    section {
		    color: blue;
    		font-size: 9pt;
	    	width: 50%;
		    border: 1px blue solid;
    	}

	    div {
		    color: red;
	    }
    </style>

    ...

    <h1>Naslov</h1>

    <section>
	    <p>Ovo je pasus unutar sekcije.</p>

	    <div>Ovo je DIV blok unutar sekcije.</div>

	    <section>Ovo je sekcija unutar sekcije.</section>
    </section>

    <p>Ovo je pasus van sekcije.</p>

Naslov

Ovo je pasus unutar sekcije. Nasleđuje boju i veličinu fonta.

Ovo je DIV blok unutar sekcije.
Ovo je sekcija unutar sekcije.

Ovo je pasus van sekcije.

Šta se dogodilo? Sekcija ima podešenu plavu boju teksta, font veličine 9pt, širinu od 50% širine nedređenog elementa i graničnu liniju.

Pasus unutar sekcije je nasledio boju teksta i veličinu slova (jasna je razlika u odnosu na pasus koji je van sekcije). Međutim graničnu liniju i širinu nije nasledio. Jedino što je sam pasus ograničen svojom nadređenom sekcijom, pa tako ni sam ne može biti širi od nje.

Div blok ima svoju boju, pa je tako nasledio samo veličinu slova. Konačno, sekcija unutar sekcije ima sve iste atribute, s tim što i na unutrašnju sekciju utiče širina nadređene sekcije, pa je tako njena širina "polovina od polovine".

Nemojte se nervirati ako ne razumete sve atribute zadate u primeru. Svaki će biti detaljno objašnjen kada za to dođe vreme. Za sada je dovoljno da znamo da width određuje širinu elementa, dok border služi za definisanje granične linije.

Svi elementi sajta Web'n'Study, osim onih za koje je navedeno da su u javnom vlasništvu, vlasništvo su autora i ne smeju se koristiti, u celosti ili delimično bez pismenog odobrenja autora. To uključuje tekstove, slike, ilustracije, animacije, prateći grafički materijal i programski kod.
Ovaj sajt koristi tehnologiju kolačića (cookies) radi vođenja interne statistike u cilju unapređenja korisničkog iskustva. Tako prikupljeni podaci su anonimni i nedostupni trećim licima. Vaša privatnost nije ugrožena ni na koji način.