Til tider synes det at for at overleve imoderne verden, skal du vide, hvordan du opretter websites. Selv skoler lærer det grundlæggende i HTML. Men at skabe en kvalitetsressource er ikke nok. Du skal også kende det grundlæggende i det kaskende stilark, især pseudoklasserne og pseudoelementerne i CSS.
Hvad er det?
Ved uskreven lov, alle stilarter detWebmaster skriver i CSS markup, der bruges til de elementer i strukturen, der kan ses i kildekoden. Der er dog grupper af elementer, der ikke er skrevet i HTML-dokumentet, men de skal også indstille stilarter.
For eksempel er der i HTML-filen ingen tag detville være ansvarlig for udformningen af store bogstaver i et nyt stykke eller område, der ligger foran et bestemt element. Ja, og tagsne kan ikke vise linkaktivitet eller ændre billedet, når musemarkøren svæver på den. For at style disse og mange andre værdier er der CSS-selektorer: pseudoklasser og pseudo-elementer.
Pseudoklasser kaldes selektorer, der påvirkerpå eksisterende elementer i dokumentet. Pseudo-elementer definerer og ændrer normalt et område, der oprindeligt manglede fra kildefilen. Enkelt sagt definerer pseudoelementer nye områder på en side, der ikke var indeholdt i HTML-markup, og pseudo-klasser definerer tilstanden af objekter under visse forhold.
Efter: efter
Det første man skal passe på erCSS-pseudo-elementer før og efter, da enhver ressource, der respekterer sig selv, bruger dem til at forbedre webstedets udseende, læsbarhed og tiltrækningskraft. Disse elementer giver mulighed for at tilføje nye områder, etiketter og typografier før eller efter det originale dokument.
Alle har sandsynligvis mindst én gang set på noglewebstedsmeddelelser efterfulgt af ordene: "Ny", "Ny" eller "Chok", "Favoritter", "Bedste", "Super" osv. Disse objekter blev indstillet ved hjælp af CSS efter pseudo-element.
For at oprette en sådan position skal du tilføje følgende kode til det kaskaderende stilark:
Her angiver ordet ny navnet på den nye klasse,derfor skal du indtaste: class = "new" før det ønskede afsnit i HTML -markeringen. Klassens navn skal være mellem parenteserne på åbningstagget. Hvis alt er udført korrekt, vises indskriften "Noget nyt" efter afsnittets afslutning på browsersiden.
Naturligvis giver eksemplet et script til en simpelbogstaver, men ingen sagde, at du ikke kan ændre størrelse, farve og placering. Alle de nødvendige parametre kan indtastes i den nye klasse efter indholdskarakteristikken. Adskil dem med et semikolon og luk den krøllede bøjle for enden.
Før: før
Næsten identiske egenskaber besiddes afCSS pseudo-element før. Med en lille forskel: den er designet til at tilføje de nødvendige elementer foran objektet. Skrevet på nøjagtig samme måde som efter, kun med ordet før.
Inden det næste tekstafsnit kan du tilføjeord, der tiltrækker opmærksomhed, eller du kan simpelthen placere et billede eller et Unicode -element foran teksten. For eksempel åbning af citater eller indrykning. For at bringe dette til live, skal du tilføje en ny klasse til CSS -markeringen og angive de nødvendige egenskaber. Den enkleste løsning ville se sådan ud:
For at indrykke slutningen af dokumentet skal du oprette efter-pseudoklassen og i stedet for indhold: åbent at skrive indhold: tæt, ændres i overensstemmelse hermedpositionering. Hvis pseudoklassen før blev indrykket fra venstre margen, så skulle den i efterklassen være fra højre. Du kan også tilføje et billede til markeringen (f.eks. De samme citater), og teksten vil ikke længere ligne et kedeligt ark.
Episk saga: først
Stor popularitet i oprettelsen af nye projekterbruger også CSS første pseudo-element. Dette gælder især projekter med underholdning og eventyrlige emner samt webressourcer i den historiske og videnskabelige retning.
Dette CSS -pseudo -element har to karakteristika - linje og bogstav:
- Brev - ændrer det første bogstav i tekstfragmentet tilhvortil den tilføjes. Således danner det en drop cap - et element, hvor grundlinjen er flere linjer under hovedteksten. For at indstille denne parameter i et kaskadestilark skal du angive egenskaber for afsnittet. For eksempel, P: første bogstav {***} - og allerede mellem parenteserne angiver alt det nødvendigeparametre som farve, skrifttype, størrelse. Hvis der kun skal oprettes en drop cap for det første afsnit, oprettes en ny klasse (ligesom i eksemplet med nyt: efter).
- Line - denne position ændrer den første linje fuldstændigtafsnit. Det er meget praktisk at bruge i videnskabelige publikationer, hvis du har brug for at fremhæve vigtig information. Skrevet på samme måde som andre eksempler. Men det vigtige at huske her er, at pseudo-elementet ikke fremhæver en sætning, men en streng. Afhængigt af hvilken browser brugeren bruger, kan den første linje være længere eller kortere, så det er vigtigt at sikre, at dette valg ikke ser latterligt ud. Det er for disse tilfælde, at CSS pseudo-line break blev oprettet.
Ny linje
Faktisk bruges dette element sjældent, fordidet er vellykket erstattet af <br> -tagget. Der er dog situationer, hvor det er nødvendigt at angive linjeskift med pseudo-elementer. Til disse formål kan du bruge det samme efter. For at gøre dette skal du skrive følgende kode: efter {content: "A"; white-space: pre;}... Klassens navn skal indtastes mellem parenteserne på åbningstagget, så snart det er lukket, vil det blive fulgt af et linjeskift.
Denne indstilling tager mere tid, når man konstruerer læsbart indhold, og hvis der ikke er behov for at arbejde med unormalt ukendte browsere, er det bedre at begrænse sig til tagget <br>.
Syntaks i pseudoklasse
Som allerede nævnt definerer pseudoklassertilstanden af de elementer, som brugeren interagerer med. I modsætning til CSS-pseudo-elementer, der definerer egenskaber, der er usynlige for strukturen, er imaginære klasser adfærdsorienterede. For at gøre det tydeligere kan du give et lille eksempel. Lad os sige, at webstedet har en liste med nyttige links, brugeren klikker på dem, læser oplysningerne, men efter et stykke tid støder det på det indhold, han allerede har set. Han gik lige til denne side igen, fordi der er mange links, og de er ikke anderledes. For at forhindre at dette sker, tilføjer webmastere en pseudoklasse, der ændrer farven på det viste link, så ved brugeren nøjagtigt, hvad han har læst, og hvor han endnu ikke er gået.
Alle pseudoklasser er skrevet til det kaskaderende stilark med en enkel og gennemprøvet syntaks:
- Vælger: Pseudoklasse {stilegenskaber: farve, størrelse, indrykning, positionering osv.}
Disse klasser kan opdeles i tre hovedgrupper:
- dem, der bestemmer elementets tilstand;
- dem, der vedrører pseudo-elementer;
- dummy -klasser, der definerer indholdssproget.
Pseudoklasser og elementtilstand
Lad os overveje, i rækkefølge, hvad der kan værepseudoklasser. De første underarter er kendetegnet ved en ændring i et elements tilstand afhængigt af dets tilstand på et bestemt tidspunkt. Dette er det samme som i eksemplet ovenfor: hvis linket blev fulgt, ændrer det farve. Dette omfatter følgende pseudoklasser:
- :aktiv. Hvis du anvender denne pseudoklasse, bliver den aktiv, når du holder musen over et separat fragment. Dette vil manifestere sig som en farveændring, en stigning i størrelse eller en animation vises.
- :link... Det gælder hovedsageligt links, som brugeren endnu ikke har besøgt. De forbliver uændrede.
- : fokus... Oftest brugt til tekstdokumenter,når brugeren ved at placere markøren på feltet kan ændre farven på teksten. Dette bruges undertiden også til billeder. For eksempel vises billedet skraveret, men når der klikkes på det, får det en naturlig farve.
- :svæve... Når brugeren simpelthen svæver over et bestemt objekt, kan han ændre farve eller form, og han behøver ikke at klikke.
- :besøgte... Grundlæggende er denne pseudoklasse for besøgte links, der som standard ændrer deres farve til lilla.
Nybegyndere antager fejlagtigt, at disse pseudoklasser kun er beregnet til links, men med den rette lyst og fantasi kan du ændre ethvert element på webstedet.
Specielt til CSS-pseudo-elementer
Denne gruppe af selektorer indeholder pseudoklasser, som kan ændre pseudo-elementer. Sådan en pseudoklasse er : første barn... I det kaskaderende stilark skal du oprette en ny klasse for : første barn og indstil tekstens farve eller størrelse. Resultatet vil se sådan ud:
- B: første barn {farve: rød; }
Oftest gøres dette, når det er nødvendigt.vælg flere tekstfragmenter med fed skrift, og kun begyndelsen af afsnittet skal være anderledes. Derfor hedder klassen det samme som det tag, der er ansvarlig for fed tekst. Hvis vi omsætter det til praksis, er takket være pseudoklassen kun det første fragment med fed skrift rødt, resten af ordene er standard sorte.
Også : første barn bruges til at fjerne indrykning i det første afsnit, derefter i stedet for farve: rød; bliver nødt til at skrive tekstindrykning: 0;, og erstat B med P (mærket, der er ansvarligt for begyndelsen af afsnittet, er også angivet).
Indholdssprog
Pseudoklasse : lang gælder hovedsageligt tekster, derskrevet på forskellige sprog. For eksempel, hvis artiklen indeholder citater på originalsproget, kan der angives separate egenskaber for dem. Syntaksen for denne klynge vil være som følger:
- Klassens navn: lang (sprog) {tekstens egenskaber (farve, skrifttype, type osv.)}
Hvad angår positionen "sprog", er det angiveti henhold til accepterede standarder. For eksempel engelsk - en, russisk - ru, tysk - de osv. Takket være denne pseudoklasse kan du ændre stilen på fremmed tekst i hele dokumentet.
fund
CSS pseudoklasser og pseudo-elementer er en afde spørgsmål om det kaskaderende stilark, der er svære at forstå. Der er imidlertid intet svært her, det vigtigste er at forstå, at en pseudoklasse er en bestemt tilstand, der udføres under de betingelser, der er angivet tidligere. For eksempel når du holder musen over eller klikker på musen. Et pseudo-element er en uafhængig del af dokumentet, der ikke er en del af HTML-markeringen, men kan have sin egen stil. Du kan endda sige, at det er virtuel HTML. Hvis du ser på situationen fra denne side, bliver alt ekstremt enkelt og forståeligt, og med denne viden kan du allerede begynde at oprette websteder.
