CSS: pseudo-elementi i pseudo-klase

S vremena na vrijeme čini se da, kako bi preživjeli u modernom svijetu, morate znati kako stvoriti web stranice. Čak iu školama koje podučavaju osnove HTML-a.

Što je to?

Po nepisanom zakonu svih stilova koje webmaster ulaze u CSS-označavanje koji se koristi za strukturne elemente koji se mogu vidjeti u izvornom kodu. Međutim, postoje skupine elemenata koji nisu propisani u HTML dokumentu, ali moraju odrediti i stilove.

Na primjer, u HTML datoteci nema oznake koja bi bila odgovorna za dizajn velikog slova novog odlomka ili područja koja je ispred određenog elementa. Oznake ne mogu prikazivati ​​aktivnost povezivanja niti mijenjati sliku kada pokazivač miša pokaže. Da bi formalizirali ova i mnoga druga značenja, postoje selektori CSS: pseudo-klasa i pseudo-elemenata.

Pseudo-klase se nazivaju selektori, koji utječu na postojeće elemente dokumenta. Pseudo-elementi obično određuju i mijenjaju područje koje je izvorno nedostajalo iz izvorne datoteke. Jednostavno rečeno, pseudo-elementi postavljaju novu stranicu područja koja nisu bila u HTML oznakama, a pseudo-klase određuju stanje objekata pod određenim uvjetima.

Nakon: poslije

Prvo što biste trebali obratiti pozornost na pseudo-elemente CSS prije i nakon toga, kao i svaki resurs samopoštovanja koji ih koristi za poboljšanje izgleda, čitljivosti i atraktivnosti web mjesta. Ti elementi omogućuju dodavanje novih područja, oznaka i stilova prije ili poslije izvornog dokumenta.

Svaki mora imati najmanje jednom vidio na bilo kojem online najavama izdanja, nakon čega su riječi: „Nova”, „novi” ili „šok”, „favoriti”, „najbolji”, „super”, itd To .. objekti su određeni korištenjem CSS nakon pseudo-elementa.

Da biste stvorili takav položaj, morate dodati sljedeći kôd u kaskadni stilski list:

Ovdje nova riječ određuje naziv nove klase, pa prije potrebnog odlomka u HTML oznaku morate unijeti: class = "new". Naziv klase mora biti između zagrade početne oznake. Ako je sve ispravno učinjeno, nakon završetka stavka na stranici preglednika pojavit će se natpis "Nešto novo".

Naravno, u primjeru dao skriptu za jednostavne linije, ali nitko nije rekao da ne možete promijeniti veličinu, boju i položaj. Svi potrebni parametri mogu se upisati u novu klasu nakon sadržaja. Odvojite ih točkom sa zarezom i na kraju zatvorite braçe.

Prije: prije

Gotovo identične osobine imaju pseudo-element CSS prije. Jedna manja razlika: namijenjena je dodavanju potrebnih elemenata ispred objekta. Napisana je upravo na isti način kao i poslije, samo s riječju ranije.

Prije sljedećeg odlomka teksta možete dodati riječi koje privlače pažnju ili možete jednostavno staviti sliku ili Unicode element ispred teksta. Na primjer, otvaranje citata ili uvlake. Da biste to implementirali, morate dodati novu klasu u CSS oznaku i odrediti potrebne karakteristike. Najjednostavnije rješenje izgledalo bi ovako:

Da biste dovršili završetak dokumenta, morate stvoriti nakon pseudo-klase i umjesto sadržaj: otvoren pisati sadržaj: zatvorite, sukladno tome promijenite pozicioniranje. Ako je u pseudo-klasi prije uvoda bila s lijeve margine, tada u klasi nakon mora biti s desne strane. Također u oznaci, možete dodati sliku (recimo, iste citate), a tekst više neće izgledati kao dosadan list.

Epic Saga: prvo

Prvo pseudo-element CSS je također vrlo popularan u stvaranju novih projekata. To se posebno odnosi na projekte sa zabavnim i bajkovitim temama, kao i web resurse povijesnog i znanstvenog usmjerenja.

Ovaj CSS pseudo-element ima dvije karakteristike - redak i slovo:

• pismo - mijenja prvo slovo fragmenta teksta kojemu je dodan. Stoga, čini kap-kap - element u kojem je osnovna linija nekoliko redaka niža u odnosu na glavni tekst. Da biste postavili ovaj parametar u kaskadni stilski list, morate postaviti karakteristike stavke. Na primjer, P: prvo slovo {***} - i već između zagrada ukazuju na sve potrebne parametre, kao što su boja, font, veličina. Ako se početno slovo treba stvoriti samo za prvi odlomak, tada se kreira nova klasa (baš kao u primjeru sa novo: poslije).
• linija - ova pozicija potpuno mijenja prvi redak odlomka. Vrlo je prikladno koristiti u znanstvenim publikacijama, ako trebate istaknuti važne informacije. Napisano je na isti način kao i drugi primjeri. No, važno je imati na umu da su pseudo ističe ne nude, naime niz. Ovisno o tome što preglednik korisnik koristi, u svom prvom nizu može biti duži ili kraći, tako da je važno kako bi se osiguralo da ovaj izbor nije izgledao smiješno. Za takve slučajeve, utvrđeno je u CSS pseudo-novi red.

Nova linija

Zapravo, ovaj element rijetko se koristi, jer uspješno zamjenjuje oznaka
. Međutim, postoje situacije u kojima je potrebno odrediti prekid linije pomoću pseudo-elemenata. U ove svrhe možete koristiti istu nakon toga. Za to je napisan sljedeći kod: nakon {content: ` A`- white-space: pre-}. Ime klase morate upisivati ​​između zagrada otvaranje oznake, čim je zatvara nakon njega i da će slijediti u novi redak.

