Osnovni css selektori. Događaji (selektori, ponašanja) CSS. CSS selektori dubokog učenja

CSS (kaskadni stilski listovi) je jezik tablica stilova koji omogućuje prilaganje stilova (kao što su fontovi i boja) strukturiranim dokumentima (kao što su HTML dokumenti i XML aplikacije). CSS stilovi obično se koriste za stvaranje i stiliziranje web stranica i elemenata korisničkog sučelja napisanih u HTML-u i XHTML-u, ali se također mogu primijeniti na bilo koju vrstu XML dokumenta, uključujući XML, SVG i XUL. Odvajanjem stila prezentacije dokumenata od sadržaja dokumenata, CSS olakšava izradu web stranica i održavanje web stranica.

CSS podržava stilske listove specifične za medije tako da autori mogu prilagoditi prezentaciju svojih dokumenata vizualnim preglednicima, slušnim uređajima, pisačima, brajevim uređajima, ručnim uređajima i još mnogo toga.

Kaskadni listovi stilova opisuju kako su elementi oblikovani pomoću svojstava i valjanih vrijednosti za ta svojstva. Za svaki element možete koristiti ograničen skup svojstava, druga svojstva neće imati nikakav učinak na njega.

Deklaracija stila ima dva dijela: selektor i oglasi. U HTML-u nazivi elemenata ne razlikuju velika i mala slova, tako da "h1" radi na isti način kao i "H1". Deklaracija se sastoji od dva dijela: naziva svojstva (na primjer, boja) i vrijednosti svojstva (siva). Selektor govori pregledniku koji element treba formatirati, a blok deklaracije (kod u vitičastim zagradama) navodi naredbe za formatiranje - svojstva i njihove vrijednosti.

Iako gornji primjer samo pokušava utjecati na nekoliko svojstava potrebnih za iscrtavanje HTML dokumenta, sam se kvalificira kao lista stilova. Kada se kombinira s drugim listovima stilova (jedna temeljna značajka CSS-a je da se listovi stilova kombiniraju), pravilo će odrediti konačnu prezentaciju dokumenta.

Vrste kaskadnih stilskih listova i njihove specifičnosti

1. Vrste stilskih listova

1.1. Vanjski stilski list

Vanjski stilski list je tekstualna datoteka s nastavkom .css, koja sadrži skup CSS stilova za elemente. Datoteka se stvara u uređivaču koda, baš kao i HTML stranica. Datoteka može sadržavati samo stilove, bez HTML oznaka. Vanjski stilski list priložen je web-stranici pomoću oznake koji se nalazi unutar odjeljka . Ovi stilovi funkcioniraju za sve stranice web-mjesta.

Možete priložiti više listova stilova svakoj web stranici dodavanjem više oznaka uzastopno , navodeći svrhu ovog lista stilova u atributu medijske oznake. rel="stylesheet" označava vrstu veze (link na stylesheet).

Atribut type="text/css" nije potreban prema HTML5 standardu, pa se može izostaviti. Ako atribut nedostaje, zadana je vrijednost type="text/css" .

1.2. Unutarnji stilovi

Unutarnji stilovi ugrađen u odjeljak HTML dokument i definirani su unutar oznake. Interni stilovi imaju prednost nad vanjskim stilovima, ali nadjačavaju ugrađene stilove (navedene putem atributa style).

...

1.3. Umetnuti stilovi

Kada pišemo umetnuti stilovi, pišemo CSS kod u HTML datoteku, izravno unutar oznake elementa pomoću atributa style:

Obratite pažnju na ovaj tekst.

Takvi stilovi utječu samo na element za koji su postavljeni.

1.4. pravilo @uvoza

pravilo @uvoza omogućuje učitavanje vanjskih listova stilova. Da bi direktiva @import radila, mora se postaviti u stilski list (vanjski ili interni) prije svih ostalih pravila:

Pravilo @import također se koristi za uključivanje web fontova:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. Vrste selektora

Selektori predstavljaju strukturu web stranice. Koriste se za stvaranje pravila za oblikovanje elemenata web stranice. Selektori mogu biti elementi, njihove klase i identifikatori, kao i pseudoklase i pseudoelementi.

2.1. Univerzalni selektor

Odgovara bilo kojem HTML elementu. Na primjer, * (margina: 0;) će poništiti margine za sve elemente stranice. Selektor se također može koristiti u kombinaciji s pseudo-klasom ili pseudo-elementom: *:after (CSS stilovi), *:checked (CSS stilovi) .

2.2. Selektor elementa

Birači elemenata omogućuju vam formatiranje svih elemenata određene vrste na svim stranicama vašeg web-mjesta. Na primjer, h1 (font-family: Lobster, cursive;) će postaviti opći stil oblikovanja za sve h1 naslove.

2.3. selektor razreda

Birači klasa omogućuju vam stiliziranje jednog ili više elemenata s istim nazivom klase, postavljenih na različitim mjestima na stranici ili na različitim stranicama web-mjesta. Na primjer, da biste stvorili naslov s klasom naslova, dodajte atribut klase s vrijednošću naslov u početnu oznaku

