na web stranici:

CSS selektori

Na stranici se nalaze 3 elementa div i svi će biti stilizirani:

Casovi

Ponekad isti elementi zahtijevaju drugačiji stil. I u ovom slučaju možemo koristiti klase.

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

RedBlock(boja pozadine:crvena; )

Ime klase može biti proizvoljno. Na primjer, u ovom slučaju ime klase je "redBlock". Međutim, dozvoljeno je koristiti slova, brojeve, crtice i donje crte u nazivu klase, a naziv klase mora početi slovom.

Trebalo bi uzeti u obzir i slučaj imena: imena "članak" i "ARTICLE" će predstavljati različite klase.

Jednom kada je klasa definirana, možemo je primijeniti na element koristeći atribut 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 blok zaglavlja ili zaglavlje:

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

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

Univerzalni selektor

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

*( boja pozadine: crvena; )

Stiliziranje grupe selektora

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

CSS3

Selektori

Grupa birača

Neki tekst...

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

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

CSS (Cascading Style Sheets) ili Cascading Style Sheets, koriste se za opisivanje izgleda dokumenta napisanog u markup jeziku. CSS stilovi se obično koriste za kreiranje i stilizovanje elemenata veb stranice i korisničkog interfejsa napisanih u HTML i XHTML, ali se takođe mogu primeniti na bilo koju vrstu XML dokumenta, uključujući XML, SVG i XUL.

Kaskadni listovi stilova opisuju kako se elementi formatiraju koristeći svojstva i važeće vrijednosti za ta svojstva. Za svaki element možete koristiti ograničen skup svojstava, druga svojstva neće imati nikakav utjecaj na njega.

Deklaracija stila sastoji se od dva dijela: elementa web stranice − selektor, i naredbe za formatiranje - oglasni blok. Selektor govori pretraživaču koji element da formatira, a blok deklaracije (kod u vitičastim zagradama) navodi komande za formatiranje – svojstva i njihove vrednosti.

Rice. 1. Struktura deklaracije CSS stila

Vrste kaskadnih stilova i njihove specifičnosti

1. Vrste stilova

1.1. Eksterni stilski list

Eksterni stilski list je tekstualna datoteka sa ekstenzijom .css, koja sadrži skup CSS stilova za elemente. Fajl se kreira u uređivaču koda, baš kao HTML stranica. Datoteka može sadržavati samo stilove, bez HTML oznake. Eksterni stilski list je pričvršćen na web stranicu pomoću oznake nalazi unutar sekcije . Ovi stilovi funkcionišu za sve stranice sajta.

Možete priložiti više listova stilova svakoj web stranici dodavanjem više oznaka u nizu , specificirajući svrhu ovog stilskog lista u atributu oznake medija. rel="stylesheet" označava tip veze (link do stylesheet-a).

Atribut type="text/css" nije obavezan HTML5 standardom, tako da se može izostaviti. Ako atribut nedostaje, podrazumevano je type="text/css" .

1.2. Interni stilovi

Interni stilovi ugrađen u sekciju HTML dokument i definirani su unutar oznake. Interni stilovi imaju prednost u odnosu na eksterne stilove, ali poništavaju inline stilove (navedene preko atributa style).

...

1.3. Inline Styles

Kada pišemo umetnuti stilovi, pišemo CSS kod u HTML datoteku, direktno unutar oznake elementa koristeći atribut style:

Obratite pažnju na ovaj tekst.

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

1.4. @import pravilo

@import pravilo omogućava vam učitavanje eksternih stilova. Da bi direktiva @import radila, ona mora biti postavljena u listu stilova (vanjska ili interna) prije svih ostalih pravila:

Pravilo @import se također 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 kreiranje pravila za formatiranje elemenata web stranice. Selektori mogu biti elementi, njihove klase i identifikatori, kao i pseudo-klase i pseudo-elementi.

2.1. Univerzalni selektor

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

2.2. Birač elemenata

Selektori elemenata vam omogućavaju da formatirate sve elemente date vrste na svim stranicama vaše web stranice. Na primjer, h1 (familija fontova: Lobster, cursive;) će postaviti opći stil oblikovanja za sve h1 naslove.

2.3. selektor klase

Selektori klasa vam omogućavaju da stilizujete jedan ili više elemenata sa istim imenom klase, postavljenih na različitim mestima na stranici ili na različitim stranicama sajta. Na primjer, da biste kreirali naslov s klasom naslova, dodajte atribut class sa naslovom vrijednosti u početnu oznaku

i postavite stil za navedenu klasu. Stilovi kreirani klasom mogu se primijeniti na druge elemente, ne nužno tog tipa.

