css selektor tipa elementa. Selektori. Selektori u CSS-u
Šta je selektor u css-u je opis tog elementa ili grupe elemenata, koji pokazuje pretraživaču koji element da odabere da primeni stil na njega. Pogledajmo osnovne CSS selektore.
1) .X
.topic-title (boja pozadine: žuta; )CSS selektor po klasi X. Razlika između id-a i klase je u tome što više elemenata na stranici može imati istu klasu, a id je uvijek jedinstven. Klase bi se trebale koristiti za primjenu istog stila na više elemenata.
- Chrome
- Firefox
- safari
- Opera
2) #X
#content ( širina: 960px; margina: 0 auto; )CSS selektor po id. Znak funte ispred CSS selektora X odabire element čiji je id = X. Kada stilizirate po id-u, uvijek treba imati na umu da on mora biti jedinstven - na stranici bi trebao biti samo jedan takav id. Stoga je bolje koristiti selektore prema klasi, kombinacijama klasa ili nazivima oznaka. Međutim, id selektori su odlični za automatsko testiranje jer su omogućavaju vam da odmah stupite u interakciju s pravim elementom i budite sigurni da je on jedini na stranici.
- Koji pretraživači su podržani:
- Chrome
- Firefox
- safari
- Opera
3) *
* ( margina: 0; dopuna: 0; )CSS selektor za sve elemente. Simbol zvjezdice odabire sve elemente koji se nalaze na stranici. Mnogi programeri ga koriste za uklanjanje (nuliranje) margina (margina i padding) svih elemenata stranice. Međutim, u praksi je bolje da to ne radite jer ovaj CSS selektor prilično učitava pretraživač prelaskom preko svih elemenata na stranici.
Simbol * se također može koristiti za odabir svih podređenih elemenata:
#header * ( granica: 5px čvrsto siva; )
Ovaj primjer odabire svu djecu (potomke) elementa sa #header . Ali uvijek je vrijedno zapamtiti da je ovaj selektor prilično težak za pretraživač.
- Koji pretraživači su podržani:
- Chrome
- Firefox
- safari
- Opera
4) X
a ( boja: zelena; ) ol ( margin-left: 15px; )CSS selektor tipa. Kako odabrati sve elemente istog tipa ako nemaju ni ID ni klasu? Trebali biste koristiti CSS selektor prema tipu elementa. Na primjer, da odaberete sve uređene liste na stranici, koristite ol (...) kao što je prikazano iznad.
- Koji pretraživači su podržani:
- Chrome
- Firefox
- safari
- Opera
5) X Y
li a (težina fonta: bold; dekoracija teksta: nema; )CSS selektor djece ili CSS selektor djece najčešće koriste. Koristi se kada je potrebno odabrati elemente određenog tipa iz skupa podređenih elemenata. Na primjer, trebate istaknuti sve veze koje se nalaze u elementu li. U ovom slučaju koristite ovaj selektor. Kada koristite lance takvih selektora, uvijek se zapitajte da li možete koristiti još kraći niz selektora za odabir datog elementa.
- Koji pretraživači su podržani:
- Chrome
- Firefox
- safari
- Opera
6) X + Y
div + p (familija fontova: "Helvetica Neue", Arial, sans-serif; veličina fonta: 18px; )Birač susjednih elemenata bira samo element tipa Y koji dolazi odmah iza elementa X. U ovom slučaju, svaki pasus koji slijedi odmah iza svakog elementa div će dobiti posebnu vrstu i veličinu fonta.
- Koji pretraživači su podržani:
- IE7+
- Firefox
- Chrome
- safari
- Chrome
7) X > Y
#content > ul ( granica: 1px puna zelena; )CSS selektor djece. Razlika između selektora X Y i X > Y je u tome što će dotični CSS selektor odabrati samo neposredne podređene elemente (odabrati samo direktne potomke). npr.:
- Stavka liste
- Potomak prvog elementa liste
- Stavka liste
- Stavka liste
#content > ul CSS selektor će odabrati samo ul koji je direktno dijete div sa id="container" . Neće odabrati ul koji je dijete prvog li. Ovo je prilično brz CSS selektor.
- Koji pretraživači su podržani:
- Chrome
- Firefox
- safari
- Opera
8) X ~ Y
ol ~ p ( margin-left: 10px; )Selektor sestrinskih (podjezičnih) elemenata manje striktan od X + Y. Odabraće ne samo prvi, već i sve ostale elemente p nakon ol.
- Koji pretraživači su podržani:
- Chrome
- Firefox
- safari
- Opera
Pseudo-klasa: veza koristi se za odabir svih linkova na koje još niste kliknuli. Ako trebate primijeniti određeni stil na već posjećene veze, onda se ovo koristi pseudo-klasa:posjećena.
- Koji pretraživači su podržani:
- Chrome
- Firefox
- safari
- Opera
10) X
a (boja: crvena; )CSS selektor po atributu. U ovom primjeru su odabrane samo one veze koje imaju atribut title.
- Koji pretraživači su podržani:
- Chrome
- Firefox
- safari
- Opera
11) X
a (boja: žuta; )- Koji pretraživači su podržani:
- Chrome
- Firefox
- safari
- Opera
12) X
a ( boja: #dfc11f; )Zvjezdica znači da vrijednost koju tražite mora biti negdje u atributu (bilo koji dio href atributa). Tako će biti odabrani i linkovi sa https://www..stijit.. Zlatna boja će biti primijenjena na sve odabrane linkove.
- Koji pretraživači su podržani:
- Chrome
- Firefox
- safari
- Opera
13) X
a (pozadina: url(path/to/external/icon.png) bez ponavljanja; padding-left: 15px; )Neke web stranice imaju male ikone sa strelicama pored veza do drugih web lokacija koje označavaju da su to vanjske veze. Karat “^” je znak koji označava početak reda. Dakle, da biste odabrali sve oznake čiji href počinje sa http, morate koristiti CSS selektor sa karat, kao što je prikazano u primjeru iznad.
- Koji pretraživači su podržani:
- Chrome
- Firefox
- safari
- Opera
14) X
a (boja: zelena; )Ovo koristi regularni izraz i simbol $ da označi kraj reda. U ovom primjeru tražimo sve veze koje povezuju slike sa ekstenzijom .jpg.
- Koji pretraživači su podržani:
- Chrome
- Firefox
- safari
- Opera
15) X
a (boja: zelena; )Ovdje se primjenjujemo CSS selektor po prilagođenom atributu. Svakoj vezi dodajemo vlastiti atribut data-filetype:
veza
Sada, koristeći gornji CSS selektor, možete odabrati sve veze koje vode do slika s bilo kojom ekstenzijom.
- Koji pretraživači su podržani:
- Chrome
- Firefox
- safari
- Opera
16) X
Tilda (~) vam omogućava da odaberete određeni atribut sa liste atributa razdvojenih razmakom. Možete napisati naš vlastiti data-info atribut, u kojem možete navesti nekoliko ključnih riječi odvojenih razmakom. Na ovaj način možete odrediti da je veza vanjska i da vodi do slike.
veza
Koristeći ovu tehniku, možemo odabrati elemente s kombinacijama atributa koji su nam potrebni:
/* Odaberite element čiji atribut data-info sadrži vrijednost eksternu */ a ( boja: zelena; ) /* Odaberite element čiji atribut data-info sadrži vrijednost slike */ a ( granica: 2px crtkana crna; )
- Koji pretraživači su podržani:
- Chrome
- Firefox
- safari
- Opera
17) X:provjereno
input:checked ( granica: 3px na početku crna; )Ova pseudo-klasa samo ističe elemente kao što su okvir za potvrdu ili radio dugme, i to samo kada su već u označenom stanju.
- Koji pretraživači su podržani:
- Chrome
- Firefox
- safari
- Opera
18) X:posle
Pseudo-klase :before i :after su vrlo korisne - stvaraju sadržaj prije i poslije odabranog elementa.
Clearfix:after (sadržaj: ""; prikaz: blok; jasno: oba; vidljivost: skrivena; veličina fonta: 0; visina: 0; ) .clearfix ( *display: inline-block; _height: 1%; )
Ovdje, koristeći :after pseudo-klasu, prazan string se kreira nakon bloka sa .clearfix klasom, nakon čega se briše. Ovaj pristup se koristi kada nije moguće primijeniti overflow: hidden svojstvo.
- Koji pretraživači su podržani:
- Chrome
- Firefox
- safari
- Opera
19) X: lebdjeti
div:hover (boja pozadine: rgba(11,77,130,0.5); )Primjenjuje određeni stil na element kada kursor miša lebdi iznad njega. Starije verzije Internet Explorera primjenjuju samo :hover na veze.
A: lebdjeti (obrub-dno: 1px isprekidano plavo;)
- Koji pretraživači su podržani:
- IE6+ (odnosi se samo na linkove u IE6)
- Chrome
- Firefox
- safari
- Opera
20) X:nije (selektor)
div:not(#content) ( boja: siva; )Pseudo-klasa nije (negacije) korisno kada, na primjer, svi divovi moraju biti odabrani, osim onog s id="content" .
Po istom principu možete odabrati sve elemente osim p:
*:ne(p) ( boja: plava; )
- Koji pretraživači su podržani:
- Chrome
- Firefox
- safari
- Opera
21) X::pseudoElement
p::prvi red (font-weight: bold; font-size: 24px; )Pseudoelementi se mogu koristiti za primenu stilova na podelemente, kao što je prvi red pasusa ili prvo slovo u reči. Primjenjuje se samo na blok elemente.
Odabir prvog slova pasusa:
P::prvo slovo (familija fontova: cursive; font-size: 30px; font-weight: bold; padding-right: 1px; )
Odabir prvog reda u paragrafu:
P:prvi red (veličina fonta: 28px; težina fonta: bold;)
- Koji pretraživači su podržani:
- Chrome
- Firefox
- safari
- Opera
22) X: prvo dijete
ul li:first-child ( border-top: none; )Prvo dijete pseudoklase odabire samo prvo dijete roditeljskog elementa. Često se koristi za uklanjanje obruba sa prvog elementa liste. Ova pseudo-klasa postoji od tada css 1.
- Koji pretraživači su podržani:
- Chrome
- Firefox
- safari
- Opera 3.5+
- Android
23) X: posljednje dijete
ul > li:last-child (obrub-dolje: nema; )Pseudo-klasa zadnje dijete odabire posljednje dijete roditeljskog elementa. Pojavilo se samo iz CSS 3.
- Koji pretraživači su podržani:
- IE9+ (IE8 podržava prvo dijete, ali ne i posljednje dijete. Microsoft (c))
- Chrome
- Firefox
- safari
- Opera 9.6+
- Android
24) X: samo dijete
div p:only-child (boja: zelena; )Pseudo-klasa jedina-dijete omogućava vam da odaberete one elemente koji su jedina djeca svojih roditelja.
- Koji pretraživači su podržani:
- Chrome
- Firefox
- Safari 3.0+
- Opera 9.6+
- Android
25) X:nth-dijete(n)
li:nth-child(3) ( boja: crna; )Odabire podređeni element po broju navedenom u parametru. selektor n-tog djeteta uzima cijeli broj kao parametar, ali broji od 1, tj. ako želite da izaberete drugu stavku na listi, koristite li:nth-child(2) . Sve pseudo-klase koje koriste nth-child pojavile su se samo počevši od CSS 3.
- Koji pretraživači su podržani:
- Chrome
- Firefox 3.6+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
26) X:nth-last-child(n)
li:nth-last-child(2) ( boja: crvena; )Ako imate veliku listu elemenata u ul i trebate odabrati treći element s kraja? Umjesto pisanja li:nth-child(109) može se koristiti nth-last-child selektor zadnjeg djeteta. Ova metoda je ista kao i prethodna, ali odbrojavanje je od kraja.
- Koji pretraživači su podržani:
- Chrome
- Firefox 3.6+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
27) X:n-ti-tipa(n)
ul:nth-of-type(3) (obrub: 1px tačkasta crna; )Ako na stranici postoje četiri neuređene liste, a želite da stilizirate samo treću koja nema jedinstveni id, trebali biste koristiti nth-of-type.
- Koji pretraživači su podržani:
- Chrome
- Firefox 3.6+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
28) X:nth-last-of-type(n)
ul:nth-last-of-type(3) (obrub: 2px plavi greben; )Pseudo-klasa nth-last-of-type(n) je dizajniran da odabere n-ti element određenog tipa s kraja.
- Koji pretraživači su podržani:
- Chrome
- Firefox 3.6+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
29) X: samo tipa
li:samo-tip (font-weight: bold; )Pseudo-klasa samo-tip bira elemente koji nemaju susjede unutar roditeljskog elementa. Na primjer, možete odabrati sve ul-ove koji sadrže samo jedan li.
- Koji pretraživači su podržani:
- Chrome
- Firefox 3.5+
- Safari 3.1+
- Opera 9.6+
- Android 2.1+
- iOS 2.0+
30) X: prvi u vrsti
ul:first-of-type > li:nth-child(3) (font-style: italic; )Pseudo-klasa prve vrste bira prvi element datog tipa.
- Koji pretraživači su podržani:
- Chrome
- Firefox 3.5+
- Safari 3.1+
- Opera 9.5+
- Android 2.1+
- iOS 2.0+
Skup pravila dizajna (koja se sastoje od selektora sa blokom oglasa) primijenjenih na određene html tagove, zbog kojih se formira izgled stranice.
CSS selektor- ovo je sastavni dio CSS pravila odgovornog za određivanje specifičnih html oznaka na koje će se primijeniti stilovi dizajna navedeni u ovom pravilu.
Dakle, zahvaljujući selektorima, pretraživač razumije koji elementi koda stranice trebaju primijeniti određene stilove dizajna.
Alat za odabir elemenata u CSS-u je izuzetno fleksibilan i zgodan za odabir kako pojedinačnih elemenata koda tako i čitavih grupa elemenata definiranih jednom ili drugom karakteristikom.
Vrste css selektora
Kao i rečenice u tekstu, CSS selektori dolaze u jednostavnim i složenim oblicima. Razlika između njih je u tome što se složeni dobivaju kombinacijom nekoliko jednostavnih i koriste se za fino podešavanje konačnog dizajna resursa.
Samo za razliku od običnog teksta u kaskadnim stilovima, bitno je kojim redoslijedom i koje selektore koristimo. Štoviše, o tome će ovisiti ne samo koje elemente i na osnovu čega 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 odabir općenito svih elemenata u dokumentu. Određeno zvjezdicom. Obično se koristi za resetiranje stilova pretraživača koji su u njima instalirani prema zadanim postavkama, tako da svi koji posjete stranicu ne izgube dizajn u slučaju korištenja neke vrste vlastitih postavki preglednika ili raznih dodataka...
* (neki stil;)
- Birač tipa - Bira sve oznake koje odgovaraju određenom tipu. Određeno imenom 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 (neki stil;)
- – će primijeniti css pravilo na sve oznake sa određenim imenom klase. Navedeno tačkom sa imenom klase napisanom odmah iza nje. Možda najčešći selektor u izgledu. Obično se koristi za postavljanje različitih stilova za oznake istog tipa, ali različite funkcionalnosti.
Lijeva kolona (neki stil;)
- ID selektor se koristi za stiliziranje jedinstvenih elemenata na stranici. Postavlja se hešom praćenim imenom id. Koristi se ako trebate stilizirati jedan određeni element stranice.
#alertButton (neki stil; )
- – odabire oznake koje imaju prisutan atribut. Navedeno imenom atributa u uglastim zagradama. Može se koristiti i za dizajniranje grupe oznaka u kojoj je specificirani atribut jednostavno prisutan, i za grupu oznaka u kojoj je prisutan specificirani atribut sa određenom vrijednošću.
[ type] ( neki stil; ) [ type= "submit" ] ( neki stil; ) input[ type= "submit" ] ( neki stil; )
Kompleksni selektori
- Selektor potomaka – odabir potomaka (tagova unutar druge oznake) elemenata. Navedeno s razmakom (roditelj - razmak - dijete).
div p (neki stil;)
- Selektor djece - odabire element direktno ugniježđen unutar drugog elementa. Navedeno simbolom ">" (roditelj-provjera-dijete). Podređeni element se razlikuje od podređenog elementa po tome što dolazi direktno iza nadređenog (prvi nivo ugniježđenja). Dok se svaka oznaka unutar druge smatra potomkom, bez obzira na nivo ugniježđenja.
Bočna traka> ul (neki stil; )
- Selektor sibling elementa - odabire oznaku koja dolazi odmah nakon druge oznake (nije zatvorena, već slijedi). Postavljeno sa plusom (prvi element - plus - sestrinski element). Rijetko se koristi u praksi. Preduslov za aplikaciju je prisustvo zajedničkog roditelja za sve elemente sa kombinovanim znakom "+".
h1+ p (neki stil;)
Pseudo-klase i pseudo-elementi
Gornja klasifikacija CSS selektora zavisila je isključivo od označavanja dokumenta. Ako želimo da promenimo izgled elemenata u zavisnosti od promene njegovog stanja na stranici (na primer, promena boje dugmeta pri lebdenju), onda možemo koristiti selektore pseudoklasa i pseudoelemenata.
- Zapamtite da za razliku od html-a, CSS je osjetljiv na velika i mala slova. Odnosno, klase .active i .Active nisu ista stvar! Oni će se primijeniti na različite elemente, ako ih ima, u dokumentu.
- Imenujte selektore za dekoraciju tako da se kasnije ne zbunite: .leftColumn je dobro ime, .left zavisi od situacije, ali ne baš dobro, .llll je neka vrsta đubreta, sami ćete reći bez gledajući kod odakle dolazi ova klasa?
- Da vas još jednom podsjetim - ako postoji samo jedan element na stranici, dakle svi jedinstveni, onda za to koristimo id, ali ako postoji mogućnost da na stranici bude još jedan takav ili jednostavno sličan element, onda koristite časovi za dekoraciju.
Sažimanje
Selektori u CSS-u- ovo je moćan alat za identifikaciju određenih elemenata stranice ili grupe elemenata ujedinjenih specifičnom karakteristikom za daljnju primjenu stilova na njih iz oglasnog bloka koji se odnosi na ovaj selektor.
Nakon savladavanja općih principa interakcije i kreiranja 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 izgleda krajnje zbunjujuća, postaje jednostavna i razumljiva nakon perioda prakse, podržane kvalitativnom teorijom.
Jezik izgleda CSS dokumenata stalno se razvija. Ne samo da njegova snaga i funkcionalnost vremenom rastu, već se povećava i njegova fleksibilnost i jednostavnost korištenja.
Počnimo da razumijemo. Otvorite bilo koji CSS vodič, barem jedan odjeljak će biti posvećen vrstama selektora. To nije iznenađujuće, jer su oni jedan od najpovoljnijih načina za upravljanje sadržajem stranice. Uz njihovu pomoć, možete komunicirati s apsolutno bilo kojim HTML elementom. Sada postoji 7 vrsta selektora:
- za oznake;
- za nastavu;
- za ID;
- univerzalni;
- atributi;
- za interakciju sa pseudo-klasama;
- za upravljanje pseudo-elementima.
Sintaksa je jednostavna. Da biste naučili kako se koristiti, dovoljno je pročitati o njima. Koju opciju je bolje izabrati za kontrolu sadržaja u vašem slučaju? Pokušajmo to shvatiti.
Selektori oznaka
Ovo je najjednostavnija opcija koja ne zahtijeva posebno znanje za snimanje. Da biste upravljali oznakama, trebate koristiti njihovo ime. Pretpostavimo da je "zaglavlje" vaše stranice umotano u oznaku
Prednosti - jednostavnost upotrebe, svestranost.
Nedostaci - potpuni nedostatak fleksibilnosti. U gornjem primjeru, sve oznake zaglavlja bit će odabrane odjednom. Ali šta ako trebate upravljati samo jednim?
Selektori klasa
Najčešća opcija. Dizajniran za upravljanje oznakama s atributom class. Pretpostavimo da imate tri bloka u svom kodu
Sintaksa je sljedeća: navedite tačku (.”), nakon koje pišemo ime klase. Za upravljanje prvim blokom koristimo .red konstrukciju. Drugi je .plavi i tako dalje.
Bitan! Preporučuje se korištenje značajnih vrijednosti za atribut klase. Smatra se lošim ponašanjem koristiti transliteraciju (npr. krasiviy-blok) ili nasumične kombinacije slova/brojeva (ojfh834871). U takvom kodu ćete se sigurno zbuniti, a da ne spominjemo sa kakvim poteškoćama će se morati suočiti oni koji će se nakon vas baviti projektom. Najbolja opcija je korištenje neke vrste metodologije, poput BEM-a.
Prednosti - prilično visoka fleksibilnost.
Nedostaci - nekoliko elemenata može imati istu klasu, što znači da će se uređivati u isto vrijeme. Problem je riješen korištenjem metodologije, kao i nasljeđivanjem predprocesora. Obavezno naučite manje, sass ili neki drugi preprocesor, oni će znatno pojednostaviti rad.
Selektor po ID-u
O ovoj opciji mišljenja dizajnera izgleda i programera su dvosmislena. Neki udžbenicicssuopšte se ne preporučujeid,jer mogu uzrokovati probleme s nasljeđivanjem ako se nepažljivo koriste. Međutim, mnogi stručnjaci ih aktivno postavljaju kroz markup. Ti odluci. Sintaksa je: heš simbol ("# ”), zatim naziv bloka. Na primjer,#red.
IDrazlikuje se od klase na nekoliko načina. Prvo, ne postoje dva ista na stranici.ID.Dodeljuju im se jedinstvena imena. Drugo, takav selektor ima veći prioritet. To znači da ako bloku date klasucrvenai naznačiti u tabelamacsscrveno, a zatim ga dodijelite istomid bluei odredite plavu boju, blok će postati plavi.
Prednosti - možete kontrolisati određeni element bez obraćanja pažnje na stilove za oznake i klase.
Nedostaci - lako se zbuniti u velikom brojuIDIklasa.
Bitan! Ako koristite BEM metodologiju (ili ekvivalente),IDgeneralno ti ne treba. Ova tehnika rasporeda uključuje upotrebu jedinstvenih klasa, što je mnogo praktičnije.
Univerzalni selektor
Sintaksa: znak zvjezdice ("*") i vitičaste zagrade, tj. *{}.
Koristi se za dodjelu određenih atributa svim elementima stranice odjednom. Kada bi ovo moglo biti korisno? Na primjer, ako želite postaviti svojstvo stranicebox-size: border-box.Može se koristiti ne samo za kontrolu svih komponenti dokumenta, već i za kontrolu svih podređenih elemenata određenog bloka, na primjer,div*().
Prednosti - možete upravljati velikim brojem elemenata u isto vrijeme.
Nedostaci - nedovoljno fleksibilna opcija. Osim toga, korištenje ovog selektora u nekim slučajevima usporava stranicu.
Po atributima
Daje mogućnost kontrole elementa sa određenim atributom. Na primjer, imate više ulaznih oznaka s različitim atributom tipa. Jedan od njih je tekst, drugi je lozinka, treći je broj. Naravno, možete postaviti klase ili ID-ove za svaki, ali to nije uvijek zgodno. CSS selektori po atributima vam omogućavaju da odredite vrijednosti za određene oznake s maksimalnom preciznošću. Na primjer, ovako:
unos()
Ovaj selektor atributa će odabrati sve unose sa tekstom tipa.
Alat je prilično fleksibilan, može se koristiti sa bilo kojim tagovima koji mogu imati atribute. Ali to nije sve! CSS specifikacija ima mogućnost još praktičnije manipulacije elementima!
Zamislimo da vaša stranica ima ulaz sa atributom placeholder="Enter name" i input placeholder="Enter password". Mogu se odabrati i selektorom! Za to se koristi sljedeća konstrukcija:
input() ili input
Moguć je fleksibilniji rad sa atributima. Recimo da imate nekoliko oznaka sa sličnim atributima naslova (recimo "Caspian" i "Caspian"). Da odaberete oba, koristite sljedeće birače:
CSS će odabrati sve elemente koji imaju "Caspian" znakove u svom naslovu, tj. i "Caspian" i "Caspian".
Također možete odabrati oznake čiji atributi počinju određenim znakovima:
ili završi sa:
{}.
Prednosti - maksimalna fleksibilnost. Možete odabrati bilo koje postojeće elemente stranice bez petljanja s klasama.
Nedostaci - koristi se relativno rijetko, samo u određenim slučajevima. Mnogi slagači preferiraju metodologije, budući da specificiranje klase može biti lakše nego sređivanje višekratnika i znakova jednakosti. Osim toga, ovi selektori ne rade u Internet Exploreru 7 i starijim verzijama. Međutim, kome sada treba stari Internet Explorer?
Selektori pseudoklasa
Pseudo-klasa označava stanje elementa. Na primjer, :hover je ono što se dešava dijelu stranice kada se kursor povuče, :visited je posjećena veza. Ovo također uključuje elemente kao što su :first-child i :last-child.
Ovaj tip selektora se aktivno koristi u modernom izgledu, jer zahvaljujući njemu možete učiniti stranicu "živom" bez upotrebe JavaScripta. Na primjer, želite da to učinite tako da kada pređete mišem preko gumba s klasom btn, njegova boja se mijenja. Da bismo to učinili, koristimo sljedeću konstrukciju:
Btn: lebdjeti (
Boja pozadine: crvena
Za ljepotu, možete odrediti svojstvo prijelaza u glavnim svojstvima ovog gumba, na primjer, za 0,5 s - u ovom slučaju, dugme će postati crveno ne odmah, već na pola sekunde.
Prednosti - aktivno se koriste za "revitalizaciju" stranica. Jednostavan za korištenje.
Nedostaci - nema. To je zaista zgodan alat. Međutim, neiskusni slagači mogu se zbuniti obiljem pseudo-klasa. Problem se rješava učenjem i praksom.
Selektori pseudoelemenata
"Pseudo-elementi" su oni dijelovi stranice koji nisu u HTML-u, ali se i dalje mogu manipulirati. Niste razumeli ništa? Sve je lakše nego što se čini. Na primjer, želite da prvo slovo niza učinite velikim i crvenim, dok ostatak teksta ostavite malim i crnim. Naravno, moguće je ovo slovo staviti u raspon sa određenom klasom, ali ovo je dugo i dosadno. Mnogo je lakše odabrati cijeli pasus i koristiti pseudoelement::prvo slovo. Omogućava vam da kontrolišete izgled prvog slova.
Postoji dosta pseudo-elemenata. Navesti ih u okviru jednog članka malo je vjerovatno da će uspjeti. Relevantne informacije možete pronaći u svom omiljenom pretraživaču.
Prednosti - omogućavaju fleksibilno prilagođavanje izgleda stranice.
Nedostaci - početnici se često u njima zbune. Mnogi selektori ovog tipa rade samo u određenim pretraživačima.
Sažmite
Selektor je moćan alat za kontrolu toka dokumenta. Zahvaljujući njemu, možete odabrati apsolutno svaku komponentu stranice (čak i one koje postoje samo uvjetno). Obavezno naučite sve dostupne opcije ili ih barem zapišite. Ovo je posebno važno ako kreirate složene stranice modernog dizajna i puno interaktivnih elemenata.
Cascading Style Sheets CSS (Cascading Style Sheets) je standard stila koji je proglasio W3C konzorcij. Termin kaskadno ukazuje na mogućnost spajanja različitih vrsta stilova i nasljeđivanja stilova unutarnjim oznakama od vanjskih.
CSS je jezik koji sadrži skup svojstava za definiranje izgleda dokumenta. CSS specifikacija definira svojstva i opisni jezik za odnose s HTML elementima.
CSS je apstrakcija u kojoj je izgled Web dokumenta definisan odvojeno od njegovog sadržaja.
Neki stilovi nisu podržani od strane svih pretraživača. Međutim, možete dodijeliti bilo koje stilove, jer će nepodržani stilovi jednostavno biti zanemareni.
Možda će vam trebati i:
Postoje tri tipa stilova za dodavanje stilova dokumentu.
Interni stilovi
Interni stilovi su definirani atributom stil specifične oznake. Interni stil utječe samo na elemente definirane takvim oznakama. Ova metoda se malo razlikuje od tradicionalnog HTML-a.
Primjer
Paragraf sa plavim tekstom
REZULTAT:
Paragraf sa plavim tekstom
Stav sa crvenim tekstom
Interne stilove ne biste trebali koristiti prečesto, jer tada web dokument postaje preopterećen kodom i njegov izgled je teško promijeniti.
Globalni stilovi
Globalni CSS stilovi su smešteni u kontejner , koji se nalazi u kontejneru ... .
Atribut type="text/css", prethodno potrebno za oznaku .........
Siva boja teksta u svim paragrafima web stranice