i postavite stil za navedenu klasu. Stilovi stvoreni s klasom mogu se primijeniti na druge elemente, ne nužno te vrste.

Ako element ima više atributa klase, njihove vrijednosti su spojene razmacima.

Upute za korištenje osobnog računala

2.4. ID birač

ID birač omogućuje formatiranje jedan specifični element. ID vrijednost mora biti jedinstvena, može se pojaviti samo jednom na jednoj stranici i mora sadržavati barem jedan znak. Vrijednost ne smije sadržavati razmake.

Ne postoje druga ograničenja o tome koji oblik ID može imati, posebno identifikatori mogu biti samo znamenke, počinjati znamenkom, počinjati donjom crtom, samo interpunkcijski znakovi itd.

Jedinstveni identifikator elementa može se koristiti u različite svrhe, uključujući kao način upućivanja na određene dijelove dokumenta pomoću identifikatora fragmenata, kao način ciljanja elementa u skriptiranju i kao način stiliziranja određenog elementa iz CSS-a .

2.5. Selektor potomaka

Selektori potomaka primjenjuju stilove na elemente koji se nalaze unutar elementa spremnika. Na primjer, ul li (transformacija teksta: velika slova;) će odabrati sve li elemente koji su djeca svih ul elemenata.

Ako želite oblikovati potomke određenog elementa, morate tom elementu dati klasu stila:

p.first a (boja: zelena;) - ovaj stil će se primijeniti na sve poveznice, potomke odlomka s klasom first ;

p .first a (boja: zelena;) - ako dodate razmak, poveznice koje se nalaze unutar bilo koje oznake .first klase koja je dijete elementa bit će oblikovane

Prvo a (boja: zelena;) - ovaj stil će se primijeniti na bilo koju poveznicu koja se nalazi unutar drugog elementa, označenu klasom .first.

2.6. Izbornik djeteta

Element dijete izravno je dijete elementa koji ga sadrži. Element može imati više podređenih elemenata, a svaki element može imati samo jedan nadređeni element. Podređeni selektor dopušta primjenu stilova samo ako podređeni element dolazi odmah nakon nadređenog elementa i nema drugih elemenata između, tj. podređeni element nije ugniježđen ni u što drugo.
Na primjer, p > strong će odabrati sve jake elemente koji su djeca elementa p.

2.7. Sestra selektor

Bratski odnosi se javljaju između elemenata koji imaju zajedničkog roditelja. Selektori srodnih elemenata omogućuju vam odabir elemenata iz grupe srodnih elemenata.

h1 + p - odabire sve prve odlomke odmah iza bilo koje oznake

bez utjecaja na ostale odlomke;

h1 ~ p će odabrati sve paragrafe koji su srodni bilo kojem h1 naslovu i odmah nakon njega.

2.8. Selektor atributa

Selektori atributa biraju elemente na temelju naziva atributa ili vrijednosti atributa:

[atribut] - svi elementi koji sadrže navedeni atribut, - svi elementi za koje je postavljen atribut alt;

selektor[atribut] - elementi ove vrste koji sadrže navedeni atribut, img - samo slike za koje je postavljen alt atribut;

selector[attribute="value"] — elementi ovog tipa koji sadrže navedeni atribut s određenom vrijednošću, img — sve slike čije ime sadrži riječ cvijet ;

selektor[atribut~="vrijednost"] - elementi koji djelomično sadrže zadanu vrijednost, na primjer, ako element ima nekoliko klasa odvojenih razmakom, p - paragrafi čije ime klase sadrži značajku;

selektor[atribut|="vrijednost"] - elementi čiji popis vrijednosti atributa počinje navedenom riječju, p - paragrafi čiji naziv klase ima značajku ili počinje značajkom ;

selector[attribute^="value"] - elementi čija vrijednost atributa počinje navedenom vrijednošću, a - sve veze koje počinju s http:// ;

selektor[attribute$="value"] - elementi čija vrijednost atributa završava navedenom vrijednošću, img - sve slike u png formatu;

selector[attribute*="value"] - elementi čija vrijednost atributa sadrži navedenu riječ bilo gdje, a - sve veze čije ime sadrži book .

2.9. Selektor pseudo-klasa

Pseudo-klase su klase koje zapravo nisu pripojene HTML oznakama. Omogućuju vam da primijenite CSS pravila na elemente kada se događaj dogodi ili poštuje određeno pravilo. Pseudoklase karakteriziraju elemente sa sljedećim svojstvima:

:hover - bilo koji element nad kojim se nalazi kursor miša;

:focus - interaktivni element do kojeg se dolazilo tipkovnicom ili aktiviran mišem;

:active - element koji je aktivirao korisnik;

:valid - polja obrasca čiji je sadržaj provjeren u pregledniku za usklađenost s navedenim tipom podataka;

:invalid - polja obrasca čiji sadržaj ne odgovara navedenom tipu podataka;

:enabled - sva aktivna polja obrasca;

:disabled - onemogućena polja obrasca, tj. u neaktivnom stanju;

:in-range - polja obrasca čije su vrijednosti u navedenom rasponu;

