Kanter brukes på HTML-sider for å avgrense og markere innhold. Når det er rikelig med informasjon på en side og du vil gjøre brukeren oppmerksom på spesifikke deler, så bruk rammer rundt innholdet. I denne artikkelen om grenser i CSS vil jeg diskutere følgende emner:
- Når skal du bruke Borders
- Grenser i CSS
- Attributter til CSS Border
- Standardverdier for kantattributter
- Definer grenser i stenografi
- Poeng å huske på når du designer rammer i CSS
Når skal du bruke Borders
Standard praksis er å bruke CSS-kantkoder for å definere grenser på HTML-sider for:
- Rundt viktige overskrifter
- For å markere etterskrift eller viktige notater
- Å legge ved bilder, illustrasjoner, sitater fra mennesker, videoer
- For å gjøre oppmerksom på priser, tidslinjer eller så viktig informasjon
Det kan være lurt å lese om før du går videre med å lære om CSS-grenser.
For en omfattende CSS-opplæring, besøk Edureka CSS Tutorial For Beginners . Du får en utmerket heads-up på måten CSS skal brukes til å øke HTML-webdesign.
Grenser i CSS
CSS-kanter kan tilordnes forskjellige deler av HTML-siden, enten det er å legge ved overskrifter eller avsnitt. La oss starte med et eksempel. Her definerer vi en ramme rundt overskriften og en annen ramme rundt avsnittsteksten.
body {background-color: lightblue} h1 {text-align: center border-style: solid} p {font-family: verdana font-size: 20px border-style: dotted}Grenser rundt avsnittet også!
Attributter til CSS Border
CSS-grenser har tre hovedattributter til deres
- stil:Destilattributt definerer mønsteret av grensen.
- farge: Fargen kan være hvilken som helst fra settet definert av CSS-farger.
- bredde: Bredden brukes til å variere tykkelsen på grensen, for å gjøre den mer fremtredende.
I eksemplet ovenfor så vi at bare ett grenseattributt er definert, det er stilen. De andre attributtene når de ikke er definert tar standardverdier. Det er en annen attributt kalt radius, som brukes sjeldnere. Den brukes til å gjøre kantene på kanten avrundet.
- grense-stil Egenskap
| Stil | Beskrivelse |
| border-stil: solid | |
| border-style: dobbel | |
| border-style: spor | |
| border-stil: møne | |
| border-style: innfelt | |
| border-style: utgangspunkt | |
| border-style: ingen | |
| border-style: skjult | |
| kantstil: stiplet | |
| border-style: stiplet |
Du vil legge merke til at det også er alternativet 'ingen grense' og 'skjult grense'. En utvikler kan ganske enkelt unngå å definere en grense, hvorfor definere den eksplisitt som en 'skjult grense'? Dette gjøres for plassbruk og justering med andre elementer på siden.
Kantstiler kan også blandes i et element. For dette formålet kan de 4 individuelle grensesidene defineres separat med forskjellige stiler. Dette kan gjøres på to måter. Enten definer alle 4 sidene i en enkelt tag. I dette tilfellet starter tellingen fra topplinjen og beveger seg deretter med klokken. Alternativt kan hver av de 4 grenselinjene også defineres i individuelle koder. Begge tilfellene vises i neste eksempel.
| Stil | Beskrivelse |
| kant-stil: stiplet stiplet solid dobbel border-top-style: stiplet border-right-style: stiplet kant-bunn-stil: solid grense-venstre-stil: dobbel |
- grensefarge Egenskap
Fargeattributtet for en kant kan angis på flere måter. Dette ligner på å sette farge for andre elementer. Fargene kan innstilles etter en av følgende metoder:
- Navn - spesifiser et fargenavn, som “blå”. Du kan også prøve noen fancy fargevalg som “BlanchedAlmond”!
- Hex - spesifiser en hex-verdi, som “# ff0000”
- RGB - angi RGB-koden. For eksempel betyr rgb (255,255,0) gul.
- innstilling - for eksempel “gjennomsiktig” eller “ugjennomsiktig”
- kantbredde Egenskap:
Breddeegenskapen definerer, som navnet antyder, tykkelsen på de 4 grensesidene. Hvis en verdi er definert, er den for alle sider, ellers kan også individuelle breddeverdier settes.
Bredden kan spesifiseres i en hvilken som helst standardenhet, for eksempel piksler (‘px’), punkter (‘pt’) eller i centimeter (‘cm’). Du kan også spesifisere bredden ved å bruke forhåndsdefinerte verdier på 'tykk', 'tynn' og 'medium'.
| Stil | Beskrivelse |
| kantbredde: 10 px | |
| kantbredde: 0,1 cm | |
| kantbredde: middels |
- grense-radius Egenskap
Hensikten med å definere radius er å få avrundede hjørner til grensen. Radiusfaktoren definerer omfanget av avrunding. Jo større verdi, mer buede hjørner blir. Som vanlig praksis holdes radiusverdiene mellom 1-3 ganger grensebredden.
Følgende kode genererer:
kantbredde: 10 px
border-radius: 30px
Standardverdier for kantattributter
Det eneste obligatoriske attributtet er stil . Hvis stilen mangler, vises ikke grensen.
Hvis fargen ikke er spesifisert, blir fargen fra det underliggende elementet tatt som standardverdien. For eksempel, hvis tekstfargen i et avsnitt er definert som ‘blå’, vil standard kantfarge også være blå. I tilfelle det ikke er noen fargedefinisjon engang for elementet, er standardfargen ‘svart’.
Standardverdien for bredde er 'medium'.
Definer grenser i stenografi
Noen utviklere foretrekker å definere grenseattributter i en kortfattet tag. Dette kortformatet hjelper til med å minimere kodelinjene, og ekspertutviklere foretrekker dette formatet. Det anbefales å bruke kortformat når grensedefinisjonen er enkel og ganske standardisert. Men hvis du trenger å markere hver side av grensen i en annen stil, må du holde deg til formatet for å definere individuelle koder.
Følgende kode brukes:
border-style: stiplet
kantfarge: grønn
kant-bredde: 5px
grense: stiplet grønt 5px
konvertere streng til array php
Poeng å huske på når du designer rammer i CSS
Ikke bruk for mange rammer på en side, det kan være distraherende og gjøre det vanskelig for brukeren å fokusere.
Det er viktig å opprettholde konsistens i kantstil og farger. Elementer i samme nivå av hierarki på en side må ha lignende kantstil og bredde for ensartethet. For eksempel hvis avsnitt er definert med solid kant og 5 piks bredde, vedlikehold dette formatet overalt avsnitt elementer under nettstedsdesign.
Hold deg til en stil med tagdefinisjoner. Noen utviklere er komfortable med snarveidefinisjoner med alle verdier som er tildelt en enkelt grense stikkord. Noen andre foretrekker eksplisitt oppføring av alle tagger for bredde, farge og stil. Konvensjonen er at når det kreves forseggjorte kantdekorasjoner på en side, vises de enkelte kodene separat. Dette hjelper under feilsøking av slike tilpassede grensedefinisjoner. I normale tilfeller vil bare en snarveidefinisjon gjøre det.
Håper du fant informasjonen du lette etter på CSS-grenser, og wMed dette kommer vi til en slutt på denne Borders in CSS-artikkelen.
Sjekk ut vår som kommer med instruktørledet live-opplæring og reell prosjektopplevelse. Denne opplæringen gjør deg dyktig i ferdigheter til å jobbe med back-end og front-end web-teknologier. Det inkluderer opplæring i webutvikling, jQuery, Angular, NodeJS, ExpressJS og MongoDB.
Har du et spørsmål til oss? Vennligst nevn det i kommentarfeltet til 'Border in CSS' -bloggen, så kommer vi tilbake til deg.