Samo zapleteno ali se naučite CSS3. Del 2. Vrste izbirnikov CSS

Pozdravljeni, dragi bralci spletnega mesta remontcompa.ru! Moje ime je Roman Nahvat in predstavljam vam drugi del niza člankov o jeziku stila CSS. V prvem delu smo si ogledali tri načine dodajanja slogov na spletno stran, in sicer smo preučili notranje sloge, ki so razširitve za eno oznako dokumenta HTML, globalne sloge, pri uporabi lastnosti slogov, ki so zapisane med oznakami in, kot tudi sorodne sloge, ki so opredeljeni v ločeni datoteki .css iz dokumenta HTML. Zelo pomemben koncept v CSS je izbirnik. Izbirnik določa, za kateri element (ali elemente) v dokumentu HTML bo uporabljen slog. V CSS obstaja več vrst izbirnikov, ki jih bomo obravnavali v tem članku..

Samo zapleteno ali se naučite CSS3. Del 2. Vrste izbirnikov CSS


Ustvarite naslednjo strukturo dokumenta HTML, s katerim je že povezan stikalni list selector_type.css ()

Ta dokument shranite kot selecror.html na bliskovni pogon v mapi CSS

Na enak način ustvarite in shranite datoteko selector_type.css na bliskovni pogon v mapi CSS

Na spletno stran selecror.html dodajte naslov "Izbirniki CSS" in odstavek "Izbirnik je ...."

Tabeli dodamo tudi spletno stran selecror.html, za to bomo napisali oznake in

Ustvarjeno tabelo bomo poravnali na sredini spletne strani (atribut poravnave z vrednostnim središčem) in tudi nastavili debelino roba tabele na 1 pik (border = "1")

Med oznakami in navedite ime tabele (Vrste izbirnikov CSS)

Med oznakami in
napišite oznake in , to bo ustvarilo eno vrstico tabele

Med oznakami in dvakrat napišite oznake ... , to dejanje bo ustvarilo dva stolpca v tabeli. Imena stolpcev bomo navedli kot "Izbirnik" in "Primer uporabe"

Podobno v tabelo dodajte še sedem vrstic (oznake in ) in v vsaki vrstici bomo ustvarili dva stolpca (oznake) in )

Posledično bo spletna stran selector.html dobila naslednji obrazec

Iz ustvarjene tabele je razvidno, da obstajajo naslednje vrste izbirnikov CSS: Izbirnik vrst Izbirnik identifikatorjev Izbirnik razreda Univerzalni izbirnik Izbirnik potomcev Selekcijski izbirnik Izbirnik generično povezanih elementov Oglejmo si vsako vrsto izbirnika s pomočjo spletne strani selector.html kot primer Izbirnik vrst ustreza imenu nekaterih elementov v Dokument HTML. Na primer, na spletni strani selector.html je označen naslov »Izbirniki CSS«

...

. Poravnajte naslovno besedilo na sredini spletne strani in ga nastavite na rdečo

V datoteki stilov selector_type.css določimo oznako glave kot izbirnik vrst

, nadalje v naramnicah označimo lastnost sloga in njeno vrednost, ki jo želimo uveljaviti v glavi z besedilom "Izbirniki v CSS"

Kot lahko vidite, je naslovno besedilo nameščeno na sredini spletne strani in je rdeče barve

Izbirnik bračnih elementov ustreza bratu in drugemu. Na primer oznaka

(odstavek "Izbirnik je ....") je sestrski do oznake

(naslov "Izbirniki v CSS").

Spremenite barvo besedila v odstavku ("Izbirnik je ...") po naslovu ("Izbirniki v CSS-ju") v modro-vijolično s pomočjo izbirnika sorodnikov. V datoteko stilov selector_type.css dodajte vrstico h1 + p color: blueviolet

Kot lahko vidite, se je barva besedila odstavka spremenila v modro

Na stran dodajte še dva enaka odstavka za naslov "Izbirniki CSS"

Dobimo naslednje: besedilo prvega odstavka je modro-vijolično, barva besedila preostalih dveh odstavkov pa ostane privzeto.