Uputstvo za korišćenje personalnog računara

.headline (transformacija teksta: velika slova; boja: svijetloplava; )

2.4. ID selektor

ID birač omogućava formatiranje jedan specifični element. ID identifikator mora biti jedinstven i može se pojaviti samo jednom na jednoj stranici.

#sidebar (širina: 300px; float: lijevo; )

2.5. Selektor potomaka

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

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

p.prvi a (boja: zelena;) - ovaj stil će se primijeniti na sve veze, potomke pasusa sa klasom prva;

p .first a (boja: zelena;) - ako dodate razmak, onda će veze koje se nalaze unutar bilo koje oznake .first class koja je potomak elementa biti stilizirane

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

2.6. Selektor djece

Podređeni element je direktno dijete elementa koji ga sadrži. Element može imati više podređenih elemenata, a svaki element može imati samo jedan roditeljski element. Podređeni selektor dozvoljava da se stilovi primjenjuju samo ako podređeni element dolazi odmah iza nadređenog elementa i nema drugih elemenata između, tj. podređeni element nije ugniježđen ni u šta drugo.
Na primjer, p > strong će odabrati sve jake elemente koji su potomci elementa p.

2.7. Sestra selektor

Odnosi između sestara se javljaju između elemenata koji imaju zajedničkog roditelja. Selektori srodnih elemenata vam omogućavaju da odaberete elemente iz grupe srodnih elemenata.

h1 + p - odabire sve prve pasuse odmah nakon bilo koje oznake

bez uticaja na ostale paragrafe;

h1 ~ p će odabrati sve paragrafe koji su braća i sestre bilo kojeg h1 naslova i odmah nakon njega.

2.8. Selektor atributa

Selektori atributa odabiru elemente na osnovu imena atributa ili vrijednosti atributa:

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

selector[attribute] - elementi ovog tipa 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 sa određenom vrijednošću, img — sve slike čiji nazivi sadrže riječ cvijet ;

selector[attribute~="value"] - elementi koji djelimično sadrže datu vrijednost, na primjer, ako element ima nekoliko klasa odvojenih razmakom, p - paragrafi čije ime klase sadrži funkciju;

selector[attribute|="value"] - elementi čija lista vrijednosti atributa počinje navedenom riječju, p - paragrafi čije ime klase karakteriše ili počinje sa karakteristika ;

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

selector[attribute$="value"] - elementi čija se 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. Pseudo-klasa selektor

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

:hover - bilo koji element na koji se pređe kursorom miša;

:focus - interaktivni element do kojeg se kretalo pomoću tastature ili aktivirano mišem;

:active - element koji je korisnik aktivirao;

:valid - polja obrasca čiji je sadržaj potvrđen u pretraživaču za usklađenost sa 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 forme čije su vrijednosti u navedenom rasponu;

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

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

:not(selector) - elementi koji ne sadrže specificirani selektor - klasu, identifikator, naziv ili tip polja forme - :not() ;

:target je # element koji je referenciran u dokumentu;

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

2.10. Strukturni birač pseudoklasa

Strukturne pseudo-klase odabiru podređene elemente prema parametru navedenom u zagradama:

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

:nth-child(even) - parni podređeni elementi;

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

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

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

:nth-child(3) - odabire treći podređeni element;

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

:first-child - omogućava vam da stilizirate samo prvi podređeni element oznake;

:last-child - omogućava vam da formatirate posljednji podređeni element oznake;

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

:empty - odabire elemente koji nemaju djece;

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

2.11. Selektor pseudo-klase strukturnog tipa

Pokažite na određeni tip podređene oznake:

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

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

:last-of-type - odabire posljednji element datog tipa;

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

:only-of-type - odabire jedini element navedenog tipa među potomcima roditeljskog elementa.

2.12. Pseudo selektor elemenata

Pseudoelementi se koriste za dodavanje sadržaja koji je generiran korištenjem svojstva sadržaja:

:first-letter - bira prvo slovo svakog pasusa, odnosi se samo na blok elemente;

:first-line - odabire prvi red teksta elementa, odnosi se samo na blok elemente;

:before - ubacuje generirani sadržaj prije elementa;

:after - Dodaje generirani sadržaj nakon elementa.

3. Kombinacija selektora

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

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

4. Selektori grupisanja

Isti stil se može 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: paradajz; pozadina: bijela; )

5. Nasljeđivanje i kaskada

Nasljeđivanje i kaskada su dva temeljna koncepta 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 stilskih tablica primjenjuju na dokument i kako sukobljena pravila nadjačavaju jedno drugo.

5.1. Nasljedstvo

