CSS: pseudo-elementi i pseudo-klase

Ponekad se čini da, da bi preživjeli u suvremenom svijetu, morate znati kako stvoriti mjesta. Čak i škole podučavaju osnove HTML-a. No, da bi se stvorio kvalitativni resurs, to nije dovoljno. Morate znati osnove kaskadnih stilskih lista, uključujući pseudo-klase i CSS pseudo-elemente.

Što je to?

Tajnim zakonom, svi stilovi koje webmaster upisuje u CSS oznaku koriste se za one elemente strukture koji se mogu vidjeti u izvornom kodu. Međutim, postoje skupine elemenata koji nisu napisani u HTML dokumentu, ali također moraju specificirati stilove.


Na primjer, u HTML datoteci nema oznake koja bi bila odgovorna za dizajn kapitalizacije novog stavka ili regije koja je ispred određenog elementa. I oznake ne mogu prikazati veze aktivnosti ili promijeniti sliku kada pokazivač miša vodi do njega. Da bi napravili ove i mnoge druge vrijednosti, postoje CSS selektori: pseudo-klase i pseudo-elementi. Pseudo klase nazivaju se selektori koji utječu na postojeće elemente dokumenta. Pseudo-elementi obično pitaju i mijenjaju područje koje je izvorno nedostajalo u izvornoj datoteci. Jednostavno rečeno, pseudo-elementi određuju nove stranice koje nisu u HTML oznaci, a pseudo-klase određuju stanje objekata pod određenim uvjetima.

Nakon: Nakon

Prva stvar na koju treba obratiti pozornost je CSS pseudo elemenata prije i poslije, budući da svaki samouprave poštujući ih koristi za poboljšanje izgleda, čitljivost i atraktivnost stranice. Ovi elementiNavedite mogućnost dodavanja novih područja, natpisa i stilova prije ili poslije izvornog dokumenta.


Svatko je vjerojatno barem jednom na stranicama objavio objave publikacija, nakon čega su stajali riječi: "Novost", "Novo" ili "Šok", "Favoriti", "Najbolji", "Super », Itd. Ovi objekti su specificirani pomoću CSS-a nakon pseudo-elementa. Da biste stvorili ovu poziciju, morate dodati sljedeći kod u kaskadni stil:
Ovdje riječ new specificira ime nove klase, tako da prije nego se mora unijeti traženi paragraf za označavanje HTML-om: class = "new". Ime klase treba biti između zagrada otvarajuće oznake. Ako je sve učinjeno ispravno, nakon kraja stavka na stranici preglednika pojavit će se "nešto novo".
Naravno, u primjeru je dana jednostavna skripta za natpis, ali nitko nije rekao da ne možete mijenjati veličinu, boju i pozicioniranje. Svi potrebni parametri mogu se unositi u klasu novi nakon karakteristika sadržaja. Odvojite ih točka-zarezom, na kraju zatvorite kovrčavu zagradu.

To: prije

CSS prije pseudo-elementa je praktički identičan. S jednom malom razlikom: namijenjena je dodavanju potrebnih elemenata ispred objekta. Zapisuje se na isti način kao i poslije, samo s riječju prije. Prije sljedećeg stavka teksta možete dodati riječi koje privlače pozornost, ili jednostavno možete staviti sliku ili element Unicode prije teksta. Na primjer, otvaranje kartica ili uvlake. Da biste to stavili u praksu, morate dodati novu klasu u CSS oznaku i postaviti potrebne karakteristike. Najlakši načinrješenje bi izgledalo ovako:
Da biste napravili uvlake na kraju dokumenta, morate stvoriti pseudo klasu nakon i umjesto sadržaja: open write content: close, odnosno, za promjenu pozicioniranja. Ako je u pseudoklasu prije uvlačenja s lijevog polja, onda u razredu nakon što je trebao biti s desne strane. Također možete dodati slike (na primjer, iste navodnike) u oznaku, a tekst više neće izgledati kao prijenosni list.

Epska saga: prvo

