Ovaj članak donosi zanimljivu i važnu temu poznatu kao Selektori i to slijedi uz prateću praktičnu demonstraciju. U ovom će članku biti obrađeni sljedeći putokazi,
- Stiliziranje HTML elemenata
- CSS birači
- CSS Id Selector
- CSS Birač klase
- CSS univerzalni selektor
- Birači CSS grupa
Pa krenimo onda,
Stiliziranje HTML elemenata
Shvatimo što je CSS prije nego što dođemo do CSS selektora. Ako se HTML treba smatrati kosturom, tada je CSS (Cascading Style Sheets) poput mišića i kože. Mozak je JavaScript. Dakle, za web stranicu CSS stilovi su u osnovi izgled i dizajn. Od postavljanja slika i teksta do veličine fonta i boje pozadine, CSS kontrolira kako HTML elementi izgledaju u pregledniku.
Možete bolje razumjeti CSS ako dobro razumijete što su CSS selektori. Ovi vam selektori omogućuju ciljanje određenih HTML elemenata tako da na njih možete primijeniti pravi stil.
Razumijemo kako možemo odabrati HTML elemente,
Kako odabrati elemente?
Recimo, želite da se određeni naslov razlikuje od ostatka sadržaja na web stranici. Sada pomoću CSS selektora možete ciljati taj HTML element kako biste ga drugačije oblikovali. CSS selektori pomažu u definiranju elemenata za koje se primjenjuje određeni skup CSS pravila. Postoje razne vrste CSS selektora koji vam omogućuju precizno odabir elemenata koje želite oblikovati. Možete dati općenit izgled cijeloj web stranici, a zatim na svoj način oblikovati druge elemente stranice.
Selektori su dio CSS pravila, a ti selektori dolaze neposredno prije deklaracije CSS blokova. Za bolje razumijevanje možete se pozvati na donju sliku.
Nastavljamo s člankom CSS Selectors
CSS birači
Ovaj selektor omogućuje vam odabir HTML elementa prema njegovom imenu.
Razmotrite donji kod:
p {poravnanje teksta: središnja boja: magenta}Ovaj će se stil primijeniti na svaki odlomak.
Stavak 1
Stavak 2
Ovaj će vam kôd dati sljedeći izlaz:
Ovaj će se stil primijeniti na svaki odlomak
Stavak 1
Stavak 2
U gornjem kodu HTML elementi su centrirani i imaju boju 'magenta'.
Nastavljamo s člankom CSS Selectors
CSS Id Selector
Odabirom atributa id HTML elementa možete odabrati taj određeni element. Budući da je id jedinstven za stranicu, možete odabrati pravi element pomoću atributa id.
Možete odabrati HTML element pomoću '#' iza kojeg slijedi ID tog elementa. Na primjer, '#firstname' odabire element gdje je id 'firstname'.
Razmotrite sljedeći kod:
# para1 {poravnanje teksta: središnja boja: narančasta}Pozdrav svijete
Ovo neće utjecati na ovaj odlomak.
Izlaz za gornji kod je:
Pozdrav svijete
Ovo neće utjecati na ovaj odlomak.
Kao što možete vidjeti u gornjem izlazu, uključivanjem id = ”para1 ″, uspjeli smo promijeniti boju tog elementa u narančastu. Drugi element koji to nema ostaje bez utjecaja.
Nastavljamo s člankom CSS Selectors
CSS Birač klase
Pomoću selektora klase možete odabrati HTML elemente koji imaju određeni atribut klase. Selektor možete definirati pomoću točke (simbol točke) nakon koje slijedi naziv klase. Na primjer, .intro odabire elemente u kojima je klasa „uvod“. Imajte na umu da ime razreda nikada ne možete započeti brojem.
Razmotrite sljedeći kod:
.center {poravnanje teksta: središnja boja: ružičasta}Ovaj je naslov ružičast i centriran.
Ovaj je odlomak ružičasti i centriran je.
Rezultat gornjeg koda je:
Ovaj je naslov ružičast i centriran.
tip podataka za datum u sql
Ovaj je odlomak ružičasti i centriran je.
Za određeni element možete koristiti CSS birače klasa. Ako želite da se stilizira samo jedan određeni element, tada možete koristiti naziv elementa zajedno s biračem klase.
Na primjer, uzmite u obzir sljedeći kod:
p.center {poravnanje teksta: središnja boja: ružičasta}Na ovaj naslov to ne utječe
Ovaj je odlomak ružičasti i centriran je.
Rezultat gornjeg koda je:
Na ovaj naslov to ne utječe
Ovaj je odlomak ružičasti i centriran je.
Kao što možete vidjeti u izlazu, na naslov h2 stil ne utječe. Budući da smo naveli 'p.center', stil utječe samo na odlomak.
Nastavljajući s ovim člankom CSS Selectors,
CSS univerzalni selektor
Ova vrsta selektora može se smatrati zamjenskim znakom koji odabire sve elemente na stranici. Odabire sve elemente na stranici i određuje se s '*'.
Na primjer, razmotrite donji kod:
* {boja: tamnozelena veličina fonta: 30 piksela}Ovo je test (manji font)
Ovo je odlomak.
Izlaz za gornji kod je:
Pozdrav svijete
Ovo je test (manji font)
Ovo je odlomak.
Kao što možete vidjeti u izlazu, svi elementi koji su definirani pomoću birača grupa imaju istu definiciju stila - centrirani su po sredini i boja fonta je cijan.
Ovo nas dovodi do kraja ovog članka.
Pogledajte naš koja dolazi s treningom uživo pod vodstvom instruktora i iskustvom u stvarnom životu. Ovaj trening čini vas vještima za rad s back-end i front-end web tehnologijama. Uključuje obuku o web razvoju, jQueryju, Angularu, NodeJS, ExpressJS i MongoDB.
Imate pitanje za nas? Molimo spomenite to u odjeljku za komentare članka i javit ćemo vam se.