CSS -grensestørrelse
Eksempel 01: Bruke Style Tag CSS for å endre størrelse på en grense i en HTML -fil
I dette eksemplet vil vi endre størrelsen på en kant av en DIV -beholder ved å bruke CSS i hodemerket i en HTML -fil. Vi vil definere en universell funksjon for alle DIV -containere som vil bli opprettet i denne filen for å ha den forhåndsdefinerte redigeringsstilen som vi vil definere i DIV -delen som er til stede i stilkoden. Så for å utføre denne oppgaven, vil vi generere følgende skript:
Som vi kan se i skriptet ovenfor til en HTML -fil, har vi åpnet en stilmerke der en div kalles som har flere egenskaper definert en etter en. Først er polstring, som vil gi Div Container et mellomrom mellom siden i nettleseren og grensene. Så har vi kalt selve grenseeiendommen, og i denne eiendommen vil vi definere størrelsen på grensen og grensetypen; I vårt tilfelle er det satt til “1px” og “solid.”Så la vi til websett som vil støtte de mest brukte nettleserne i samme eiendomsfunksjon. Så lukket vi stilen og hodemerket og åpnet kroppskoden. I denne taggen har vi nevnt alt som vil være til stede på siden når denne filen er åpnet i en nettleser.
Vi har lagt til en overskrift ved hjelp av “H2” -merket og lagt også til en DIV -beholder med litt tekst i den. Denne DIV -beholderen vil arve alle egenskapene som er definert i stilmerket, som er til stede i filteksten. Disse taggene vil være stengt etter dette. Og nå vil vi lagre denne filen i ".HTML ”-format og åpne det i nettleseren for å se følgende utdata:
Som vi kan se i output ovenfor, er overskriften og DIV -beholderen til stede, og grensen til beholderen vises også med en tynn størrelse sammen med litt tekst i den.
Nå vil vi redigere skriptet ovenfor og gjøre endringer i grensestørrelsen i stilmerket til toppseksjonen for å visualisere forskjellen mellom størrelsen på grensen til beholderen.
Vi justerte størrelsen fra "1px" til "5px" i skriptet ovenfor for å generere en tykkere kant for beholderen. La oss nå observere hvordan denne endringen vises i nettleseren vår når vi utfører skriptet.
Som vi kan se i output ovenfor at størrelsen på grensen nå er tykk sammenlignet med forrige utgang.
Eksempel # 02: Opprette en klasse i CSS -stilkode for å kontrollere størrelsen på en kant i en HTML -fil
I dette eksemplet vil vi lage en spesiell klasse av CSS -styling der vi vil definere alle aspekter av styling som vi ønsker gjennom hele filen. Dette er en veldig nyttig metode fordi vi kan skille forskjellige design i en enkelt HTML -fil og klassifisere dem i forskjellige klasser. I dette eksemplet vil vi klassifisere stylingen av en kant av enhver beholder. For å oppnå det, vil vi skrive følgende skript:
Som vi kan se i dette skriptet, har vi åpnet en stilmerke i overskriften til HTML -filen. I denne stilkoden har vi laget en klasse for avsnittstilingen der vi har definert to egenskaper for grensen, som er stil og bredde. Stilegenskapen er satt til solid, noe som betyr at grensen vil være en ensartet, rett linje, og breddeegenskapen er satt til tynn, noe som betyr at grensestørrelsen vil være tynn. Etter dette lukket vi stilen og hodemerket og flyttet mot kroppskoden. I Body -taggen har vi gitt en overskrift og et avsnitt til HTML -siden. I avsnitts taggen har vi kalt “P.BW1 ”-klasse, som har grenseegenskapene forhåndsdefinert i seg. Vi lukker taggene og lagrer denne filen slik at vi kan kjøre dette i nettleseren vår.
Etter å ha kjørt dette skriptet i nettleseren vår, får vi output ovenfor. Som vi kan se, har stilklassen for avsnitts -taggen lagt en solid og tynn kant til avsnittet som er til stede i kroppen.
Nå vil vi variere størrelsen på grensen som er til stede i skriptet ovenfor og observere effekten av disse variasjonene på grensen.
I denne situasjonen har vi redigert bredden fra tynn til medium, og etter å ha kjørt dette skriptet, får vi følgende utgang:
I denne utgangen har grensestørrelsen endret seg fra tynn til medium og er nå mye mer synlig. Etter dette vil vi endre størrelsen fra middels til tykk, som vist i skriptet nedenfor:
Etter å ha kjørt dette skriptet, får vi følgende utdata:
Etter å ha endret bredden til tykk, kan vi se at grensen er veldig bredere i størrelse og ganske lett synlig.
Eksempel nr. 03: Bruke Tailwind CSS -stilarket for å endre grensestørrelse ved bruk av grenseklassen
I dette eksemplet vil vi bruke Tailwind CSS -stilarket for å endre størrelsen på en grense ved å bruke en grenseklasse definert i dette stilarket. Grenseklassen har flere forhåndsdefinerte størrelser for grensen, som vi vil utforske i dette eksemplet ved å implementere dette i notisblokk++.
I skriptet ovenfor vil vi legge til lenken til Tailwind CSS -stilarket ved å bruke lenke -taggen i filteksten. Så åpner vi kroppskoden og gir en overskrift til den. Så åpner vi DIV-taggen, som vi vil kalle klassen til Border-2 med Border Color Code, og deretter vil avsnittet taggen ha kroppsteksten til DIV-beholderen vedlagt i den. Nå lagrer vi denne filen og åpner den i nettleseren vår for å se hvordan grensen viser seg.
Som vi kan se at grensestørrelsen er veldig tynn og kan justeres til en større størrelse, så vil vi øke størrelsen ved å kalle grense-8-klassen og se hvordan det endrer grensestørrelsen.
Som vi kan se i ovennevnte utdrag, er grensen nå tykkere enn før på grunn av grense-8-klassen.
Konklusjon
I denne artikkelen fokuserte vi på CSS "størrelse" -attributtet til en grense. Grensestørrelsen er ofte spesifisert med to identifikatorer: piksler og tekstrepresentasjon, for eksempel "tynn", "medium" og "tykk.”Vi diskuterte flere metoder for å endre grensestørrelsen ved å bruke CSS i en HTML -fil i denne artikkelen. Vi brukte Notisblokk ++ -miljøet for å redigere HTML -filen vår og implementerte konvensjonelle CSS -metoder for stilkode og stilklasse for å endre størrelsen på en grense. Vi brukte også Tailwind CS -stilarket for å kalle grenseklassene som ga forskjellige størrelser for grensen til en beholder og kan kalles via inline CSS -styling.