Pseudoelement CSS prvi je vrlo popularan u stvaranju novih projekata. Osobito se odnosi na projekte s zabavnim i bajkovitim temama, kao i web-izvore povijesnog i znanstvenog smjera. Ovaj CSS pseudo element ima dvije karakteristike - liniju i slovo:
  • Letter - mijenja prvo slovo fragmenta teksta na koji je dodan. Tako on tvori slovo - element u kojem je osnovna linija nekoliko redaka niže u odnosu na glavni tekst. Da biste postavili ovaj parametar na kaskadni list stila, morate odrediti karakteristike za paragraf. Na primjer, P: prvo slovo {***} - i već između zagrada navode sve potrebne parametre, kao što su boja, font, veličina. Ako trebate samo kreirati početno slovo za prvi odlomak, tada se stvara nova klasa (kao u primjeru s novim: poslije).
  • Linija - ovaj položaj potpuno mijenja prvi redak odlomka. To je vrlo prikladno za korištenje u znanstvenim publikacijama, ako želite istaknuti važne informacije. Zapisuje se na isti način kao i drugi primjeri. Ali ovdje je važno zapamtiti da pseudo-element ne nudi prijedlog, alisamu liniju. Ovisno o pregledniku koji korisnik koristi, njegova prva linija može biti dulja ili kraća, stoga je važno osigurati da ovaj odabir ne izgleda glupo. Za te je slučajeve stvoren CSS pseudo-element linije.
  • Nova linija

    Zapravo, ovaj se element rijetko koristi, budući da uspješno zamjenjuje oznaku .Međutim, postoje situacije kada je potrebno odrediti prijelom retka s pseudo-elementima. Za te svrhe možete koristiti isti nakon. Za to je napisan sljedeći kod: poslije {content: 'A'; bijeli prostor: pre;}. Ime klase mora biti umetnuto između zagrada početne oznake čim se zatvori, nakon njega i slijedi prijelom retka.
    Ova opcija zahtijeva više vremena za konstruiranje čitljivog sadržaja, a ako nema potrebe za radom s abnormalno nepoznatim preglednicima, bolje je ograničiti oznaku
    .

    Sintaksa pseudo-klasa

    Kao što je već spomenuto, pseudo-klase određuju stanje elemenata s kojima korisnik komunicira. Za razliku od CSS pseudo-elementa, koji definira nevidljivu strukturu karakteristike, imaginarne klase orijentirane su na čimbenike ponašanja. Da budemo jasniji, možemo dati mali primjer. Pretpostavimo da stranica ima popis korisnih linkova, korisnik prelazi preko njega, čita informacije, ali nakon nekog vremena naiđe na sadržaj koji je već viđen. On je samo otišao na ovu stranicu opet, jer postoji mnogo linkova, i oni se ne razlikuju. Da bi se to spriječilo, webmasteri dodaju pseudo-klasumijenja boju posjećenih veza, tada će korisnik točno znati što je čitao i gdje još nije prošao.
    Sve pseudo-klase zapisane su u tablici kaskadnih stilova s ​​jednostavnom i dokazanom sintaksom:
  • Selektor: Pseudo-klasa {karakteristike stila: boja, veličina, udaljenost, lokacija, itd.
  • one koje određuju stanje elementa;
  • oni koji se odnose na pseudo-element;
  • fiktivne klase kojima se definira jezik sadržaja.

    Pseudo-klase i stanje elemenata

    Razmotrimo redoslijed po kojem pseudo-klase mogu biti. Za prve podvrste, promjena stanja elementa ovisi o njegovom stanju u određenom trenutku. To je bilo u gornjem primjeru: ako je veza prešla, tada će se promijeniti boja. To uključuje sljedeće pseudo-klase:
  • : aktivno. Ako primijenite ovu pseudo-klasu, onda kada mišem pređete preko odvojenog fragmenta, ona će postati aktivna. To će biti u promjeni boje, povećanju veličine ili će se pojaviti animacija.
  • : veza. Obično se odnosi na veze koje korisnik još nije posjetio. Oni ostaju nepromijenjeni.
  • : fokus. Često se koristi za tekstualne dokumente, kada korisnik, postavivši pokazivač na polje, može promijeniti boju teksta. Ponekad se koristi za slike. Na primjer, slika je zasjenjena, ali kada klikne, dobiva prirodnu boju.
  • : lebdjeti. Kada korisnik jednostavno stavi miša na određeni objekt, on može promijeniti boju ili oblik i ne mora kliknuti.
  • : posjetili. uu osnovi, ova pseudo-klasa je namijenjena posjećenim vezama koje mijenjaju svoju boju prema ljubičastoj.
  • Newbies pogrešno pretpostavljaju da su te pseudo-klase samo za reference, ali uz pravilnu želju i maštu možete promijeniti bilo koji element stranice.

    Posebno za pseudo-element CSS

    Ova skupina selektora uključuje pseudo-klase koje mogu mijenjati pseudo-elemente. Sljedeća pseudo-klasa je: prvo dijete. U kaskadnom listu elemenata morate stvoriti novu klasu za: prvo dijete i odrediti boju teksta ili njegovu veličinu. Rezultat će izgledati ovako:
  • B: prvo dijete {color: red;}
  • To se najčešće radi kada je potrebno dodijeliti neke fragmente teksta podebljanim slovima, a samo početak stavka treba biti različit. Stoga se klasa zove ista kao i oznaka koja je odgovorna za podebljani tekst. Ako ga primijenite u praksi, zahvaljujući pseudo-klasi, samo će prvi istaknuti podebljani fragment imati crvenu boju, druge riječi će biti standardne crne.
    Također: prvo dijete se koristi za uklanjanje uvlačenja u prvom paragrafu, zatim umjesto boje: crveno; morat će napisati tekst-uvlačenje: 0; i B za zamjenu s P (također je označena oznaka koja odgovara početku stavka).

    Jezik sadržaja

    Pseudo-klasa: lang se uglavnom odnosi na tekstove pisane na različitim jezicima. Na primjer, ako članak sadrži navode na izvornom jeziku, onda je za njih moguće staviti zasebne karakteristike. Sintaksa za ovaj klaster će izgledati ovako:
  • Ime klase: lang (jezik){Karakteristike teksta (boja, font, tip itd.)}
  • S obzirom na poziciju "jezik", naznačeno je u skladu s usvojenim pravilima. Na primjer, engleski - en, ruski - ua, njemački - de, itd. Zahvaljujući ovoj pseudo - klasi, možete promijeniti stil stranog teksta u cijelom dokumentu.

    Zaključci

    CSS Pseudo-Klasa i Pseudo-Elementi su jedno od onih pitanja o kaskadnim stilovima koji uzrokuju poteškoće u razumijevanju. Međutim, ovdje nema ništa komplicirano, glavna stvar - shvatiti da je pseudo-klasa određena država koja se izvodi pod prethodno dogovorenim uvjetima. Na primjer, kada lebdite iznad miša ili kliknete. Pseudo-element je neovisan dio dokumenta koji nije dio HTML oznake, ali može imati svoj vlastiti stil. Možete čak reći da je to virtualni HTML. Ako pogledate situaciju na takvoj strani, onda sve postaje krajnje jednostavno i razumljivo, ali s takvim znanjem možete početi stvarati stranice.

    Povezane publikacije