:out-of-range - polja obrasca čije vrijednosti nisu uključene u postavljeni raspon;

:lang() - elementi s tekstom na navedenom jeziku;

:not(selektor) - elementi koji ne sadrže navedeni selektor - klasa, identifikator, ime ili tip polja obrasca - :not() ;

:target je # element koji se spominje u dokumentu;

:checked - odabrani (korisnički odabrani) elementi obrasca.

2.10. Strukturni birač pseudo-klasa

Strukturalne pseudoklase odabiru podređene elemente prema parametru navedenom u zagradama:

:nth-child(odd) - neparni podređeni elementi;

:nth-child(even) - parni elementi djeteta;

:nth-child(3n) - svaki treći element među djecom;

:nth-child(3n+2) - odabire svaki treći element, počevši od drugog elementa djeteta (+2) ;

:nth-child(n+2) - odabire sve elemente, počevši od drugog;

:nth-child(3) - odabire treći element djeteta;

:nth-last-child() - na popisu podređenih elemenata odabire element s navedenom lokacijom, slično :nth-child() , ali počevši od posljednjeg, u suprotnom smjeru;

:first-child - omogućuje stiliziranje samo prvog podređenog elementa oznake;

:last-child - omogućuje formatiranje posljednjeg podređenog elementa oznake;

:only-child - odabire element koji je jedino dijete;

:empty - odabire elemente koji nemaju djecu;

:root - odabire element koji je korijen dokumenta - html element.

2.11. Selektor pseudo-klasa strukturnog tipa

Pokažite na određenu vrstu podređene oznake:

:nth-of-type() - odabire elemente po analogiji s :nth-child() , uzimajući u obzir samo tip elementa;

:first-of-type - odabire prvo dijete zadanog tipa;

:last-of-type - odabire zadnji element zadanog tipa;

:nth-last-of-type() - odabire element zadanog tipa u popisu elemenata prema navedenoj lokaciji, počevši od kraja;

:only-of-type - odabire jedini element navedene vrste među djecom nadređenog elementa.

2.12. Selektor pseudo elemenata

Pseudoelementi se koriste za dodavanje sadržaja koji se generira pomoću svojstva sadržaja:

:prvo-slovo - odabire prvo slovo svakog odlomka, odnosi se samo na elemente bloka;

:first-line - odabire prvi redak teksta elementa, odnosi se samo na elemente bloka;

:before - umeće generirani sadržaj prije elementa;

:after - Dodaje generirani sadržaj nakon elementa.

3. Kombinacija selektora

Za precizniji odabir elemenata za oblikovanje možete koristiti kombinacije selektora:

img:nth-of-type(even) - će odabrati sve parne slike čiji alternativni tekst sadrži riječ css.

4. Selektori grupiranja

Isti stil može se primijeniti na više elemenata u isto vrijeme. Da biste to učinili, na lijevoj strani deklaracije navedite potrebne selektore odvojene zarezima:

H1, h2, p, raspon ( boja: rajčica; pozadina: bijela; )

5. Nasljeđivanje i kaskada

Nasljeđivanje i kaskadiranje dva su temeljna pojma u CSS-u koji su usko povezani. Nasljeđivanje znači da elementi nasljeđuju svojstva od svog roditelja (elementa koji ih sadrži). Kaskada se pokazuje u tome kako se različite vrste listova stilova primjenjuju na dokument i kako se proturječna pravila međusobno nadjačavaju.

5.1. Nasljedstvo

Nasljedstvo je mehanizam kojim se određena svojstva prenose s pretka na njegove potomke. CSS specifikacija predviđa nasljeđivanje svojstava povezanih s tekstualnim sadržajem stranice, kao što su boja, font, razmak između slova, visina linije, stil popisa, poravnanje teksta, uvlaka teksta, transformacija teksta, vidljivost, razmaci i razmaci između riječi. U mnogim je slučajevima to zgodno jer ne morate postavljati veličinu fonta i obitelj fontova za svaki element na web stranici.

Svojstva oblikovanja bloka se ne nasljeđuju. To su pozadina, obrub, prikaz, lebdenje i brisanje, visina i širina, margina, minimalna-maksimalna visina i širina, obris, preljev, ispuna, položaj, ukras teksta, okomito poravnanje i z-indeks.

Prisilno nasljeđivanje

Možete koristiti ključnu riječ inherit da prisilite element da naslijedi bilo koju vrijednost svojstva od svog nadređenog elementa. Ovo funkcionira čak i za svojstva koja nisu naslijeđena prema zadanim postavkama.

Kako se postavljaju i funkcioniraju CSS stilovi

1) Stilovi se mogu naslijediti od nadređenog elementa (naslijeđena svojstva ili korištenjem vrijednosti nasljeđivanja);

2) Stilovi u tablici stilova ispod nadjačavaju stilove u gornjoj tablici stilova;

