CSS -avkrysningsruten størrelse

I denne artikkelen vil vi diskutere CSS -egenskapene for å øke størrelsen på en avkrysningsrute. Standard avkrysningsrute i hypertekstmarkeringsspråket er liten og kan noen ganger bli vanskelig å finne på websiden. Vi vil diskutere høyden, bredden og transformere ofte brukte egenskaper til CSS. Vi vil implementere flere eksempler relatert til dette fenomenet i Notisblokkene ++ miljøet.

Eksempel 01: Å øke størrelsen på en standard avkrysningsrute ved å bruke høyde- og breddeegenskaper via stilkode CSS

I dette eksemplet vil vi øke størrelsen på en standard avkrysningsrute som hypertekstmarkeringsspråket gir. CSS -stilteknikken vil bli brukt i dette eksemplet for å gi avkrysningsruten en annen størrelse. Både størrelsesendrende egenskaper vil bli lagt til en stylingklasse for avkrysningsruten i dette eksemplet.

I skriptet ovenfor begynner vi med overskriften til filen der vi har kalt CSS -taggen "Style". Inne i denne taggen vil vi legge til en klasse for inngangselementet som representerer avmerkingsboksen Hypertext Markup Language. Vi vil navngi klassestørrelsen. I denne klassen vil vi definere egenskapene som vil endre størrelsen på avkrysningsruten. Først vil vi definere breddeegenskapen ved å gi den en verdi av "50px". Deretter vil vi definere høydeegenskapen ved å gi den samme verdi.

Etter det vil vi lukke filens stil og topptagger for å åpne kroppskoden. I Body -taggen vil vi starte med å gi den en overskrift med en "H1" -kode. Deretter vil vi åpne inngangs taggen. I denne taggen vil vi definere inngangselementets type ved å merke den som en avkrysningsrute. Etter dette vil vi også kalle stylingklassen "størrelse" som vi opprettet i filen til filen. Til slutt vil vi spesifisere det som "sjekket" som standard og lukke inngangs- og kroppskoden.

Etter å ha lagret det forrige skriptet og åpnet det i nettleseren vår, får vi output ovenfor. Som et resultat av høyde- og breddeparametere i denne utgangen, har avkrysningsruten utvidet seg i størrelse.

Eksempel 02: Å øke størrelsen på en standard avkrysningsrute ved å bruke høyde- og breddeegenskaper via inline CSS

Den inline CSS -stil -tag -tilnærmingen vil bli brukt for å justere størrelsen på avkrysningsruten i dette eksemplet. Vi vil øke en standard avkrysningsrute som tilbys av hypertekstmarkeringsspråket i dette eksemplet. Begge størrelsesendrende funksjoner vil bli brukt på en stilmerke inne i inngangselementet i dette eksemplet.

I starten av skriptet åpner vi en stilmerke i hodemerket bare for kroppen av filen der vi vil justere teksten til kroppen til sentrum i dette skriptet. Deretter vil vi lukke stilen og hodemerket for å åpne kroppskoden. I Body -taggen vil vi gi en overskrift til siden ved hjelp av "H1" -merket. Deretter vil vi åpne inngangs taggen og definere typen inngangselement ved å identifisere den som en "avkrysningsrute.”Etter det vil vi spesifisere stylingen av avkrysningsruten ved å bruke Inline CSS -uttrykket“ Style.”I denne samtalen vil vi definere bredde- og høydeegenskapene ved å gi dem pikselverdier. Deretter setter vi den til "sjekket" som standard og lukker inngangs- og kroppskodene. Vi lagrer denne filen i ".HTML ”-format og åpne det i nettleseren vår for å få utdataene nedenfor:

Vi kan i denne utgangen observere at avkrysningsruten har vokst på grunn av høyden og breddeegenskapene som definert inne i inngangs tagens stilattributt.

Eksempel 03: Å øke størrelsen på en standard avkrysningsrute ved å bruke Transform Property via Style Tag CSS

Vi vil øke størrelsen på en standard avkrysningsrute levert av hypertekstmarkeringsspråket. I dette eksemplet vil avkrysningsruten få en tilpasset størrelse ved hjelp av CSS -stilteknikken. I dette eksemplet vil Transform -egenskapen bli lagt til i en avkrysningsrute -stylingklasse som vil forstørre standard avkrysningsruten størrelse.

I det følgende skriptet begynner vi med filens overskrift der vi har kalt CSS -taggen "Style.”Innenfor inngangskoden vil vi legge til en klasse til inngangselementet som representerer avmerkingsboksen Hypertext Markup Language. Vi vil da ringe klassestørrelsen. Innenfor det vil vi lage attributtet som vil justere avkrysningsruten størrelse. Transform -egenskapen vil bli definert og skrevet med det skala nøkkelordet som vil akseptere skaleringsstørrelsen heltall som en inngang. Etter det vil vi lukke filens stilkode og header for å gi plass til kroppskoden. Vi starter med en "H1" -merke i kroppskoden for å gi den en overskrift. Deretter vil vi åpne inngangskoden der vi vil merke inngangselementet som en avkrysningsrute og beskrive typen der. Etter det vil vi nevne stylingklassen "størrelse" som vi etablerte i filens overskrift. Til slutt vil vi stille standarden for å "sjekke" og lukke inngangs- og kroppskodene.

Vi får output ovenfor etter å ha lagret det forrige skriptet og åpnet det i nettleseren vår. I denne utgangen kan vi se at avmerkingsboksen har utvidet seg i størrelse på grunn av transformasjonseiendommen.

Eksempel 04: Bruke tre CSS -egenskaper for å øke størrelsen på en avkrysningsrute i en HTML -fil

Den inline CSS -stil -tag -tilnærmingen vil bli brukt for å justere størrelsen på avkrysningsruten i dette eksemplet. Alle de tre CSS -egenskapene vil bli lagt til en stilkode inne i inngangskoden i dette eksemplet. Vi vil øke standard avkrysningsrutenes størrelse som tilbys av hypertekstmarkeringsspråket.

I dette skriptet begynner vi med å åpne en stilkode i hodemerket som bare gjelder filens kropp. Deretter vil vi sentrere kroppsinnholdet. Stil- og hodemerkene vil da være lukket, slik at kroppskoden åpnes. Ved hjelp av "H1" -elementet i kroppskoden, vil vi gi siden en overskrift. Etter det vil vi bruke den inline CSS -uttrykket "stil" for å uttrykke avkrysningsruten styling. I denne samtalen vil vi spesifisere bredde- og høydeegenskapene ved å gi pikselverdier til dem. Deretter vil vi også legge til Transform -egenskapen i denne samtalen for å skalere avkrysningsruten deretter. Etter dette skal vi definere det som "sjekket" og lukke inngangs- og kroppskodene. Vi lagrer denne filen i ".HTML ”-format og åpne det i nettleseren vår for å få utdataene nedenfor:

Som et resultat av høyden, bredden og transformasjonsegenskapene i denne utgangen som ble definert inne i inngangskoden, har avkrysningsruten utvidet seg i størrelse.

Konklusjon:

I denne artikkelen har vi diskutert flere CSS-egenskaper som brukes til å øke størrelsen eller utvide en standardstørrelse i en HTML-fil. De to første egenskapene er høyde og bredde som kan legges til en stilklasse eller tagg i inngangselementet i hypertekstmarkeringsspråket. Disse egenskapene ble brukt til å øke størrelsen på en avkrysningsrute i to forskjellige CSS -teknikker som er stilkode CSS og inline CSS. Vi implementerte også Transform -egenskapen som CSS gir som bruker skalafunksjonen for å utvide en standard avkrysningsrute.