Niekedy sa zdá, že na prežitie v modernom svete je potrebné vedieť, ako vytvárať stránky. Dokonca aj školy učia základy HTML. Ale na vytvorenie kvalitatívneho zdroja to nestačí. Potrebujete poznať základy kaskádových štýlov, vrátane pseudotriedy a pseudo-elementov CSS.
Čo je to?
Podľa tajného práva sa všetky štýly, ktoré webmaster zapisuje do značky CSS, používajú pre tie prvky štruktúry, ktoré sa dajú vidieť vo zdrojovom kóde. Existujú však skupiny prvkov, ktoré nie sú napísané v dokumente HTML, ale tiež musia špecifikovať štýly.
Napríklad v súbore HTML neexistuje žiadna značka, ktorá by bola zodpovedná za návrh kapitalizácie nového odseku alebo oblasti, ktorá je pred určitým prvkom. Značky nemôžu zobrazovať aktivitu odkazov alebo meniť obrázok, keď kurzor myši vedie k nej. Ak chcete urobiť tieto a mnoho ďalších hodnôt, existujú voľby CSS: pseudotriedy a pseudo-prvky. Pseudo triedy sa nazývajú selektory, ktoré ovplyvňujú existujúce prvky dokumentu. Pseudo-prvky zvyčajne žiadajú a menia oblasť, ktorá pôvodne chýbala v zdrojovom súbore. Jednoducho povedané, pseudo-prvky špecifikujú nové stránky, ktoré neboli v HTML značke a pseudotriedy určujú stav objektov za určitých podmienok.
Po: po
Prvá vec, na ktorú treba venovať pozornosť, je pseudo elementy CSS pred a po ňom, pretože každý z nich rešpektujúci zdroj ich používa na zlepšenie vzhľadu, čitateľnosti a atraktívnosti lokality. Tieto prvkyPoskytujte možnosť pridávať nové oblasti, nápisy a štýly pred zdrojovým dokumentom alebo po ňom.
Každý človek pravdepodobne aspoň raz spozoroval na stránkach oznamy publikácií, po ktorých nasledovali slová: "Novelty", "New" alebo "Shock", "Favorites", "Best" », Atď. Tieto objekty boli špecifikované pomocou CSS po pseudo-prvku. Ak chcete vytvoriť túto pozíciu, musíte do kaskádového štýlu pridať nasledujúci kód:
Tu slovo nové špecifikuje názov novej triedy, takže pred zadaním požadovaného odseku označenia HTML: class = "new". Názov triedy by mal byť medzi zátvorkami otváracej značky. Ak je všetko vykonané správne, po skončení odseku na stránke prehliadača sa zobrazí "niečo nové".
Samozrejme, v príklade daného jednoduchým skriptom pre nápis, ale nikto nepovedal, že nemôžete meniť veľkosť, farbu a umiestnenie. Všetky potrebné parametre je možné zadávať do novej triedy po obsahovej charakteristike. Oddeľte ich bodkočiarkou, na konci zatvorte kučeravý držiak.
Komu: pred
CSS pred pseudo-prvkom je prakticky totožný. S jedným malým rozdielom: je určená na pridanie potrebných prvkov pred objekt. Nahráva sa rovnakým spôsobom ako po, iba so slovom predtým. Pred nasledujúcim odsekom textu môžete pridať slová, ktoré upútajú pozornosť, alebo jednoducho môžete umiestniť obrázok alebo prvok Unicode pred text. Napríklad otváranie kariet alebo zarážok. Aby ste to uviedli do praxe, musíte do značky CSS pridať novú triedu a nastaviť požadované vlastnosti. Najjednoduchšia cestariešenie by vyzeralo takto:
Aby ste na konci dokumentu zaradili odsadenia, musíte vytvoriť pseudotriedu po a namiesto obsahu: otvoriť obsah zápisu: zavrieť, resp. Meniť pozíciu. Ak je v pseudoklase pred zarážkou z ľavého poľa, potom v triede potom, čo by mala byť z pravej strany. Môžete tiež pridať obrázky (napríklad rovnaké úvodzovky) do značky a text už nebude vyzerať ako prenosný hárok.
Epická sága: prvý
Pseudo-element CSS je najprv veľmi populárny pri vytváraní nových projektov. Predovšetkým sa týka projektov s zábavnými a rozprávkovými témami, ako aj webových zdrojov historického a vedeckého smerovania. Tento pseudo-prvok CSS má dve charakteristiky - riadok a písmeno:
Písmeno - zmení prvé písmeno fragmentu textu, do ktorého je pridaný. Teda tvorí list - prvok, v ktorom je základná čiara niekoľko riadkov nižších vo vzťahu k hlavnému textu. Ak chcete nastaviť tento parameter na kaskádový štýl, musíte špecifikovať charakteristiky odseku. Napríklad P: prvé písmeno {***} - a už v zátvorkách zadajte všetky potrebné parametre, ako sú farba, písmo, veľkosť. Ak potrebujete vytvoriť iba prvé písmeno pre prvý odsek, vytvorí sa nová trieda (rovnako ako v príklade s novým: after). Linka - táto poloha úplne zmení prvý riadok odseku. Je veľmi vhodné použiť vo vedeckých publikáciách, ak chcete zdôrazniť dôležité informácie. Zaznamenáva sa rovnakým spôsobom ako ostatné príklady. Tu je však dôležité mať na pamäti, že pseudoelement neponúka návrh, alesamotnú líniu. V závislosti od toho, ktorý prehliadač používa používateľ, jeho prvý riadok môže byť dlhší alebo kratší, takže je dôležité zabezpečiť, aby tento výber nevyzeral hlúpo. Práve v týchto prípadoch bol vytvorený pseudo-prvok CSS riadku.
Nový riadok
Tento prvok je zriedka používaný, pretože úspešne nahrádza značku
.Existujú však situácie, kedy je potrebné špecifikovať prerušenie riadku s pseudo-prvkami. Pre tieto účely môžete použiť rovnaké po. Na tento účel je napísaný nasledujúci kód: po {content: 'A'; white-space: pre;}. Názov triedy sa musí vložiť medzi zátvorky otváracej značky, hneď ako sa zavrie, po nej bude nasledovať prerušenie riadku.
Táto voľba trvá viac času na vytvorenie čitateľného obsahu a ak nie je potrebné pracovať s nezvyčajne neznámymi prehliadačmi, je lepšie obmedziť značku
.
Syntax pseudotriedy
Ako už bolo uvedené, pseudotriedy určujú stav prvkov, s ktorými používa používateľ. Na rozdiel od pseudo-elementu CSS, ktorý definuje neviditeľnú štruktúru charakteristiky, imaginárne triedy sú orientované na behaviorálne faktory. Aby sme boli jasnejší, môžeme uviesť malý príklad. Predpokladajme, že stránka má zoznam užitočných odkazov, používateľ to prechádza, číta informácie, ale po chvíli narazí na už videný obsah. Práve odišiel na túto stránku znova, pretože existuje veľa odkazov a nie sú iné. Aby to zabránilo, webmasteri pridať pseudotrieduzmeniť farbu navštívených odkazov, potom užívateľ bude presne vedieť, čo čítal, ale ktorá ešte neuplynula.
Všetky pseudo v tabuľke šablóny štýlov jednoduché a osvedčené syntax:
voliča: pseudo {charakteristika, farbu, veľkosť, vzdialenosť, umiestnenie a tak ďalej D ..}Tieto triedy môžu byť rozdelené do troch hlavných skupín:
tie, ktoré určujú stav prvku; tie, ktoré sa týkajú pseudoelementu; fiktívne triedy definujúce jazyk obsahu. a Pseudo položky stav
Zoberme poradí, ktorá môže byť pseudo. Za prvých poddruhy typické pre zmenu stavu prvok v závislosti na jeho stave v danom okamihu. Toto bolo v príklade vyššie: ak je prekrížené prepojenie, zmení sa farba. Patria medzi ne nasledujúce pseudotriedy:
: aktívne. Ak máte použiť tento pseudo potom prejdite myšou na samostatný kus sa stane aktívnou. Bude to v zmene farieb, zvýšenie veľkosti alebo animácia.: odkaz. Zvyčajne sa vzťahuje na odkazy, ktoré používateľ ešte nenavštívil. Zostávajú nezmenené.: zaostrenie. Najčastejšie použitie pre textové dokumenty, keď je nastavenie používateľa na pole môže zmeniť farbu textu. Niekedy sa používa na obrázky. Napríklad obrázok je zatienený, ale keď klikne, nadobudne prirodzenú farbu.: vzdialiť. Keď používateľ prináša myši na určitý objekt, môže to zmeniť farbu alebo tvar, a preto nie je potrebné kliknúť na tlačidlo.: navštívil. vv podstate táto pseudotrieda je určená pre navštívené odkazy, ktoré v predvolenom nastavení zmenia farbu na fialovú.Začínajúci sa mylne predpokladajú, že tieto pseudotriedy sú len pre referencie, ale so správnou túžbou a predstavivosťou môžete zmeniť akýkoľvek prvok stránky.
Špeciálne pre pseudo-element CSS
Táto skupina selektorov obsahuje pseudotriedy, ktoré môžu meniť pseudoelementy. Nasledujúca pseudotrieda je: first-child. V kaskádovom štýle štýlu musíte vytvoriť novú triedu pre: first-child a špecifikovať farbu textu alebo jeho veľkosť. Výsledok bude vyzerať takto:
B: prvé dieťa {color: red;}Najčastejšie sa to robí, keď je potrebné rozdeliť niektoré útržky textu tučným písmom a iba začiatok odseku by mal byť iný. Preto sa trieda nazýva rovnaká ako značka, ktorá zodpovedá za tučný text. Ak ju uplatníte v praxi, potom vďaka pseudotriede bude mať len prvý zvýraznený tučný fragment červenú farbu, iné slová budú štandardné čierne.
Tiež: prvé dieťa sa používa na odstránenie odsadenia v prvom odseku, namiesto farby: červená; bude musieť písať text-indent: 0; , a B nahradiť P (tiež označuje aj značku, ktorá zodpovedá začiatku odseku).
Jazyk obsahu
Pseudotrieda: jazyk sa týka najmä textov napísaných v rôznych jazykoch. Napríklad, ak článok obsahuje citácie v pôvodnom jazyku, potom pre nich je možné uviesť samostatné charakteristiky. Syntax pre tento klastr bude vyzerať takto:
Názov triedy: lang (jazyk){charakteristika textu (farba, písmo, typ atď.)}Pokiaľ ide o pozíciu "jazyk", označuje sa v súlade s prijatými pravidlami. Napríklad angličtina - en, ruština - ua, nemecká - de, atď. Vďaka tejto pseudotriede môžete zmeniť text cudzieho textu v celom dokumente.
Závery
Pseudotriedy a pseudoelementy CSS sú jednou z otázok o kaskádových štýloch, ktoré spôsobujú ťažkosti pri pochopení. Avšak tu nie je nič zložité, hlavná vec - pochopiť, že pseudotrieda je určitý stav, ktorý sa vykonáva za predtým dohodnutých podmienok. Napríklad pri pohybe myši alebo kliknutí myšou. Pseudo-element je samostatná časť dokumentu, ktorý nie je súčasťou HTML značky, ale môže mať svoj vlastný štýl. Môžete dokonca povedať, že ide o virtuálny HTML. Ak sa pozriete na situáciu na takejto strane, potom sa všetko stáva extrémne jednoduchým a zrozumiteľným, ale s týmito vedomosťami môžete začať vytvárať stránky.