3) Stilovi iz različitih izvora mogu se primijeniti na jedan element. Možete provjeriti koji se stilovi primjenjuju u razvojnom modu preglednika. Da biste to učinili, desnom tipkom miša kliknite element i odaberite Pregled koda (ili nešto slično). Desni stupac će navesti sva svojstva koja su postavljena za ovaj element ili naslijeđena od nadređenog elementa, kao i stilske datoteke u kojima su navedena, i serijski broj retka koda.

4) Kada definirate stil, možete koristiti bilo koju kombinaciju selektora - selektor elementa, pseudoklasu elementa, klasu ili identifikator elementa.

5.2. Kaskada

Kaskadno je mehanizam koji kontrolira krajnji rezultat u situaciji kada se različita CSS pravila primjenjuju na isti element. Postoje tri kriterija koji određuju redoslijed primjene svojstava - !važno pravilo, specifičnost i redoslijed kojim su stilski listovi uključeni.

Pravilo!važno

Težina pravila može se odrediti korištenjem ključne riječi !important, koja se dodaje odmah nakon vrijednosti svojstva, na primjer, span (font-weight: bold!important;) . Pravilo se mora staviti na kraj deklaracije ispred zagrade, bez razmaka. Takva će izjava imati prednost nad svim ostalim pravilima. Ovo pravilo vam omogućuje da poništite vrijednost svojstva i postavite novu za element iz grupe elemenata u slučaju kada ne postoji izravan pristup datoteci stila.

Specifičnost

Za svako pravilo preglednik izračunava selektorsku specifičnost, a ako element ima proturječne deklaracije svojstava, u obzir se uzima pravilo s najvećom specifičnošću. Vrijednost specifičnosti ima četiri dijela: 0, 0, 0, 0. Specifičnost selektora definirana je na sljedeći način:

0, 1, 0, 0 se dodaje za id;
za klasu 0, 0, 1, dodaje se 0;
0, 0, 0, 1 se dodaje za svaki element i pseudoelement;
za inline stil dodan izravno elementu, 1, 0, 0, 0;
univerzalni selektor nema specifičnosti.

H1 (boja: svijetloplava;) /*specifičnost 0, 0, 0, 1*/ em (boja: srebrna;) /*specifičnost 0, 0, 0, 1*/ h1 em (boja: zlatna;) /*specifičnost: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (boja: plava;) /*specifičnost: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .bočna traka (boja: siva;) /*specifičnost 0, 0, 1, 0 */ #bočna traka (boja: narančasta;) /*specifičnost 0, 1, 0, 0*/ li#bočna traka (boja: aqua;) /*specifičnost: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

Kao rezultat toga, na element će se primijeniti ona pravila čija je specifičnost veća. Na primjer, ako element ima dvije specifičnosti s vrijednostima 0, 0, 0, 2 i 0, 1, 0, 1, tada će drugo pravilo pobijediti.

Redoslijed povezanih tablica

Možete stvoriti više vanjskih listova stilova i povezati ih s istom web stranicom. Ako različite tablice sadrže različite vrijednosti svojstava jednog elementa, tada će se pravilo primijeniti na element koji se nalazi u listu stilova na donjem popisu.

Zadnja izmjena: 21.04.2016

Definicija stila počinje selektorom. Na primjer:

Div( širina:50px; /* širina */ visina:50px; /* visina */ boja pozadine:crvena; /* boja pozadine */ margina: 10px; /* ispuna od drugih elemenata */ )

U ovom slučaju, selektor je div. Broj selektora nasljeđuje naziv oblikovanih elemenata, kao što su div, p, h2, itd. Kada se definira takav selektor, njegov stil će se primijeniti na sve elemente koji odgovaraju danom selektoru. To jest, gore definirani stil će se primijeniti na sve elemente

na web stranici:

CSS selektori

Postoje 3 div elementa na stranici i svi će biti stilizirani:

Nastava

Ponekad isti elementi zahtijevaju različit stil. I u ovom slučaju, možemo koristiti klase.

Za definiranje selektora klase u CSS-u, točka se stavlja ispred naziva klase:

RedBlock(boja-pozadine:crvena; )

Naziv klase može biti proizvoljan. Na primjer, u ovom slučaju naziv klase je "redBlock". Međutim, dopušteno je koristiti slova, brojke, crtice i podvlake u nazivu klase, a ime klase mora započeti slovom.

Također biste trebali uzeti u obzir slučaj imena: imena "article" i "ARTICLE" predstavljat će različite klase.

Jednom kada je klasa definirana, možemo je primijeniti na element pomoću atributa class. Na primjer:

Definirajmo i koristimo nekoliko klasa:

CSS klase

Identifikatori

Za identifikaciju jedinstvenih elemenata na web stranici koriste se identifikatori koji se definiraju pomoću id atributa. Na primjer, stranica može imati glavni blok ili zaglavlje:

Definicija stilova za identifikatore slična je definiciji klasa, samo se umjesto točke stavlja znak #:

Zaglavlje stranice

Glavni sadržaj

Podnožje

Međutim, vrijedi napomenuti da se identifikatori više odnose na strukturu web stranice, a manje na stil. Klase se češće koriste za stiliziranje nego identifikatori.

Univerzalni selektor

