Grænser bruges i HTML-sider til at afgrænse og fremhæve indhold. Når der er masser af oplysninger på en side, og du ønsker at henlede brugerens opmærksomhed på bestemte dele, skal du bruge rammer omkring dette indhold. I denne artikel om grænser i CSS vil jeg diskutere følgende emner:
- Hvornår skal du bruge kanter?
- Grænser i CSS
- Attributter for CSS Border
- Standardværdier for kantattributter
- Definer grænser i stenografi
- Punkter, du skal huske på, når du designer rammer i CSS
Hvornår skal du bruge kanter?
Standardpraksis er at bruge CSS-grænsetags til at definere grænser i HTML-sider til:
- Omkring vigtige overskrifter
- For at fremhæve efterskrift eller vigtige noter
- At vedlægge billeder, illustrationer, citater fra mennesker, videoer
- For at henlede opmærksomheden på priser, tidslinjer eller sådanne vigtige oplysninger
Du vil måske gerne læse om inden du går videre med at lære om CSS-grænser.
For en omfattende CSS-tutorial, besøg Edureka CSS-vejledning til begyndere . Du får en fremragende heads-up på den måde, CSS skal bruges til at udvide HTML-webdesign.
Grænser i CSS
CSS-kanter kan tildeles forskellige sektioner på HTML-siden, uanset om det er ved at overføre overskrifter eller afsnit. Lad os starte med et eksempel. Her definerer vi en ramme omkring overskriften og en anden ramme omkring afsnitsteksten.
body {background-color: lightblue} h1 {text-align: center border-style: solid} p {font-family: verdana font-size: 20px border-style: dotted}Græn omkring afsnittet også!
Attributter for CSS Border
CSS-grænser har 3 hovedattributter til deres
- stil:Detstilattribut definerer grænsemønsteret.
- farve: Farven kan være hvilken som helst fra det sæt, der er defineret af CSS-farver.
- bredde: Bredden bruges til at variere tykkelsen af grænsen for at gøre den mere fremtrædende.
I ovenstående eksempel så vi, at kun en grænseattribut er defineret, det er dens stil. De andre attributter, når de ikke er defineret, tager standardværdier. Der er en anden attribut kaldet radius, som bruges sjældnere. Det bruges til at gøre kanterne af kanten afrundede.
- kant-stil attribut
| Stil | Beskrivelse |
| kant-stil: solid | |
| kant-stil: dobbelt | |
| kant-stil: rille | |
| grænse-stil: højderyg | |
| kant-stil: indsats | |
| border-style: start | |
| border-style: ingen | |
| border-style: skjult | |
| kant-stil: stiplet | |
| kant-stil: stiplede |
Du vil bemærke, at der også er en 'ingen grænse' og 'skjult grænse' mulighed. En udvikler kan simpelthen undgå at definere en grænse, hvorfor udtrykkeligt definere den som en 'skjult grænse'? Dette gøres med henblik på pladsforbrug og justering med andre elementer på siden.
hvordan man gør magt i java
Kantstilarter kan også blandes i et element. Til dette formål kan de 4 individuelle grænsesider defineres separat med forskellige stilarter. Dette kan gøres på to måder. Enten definer alle de 4 sider i et enkelt tag. I dette tilfælde starter optællingen fra den øverste linje og bevæger sig derefter med uret. Alternativt kan hver af de 4 borderlines også defineres i individuelle tags. Begge sager vises i det næste eksempel.
| Stil | Beskrivelse |
kant-stil: stiplet stiplet solid dobbelt overfladisk vs dyb kopi java border-top-style: prikket grænse-højre-stil: stiplet kant-bund-stil: solid grænse-venstre-stil: dobbelt |
- kant-farve attribut
Farveattributten for en kant kan indstilles på flere måder. Dette svarer til indstilling af farve for andre elementer. Farverne kan indstilles efter en af følgende metoder:
- navn - angiv et farvenavn, f.eks. “Blå”. Du kan også prøve nogle smarte farveindstillinger som “BlanchedAlmond”!
- Hex - angiv en hex-værdi som '# ff0000'
- RGB - indstil RGB-koden. For eksempel betyder rgb (255,255,0) gul.
- indstilling - såsom 'gennemsigtig' eller 'uigennemsigtig'
- kant-bredde attribut:
Breddegenskaben definerer, som navnet antyder, tykkelsen på de 4 grænsesider. Hvis en værdi er defineret, er den for alle sider, ellers kan der også indstilles individuelle breddeværdier.
Bredden kan specificeres i en hvilken som helst standardenhed, såsom pixels ('px'), punkter ('pt') eller i centimeter ('cm'). Du kan også angive bredden ved hjælp af foruddefinerede værdier på 'tyk', 'tynd' og 'medium'.
| Stil | Beskrivelse |
| kantbredde: 10 pixel | |
| kantbredde: 0,1 cm | |
| kantbredde: medium |
- grænseradius attribut
Formålet med at definere radius er at få afrundede hjørner til grænsen. Radiusfaktoren definerer omfanget af afrundethed. Jo større værdi, mere buede hjørner bliver. Som standard praksis holdes radiusværdier mellem 1-3 gange kantbredden.
Følgende kode genererer:
kantbredde: 10 pixel
grænseradius: 30 pixel
Standardværdier for kantattributter
Den eneste obligatoriske attribut er stil . Hvis stilen mangler, vises grænsen ikke.
hvad er * i kvm
Hvis farven ikke er angivet, tages farven fra det underliggende element som standardværdien. For eksempel, hvis tekstfarven i et afsnit er defineret som 'blå', vil standard kantfarve også være blå. Hvis der ikke er nogen farvedefinition, selv for elementet, er standardfarven 'sort'.
Standardværdien for bredde er 'medium'.
Definer grænser i stenografi
Nogle udviklere foretrækker at definere kantattributter i et kortfattet tag med én linje. Dette stenografiske format hjælper med at minimere kodelinjerne, og ekspertudviklere foretrækker dette format. Brug af stenografi-format anbefales, når grænsedefinitionen er enkel og ret standardiseret. Men hvis du har brug for at fremhæve hver side af grænsen i en anden stil, skal du holde dig til formatet for at definere individuelle tags.
Følgende kode bruges:
kant-stil: stiplede
kantfarve: grøn
kantbredde: 5 pixel
ramme: stiplet grøn 5px
Punkter, du skal huske på, når du designer rammer i CSS
Brug ikke for mange kanter på en side, det kan være distraherende og gøre det vanskeligt for brugeren at fokusere.
Det er vigtigt at bevare ensartethed i kantstil og farver. Elementer i det samme hierarkiniveau på en side skal have samme kantstil og bredde for ensartethed. For eksempel hvis afsnit er defineret med solid kant og 5 px bredde, vedligehold dette format overalt afsnit elementer under webstedsdesign.
Hold dig til en type tagdefinitioner. Nogle udviklere er fortrolige med genvejsdefinitioner med alle værdier tildelt en enkelt grænse tag. Nogle andre foretrækker eksplicit oversigt over alle tags for bredde, farve og stil. Konventionen er, at når detaljerede kantdekorationer kræves på en side, vises de enkelte tags separat. Dette hjælper med fejlretning af sådanne tilpassede kantdefinitioner. I normale tilfælde ville bare en genvejsdefinition gøre.
Håber du fandt de oplysninger, du ledte efter på CSS-grænser, og wmed dette kommer vi til slutningen af denne Borders in CSS-artikel.
Tjek vores som kommer med instruktørstyret live træning og projektoplevelse i det virkelige liv. Denne træning gør dig dygtig til at arbejde med back-end og front-end webteknologier. Det inkluderer træning i webudvikling, jQuery, Angular, NodeJS, ExpressJS og MongoDB.
Har du et spørgsmål til os? Nævn det i kommentarfeltet på 'Border in CSS' blog, så vender vi tilbage til dig.