Nasljedstvo je mehanizam kojim se određena svojstva prenose sa predaka na njegove potomke. CSS specifikacija predviđa nasljeđivanje svojstava vezanih za tekstualni sadržaj stranice, kao što su boja, font, razmak između slova, visina reda, stil liste, poravnanje teksta, uvlačenje teksta, transformacija teksta, vidljivost, razmak između riječi i razmak između riječi. U mnogim slučajevima, ovo je zgodno jer ne morate postavljati veličinu fonta i porodicu fontova za svaki element na web stranici.

Svojstva oblikovanja bloka se ne nasljeđuju. To su pozadina, granica, prikaz, float i clear, visina i širina, margina, min-max-height i -width, outline, overflow, padding, position, text-decoration, vertical-align i z-index.

Prinudno nasljeđivanje

Možete koristiti ključnu riječ inherit da prisilite element da naslijedi bilo koju vrijednost svojstva od svog roditeljskog elementa. Ovo radi čak i za svojstva koja nisu naslijeđena po defaultu.

Kako su CSS stilovi postavljeni i funkcionišu

1) Stilovi se mogu naslijediti od roditeljskog elementa (naslijeđene osobine ili korištenje vrijednosti nasljeđivanja);

2) Stilovi u listi stilova ispod poništavaju stilove u listi stilova iznad;

3) Stilovi iz različitih izvora mogu se primijeniti na jedan element. Možete provjeriti koji se stilovi primjenjuju u modu programera pretraživača. Da biste to učinili, kliknite desnim tasterom miša na element i odaberite Prikaži kod (ili nešto slično). Desna kolona će ispisati sva svojstva koja su postavljena za ovaj element ili naslijeđena od nadređenog elementa, kao i stilske datoteke u kojima su specificirane i serijski broj reda koda.

Rice. 2. Developer Mode u Google Chrome pretraživaču

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