Osim tag, class, id selektora, css ima i tzv univerzalni selektor, koji predstavlja znak zvjezdice (*). Primjenjuje stilove na sve elemente na html stranici:

*(boja pozadine: crvena; )

Oblikovanje grupe selektora

Ponekad se određeni stilovi primjenjuju na niz selektora. Na primjer, želimo primijeniti podcrtavanje na sve naslove. U ovom slučaju možemo navesti selektore svih elemenata odvojene zarezima:

CSS3

Selektori

Selektorska grupa

Neki tekst...

Grupa selektora može sadržavati selektore oznaka i selektore klase i ID-a, na primjer:

H1, #zaglavlje, .redBlock( boja: crvena; )

Ne sve, ali više nego dovoljno

Ljudi koji proučavaju XHTML, kao i CSS iz knjiga, često otkriju da CSS događaji nisu u potpunosti opisani. Konkretno, samo događaji kao što su lebdjeti, aktivan, posjećen. Postoji mnogo više CSS događaja i mogućnosti koje oni pružaju su vrlo velike.

Ovo nije potpuni popis događaja, već samo onih koji će modernom web dizajneru biti potrebni.

Ako bloku dodijelite događaj nakon, tada će generirani kod definiran u tablici stilova biti ispisan nakon bloka. CSS naredba koristi se za definiranje koda - sadržaj, čija je sintaksa content:" XHTML code ".

Oni. cijela naredba bi mogla izgledati ovako:
#someId:poslije
(sadržaj:"XHTML kod") :before Radi isto kao i after, ali ispisuje kod prije elementa: first-child Postavlja stil za prvi podređeni element nekog drugog elementa.

Recimo, primjenom ovog događaja na oznaku h1, prvi i jedini prvi naslov prve razine bit će prikazan s odgovarajućim stilom. Posebno je učinkovito koristiti ovaj događaj za stilove ugniježđenih oznaka (višerazinski), na primjer, ovako:

body ol li:first-child(...) (tj. u svim ol popisima, prvi li, ali ne i ul, bit će prikazan s danim postavkama stila)

:last-child Postavlja stil za zadnje dijete nekog drugog elementa. :focus Određuje stil za elemente obrasca koji primaju fokus, tj. one na koje kliknete. Na primjer, možete napraviti različito aktivno polje za unos teksta od neaktivnog. :hover Stil za lebdeći element. Može se koristiti sa svim blokovima i tekstom (prije smo razmatrali samo veze). :lang( x) Preslikava element u određeni jezik bez promjene sadržaja elementa na bilo koji način. Takva oznaka može se koristiti, na primjer, za isticanje poveznica na različite izvore. Umjesto x stavlja se dvoznamenkasta međunarodna oznaka jezika ili inače naziv domenske zone. Na primjer, za Rusiju jest hr, za Ameriku nas, i tako dalje. Ako element treba definirati na više jezika odjednom, oni moraju biti odvojeni crticom bez razmaka (prema opadanju važnosti stilova koje svaki jezik definira). :visited Postavlja stil posjećene veze: nth-child(x) Postavlja stil za određene elemente ili jedan određeni element. x se može izraziti:

• broj. U ovom slučaju bit će odabran samo 1 element.
• izrazi odd(svi neparni elementi) ili even(svi parni elementi).
• izraz an+b, gdje se n ne mijenja, a i b su proizvoljni brojevi. Na primjer, 7n+4. Bit će odabrani svi elementi koji daju ostatak 4 kada se podijeli sa 7. (4, 11, 18 itd.) U ovom slučaju, ako su a ili b jednaki 0, tada se mogu izostaviti. n elemenata se broji od 0 do n-1

Pažnja! Ovo ponašanje (selektor) postoji samo u novom standardu CSS 3 i podržavaju ga samo moderni preglednici. :nth-last-child(x) Isto kao nth-child(x), ali računajući od zadnjeg elementa n-1 do 0. :emply Primjenjuje stil na element koji nema djecu, tj. na praznu oznaku. :enabled Stil za odabrani, označeni element obrasca. Samo za elemente gumb, unos, optgroup, option, select, textarea. Ovaj i sljedeća dva birača samo su u CSS-u 3:onemogućeno Isto kao omogućeno, ali za onemogućene elemente obrasca:označeno Samo za radio i potvrdni okvir. Postavlja stil za odabrane elemente. :first-letter Postavlja stil za prvo slovo u tekstu (zvano kapa). Podržane su samo CSS naredbe za stiliziranje, ne i naredbe za označavanje. :first-line Isto, ali za prvi red teksta.

CSS selektori dubokog učenja

Gore opisani materijali bit će dovoljni za mnoge, ali ne za sve. Stranice velikih tvrtki, javnih projekata, društvenih mreža koriste vrlo složene CSS selektore i ponekad gore opisana funkcionalnost nije dovoljna. Osim toga, CSS mora komunicirati s programskim jezicima na strani poslužitelja, tj. Često se CSS za određene stranice generira automatski. Pritom mora funkcionirati besprijekorno i ispravno.

Spomenuli smo nasljednost elemenata. Sada ćemo to dublje analizirati.

