Baš o kompliciranom ili naučite CSS3. Dio 2. Vrste CSS birača

Pozdrav, dragi čitatelji web stranice remontcompa.ru! Moje ime je Roman Nahvat i predstavljam vam drugi dio niza članaka o jeziku stila CSS. U prvom smo dijelu pogledali tri načina dodavanja stilova na web stranicu, naime, ispitali smo interne stilove, koja su proširenja za jednu oznaku HTML dokumenta, globalne stilove, kada se upotrebljavaju koja svojstva stila pišu između oznaka i, kao i srodni stilovi, koji su definirani u zasebnoj .css datoteci iz HTML dokumenta. Vrlo važan koncept u CSS-u je selektor. Selektor određuje na koji će se element (ili elemente) u HTML dokumentu primijeniti stil. Postoji nekoliko vrsta odabirača u CSS-u koje ćemo obrađivati ​​u ovom članku..

Baš o kompliciranom ili naučite CSS3. Dio 2. Vrste CSS birača


Napravite sljedeću strukturu HTML dokumenta s kojim je lista stilova selector_type.css () već povezana

Spremite ovaj dokument kao selecror.html na flash pogon u CSS mapi

Na isti način stvorite i spremite datoteku selector_type.css na flash pogonu u CSS mapu

Na web stranicu selecror.html dodajte naslov "CSS Selektori" i odlomak "Selektor je ...."

Na web stranicu selecror.html također dodajemo tablicu, za to ćemo napisati oznake i

Uspostavit ćemo kreiranu tablicu u središtu web stranice (atribut poravnanja s centrom vrijednosti), a također ćemo postaviti debljinu obruba tablice na 1 piksel (border = "1")

Između oznaka i navedite naziv tablice (Vrste CSS odabirača)

Između oznaka i
pisati oznake i , to će stvoriti jedan red tablice

Između oznaka i dva puta napišite oznake ... , ovom će se radnjom stvoriti dva stupca u tablici. Navest ćemo nazive stupaca kao "Selektor" i "Primjer upotrebe"

Slično tome, u tablicu dodajte još sedam redaka (oznake i ), a u svakom ćemo redu stvoriti dva stupca (oznake) i )

Kao rezultat toga, web stranica selector.html poprimit će sljedeći oblik

Iz kreirane tablice vidi se da postoje sljedeće vrste CSS selektora: Selektor vrste Identifikator birača klase Selektor Univerzalni selektor Descendant selektor Birač sesira Selektor generički povezanih elemenata Pogledajmo svaku vrstu selektora pomoću web stranice selector.html kao primjer Tip birača odgovara nekom imenu elementa u HTML dokument. Na primjer, na web stranici selector.html nalazi se naslov "CSS Selektori" koji je označen

...

. Poravnajte tekst naslova u sredini web stranice i postavite ga na crveno

U datoteci stilova selector_type.css određujemo oznaku zaglavlja kao selektor tipa

, dalje u zagradama označavamo svojstvo stila i njegovu vrijednost koju želimo primijeniti na zaglavlje s tekstom "Selektori u CSS-u"

Kao što možete vidjeti, naslov naslova nalazi se u sredini web stranice i crvene je boje

Selektor braćnih elemenata odgovara elementu braće i braće u odnosu na drugi element. Na primjer, oznaka

(odlomak "Selektor je ....") sestrinski je oznaci

(naslov "Selektori u CSS-u").

Promijenite boju teksta u odlomku ("Selektor je ...") iza naslova ("Selektori u CSS-u") u plavu boju s odabirom sestre. U datoteku stilova selector_type.css dodajte redak h1 + p color: blueviolet

Kao što vidite, boja teksta stavka je promijenjena u blueviolet

Dodajte još dva identična stavka na web stranicu nakon naslova "CSS Selektori"

Dobivamo sljedeće: tekst prvog odlomka je blueviolet, a boja teksta preostala dva stavka zadano je.

