CSS fjerner grensen
Eksempel 01:
La oss starte med den mest grunnleggende illustrasjonen av å fjerne grensen fra spesifikke elementer i HTML -skriptet. For dette har vi startet koden vår med "HTML" hovedtaggen til HTML -skriptet. La oss diskutere "kropp" -merket først som vist nedenfor. Den bruker to overskrifter av største størrelse, “1”. Begge overskriftene brukes her med forskjellige titler for å skille dem. Vi har også spesifisert klassene "A" og "B" i overskriften tagger separat for å bruke disse klassene innen styling for å style begge på overskriftene separat.
Innenfor "stilen" -taggen har vi stylet både overskriftene med bruk av klassene "A" og "B". Vi har lagt til polstring av 10 piksler og bredden på 400 piksler for begge overskriftene via polstring og breddeegenskap. Så vi har tildelt en 3-piksel solid grønn kant til den første overskriften via grenseeiendommen, og for den andre overskriften er grenseeiendommen blitt satt til ingen. La oss lagre dette HTML -skriptet og kjøre det i Chrome -nettleseren.
Utgangen for denne nettsiden er vist i Chrome -fanen. Den første overskriften har blitt vist med en grønn solid kant på 3 piksler. Den andre overskriften har blitt vist uten grense, samme bredde og litt polstring.
La oss se på hvordan den ene siden av en grense kan fjernes fra elementet ved hjelp av den forbedrede grenseeiendommen. Dermed har vi oppdatert koden ovenfor som vist i bildet nedenfor. Vi har brukt den samme kroppskoden sammen med dens indre tagger eller overskrifter. Innenfor stilkoden til denne HTML -filen har vi lagt til margin- og polstringsegenskaper for å spre overskriftene på nettsiden jevnt. Deretter brukte vi grenseeiendommen for begge overskriftene separat. Hver grense på 3 piksler er fastsatt for begge. Den første overskriften vil inneholde en grønn farge kant, og den andre overskriften vil inneholde en grenser for blå farge.
Mens grensen til høyre og grense-venstre egenskaper er blitt satt til “ingen” for begge overskriftene for å fjerne høyre og venstre side av overskrift 1 og overskrift 2. La oss lagre og kjøre denne oppdateringen.
Utgangen har vist to overskrifter med grønne og blå grenser. Mens høyre side av den første grensen og venstre side av den andre grensen fjernes. Dette har skjedd på grunn av bruken av grensen til grensen og grensen til grensen etter å ha satt både til "ingen".
Eksempel 02:
Sammen med opprettelsen av en solid grense, kan du også lage en oversikt for ethvert spesifikt element i en HTML -webside uten å bruke grensen. Oversikt og grenser ser synlig like ut, men de er ganske forskjellige i egenskaper. La oss bruke konturegenskapen til HTML -skriptspråk for å lage en stiplet disposisjon. Vi bruker den samme HTML -filen uten å endre mye av skriptet. Den samme kroppen med taggene og ganske lignende styling har blitt brukt. Den eneste endringen er gjort innenfor stilmerket der vi har satt CSS for begge overskriftene.
Her har vi brukt disposisjonsegenskapen for begge overskriftene. Oversikten for første overskrift vil være av 3 piksler prikket i blå farge, mens den andre overskriften ikke vil inneholde noen overskrift i henhold til verdien “Ingen” satt for Outline -eiendom. La oss lagre og feilsøke dette HTML -skriptet for å se resultatene via Visual Studio Code.
Etter feilsøking åpnet vi HTML -siden i Chrome -nettleseren og fikk vist nedenfor resultatet. Output HTML -siden viser den første overskriften med en stiplet disposisjon og den andre overskriften uten omriss eller grense.
Dette handlet om opprettelsen av en oversikt rundt overskriftene. La oss lage stiplet, prikkede og solide konturer for overskrifter i HTML -koden. Vi har brukt totalt 4 avsnitt i denne nettsiden ved å bruke "P" -merket i kroppskoden sammen med deres spesifikke klasser som er spesifisert, A, B, C og D. Innenfor stilmerket har vi brukt klassene for avsnitt for å style hvert avsnitt separat. Eiendomsmargin, polstring og breddeegenskap brukes med de samme verdiene for alle tre avsnitt. Vi har brukt grenseegenskapen for første avsnitt for å lage et stiplet avsnitt med rød farge. Grenseegenskapen satt til “Ingen” har blitt brukt til andre ledd for å skape en ingen grense. Den tredje grenseeiendommen innenfor "P.C ”Class Paragraph har blitt brukt til å stille inn 3-piksel-stiplet sjokoladefarge kant. I den siste stylingen har vi brukt grenseeiendommen for å legge til 3-piksel solid kant av lilla farge rundt den fjerde overskriften på denne siden. La oss lagre denne koden og kjøre den for å se resultatene.
Utgangen fra dette HTML -programmet har vist visningen av en overskrift og 4 avsnitt. Første avsnitt er omgitt av en stiplet rød kant, den andre har ingen grense, den tredje har en stiplet sjokoladefarge kant, og den siste har en fargfarge kant.
Eksempel 03:
La oss se på vårt siste eksempel for å fjerne en grense fra bordomgivelsene. For dette vil vi bruke to tabeller til sammenligning. Innenfor kroppskoden til denne HTML -filen har vi brukt to separate tabellmerker for å lage tabeller. Begge tabellene har de samme topptekstkolonnene og samme datakolonner, 3 kolonner og 3 rader. Vi har tildelt forskjellige "id" til begge tabellene for å skille dem innenfor stilkoden, A og B.
Innenfor stilmerket har vi brukt samme eiendomsmegling, polstring og grense for begge tabellene. For klassen "B" i tabell 2 har vi brukt eiendomsgrensen til å "kollapse" for å kollapse grensen til et bord. La oss lagre og kjøre denne koden nå.
Utgangen for denne HTML -koden har vist to statiske tabeller. Den første er med den indre og ytre grensen mens den andre har sin grense kollapset.
Konklusjon:
Denne artikkelen har introdusert bruken av grenseeiendommer for å fjerne en eller flere sider av grensene rundt ethvert element i en HTML -webside. Vi har diskutert hvordan grense-venstre, grense-høyre, grensen og grensen og grense-bunnen kan brukes til dette formålet utelukkende. Vi har også diskutert bruken av grense og skisserer innenfor disse eksemplene og diskutert hvordan en grensekollapsegenskap kan brukes til fjerning av grenser rundt bordelementet. Vi har lagt til de enkleste illustrasjonene for leserne for å oppnå forståelsesnivået.