CSS može definirati pravila za različite vrste nasljeđivanja ili pripadnost elemenata nadređenom elementu. Sve one služe samo za odabir elemenata na koje će se pravilo primijeniti.

Kombinatori (stvaranje veze između stilova na temelju nasljeđivanja)
Susjedni brat ili sestra (+)	Ovaj kombinator definira 2 elementa koji odmah slijede jedan iza drugog (nema drugih elemenata između njih s istim roditeljem kao ta 2 elementa, ali mogu postojati elementi naslijeđeni od njih) i imaju istog roditelja. Stil se primjenjuje na oba elementa odjednom. Sintaksa snimanja (razmaci se ne računaju) E+F(...) gdje je E prvi element, F je drugi element. Na primjer, h1+h2(familija-fontova:serif) Ovaj unos će samo definirati stil za uzastopne elemente h1 i h2 koji imaju istog roditelja. Ako postoji druga oznaka h2 nakon h2, tada se stil ne primjenjuje na nju.
Dijete (>) kombinator	Kombinator određuje sve elemente koji su izravni potomci jednog elementa. Podržava više razina ugniježđivanja, na primjer: tijelo > div > p(...) To jest, stil će se primijeniti samo na odlomke koji su djeca svih divova koji izravno pripadaju oznaci tijela.
potomak	Definira proizvoljan odnos između elemenata. To jest, elementi ne moraju biti izravni potomci, već jednostavno potomci jednog elementa. Sintaksa (potreban prostor): E F(...) Na primjer: table.table1td(...) To jest, stil će biti definiran u svim stupcima potomcima tablice s klasom table1, čak i ako postoje druge tablice unutar ove tablice. Stupci tablica potomaka također će imati primijenjen stil.
Opći brat i sestra (~)	Sintaksa E~F. Kombinator obavlja istu funkciju kao susjedni srodni element, osim što može postojati bilo koji broj elemenata iste razine ugniježđenja između E i F, a može postojati više od jednog F.
atributi. Selektori atributa. Stvaranje vlastitih atributa
Kvaliteta [=]	Svaka oznaka može imati atribut (na primjer, atribut id, koji može imati gotovo svaka oznaka, ili atribut širine (samo za blokove)). Možete stvoriti vlastiti atribut, koji je tekstualni niz. Na primjer, attr. Stvaranje prilagođenih atributa korisno je za birače atributa u CSS-u. Atributi se mogu koristiti u kombinaciji s kombinatorima. Jednakost definira stil za sve elemente čiji je navedeni atribut točno jednak navedenoj vrijednosti. Sintaksa: {...} Kao što vidite, ovdje nema definiranih oznaka. Stilovi su definirani za sve elemente koji imaju atribut att jednaka je vrijednosti val. Att i val mogu uzeti vrijednosti identifikatora (na primjer, za att mogu postojati bilo koji naučeni atributi, za val - ništa, blok itd.) i vrijednosti niza, tj. samo riječ (na primjer, definirat će sve elemente s unosom<... attr="test" ...="">).
Postojanje	Definira sve elemente koji imaju atribut, bez obzira na njegovu vrijednost. Sintaksa: {...} att - atribut (ili vrijednost niza, tj. vlastiti atribut)
prefiks [^=]	Definira elemente koji imaju atribut att koji uzima vrijednost koja počinje s val. Sintaksa: {...} att - atribut (ili string vrijednost, tj. vlastiti atribut), val - vrijednost atributa Vrlo dobar primjer je Wikipedia. Na ovoj stranici sve poveznice koje vode na stranice koje nisu Wikipedia imaju ikonu (strelicu) iza sebe. Evo primjera unosa koji vam omogućuje pisanje ovog stila: :nakon(sadržaj" "}
Sufiks [$=]	Definira elemente koji imaju atribut att koji uzima vrijednost koja završava na val. Sintaksa {...} Takav se atribut odnedavno koristi za stavljanje slika ispred raznih poveznica koje korisniku vizualno ukazuju na koju datoteku, stranicu će ga poveznica poslati. Na primjer, ispred poveznica na PDF datoteke može stajati PDF ikona. Primjer: :prije (sadržaj:" "}
Podniz [*=]	Sintaksa zapisa: {...} Odabire sve elemente s atributom att čija vrijednost uključuje podniz val. Na primjer, "54" je podniz "132 54 6", "val" - podniz "vrijednost" itd.
[~=]	Razmak je isto što i podniz, ali podniz mora biti riječ, tj. okružen razmacima u nizu.
Crtica[|=]	Isto kao i podniz, ali podniz mora biti dio atributa i odvojen od ostalih dijelova crticom. Primjer: {...} će odabrati sve oznake s atributom lang koji sadrži en u vrijednosti, kao što su en-ru, ru-de-en, itd.

Ovo zaključuje proučavanje XHTML+CSS-a. Daljnje lekcije govorit će o JavaScriptu.

CSS selektori definirati elemente na koje se primjenjuje skup CSS pravila.

Osnovni selektori