Promijenite boju teksta sva tri stavka slijedeći naslov "CSS Selektori" u blueviolet pomoću odabira generičkih elemenata. Selektor generaliziranih povezanih elemenata odgovara elementu koji je sestrinski drugom elementu. Na primjer, nekoliko oznaka

(tri odlomka "Selektor je ....") su sestra za oznaku

(naslov "Selektori u CSS-u"). U datoteku selector_type.css upišite sljedeći redak h1 ~ p color: blueviolet

Kao rezultat korištenja selektora generaliziranih srodnih elemenata, boja teksta sva tri stavka nakon naslova "Selektori u CSS-u" promijenila se u plavi violet

Razmotrite drugu vrstu CSS izbornika, poput birača identifikatora. Birač identifikatora odgovara elementu čiji atribut id ima vrijednost koja odgovara onoj naznačenoj simbolom # Povećajte veličinu fonta i promijenite boju teksta u nazivu tablice (oznake ...) koristeći birač identifikatora. Unutar oznake napišite identifikator s nazivom "capt", kao što je prikazano u nastavku ()

U datoteku selector_type.css dodajte sljedeći redak #capt color: red; font-size: 20px, pri čemu je iza simbola # naveden identifikator "capt"

Kao što vidite, veličina fonta i boja teksta u nazivu tablice promijenili su se u skladu sa stilskim svojstvom propisanim u datoteci selector_type.css

Možete stvoriti mnogo identifikatora u HTML dokumentu, ali samo pod uvjetom da se njihova imena nikada ne ponove. Unosimo još jedan identifikator s nazivom "tr1" unutar oznake , kao što je prikazano u nastavku ()

Koristeći identifikator "tr1", poravnat ćemo tekst u nazivima stupaca tablica u sredini, postaviti ih na zeleno, a također ćemo font u nazivima stupaca podebljati. U datoteku selector_type.css upišite # tr1 text-align: center; težina slova: podebljano; boja: zelena

Dobivamo sljedeće

Sljedeća vrsta selektora koju razmatramo je selektor klase. Selektor klase odgovara elementu koji atribut klase ima vrijednost koja odgovara onoj navedenoj nakon točke. Promijenite boju obruba tablice na web stranici selector.html u plavu pomoću odabirača klase. Za to unutar oznake napišite naziv klase na sljedeći način: tablica, gdje je class1 ime klase

U datoteku stilova selector_type.css dodajte sljedeći redak .class1 border-color: blue

Kao što vidite, boja okvira stola promijenila se u plavu

Promijenite boju teksta u tablici u zelenu. U datoteku selector_type.css upišite redak .class1 color: green

Vidimo da se boja teksta u tablici promijenila u zelenu

Dodajte neku pozadinsku sliku na web stranicu pomoću univerzalnog birača. Na flash disku u CSS mapi imamo slikovnu datoteku sa slikom imena i ekstenzijom .jpg

U datoteku stilova selector_type.css dodajte redak * background-image: url (image.jpg)

Kao rezultat, web stranica će poprimiti sljedeći oblik

Razmotrite potonju vrstu selektora, kao što je selektor potomaka. Dječji selektor odgovara elementu koji je potomak drugog elementa. Na primjer, u sva tri stavka (oznake)

i

) priložite fraze "HTML dokument" i "CSS pravilo" između oznaka ... , kao što je prikazano u nastavku. U ovom slučaju oznaka bit će potomak oznake

. oznaka promijenite font izraza "HTML dokument" i "CSS pravilo" u kurziv

Kombinacije "HTML dokumenta" i "CSS pravila" kurzivnim fontom

Promijenite boju teksta izraza "HTML dokument" i "CSS pravilo" u crvenu koristeći selektor potomaka. Da biste to učinili, u datoteku stilova selector_type.css dodajte red p I color: red

Kao rezultat, web stranica će poprimiti sljedeći oblik

Nastavak u članku: Samo o kompliciranom ili naučite CSS3. Dio 3. Načini postavljanja boja u CSS-u. Postavite transparentnost elementu HTML dokumenta

Kategorija