Bordurile sunt utilizate în paginile HTML pentru a delimita și evidenția conținutul. Când există o mulțime de informații pe o pagină și doriți să atrageți atenția utilizatorului asupra anumitor părți, atunci utilizați margini în jurul acelui conținut. În acest articol despre Frontiere în CSS, voi discuta despre următoarele subiecte:
- Când se utilizează Borders
- Frontiere în CSS
- Atribute ale frontierei CSS
- Valori implicite pentru atributele de frontieră
- Definiți frontierele în stenogramă
- Puncte de reținut în timp ce proiectați chenarele în CSS
Când se utilizează Borders
Practica standard este de a utiliza etichete de chenar CSS pentru a defini borduri în pagini HTML pentru:
- În jurul rubricilor importante
- Pentru a evidenția postscript sau note importante
- Pentru a anexa imagini, ilustrații, citate de la oameni, videoclipuri
- Pentru a atrage atenția asupra prețurilor, termenelor sau astfel de informații semnificative
S-ar putea să doriți să citiți pe înainte de a continua să aflați despre granițele CSS.
Pentru un tutorial CSS cuprinzător, vizitați Edureka CSS Tutorial pentru începători . Veți obține un heads-up excelent pe modul în care CSS trebuie utilizat pentru a spori designul web HTML.
Frontiere în CSS
Bordurile CSS pot fi atribuite diferitelor secțiuni ale paginii HTML, indiferent dacă este vorba de a încadra titluri sau paragrafe. Să începem cu un exemplu. Aici definim o margine în jurul titlului și o altă margine în jurul textului de paragraf.
body {background-color: lightblue} h1 {text-align: center border-style: solid} p {font-family: verdana font-size: 20px border-style: dotted}De asemenea, marginea în jurul paragrafului!
Atribute ale frontierei CSS
Frontierele CSS au 3 atribute majore lor
- stil:stilatributul definește modelul chenarului.
- culoare: Culoarea poate fi oricare din setul definit de culorile CSS.
- lăţime: Lățimea este utilizată pentru a varia grosimea marginii, pentru ao face mai proeminentă.
În exemplul de mai sus, am văzut că este definit doar un atribut de margine, adică stilul său. Celelalte atribute, atunci când nu sunt definite, iau valorile implicite. Există un alt atribut numit rază, care este mai puțin folosit. Se folosește pentru a face marginile marginii rotunjite.
- în stil de frontieră atribut
| Stil | Descriere |
| stil de bordură: solid | |
| stil de bordură: dublu | |
| border-style: groove | |
| border-style: creastă | |
| border-style: inserat | |
| border-style: început | |
| border-style: nici unul | |
| border-style: ascuns | |
| stil de bordură: punctat | |
| border-style: punctat |
Ați observa că există și o opțiune „fără margine” și „margine ascunsă”. Un dezvoltator poate evita pur și simplu să definească o margine, de ce să o definim în mod explicit ca o „margine ascunsă”? Acest lucru se face în scopul utilizării spațiului și aliniării cu alte elemente din pagină.
Stilurile de margine pot fi amestecate și într-un element. În acest scop, cele 4 laturi ale frontierei individuale pot fi definite separat cu stiluri diferite. Acest lucru se poate face în 2 moduri. Fie definiți toate cele 4 laturi într-o singură etichetă. În acest caz, numărul începe de la linia de sus și apoi se deplasează în sensul acelor de ceasornic. Alternativ, fiecare dintre cele 4 linii de margine poate fi definită și în etichete individuale. Ambele cazuri sunt prezentate în următorul exemplu.
| Stil | Descriere |
| stil bordură: punctat punctat punctat dublu solid border-top-style: punctat border-right-style: punctat stil bord-fund: solid cum se convertește șirul de date în java border-left-style: dublu |
- culoare-bordură atribut
Atributul de culoare pentru un chenar poate fi setat în mai multe moduri. Acest lucru este similar cu setarea culorii pentru alte elemente. Culorile pot fi setate prin una dintre următoarele metode:
- Nume - specificați un nume de culoare, cum ar fi „albastru”. Puteți încerca, de asemenea, câteva opțiuni de culoare fanteziste, cum ar fi „BlanchedAlmond”!
- Hex - specificați o valoare hexagonală, cum ar fi „# ff0000”
- RGB - setați codul RGB. De exemplu, rgb (255,255,0) înseamnă galben.
- setare - cum ar fi „transparent” sau „opac”
- lățimea graniței atribut:
Proprietatea de lățime, așa cum sugerează și numele, definește grosimea celor 4 laturi ale chenarului. Dacă este definită o valoare, aceasta este pentru toate laturile, altfel pot fi setate și valori ale lățimii individuale.
Lățimea poate fi specificată în oricare dintre unitățile standard, cum ar fi pixeli („px”), puncte („pt”) sau în centimetri („cm”). De asemenea, puteți specifica lățimea folosind valori predefinite de „gros”, „subțire” și „mediu”.
| Stil | Descriere |
| lățimea chenarului: 10 px | |
| lățimea chenarului: 0,1 cm | |
| lățimea chenarului: medie |
- frontieră-rază atribut
Scopul definirii razei este de a obține colțuri rotunjite pentru margine. Factorul de rază definește gradul de rotunjire. Cu cât valoarea este mai mare, colțurile devin mai curbate. Ca practică standard, valorile razei sunt păstrate între 1-3 ori lățimea chenarului.
Următorul cod va genera:
lățimea chenarului: 10 px
raza chenarului: 30 px
algoritm de sortare c ++
Valori implicite pentru atributele de frontieră
Singurul atribut obligatoriu este stil . Dacă stilul lipsește, marginea nu va apărea.
Dacă culoarea nu este specificată, culoarea din elementul de bază este luată ca valoare implicită. De exemplu, dacă culoarea textului unui paragraf este definită ca „albastru”, atunci culoarea implicită a chenarului ar fi, de asemenea, albastră. În cazul în care nu există o definiție a culorii nici măcar pentru element, atunci culoarea implicită este „neagră”.
Valoarea implicită pentru lățime este „medie”.
Definiți frontierele în stenogramă
Unii dezvoltatori preferă să definească atributele de chenar într-o etichetă concisă pe o singură linie. Acest format de prescurtare ajută la minimizarea liniilor de cod, iar dezvoltatorii experți preferă acest format. Utilizarea formatului de prescurtare este recomandată atunci când definiția frontierei este simplă și destul de standardizată. Cu toate acestea, dacă trebuie să evidențiați fiecare parte a chenarului într-un stil diferit, atunci trebuie să respectați formatul de definire a etichetelor individuale.
Se utilizează următorul cod:
border-style: punctat
culoarea chenarului: verde
lățimea chenarului: 5 px
chenar: verde punctat 5 px
Puncte de reținut în timp ce proiectați chenarele în CSS
Nu utilizați prea multe chenare într-o pagină, aceasta poate distrage atenția și poate îngreuna concentrarea utilizatorului.
Este important să mențineți coerența în stilul și culorile chenarului. Elementele din același nivel de ierarhie dintr-o pagină trebuie să aibă un stil și o lățime de margine similare pentru uniformitate. De exemplu, dacă paragraf este definit cu bordură solidă și lățime de 5 px, mențineți acest format în toate celelalte paragraf elemente în timpul proiectării site-ului web.
Respectați un stil de definiții ale etichetelor. Unii dezvoltatori sunt confortabili cu definițiile de comenzi rapide cu toate valorile atribuite unui singur frontieră etichetă. Unii alții preferă listarea explicită a tuturor etichetelor pentru lățime, culoare și stil. Convenția este că atunci când sunt necesare decorațiuni de margini elaborate într-o pagină, etichetele individuale sunt listate separat. Acest lucru ajută în timpul depanării unor astfel de definiții personalizate ale chenarului. În cazurile normale, ar fi utilă doar o definiție a comenzilor rapide.
Sper că ați găsit informațiile pe care le căutați pe frontierele CSS și wCu aceasta, ajungem la sfârșitul acestui articol Borders în CSS.
Verificați-ne care vine cu instruire live condusă de instructor și experiență în viața reală a proiectului. Această instruire vă face să aveți abilități de a lucra cu tehnologii web back-end și front-end. Include cursuri de dezvoltare web, jQuery, Angular, NodeJS, ExpressJS și MongoDB.
Ai o întrebare pentru noi? Vă rugăm să o menționați în secțiunea de comentarii a blogului „Border in CSS” și vă vom răspunde.