Univerzalni selektor Odabire sve elemente. Po izboru, može se ograničiti na određeni prostor imena ili na sve prostore imena.
Sintaksa:*ns |* *|*
Primjer:* će odgovarati svim elementima dokumenta. Birač tipa Odabire sve elemente koji imaju dani naziv čvora.
Sintaksa: ime elementa
Primjer: unos će odgovarati bilo kojem elementu koristi se za stvaranje interaktivnih kontrola za web-bazirane obrasce kako bi se prihvatili podaci od korisnika; dostupan je veliki izbor tipova ulaznih podataka i kontrolnih widgeta, ovisno o uređaju i korisničkom agentu. "> element. Birač klase Odabire sve elemente koji imaju zadani atribut klase.
Sintaksa:. ime klase
Primjer:.index će odgovarati bilo kojem elementu koji ima klasu "index". ID birač Odabire element na temelju vrijednosti njegovog ID atributa. U dokumentu bi trebao postojati samo jedan element s danim ID-om.
Sintaksa:#idname
Primjer:#toc će odgovarati elementu koji ima ID "toc". Selektor atributa Odabire sve elemente koji imaju dani atribut.
Sintaksa:[ attr ] [ attr = vrijednost ] [ attr ~= vrijednost ] [ attr |= vrijednost ] [ attr ^= vrijednost ] [ attr $= vrijednost ] [ attr *= vrijednost ]
Primjer: odgovarat će svim elementima koji imaju postavljen atribut autoplay (na bilo koju vrijednost).

Selektori grupiranja

Popis birača , je metoda grupiranja, ona odabire sve podudarne čvorove.
Sintaksa: A, B
Primjer: div, span će odgovarati oba i ) je generički spremnik za sadržaj protoka. Nema utjecaja na sadržaj ili izgled dok se ne stilizira pomoću CSS-a.">

elementi.

Kombinatori

Kombinator potomaka (prostorni) kombinator odabire čvorove koji su potomci prvog elementa.
Sintaksa: A B
Primjer: div span će odgovarati svim elementima koji se nalaze unutar a ) je generički spremnik za sadržaj protoka. Nema utjecaja na sadržaj ili izgled dok se ne stilizira pomoću CSS-a.">

element. Kombinator dijete > kombinator odabire čvorove koji su izravna djeca prvog elementa.
Sintaksa: A > B
Primjer: ul > li će odgovarati svim elementima koji se koriste za predstavljanje stavke na popisu.">

elementi koji su ugniježđeni izravno unutar elementa predstavljaju neuređeni popis stavki, obično prikazan kao popis s grafičkim oznakama.">

element. Opći sibling combinator ~ combinator odabire siblings. To znači da drugi element slijedi prvi (iako ne nužno odmah), a oba dijele istog roditelja.
Sintaksa: A~B
Primjer: p ~ raspon će odgovarati svim elementima koji slijede element predstavlja odlomak.">

, odmah ili ne. Kombinator susjednih sistara Kombinator + odabire susjedne siblings. To znači da drugi element izravno slijedi prvi i da oba dijele istog roditelja.
Sintaksa: A+B
Primjer: h2 + p će odgovarati svim elementima koji predstavljaju odlomak.">

elementi koji izravno slijede

. Kombinator stupaca The || kombinator odabire čvorove koji pripadaju stupcu.
Sintaksa: A || B
Primjer: stupac || td će odgovarati svim elementima koji definiraju ćeliju tablice koja sadrži podatke. Sudjeluje u modelu tablice."> Elementi koji pripadaju opsegu elementa definiraju stupac unutar tablice i koriste se za definiranje zajedničke semantike na svim zajedničkim ćelijama. Obično se nalazi unutar a element."> .

Pseudo

Pseudo klase: pseudo dopuštaju odabir elemenata na temelju informacija o stanju koje nisu sadržane u stablu dokumenta.
Primjer: a:visited će odgovarati svim elementima (ili elementu sidra), sa svojim atributom href, stvara hipervezu na web stranice, datoteke, adrese e-pošte, lokacije na istoj stranici ili bilo što drugo što URL može adresirati."> elemente koji su posjetio korisnik. Pseudo elementi:: pseudo predstavljaju entitete koji nisu uključeni u HTML.
Primjer: p::first-line će odgovarati prvom retku svih elemenata koji predstavljaju odlomak.">

elementi.

Tehnički podaci

Specifikacija	Status	Komentar

Skup pravila dizajna (koji se pak sastoje od birača s blokom oglasa) primijenjenih na određene html oznake, zahvaljujući kojima se formira izgled web mjesta.

CSS birač- ovo je sastavni dio CSS pravila odgovornog za određivanje specifičnih html oznaka na koje će se primjenjivati ​​stilovi dizajna navedeni u ovom pravilu.

Dakle, zahvaljujući selektorima preglednik razumije koji elementi koda stranice trebaju primijeniti određene stilove dizajna.

Alat za odabir elemenata u CSS-u iznimno je fleksibilan i prikladan za odabir pojedinačnih elemenata koda i cijelih skupina elemenata definiranih jednom ili drugom značajkom.

Vrste css selektora

