CSS erstatter tekst
Eksempel 01
La oss komme i gang med bruk av "After" -forskyvning for å erstatte en tekst med en ny tekst. For å lage en HTML -webside, vil vi bruke alle standardmerker. Den aller første og hovedkoden er HTML -taggen, og alt det andre innholdet i tagger kom inn i den. Så vi må sørge for at åpningen og lukkingen av denne taggen ikke går glipp av koden vår. Vi har startet denne taggen, etterfulgt av "head" -merket som har vært et must å utføre toppstyling og andre ting. Vi har lagt stilkoden til den. Du kan også prøve ut "tittel" -merket i den før stilkoden for å gi HTML -siden et enkelt navn.
Innenfor kroppsområdet på HTML -siden vår, vil alle de andre elementene bli lagt til mellom "kropp" -taggen åpning og lukking, i.e., og . Vi har brukt
Merk for å legge til et avsnitt til HTML -sidekroppen vår. Dette
Tag har blitt klassifisert med en "erstatning" for å bruke for styling. De
Tag brukes til å lukke denne taggen etter å ha lagt til noen tekstdata til den. Stilmerket har blitt brukt i "hodet" -merket, og klassen ".erstatte ”har blitt brukt til å legge til styling til avsnittet på denne siden. Synlighetsegenskapen er satt til "skjult" mens posisjonen er satt til relativt i henhold til starten av en side. "Etter" forskyvningen har blitt brukt på neste linje for den aktuelle klassen for å endre synligheten til "synlig" og posisjon til "absolutt". Dette betyr at den nye teksten etter originalteksten vil være synlig, og dens posisjon vil være absolutt.Topp- og venstre margin er satt til 0, mens innholdsegenskapen brukes til å legge til en annen tekst i stedet for originalteksten. På grunn av utskifting vil originalteksten være skjult i henhold til "synligheten" satt til "skjult". Nå kan vi kjøre koden vår da den er fullført.
Nå har vi fått det vistede resultatet i nettleserfanen. Du kan se at originalteksten var "Jeg vil bli erstattet", mens den viste teksten er "Jeg er en ny tekst ...". Det indikerer at bruken av synlighetsegenskapen til "skjult" og "synlig" sammen med egenskapen "innhold" kan få deg til å erstatte en tekst med en annen.
Eksempel # 02
La oss se på et annet eksempel på HTML for å bruke "etter" forskyvningen uten "synlighet" -egenskapen og se om den erstatter teksten eller ikke. Så vi har brukt den samme HTML -åpnings- og lukkende tagger for å lage en standard HTML -fil for utførelse på nettleseren. Innenfor "kropp" -merket til denne HTML -koden har vi brukt
Tag for å opprette et avsnitt på HTML -siden vår og tildelte den en klasse "erstatte" for klassifisering på stylingnivå. Dette avsnittet inneholder også en spennmerke sammen med tekst i det for å markere teksten i den. Spenn- og avsnittsmerker er lukket etter hverandre.
Etter dette lukket vi også kroppskoden. Stilmerket bruker klassen “erstatt” for spennet for å bruke egenskapen “Display” som ingen. Dette betyr at ingen markering vil bli brukt på tekst i spennet. Offset "After" har blitt brukt med "erstatning" -klassen for å legge til egenskapen "innhold" med noen nye tekst for å erstatte den gamle teksten i avsnitts -taggen til vår HTML -kropp. Denne koden er nå klar for utførelse.
Etter utførelse av denne koden i Chrome -nettleseren via Visual Studio -koden "Kjør" -menyen, har vi fått den erstattede teksten i stedet for den originale på HTML -siden.
Eksempel # 03
Innenfor dette eksemplet vil du forstå metoden for å erstatte teksten over sveving. Kroppsdelen av denne koden inneholder en enkel overskriftskode “H1” for å legge til en standard største størrelse på overskriften i HTML -nettsiden ved utførelse. Etter å ha stengt overskriften som ", Vi har lagt til en "div" -kode for å opprette en ny beholder på HTML -siden. Denne beholderen vil inneholde en ankerkode for å legge til en lenke til litt tekst, i.e., Googles URL har blitt brukt til kobling. Overskriftskoden har blitt brukt til å lage en overskrift av størrelse 2, etterfulgt av Span -taggen med tekst i den for markering. Overskriften, ankerkoden og "div" -merket er fullført her. Så vi har lukket alle disse 4 taggene ved hjelp av lukkingsmerkeene i.e. ,
, , .Etter dette trenger vi ikke noe som ennå ikke skal brukes til denne HTML -siden. Dermed har vi også lukket kroppen, jeg.e., Bruke taggen. Anchor -tag -tegnet etterfulgt av "svevet" -forskyvningen har blitt brukt til barnet "spenn" for å stille skjermen til ingen. Den "besøkte" forskyvningen brukes til å fortelle at fargen på en lenke ville være grønn på sidebesøk. "Før" forskyvningen brukes på svevet for å erstatte det originale innholdet med det nye innholdet etter å ha svevet, i.e., “Klikk her for å besøke Google”. Når du svever over originalteksten, vil fargen på en ny tekst bli endret til Crimson. Hvis du trykker på den venstre tasten når du svever over originalteksten uten å slippe nøkkelen, vil den aktive forskyvningen endre fargen på en ny tekst til blå. Stil- og hodemerkene er nå lukket.
Etter å ha kjørt denne koden via VS -kode i Chrome, har vi en overskrift og en lenke til Google. Den understrekede lenken vises i grønn farge.
Når du holder musepekeren på teksten "Trykk på meg", er teksten erstattet med en ny, og fargen på den nye teksten er også oppdatert, i.e., Høyrød. Når du trykker på lenken uten å slippe knappen, vil den endre fargen til blå helt sikkert.
Konklusjon
Vi er ferdige med illustrasjonene og forklaringen av CSS -tekststatningskonseptet innen HTML -skriptet. Vi har implementert totalt 3 eksempler i HTML for å erstatte en tekst med en annen. For dette har vi diskutert bruken av "After" -forskyvningen sammen med dens synlighetseiendom, posisjonseiendom og innholdseiendom. Etter dette har vi også implementert metoden for å erstatte en tekst med noen koblinger med en annen tekst sammen med fargeendringen via hover -tagsene etterfulgt av "før" forskyvning og innholdsegenskap.