div (bord: 1px solid #eee;) #wrap (širina: 500px;) .box (float: lijevo;) .clear (clear: oboje;)

5.2. kaskada

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

Pravilo!važno

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

Specifičnost

Za svako pravilo pretraživač izračunava specifičnost selektora, a ako element ima konfliktne deklaracije svojstva, pravilo s najvećom specifičnošću se uzima u obzir. Vrijednost specifičnosti ima četiri dijela: 0, 0, 0, 0. Specifičnost selektora je definirana na sljedeći način:

0, 1, 0, 0 se dodaje za id;
za klasu 0, 0, 1, 0 se dodaje;
0, 0, 0, 1 se dodaje za svaki element i pseudo-element;
za inline stil dodan direktno 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 */ #sidebar (boja: narandžasta;) /*specifičnost 0, 1, 0, 0*/ li#sidebar (boja: aqua;) /*specifičnost: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

Kao rezultat, ta pravila, čija je specifičnost veća, bit će primijenjena na element. Na primjer, ako element ima dvije specifičnosti sa vrijednostima 0, 0, 0, 2 i 0, 1, 0, 1, onda će drugo pravilo pobijediti.

Redoslijed povezanih stolova

Možete kreirati više eksternih stilova i povezati ih na istu web stranicu. Ako različite tablice sadrže različite vrijednosti svojstava jednog elementa, kao rezultat toga, pravilo će se primijeniti na element koji se nalazi u listi stilova na listi ispod.

Ovaj materijal posvećen je osnovama stiliziranja na internetskom resursu pomoću selektora.

Selektori u CSS-u se koriste za definiranje određenog
element u html stranici koji treba primijeniti
ili promijenite CSS stil.

Vrste selektora u CSS-u

Birač elemenata

Da bi se u ovom slučaju dao potreban CSS stil, ime html elementa se piše kao selektor. Na primjer, dovoljno je propisati željeni stil za naslov H1, nakon čega će ti naslovi poprimiti oblik koji nam je potreban. Ovako će izgledati kod:

H1(
veličina fonta: 11pt
}

Često postoje trenuci kada trebate napraviti naslove u različitim stilovima. Ovdje će selektor klase pomoći u rješavanju ovog problema.

Selektor klase

Selektor klase je univerzalan u CSS-u. Možete ga napisati na sljedeći način: ispred naziva klase pišemo tačku, a tek onda u vitičastim zagradama označavamo stil koji nam je potreban:

.red(
porodica fontova: tahoma, sans-serif;
boja: crvena;
veličina fonta: 11pt
}

Primjer korištenja selektora klase. Primijenimo ovaj stil na naslov H1 na html stranici:

Naslov stranice

Iz gornjeg primjera možete vidjeti da je atribut "class" primijenjen sa datim imenom CSS stila " crvena".
Još jedan primjer. U html dijelu pišemo:

Ovaj naslov je plave boje jer je na njega primijenjena odgovarajuća klasa.

id".

U html dokumentu bi to izgledalo ovako:

Postavite stil za ovaj paragraf

U CSS dokumentu:

p#newstyle ( boja: plava; veličina fonta: 12px;)

Kao rezultat, font za ovaj pasus će biti plavi i veličine 12px.

Selektor konteksta

Jednako važna komponenta je selektor konteksta.
Na primjer, web-mjestu su bili potrebni naslovi "H1" ograđeni oznakom bold označi crvenom bojom:

H1 podebljano ( boja:crvena ; )

Kao što vidite, prvo se piše naslov H1, stavlja se razmak, oznaka bold a zatim u zagradama stil koji smo naveli. Možete to izraziti riječima poput ove: "Ako postoji podebljana oznaka unutar H1 naslova, tekst bi trebao biti crven."

Na ovaj način možete postaviti i stilove za stavke liste sa nabrajanjem, tabele, pa čak i njihove ćelije, i sa različitim nivoima ugniježđenja.

Sljedeća stranica -

Selektor određuje na koji element primijeniti određeno CSS pravilo.

Osnovni selektori

Selektori elemenata Ovaj osnovni selektor bira element na koji će se pravilo primijeniti.
sintaksa:element
primjer: selektor unosa će odabrati sve elemente koji se koriste za kreiranje interaktivnih kontrola u web obrascima."> . Selektori klasa Ovaj osnovni selektor bira elemente na osnovu vrijednosti njihovog atributa klase.
sintaksa: .ime klase
primjer:.index selektor će odabrati sve elemente s odgovarajućom klasom (koja je definirana u atributu class="index" ili slično). ID selektori Ovaj osnovni selektor bira elemente na osnovu vrijednosti njihovog id atributa. Imajte na umu da ID mora biti jedinstven, tj. koristiti samo za jedan element u HTML dokumentu.
sintaksa:#nameIdentifier
primjer:#toc selektor će odabrati element sa id toc (koji je definiran u id="toc" atributu ili slično). Univerzalni selektor Ovaj osnovni selektor bira sve elemente. Također postoji u varijanti za lokalne i globalne prostore imena.
sintaksa:*ns|* *|*
primjer: selektor * će izabrati sve elemente. Selektori atributa Ovaj osnovni selektor bira elemente na osnovu jednog od njihovih atributa i/ili njegove vrijednosti.
sintaksa:
primjer: selektor će odabrati sve elemente sa atributom autoplay (bez obzira na njegovu vrijednost).

kombinatori

Kombinator "+" odabire element odmah nakon navedenog elementa ako imaju zajedničkog roditelja.
sintaksa: A+B
primjer: selektor ul + li će odabrati bilo koji element koji dolazi neposredno iza elementa

. Selektori siblinga Kombinator "~" odabire elemente koji su nakon navedenog elementa ako imaju zajedničkog roditelja.
sintaksa: A~B
primjer: p ~ span će odabrati sve elemente , koji su nakon što element definira pasus teksta.">

u okviru jednog roditelja. Selektori djece Kombinator ">" odabire elemente koji su direktno podređeni određenom elementu.
sintaksa: A > B
primjer: selektor ul > li će odabrati sve elemente koji se nalaze unutar elementa

element. Ugniježđeni selektori Kombinator " " bira elemente koji se nalaze unutar navedenog elementa (bez obzira na nivo ugniježđenja).
sintaksa: A B
primjer: div span selektor će odabrati sve elemente , koji se nalaze unutar elementa) je osnovni kontejner za elemente glavnog toka (sadržaj toka). Ne utiče na sadržaj ili format osim ako nije stilizovan pomoću CSS-a. Biti "> inherentno ne predstavlja ništa. U međuvremenu, koristi se za grupisanje sadržaja, što olakšava stiliziranje pomoću ">
.

Pseudo elementi

Pseudoelementi su apstraktni, za razliku od HTML elemenata koji su odgovorni za prezentaciju. Na primjer, HTML nema zasebne elemente koji predstavljaju prvo slovo ili red teksta, ili marker za neuređenu listu. Pseudoelementi označavaju takve objekte i omogućavaju njihovo stilizovanje pomoću CSS-a.

Pseudo klase

Pseudo-klase vam omogućavaju da odaberete elemente na osnovu informacija koje se ne nalaze u stablu elemenata, kao što su stanje ili drugi podaci koje je teško izolirati na bilo koji drugi način. Na primjer, oni mogu odabrati link koji je prethodno posjećen ili nije.

Specifikacije

Specifikacija	Status