Poput rečenica u tekstu, CSS selektori dolaze u jednostavnim i složenim oblicima. Razlika između njih je u tome što se složeni dobivaju kombiniranjem nekoliko jednostavnih i koriste se za fino podešavanje konačnog dizajna resursa.

Samo za razliku od običnog teksta u kaskadnim listovima stilova važno je kojim redoslijedom i koje selektore koristimo. Štoviše, o tome će ovisiti ne samo koje elemente i na kojoj osnovi biramo, već i brzina obrade našeg koda u cjelini, ali o suptilnostima ćemo govoriti u budućim člancima.

Jednostavni selektori

• Univerzalni selektor je odgovoran za općenito odabir svih elemenata u dokumentu. Određeno zvjezdicom. Obično se koristi za resetiranje stilova preglednika instaliranih u njima prema zadanim postavkama, tako da svi koji posjete web mjesto ne izgube dizajn u slučaju korištenja nekih vlastitih postavki preglednika ili raznih dodataka ...

  * ( malo stila; )

• Birač vrste - odabire sve oznake koje odgovaraju određenoj vrsti. Određeno nazivom oznake. Koristi se za postavljanje općih pravila za dizajn dokumenta, na primjer, postavljanje različitih fontova za naslove i običan tekst dokumenta.

  h1 (malo stila;)

• – primijenit će css pravilo na sve oznake s određenim nazivom klase. Određeno točkom iza koje je odmah napisano ime klase. Možda najčešći selektor u rasporedu. Obično se koristi za postavljanje različitih stilova za oznake iste vrste, ali različite funkcionalnosti.

  Lijevi stupac ( neki stil; )

• Selektor ID-a koristi se za stiliziranje jedinstvenih elemenata na stranici. Postavlja hash iza kojeg slijedi naziv ID-a. Koristi se ako trebate stilizirati jedan određeni element stranice.

  #alertButton ( neki stil; )

• – odabire oznake koje imaju prisutan atribut. Određeno nazivom atributa u uglatim zagradama. Može se koristiti i za dizajniranje grupe oznaka u kojoj je navedeni atribut jednostavno prisutan, kao i za grupu oznaka u kojoj je prisutan navedeni atribut s određenom vrijednošću.

  [ tip] (neki stil; ) [ tip= "pošalji" ] (neki stil; ) unos[ tip= "pošalji" ] (neki stil; )

Složeni selektori

• Selektor potomaka – izbor potomaka (tagova unutar drugog taga) elemenata. Određeno razmakom (roditelj - razmak - dijete).

  div p ( neki stil; )

• Birač djeteta - odabire element izravno ugniježđen unutar drugog elementa. Određeno simbolom ">" (roditelj-ček-dijete). Element dijete razlikuje se od elementa djeteta po tome što dolazi neposredno nakon roditelja (prva razina ugniježđivanja). Dok se svaka oznaka unutar druge smatra potomkom, bez obzira na razinu ugniježđenja.

  Bočna traka> ul ( neki stil; )

• Selektor srodnog elementa - odabire oznaku koja dolazi odmah nakon druge oznake (nije unutar nje, već slijedi). Postavljeno plusom (prvi element - plus - sestrinski element). Rijetko se koristi u praksi. Preduvjet za prijavu je prisutnost zajedničkog roditelja za sve elemente s kombiniranim znakom "+".

  h1+ p ( neki stil; )

Pseudoklase i pseudoelementi

Gornja klasifikacija CSS selektora ovisila je isključivo o oznakama dokumenta. Ako želimo promijeniti izgled elementa ovisno o promjeni njegovog stanja na stranici (primjerice, mijenjanje boje gumba pri lebdenju), tada možemo koristiti selektore pseudo-klasa i pseudo-elemenata.

• Zapamtite da za razliku od html-a, CSS razlikuje velika i mala slova. Odnosno, klase .active i .Active nisu iste stvari! Oni će se primijeniti na različite elemente, ako postoje, u dokumentu.
• Imenujte selektore za dekoraciju tako da se kasnije ne zbunite: .leftColumn je dobar naziv, .left ovisi o situaciji, ali ne baš dobar, .llll je nekakvo smeće, sami ćete reći bez gledajući kod odakle dolazi ova klasa?
• Još jednom da vas podsjetim - ako postoji samo jedan element na stranici, dakle sav jedinstven, onda za njega koristimo id, ali ako postoji mogućnost da će na stranici biti još jedan takav ili jednostavno sličan element, onda koristite klase za dekoraciju.

Sumirati

Selektori u CSS-u- ovo je moćan alat za prepoznavanje određenih elemenata stranice ili grupe elemenata objedinjenih određenom značajkom za daljnju primjenu stilova na njih iz oglasnog bloka koji se odnosi na ovaj birač.

Nakon savladavanja općih principa interakcije i izrade selektora, zaboravit ćete na probleme s dizajnom web dokumenata. Dobro poznavanje selektora može značajno smanjiti vrijeme izgleda html stranica.

Tema, iako na prvi pogled djeluje krajnje zbunjujuće, postaje jednostavna i razumljiva nakon razdoblja prakse, potkrijepljene kvalitativnom teorijom.