Forståelse af Pseudo-Element før og efter
Cascading Style Sheet (CSS) er primært beregnet til at anvende stilarter til HTML-markeringen, men i nogle tilfælde, når tilføjelse af ekstra markering til dokumentet er overflødig eller ikke muligt, er der faktisk en funktion i CSS, der giver os mulighed for at tilføje ekstra markup uden at forstyrre det egentlige dokument, nemlig pseudo-elementer.
Du har hørt om dette udtryk, især når du har fulgt nogle af vores tutorials.
Der er faktisk et par CSS familiemedlemmer, der er klassificeret som pseudo-elementer som f.eks :første linje, : Første bogstaver, ::udvælgelse, :Før og :efter. Men for denne artikel vil vi begrænse vores dækning til kun :Før og :efter, “pseudo-elementer” her vil specifikt henvise til dem begge. Vi vil undersøge dette emne ud fra det grundlæggende.
Syntax og Browser Support
Det pseudo-elementer har faktisk eksisteret siden CSS1, men :Før og :efter som vi diskuterer her blev udgivet i CSS2.1. I begyndelsen pseudo-elementer brug single-colon til syntaxen, så som web udviklet, i CSS3 the pseudo-elementer blev revideret for at bruge dobbelt-kolon - bliver ::Før & ::efter - at skelne det med pseudo-klasser (dvs.. : hover, :aktiv, og så videre).
Men uanset om du bruger single-colon eller double-colon-formatet, genkender browserne heller ikke. Og da Internet Explorer 8 kun understøtter single-colon-formatet, er det mere sikkert at bruge single-colon, hvis du vil have bredere browserkompatibilitet.
Hvad gør den?
Kort sagt, den pseudo-elementer vil indsætte et ekstra element Før eller efter indholdets element, så når vi tilføjer dem begge, er de teknisk lige, med følgende markering.
:Før Dette er hovedindholdet. :efter
Men disse elementer er faktisk ikke genereret på dokumentet. De er stadig synlige på overfladen, men du finder dem ikke på dokumentkilden, så praktisk talt er de falsk elementer.
Brug af pseudo-elementer
Ved brug af pseudo-elementer er forholdsvis let; følgende syntaks vælgeren: før vil tilføje et element Før indholdets vælger mens denne syntaks selector: efter vil tilføje efter det, og for at tilføje et indhold inde i dem kan vi bruge indhold ejendom.
Eksempelvis vil udsnittet nedenfor tilføje et citatmærke før og efter blockquote.
blockquote: før indhold: åbent citat; blockquote: efter indhold: close quote;
Styling pseudo-elementer
På trods af at det er et falskt element, pseudo-elementer faktisk fungere som en “ægte” element; vi er i stand til at tilføje en formularerklæring på dem, såsom ændring af farven, tilføjelse af baggrund, justering af skriftstørrelsen, tilpasning af teksten inde i den og så videre.
blockquote: før indhold: åbent citat; skrifttypestørrelse: 24pt; tekst-align: center; linjens højde: 42px; farve: #fff; baggrund: #ddd; flyde: venstre; stilling: relativ; top: 30px; blockquote: efter indhold: close quote; skrifttypestørrelse: 24pt; tekst-align: center; linjens højde: 42px; farve: #fff; baggrund: #ddd; flyde: højre; stilling: relativ; bunden: 40px;
Angivelse af dimensionen
De genererede elementer er som standard et inline-niveauelement, så når vi skal angive højden og bredden, skal vi først definere den som et blokelement ved hjælp af display: blok erklæring.
blockquote: før indhold: åbent citat; skrifttypestørrelse: 24pt; tekst-align: center; linjens højde: 42px; farve: #fff; baggrund: #ddd; flyde: venstre; stilling: relativ; top: 30px; grænse-radius: 25px; / ** definere det som et blokelement ** / display: block; højde: 25px; bredde: 25px; blockquote: efter indhold: close quote; skrifttypestørrelse: 24pt; tekst-align: center; linjens højde: 42px; farve: #fff; baggrund: #ddd; flyde: højre; stilling: relativ; bunden: 40px; grænse-radius: 25px; / ** definere det som et blokelement ** / display: block; højde: 25px; bredde: 25px;
Vedhæft baggrundsbillede
Vi kan også erstatte indholdet med et billede i stedet for kun almindelig tekst. Selvom indhold ejendom giver en url () streng for at indsætte et billede, men i de fleste tilfælde foretrækker jeg meget at bruge baggrund ejendom for mere kontrol over det vedhæftede billede.
blockquote: før indhold: ""; skrifttypestørrelse: 24pt; tekst-align: center; linjens højde: 42px; farve: #fff; flyde: venstre; stilling: relativ; top: 30px; grænse-radius: 25px; baggrund: url (images / quotationmark.png) -3px -3px #ddd; display: blok; højde: 25px; bredde: 25px; blockquote: efter indhold: ""; skrifttypestørrelse: 24pt; tekst-align: center; linjens højde: 42px; farve: #fff; flyde: højre; stilling: relativ; bunden: 40px; grænse-radius: 25px; baggrund: url (images / quotationmark.png) -1px -32px #ddd; display: blok; højde: 25px; bredde: 25px;
Som du kan se fra udsnittet ovenfor, erklærer vi dog stadig indhold ejendom og denne gang med en tom streng. Det indhold ejendommen er et krav og bør altid anvendes ellers pseudo-element vil ikke virke eksklusionen.
Kombinere med pseudoklasser
Selvom de er en anden slags pseudo, vi kan bruge pseudo-klasser sammen med pseudo-elementer sammen i en CSS regel, for eksempel, hvis vi vil vende citat mærke baggrund lidt mørkere, når vi svæver over blockquote.
blockquote: hover: after, blockquote: hover: før baggrundsfarve: # 555;
Tilføjelse af overgangseffekt
Og vi kan endda anvende overgang ejendom på dem for at skabe en yndefuld farveovergangseffekt.
overgang: alle 350ms; -o-overgang: alle 350ms; -moz-overgang: alle 350ms; -webkit-overgang: alle 350ms;
Desværre virker overgangseffekten kun i den nyeste version af Firefox. Forhåbentlig vil flere browsere komme ind for at tillade overgangseiendommen at blive anvendt i pseudo-elementer i fremtiden.
- Demo
- Download kilde
Mere inspiration
For at inspirere dig har vi valgt tre kølige eksempler, der kan give dig ideer til dit webdesign.
Fascinerende skygger
I denne vejledning forklarede Paul Underwood, hvordan man skaber en mere realistisk og fascinerende skyggeeffekt ved hjælp af :Før og :efter pseudo-elementer. Begge er placeret helt og placeret helt bagud med negativ z-index værdi.
Stacked Image Effect
Bruger pseudo-elementer for at skabe en rodet stablet billed effekt kun med et enkelt billede på markeringen er også muligt. Det pseudo-elementer bruges til at skabe en illusion af de stablede billeder bag på det faktiske billede ved hjælp af negativ z-index.
Konklusion
Pseudo-elementer er simpelthen “fedt nok” og i sidste ende brugbare, vi har grundlæggende to bonuselementer for hvert element tilføjer vi uden at forstyrre den egentlige HTML-struktur overhovedet, og derefter vende dem til næsten alt, hvad vi nogensinde kan forestille os.
Der er faktisk en vis forbedring for pseudo-elementer der arbejdes på, som f.eks nesting pseudo-elementer div :: før :: før indhold: "; og flere pseudo-elementer div :: før (3) indhold: "; hvilket åbenbart vil åbne mange flere muligheder i webdesign praksis i fremtiden. Mens de implementeres i nuværende browsere, lad os vente tålmodigt for nu.
