CSS inngangsbredde
Kaskaderende stilark bruker flere egenskaper for å style alt HTML -innhold. En av de grunnleggende effektene som brukes er bare å øke dimensjonen til innholdet i noen spesifikk retning (e.g., bredde og høyde.) Denne artikkelen vil diskutere breddeegenskapen som er forskyvningen i den opprinnelige størrelsen på innholdet i horisontalt retning.
Inngangsfelt:
Mens vi oppretter et skjema på websiden, bruker vi ofte forskjellige tekstfelt for å få dataene inn i dette feltet av brukeren. Dette gjøres av inngangstypen på feltet, 'tekst'. Vi vil bruke breddeegenskapen for å forbedre størrelsen på inngangsfeltene til HTML.
Eksempel 1:
Dette eksemplet vil omfatte prøveimplementering av en tekstboks som er deklarert i HTML -kroppen sammen med en inline CSS. Inline CSS er den typen CSS som er erklært inne i HTML -taggen til kroppen. Først vil vi erklære en enkel tekstboks ved å bruke breddeegenskapen direkte i inngangstype -taggen. Denne koden vil ha en kroppsdel direkte i koden, da det ikke er behov for å bruke en hodeseksjon. Inne i kroppen brukes en bakgrunnsfarge.
Når du fyller ut et online skjema, må du ha lagt merke til at en liten tekst er skrevet til side med tekstboksen eller tekstfeltet. Denne teksten beskriver formålet med tekstboksen og typen tekst brukeren skal angi. For eksempel er navnet, alderen og adressen de nødvendige informasjonen som kreves felt i teksten. Disse navnene på alle feltene er kjent som etikett. I HTML brukes en spesifisert etikettmerke for å erklære etiketten for hvert tekstfelt.
| 1 | < label for = "name"> Angi en verdi: |
Denne taggen bruker navnet på tekstfeltet som den tilhører, og vil vises før det spesifiserte feltet er erklært på websiden. Deretter blir navnet på etiketten nevnt. Etter det vil vi erklære tekstboksinnholdet. Når vi skriver teksten, blir inngangsfeltet lagret eller hentet av systemet. Type innspill, ved å bruke ID for det, vil være en tekst med navnet på feltet.
| 1 |
Den tredje egenskapen i denne taggen tilhører CSS. Breddeegenskapen legges til med stiluttalelsen for å legge til den horisontale dimensjonen til tekstboksen. Dette gjøres gjennom bredden.
Lagre denne koden i tekstredigereren med HTML -utvidelsen for å se websiden til denne koden i hvilken som helst nettleser. Åpne denne koden med et alternativ i nettleseren.
Du vil se at en enkel tekstboks med etiketten er dannet. En spesifisert bredde er gitt til boksen ellers vil den ha et lite område å ta innspill.
Dette konseptet kan også gjøres ved å bruke en egen stilkode i hodedelen for å gjøre koden lett forståelig. Denne typen CSS der stilen legges separat i hodeseksjonen er kjent som intern CSS. Dette oppnås ved å bruke ID -er og klasser for den spesifikke taggen vi ønsker å legge til effekten. For eksempel opprettes 'Helo' klasse for å legge til bredde i inngangsboksen.
| 1 2 3 4 5 6 7 8 9 |
Navnet på denne klassen 'Helo' vil bli lagt til inngangs taggen som en referanse for å legge til alle egenskapene til denne inndatatype -tekstboksen.
| 1 |
Ved utførelse opprettes den samme tekstboksen.
Eksempel 2: CSS -velger
I motsetning til det forrige konseptet med å erklære breddeegenskapen til tekstboksen som inline og interne CSS gjennom klassefenomenet, er det en annen funksjon som brukes til å bruke noen effekt på HTML -innholdet. Dette er en CSS -velger. Denne velgeren er forskjellig for hvert HTML -innhold. Selector -erklæringen gjøres også som den interne CSS inne i stilmerket i hodeseksjonen.
| 1 2 3 4 5 | Input [type = "text"] Bredde: 200px; |
Dette gjøres ved å bruke søkeordinngangen i parentesene. Inngangstypen er nevnt som spesifiserer erklæringen om et tekstfelt. Inne i denne erklæringen brukes bredden på feltet.
Inne i kroppen er det ikke nødvendig å legge til noe klassenavn eller ytterligere detaljer for referanse. Når vi erklærer inngangstypen for opprettelse av tekstboks, kobles den automatisk til stilmerket inne i hodeseksjonen.
Eksempel 3:
Det er et annet eksempel på å bruke bredden på tekstboksen. Dette gjøres ved å bruke stilkoden inne i HTML -inngangsinnholds taggen og legge til margin og polstring til tekstfeltene for å forbedre breddeegenskapen. Breddeegenskapen brukes bare på ett tekstfelt mens den andre inneholder standardinnstillingene. Dette vil vise forskjellen i å erklære en tekstbokstypeboks med og uten bredde styling. La oss nå starte med HTML -kroppskoden for å utdype arbeidet med bredde -stilkoden.
Først, inne i kroppen, har vi erklært en overskrift. Bruk deretter en div container på websiden. Hovedfunksjonen til denne beholderen er å legge til HTML -innhold til den med spesifisert justering for å holde dem på riktig sted. Inne i taggen, bruk etikett -taggen for å legge til navnet. Bruk deretter inndatakoden for tekstfeltet og legg til en størrelse på 10 til den. Forskjellen i størrelse og bredde er at bredden forstørrer tekstboksen i piksler. Mens størrelsen også brukes til å øke dimensjonene til ethvert objekt, men det gjelder vertikale og horisontale utvidelser.
Ta en pause gjennom
stikkord. Bruk deretter igjen en annen tekstboks for dataene. Legg til datatypens inngangsfelt slik at brukeren bare kan legge til datoen i henhold til formatet. Kalendersymbolet vil også bli dannet som er en innebygd funksjon.
I CSS -delen legges skrifttypen for etiketten. Og til inngangsfeltet har vi brukt margin- og polstringsegenskapene.
| 1 2 3 4 5 6 7 | Input Margin: 7px; Polstring: 2px; |
Ved utførelse vil du se at størrelsesattributtet har forstørret den totale størrelsen på tekstboksen Navn. Mens breddeegenskapen har økt horisontale størrelse.
Konklusjon:
En CSS -inngangsbredde er en funksjon som brukes til å forbedre størrelsen på inngangstypefeltene, disse feltene er også tekstbokser, tekstområder og avmerkingsbokser. Vi brukte tekstboksene for å utdype arbeidet med breddeegenskapen i CSS inline og intern CSS. Forskjellen mellom størrelsen og breddefunksjonen er også forklart. Breddeegenskapen spiller en viktig rolle i justeringen av formen ved å holde verdien av breddeforholdet den samme for alle tekstfelt.