CSS første brev

Et kaskaderende stilark spiller en viktig rolle i å dekorere ordets første bokstav i HTML. Noen ganger trenger vi at brukeren skal ta hensyn til et bestemt stykke tekst, i henhold til vårt krav. For å oppnå dette formålet, bruker vi tekstdekorasjon og effekter på den første bokstaven i ordets ord eller overskriften. Dette hjelper med å avlede brukerens fokus på det aktuelle punktet. Dette utvalget gjøres gjennom CSS :: Første bokstavvelger som er CSS Pseudo-Element.

CSS pseudo-element

Det er nøkkelordet som er lagt til i velgeren som lar deg dekorere eller style den aktuelle delen av det valgte elementet. Den grunnleggende syntaksen som brukes til denne stylingen er definert i følgende:

Velgeren i denne artikkelen representerer den første bokstaven i ordet. Stilegenskapen inkluderer også grenseegenskap, farge, skrift, margin, tekstdekorasjon, polstring og bakgrunnseiendom. Vi bruker de tre hovedstilegenskapene i denne guiden.

Font og fargestil på den første bokstaven

Først bruker vi de to egenskapene i første bokstavstyling. Fra og med HTML -åpningskoden, erklærer vi hodet og åpner deretter stilmerket. Siden vi må bruke noen effekt på den første bokstaven, er det nødvendig å nevne det på stylingstidspunktet. Ellers vil hele teksten til avsnittet bli berørt. Så "P" for avsnittet er nevnt sammen med den første brevklæringen. Den grønne fargen og skriftstørrelsen i prosent brukes.

Etter det er hodeseksjonen lukket. Kroppskoden komplimenteres med den midtjusterte taggen. Det er et eksempel på inline styling. Inne i kroppen legger vi til en overskrift igjen. Inline CSS brukes for å bruke fargen på den. Til slutt blir avsnittet lagt til der vi brukte stylingen. Vi kan også bruke hvilken som helst stil på den første bokstaven i overskriften som i avsnittet.

Kode:

Lagre koden og kjør den i nettleseren. Du vil se den resulterende nettsiden der den første bokstaven i avsnittet er større sammenlignet med resten av teksten og fargen endres. Denne endringen i stilen er nyttig for å avlede leserens fokus.

Produksjon:

Grensestil på første bokstav

Den andre måten å gjøre den første bokstaven fremtredende er å bruke en firkantet form eller en kant rundt tekstenes første bokstav. La oss utdype hvordan det fungerer.

Denne gangen tar vi de to måtene å style det første bokstavet ved å bruke den ene stilen på overskriften og den andre til avsnittet. Inne i stilmerket er den samme første bokstavverdien erklært til overskriften "H3". Grensestilen er satt til “solid”.

Kode:

Tilsvarende, i den første bokstaven i avsnittet, bruker vi grensestilen som dobbelt. Vi kan også bruke en enkel grense eller den stiplede ved å erstatte navnet på grensen med det "prikkede" ordet. Inne i kroppen er en overskrift og et avsnitt erklært, begge inneholder dummy -teksten for å vise effekten vi brukte på dem. Lagre filen til tekstredigereren og kjør den deretter i standard nettleseren.

Produksjon:

Du vil se at i overskriften er den første bokstaven "T" og den er stylet med en solid kant. Du kan også bruke flere effekter på grensen, som grensefargen osv. Dette vil tiltrekke seg mer sammenlignet med hele teksten. Avsnittet har den første bokstaven “L” til “Lorem”. Dette er stylet av dobbeltgrensen.

Merk: Begge grenseeffektene blir brukt på den første bokstaven i det første ordet som vi nevnte i CSS. Men hvis definisjonen av første bokstav blir fjernet, vil grensen bli brukt på hele teksten, enten i overskriften eller i avsnittet.

Tekstdekorasjonsstil på første bokstav

Den første bokstaven i teksten kan også styles ved å dekorere teksten. Denne gangen bruker vi den første bokstaven på listen. Hver liste vil bli påvirket av en annen stil av tekstdekorasjonen. CSS Text Decoration Property har flere aspekter; Vi vil gå med tekstdekorasjonslinjen.

Først må du vurdere kroppsdelen av HTML -koden. To enkle overskrifter brukes. At vi erklærer en enkel liste. Fra de to typene lister bruker vi en uordnet liste her. De

Tag er erklært. Inne i taggene på den uordnede listen, erklærer vi listene med taggen
• .

  1 2 3 4 5

  Shiza Ahsan

  Alle tre listene er erklært inne i taggen til

  . Hver liste er lukket separat og etter erklæringen om alle listene,
  blir brukt. Hver liste brukes med et ID -navn. Stilen til den første bokstaven brukes ved å identifisere hvert eksempel når vi bruker de forskjellige stilene for hver linje på listen.

  HTML -kode:

  Hvis ID -ene fra listen fjernes, blir en enkelt stil brukt på alle linjene på listen. Lukk nå kroppsseksjonen. Gå mot hodet av HTML -kroppen.

  Inne i stilmerket blir fargen på overskriften brukt. Det er en valgfri effekt bare for å forklare arbeidet. Hele kroppen brukes av stilen for å justere på venstre side av websiden.

  1 2 3 4 5

  Ul li Margin-top: 15px;

  En vanlig effekt som brukes på alle linjene på listen er en margineffekt. For å holde avstanden mellom to linjer på listen, bruker vi denne effekten. Etter det brukes hver linje på listen i de forskjellige stilene. For eksempel, i eksempel1 ID, bruker vi effekten av tekstdekorasjonen med en understreket prikket på første bokstav.

  1 2 3 4 5

  #Eksempel1 :: første bokstav Tekstdekorasjon: Understrek prikket;

  Tilsvarende brukes eksempel2 og eksempel3 av tekstdekorasjonen av en rød linje gjennom bokstaven. Mens den tredje linjen på listen har en overlinje blå effekt.

  CSS -kode:

  Etter å ha lagt til alle effektene, lagre koden og vi kjører filen. Den første bokstaven "s" av ordet 'shiza "har en stiplet linje under. Den første bokstaven “S” på den andre linjen har en rød linje gjennom den. Og "z" til Zaroon inneholder en blå linje som passerer over den.

  Produksjon:

  Konklusjon

  CSS første bokstav i teksten i HTML spiller en viktig rolle i å avlede brukerens oppmerksomhet. I denne artikkelen gir vi kort den grunnleggende introduksjonen til første bokstavvelger som er et element i CSS Pseudo-eiendommen. Denne eiendomsstilen har flere kategorier. Vi kan bruke hver enkelt for å fremheve den første bokstaven. De tre egenskapene som brukes er skrifttypen pluss fargeeffekt, grenseeffekten og tekstdekorasjonsegenskapen som har forskjellige stiler og farger på linjer som passerer under eller gjennom de første bokstavene.