I HTML brukes navneattributtet for å spesifisere et navn for et element i HTML, for eksempel alder, dato og mange flere. Det brukes også i form av referanse når dataene i et skjema sendes inn. Videre kan brukeren style elementet “Navn”Ved å få tilgang til den ved hjelp av en velger og deretter bruke CSS -egenskaper, inkludert“høyde”,“farge”,“bakgrunnsfarge”,“skriftstørrelse”Og mange flere etter ditt valg.

Dette innlegget vil demonstrere om å bruke CSS -stilen på et elementnavn.

Hvordan kan jeg bruke en CSS -stil på et elementnavn?

Ja, brukeren kan style elementnavnet ved hjelp av forskjellige CSS -egenskaper ved å bruke dem. For å gjøre det, prøv den gitte trinn-for-trinn-prosedyren.

Trinn 1: Lag en div container

Til å begynne med, bruk "”Tag for å lage en div container. Legg deretter til en klasseattributt og tilordne et navn til klassen i henhold til dine preferanser. I dette scenariet er "Div-Main”Er satt som klassenavnet.

Trinn 2: Legg til overskrift

Deretter setter du overskriften ved hjelp av “

”Og innebygde tekst mellom overskriften åpning og lukking av taggen.

Trinn 3: Lag et skjema

Følg denne prosedyren for å lage et skjema:

• Først, legg til en "”Element som brukes til å lage et skjema.
• Neste, bruk "”Element for å legge inn etiketten, og deretter,“”Element brukes til å fordele skjemafeltene.
• Inngangstypen er satt som "tekst”Som spesifiserer tekstfeltet i skjemaet.
• “stedholder”Tildeler et kort hint som definerer verdien som skal vises på inngangsfeltet.
• “Navn”Attributt definerer en forventet referanse når skjemaet sendes inn.
• “min”Angir minimumsverdien for en“”Element.
• Inngangstypen "sende inn”Brukes til å legge til en knapp i skjemaet:

CSS -stil til et elementnavn

Navnet ditt




Ditt kjønn




Din alder

Det kan legges merke til at skjemaet er opprettet med hell:

Trinn 4: Tilgangsklasse

Få tilgang til klassen ved å bruke klasselektoren med klassenavnet. For eksempel, ".Div-Main”Brukes til å få tilgang til hovedklassen.

Trinn 5: Bruk CSS -egenskaper

Etter tilgang til klassen, bruk CSS -egenskapene for styling:

.Div-Main
Border-stil: Strikket;
Margin: 20px 70px;
polstring: 20px;
bakgrunnsfarge: RGB (177, 245, 222);

Her:

• “grensestil”Eiendom brukes til å legge en stil til elementgrensen.
• “margin”Definerer et rom utenfor den definerte grensen rundt elementet, der den første verdien er“20px”Og tilfører plass øverst og bunn, og den andre verdien,”70px”, Setter plassen på venstre og høyre side.
• “polstring”Definerer et rom inne i grensen.
• “bakgrunnsfarge”Brukes for å spesifisere fargen på baksiden av elementet.

Produksjon

Trinn 6: Tilgangselement "Navn"

Få tilgang til “”Element“Navn”. For eksempel vil vi få tilgang til inngangsfeltet med navnet "alder”.

Trinn 7: Bruk CSS -stil på elementet “Navn”

Deretter bruker du CSS -stiler på elementet “Navn”Ved å bruke de listede egenskapene:

input [name = "alder"]
Høyde: 40px;
Farge: RGB (243, 242, 242);
bakgrunnsfarge: RGB (241, 34, 7);
Font: fet;
Font-størrelse: stor;

I koden ovenfor:

• “høyde”Eiendom tildeler høyde til det valgte elementet.
• “farge”Brukes til å spesifisere elementtekstens farge.
• “bakgrunnsfarge”Brukes til å sette elementets bakgrunnsfarge.
• “Font”Er satt som“dristig”For å gjøre det fremtredende.
• “skriftstørrelse”Angir størrelsen på skriften. Når skriftstørrelsen er endret, endrer den også størrelsene på skriften.

Som et resultat elementet “alder”Vil bli stylet som følger:

Vi har lært deg om å bruke CSS -stilen på elementnavnet.

Konklusjon

Ja, brukeren kan style elementnavnet ved hjelp av forskjellige CSS -egenskaper ved å bruke dem. For å gjøre det, først, lage et skjema og legge til flere felt. Få tilgang til “Navn”Element fra“”Tag ved å bruke“input [name = “”]”Syntaks. Bruk deretter de nødvendige CSS -egenskapene. Dette innlegget forklarte metoden for å style elementnavnet ved å bruke CSS -egenskaper.