Spremenite barvo besedila vseh treh odstavkov po naslovu »Izbirniki CSS« v modro violet s pomočjo izbirnika splošnih elementov. Izbirnik posplošenih povezanih elementov ustreza elementu, ki je sestrski drugemu elementu. Na primer, več oznak

(trije odstavki "Izbirnik je ....") so sestra oznaki

(naslov "Izbirniki v CSS"). V datoteko selector_type.css napišite naslednjo vrstico h1 ~ p color: blueviolet

Zaradi uporabe izbirnika posplošenih povezanih elementov se je barva besedila vseh treh odstavkov za naslovom "Izbirniki v CSS" spremenila v modro

Razmislite o drugi vrsti izbirnika CSS, na primer izbirniku identifikatorja. Izbirnik identifikatorja ustreza elementu, katerega atribut id ima vrednost, ki se ujema s tisto, označeno s simbolom # Povečajte velikost pisave in spremenite barvo besedila v imenu tabele (oznake ...) s pomočjo izbirnika. Znotraj oznake napišite identifikator z imenom "capt", kot je prikazano spodaj ()

V datoteko selector_type.css dodajte naslednjo vrstico #capt color: rdeča; font-size: 20px, kjer je za simbol # naveden identifikator "capt"

Kot lahko vidite, se je velikost pisave in barva besedila v imenu tabele spremenila v skladu s lastnostjo sloga, predpisano v datoteki selector_type.css

V dokumentu HTML lahko ustvarite veliko identifikatorjev, vendar le pod pogojem, da se njihova imena nikoli ne ponovijo. V notranjost oznake napišemo še en identifikator z imenom "tr1" , kot je prikazano spodaj ()

S pomočjo identifikatorja "tr1" bomo besedilo poravnali po imenih stolpcev tabel na sredini, jih nastavili na zeleno in pisavo napisali tudi v imenih stolpcev krepko. V datoteko selector_type.css napišite # tr1 text-align: center; pisava: krepka; barva: zelena

Dobimo naslednje

Naslednja vrsta izbirnika, o katerem razmišljamo, je izbirnik razredov. Izbirnik razreda ustreza elementu, katerega atribut razreda ima vrednost, ki se ujema z določeno po piki. S pomočjo izbirnika razreda spremenite barvo obrobe tabele na spletni strani selector.html v modro. Za to znotraj oznake ime razreda napišite na naslednji način: tabela, kjer je class1 ime razreda

V datoteko stilov selector_type.css dodajte naslednjo vrstico .class1 border-color: blue

Kot lahko vidite, se je barva okvirja tabele spremenila v modro

Barvo besedila v tabeli spremenite v zeleno. V datoteko selector_type.css napišite vrstico .class1 color: green

Vidimo, da se je barva besedila v tabeli spremenila v zeleno

Na spletno stran dodajte nekaj slike ozadja z univerzalnim izbirnikom. Na bliskovnem pogonu v mapi CSS imamo slikovno datoteko z imensko sliko in pripono .jpg

V datoteko stilov selector_type.css dodajte vrstico * background-image: url (image.jpg)

Posledično bo spletna stran dobila naslednji obrazec

Upoštevajte zadnjo vrsto izbirnika, na primer selektorja potomcev. Otroški selektor ustreza elementu, ki je potomec drugega elementa. Na primer v vseh treh odstavkih (oznake

in

) med oznakama priložite stavek "HTML dokument" in "Pravilo CSS" ... , kot je prikazano spodaj. V tem primeru oznaka bo potomec oznake

. Oznaka spremenite pisavo stavkov "HTML dokument" in "Pravilo CSS" v poševno pisavo

Kombinacije "HTML dokumenta" in "Pravila CSS" s poševno pisavo

S pomočjo izbirnika potomcev spremenite barvo besedila besedil "HTML dokument" in "Pravilo CSS" v rdečo. Če želite to narediti, v datoteko stilov selector_type.css dodajte vrstico p I color: red

Posledično bo spletna stran dobila naslednji obrazec

Nadaljevanje v članku: Samo zapleteno ali se naučite CSS3. Del 3. Načini nastavitve barv v CSS. Nastavite preglednost elementu v dokumentu HTML

Kategorija