Ova opcija traje više vremena pri izgradnji čitljivog sadržaja i ako ne morate raditi s anomalnim neistraženim preglednicima, bolje je ograničiti oznaku
.

Sintaksa za pseudo-klasu

Kao što je već spomenuto, pseudo-klase definiraju stanje elemenata s kojima korisnik interakcionira. Za razliku od pseudo-elemenata CSS-a koji određuju nevidljive karakteristike strukture, imaginarne klase su usmjerene prema faktori ponašanja. Da bismo bili jasniji, možemo dati mali primjer. Pretpostavimo da web-lokacija sadrži popis korisnih veza, korisnik se kretao kroz njih, pročita te informacije, ali nakon nekog vremena susreće sadržaj koji je već vidio. Upravo je otišao na ovu stranicu, jer postoji mnogo veza, i oni se ne razlikuju. Da biste to spriječili, webmasteri dodaju pseudo-klasu koja mijenja boju referentne veze, a zatim će korisnik znati točno ono što je pročitao i gdje nije otišao.

Sve pseudo-klase su napisane u tablicu kaskadnih stilova s ​​jednostavnom i provjerenom sintaksom:

• Odabir: Pseudo-klasa {stilske osobine: boja, veličina, uvlačenje, pozicioniranje itd.}

Ove se klase mogu podijeliti u tri glavne skupine:

• Oni koji određuju stanje elementa;
• one koje pripadaju pseudo-elementima;
• fiktivne klase koje definiraju jezik sadržaja.

Pseudo-klase i stanje elemenata

Razmislite o istom redoslijedu kao i pseudo-klase. Prvu podvrstu karakterizira promjena stanja elementa, ovisno o njegovu stanju u određenom trenutku. Ovo je kako je to bilo u gornjem primjeru: ako je veza prošla, onda će promijeniti boju. To uključuje takve pseudo-klase:

• :aktivan. Ako primijenite tu pseudo-klasu, onda kada privucete preko zasebnog fragmenta, ona postaje aktivna. To će rezultirati promjenom boje, povećanjem veličine ili animacijom.
• :veza. Uglavnom se odnosi na veze koje korisnik još nije posjetio. Ostaju nepromijenjene.
• : fokus. Najčešće se koristi za tekstualne dokumente, kada korisnik postavlja pokazivač na polje, može promijeniti boju teksta. Ponekad se koristi za slike. Na primjer, izlažu sliku u sjeni, ali kada klikne, dobiva prirodnu boju.
• :lebdjeti. Kada korisnik jednostavno lebdi iznad određenog objekta, on može promijeniti boju ili oblik i ne mora kliknuti.
• :posjetila. Uglavnom, ova pseudo-klasa je za posjećene veze, koje prema zadanim postavkama promijene boju ljubičastom bojom.

Početnici pogrešno pretpostaviti da su ovi pseudo-klase su samo kao primjer, ali uz pravilnu želje i mašte, možete promijeniti bilo koji element stranice.

Konkretno za pseudo-elemente CSS

Za ovu skupinu selektora su pseudo-klase koje mogu promijeniti pseudo-elemente. Takva je pseudo-klasa : prvo dijete. U kaskadnom stilu, morate stvoriti novi razred za : prvo dijete i postaviti boju teksta ili njezinu veličinu. Rezultat će izgledati ovako:

• B: prvo dijete {boja: red-}

Najčešće je to učinio kada je potrebno odabrati više tekstualnih fragmenata u podebljano i tek početak odlomka mora biti drugačiji. Zato je klasa nazvana baš kao i oznaka koja je odgovorna za podebljani tekst. Ako ga primijeniti u praksi, s obzirom na pseudo-klase, samo prva hrabar ulomak će imati crvenu boju, a ostatak od riječi će biti standardna crna boja.

također : prvo dijete koristiti za uklanjanje uvlake u prvom stavku, a zatim umjesto boja: crveno- bit će potrebno napisati tekst-uvlačenje: 0-, i B zamjenjuje P (označava i oznaku koja je odgovorna za početak stavka).

Jezik sadržaja

Pseudo klasa : lang u osnovi se odnosi na tekstove koji su napisani na različitim jezicima. Na primjer, ako članak sadrži navode na izvornom jeziku, za njih možete odrediti zasebne karakteristike. Sintaksa ovog klastera bit će:

• Naziv klase: lang (jezik) {značajke teksta (boja, font, prikaz itd)}

Što se tiče položaja "jezik", ono se određuje prema prihvaćenim normama. Na primjer, engleski - hr, ruski - ru, njemački - de, itd Uz ovaj pseudo-klase, možete promijeniti stil stranog teksta u cijelom dokumentu ...

nalazi

Pseudo-klase i pseudo-elementi CSS-a jedno su od onih pitanja o kaskadnom stilu koji uzrokuju poteškoće u razumijevanju. Međutim, ne postoji velika stvar, što je najvažnije - da shvate da pseudo - određene države koja se provodi na prethodno dogovorenim uvjetima. Na primjer, kada lebdite iznad miša ili kliknete mišem. Pseudo-element je neovisni dio dokumenta koji nije dio HTML oznake, ali može imati svoj stil. Možete čak reći da je to virtualni HTML. Ako pogledate situaciju s ove strane, sve postaje izuzetno jednostavna i razumljiva, a uz to znanje možete početi stvarati web stranice.