Sve što trebate znati o CSS biračima

Ovaj članak donosi zanimljivu i važnu temu poznatu pod nazivom CSS Selectors te je nadovezuje na prateće praktične demonstracije.

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,

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.

Uzorak - CSS selektori - EdurekaRazumijemo 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.