CSS -knappestørrelse

Denne artikkelen vil gå over konseptet med knappestørrelse i CSS -stiltilnærmingen. Som vi vet, er standardknappen liten i størrelse og er ikke synlig. Så vi vil bruke CSS på to separate måter for å øke knappestørrelsen og endre den på en effekt som sveveeffekten. Alle disse eksemplene vil bli utført i Notisblokkene ++ miljøet.

Eksempel 01:

I dette eksemplet vil vi bruke bredde og høydeegenskap for knappelementet for å øke størrelsen. Vi vil bruke CSS -stilkodetilnærmingen i dette eksemplet for å legge til flere egenskaper. Først vil vi se på standardstørrelsen på knappelementet som er til stede i en HTML -fil.

Som vi kan se i det gitte skriptet, har vi ikke endret størrelsen på knappen. I den følgende utdata kan vi se at knappestørrelsen er veldig liten og ikke er mulig for en webside.

Så nå legger vi stylingen til knappen. Først åpner vi hodemerket for filen. I denne taggen kalles stilmerket for CSS. I denne taggen legger vi til alle egenskapene for knappelementet. Vi skriver alle egenskapene for knappelementet inne i knappklassen parentes. Først setter vi bakgrunnsfargen til "gul". Deretter setter vi bredden i pikselformat til “100px”. Til slutt setter vi høyden i pikselformat til “30px”. Vi lukker stil- og hodemerkene etter at all formateringen er fullført. Deretter går vi til kroppskoden. Vi skriver sidens overskrift ved hjelp av H1 -taggen i kroppskoden og åpner deretter knappekoden. Klassen fra stilkoden kalles i knappekoden. Etter det lukker vi knappekoden med teksten som vises på knappen i mellom, så vel som kroppskoden.

Som forklart tidligere, la vi til koden i forrige skript. Nå åpner vi dette nye skriptet i nettleseren vår etter å ha lagret det i riktig format.

I den gitte utdata kan vi se at knappen har all formatering, inkludert størrelsen vi spesifiserte i stilklassen i filoverskriften.

Eksempel 02: Bruke inline CSS for å endre størrelsen på en knapp i en HTML -fil

I dette eksemplet vil vi bruke Inline CSS for å endre størrelsen på en HTML -fils standardknappelement. Alle stilegenskapene vil bli tildelt inne i knappekoden. Dette er en ukonvensjonell metode for å legge CSS til ethvert element og vil bare være assosiert med det nåværende elementet.

Som vi kan se i forrige utdrag, flyttet vi direkte til filen av filen, da alt innholdet ville være i kroppskoden. Først åpner vi H1 -taggen for å skrive en overskrift for siden og deretter lukke den. Deretter åpner vi knappekoden. I denne taggen kaller vi stilattributtet med nøkkelordet. Etter dette skriver vi alle egenskapene for knappelementet i det omvendte kommaene og skiller dem ved å bruke Semicolon -karakteren. Først tildeler vi bakgrunnsfargen, "gul". Deretter tildeler vi bredden i pikselformatet. Til slutt tildeler vi høyden, også i pikselformatet. Etter dette lukker vi knappekoden med teksten i mellom, som vises på knappen. Og lukk kroppskoden sammen med den. Nå lagrer vi denne filen i ".HTML ”-format og åpne det i nettleseren vår for å få følgende resultat:

Som vi kan se i utdataene fra skriptet vårt, er overskriften og knappen fra kroppskoden synlig. Knappen har alle verdiene som er definert i taggen, inkludert høyden og bredden.

Eksempel 03: Å øke størrelsen på en knapp når den henger med markøren vår i en HTML -fil

I dette eksemplet vil vi bruke bredde- og høydeegenskapene til knappelementet for å gjøre det større, bare når pekeren er over den. I dette eksemplet vil vi bruke CSS -stilmerker for å legge til mange attributter og effekter til knappelementet.

I dette eksemplet tilpasser vi knappen ved hjelp av CSS -stilmerker. Først åpner vi filens hodemerke. Og så kaller vi CSS -stilkoden derfra. Vi legger til alle knappelementets attributter i denne taggen. Inne i parentesen i knappeklassen skriver vi inn alle egenskapene for knappelementet; I dette eksemplet setter vi bakgrunnsfargen til “gul.”Deretter åpner vi en knappeklasse som arver en metode som heter“ Hover ”. I denne funksjonen gjør vi følgende: vi setter bredden i pikselformat til “100px” og setter høyden i pikselformat til “30px”. Etter at vi er ferdig med formateringen, lukker vi stil- og hodemerkene. Deretter går vi til kroppskoden. Vi bruker H1 -taggen for å opprette sidens tittel i Body -taggen, og åpner deretter knappemerket. Knappemerket bruker klassen fra stilkoden og har teksten som vises på knappen derimellom. Etter det lukker vi knappekoden og kroppskoden.

Som vi ser i forrige utgang, har størrelsen og bakgrunnsfargen endret seg når vi svevde på knappen med markøren vår. Dette er fordi hoverfunksjonen har alle disse egenskapene definert i stilkoden til overskriftenes fil.

Eksempel 04: Bruke skriftstørrelsen for å forbedre størrelsen på en knapp ved hjelp av CSS

I dette eksemplet vil vi velge en annen metode for å endre størrelsen på en knapp. Fontstørrelsesegenskapen vil bli brukt til å øke størrelsen på en knapp ved hjelp av stilkoden CSS.

Først åpner vi stilmerket i filoverskriften og oppretter en stylingklasse for knappen. I denne klassen tildeler vi en bakgrunnsfarge til knappen. Etter det tildeler vi også skriftstørrelsen. I dette tilfellet er det satt til “25px”. Deretter lukker vi henholdsvis klassen og stil- og hodemerkene. Da har kroppskoden en overskrift og en knappemerke som har stilklassen arvet i den. Etter dette lukker vi taggene og lagrer filen for å åpne den i nettleseren vår.

I utgangsskjermen kan vi se at knappen har økt størrelse fra standardknappen som HTML gir på grunn av endringen i fontstørrelsesegenskapen.

Konklusjon

I denne artikkelen diskuterte vi størrelsen på knappelementet som er til stede på hypertekstmarkeringsspråket. Standardknappen har en veldig liten størrelse som gjør det vanskelig å navigere på en webside. Så vi brukte de forskjellige tilnærmingene i CSS som stilkoden og inline CSS -tilnærmingen. Den vanligste egenskapen som brukes til å endre størrelsen er bredden og høydeegenskapen til en knapp. Vi diskuterte dette konseptet og implementerte dette på Notisblokken++. Vi implementerte også fontstørrelsesmetoden for å øke størrelsen på en knapp.