Crearea granițelor în CSS. proprietate de frontieră

cadru CSS Un element este una sau mai multe linii care înconjoară conținutul elementului și umplutura acestuia. Limita este setată folosind marginea scurtă a proprietății. Stilul cadrului este setat folosind trei proprietăți: stil, Culoareși lăţime.

Decorarea chenarelor și a chenarelor elementelor HTML cu proprietăți CSS

1. Stil de chenar

În mod implicit, marginile sunt întotdeauna desenate deasupra fundalului unui element, fundalul extinzându-se până la marginea exterioară a elementului. Stilul cadrului determină afișarea acestuia, fără aceasta proprietățile cadrului nu vor fi vizibile deloc. Pentru un element, puteți seta un chenar pentru toate părțile în același timp utilizând proprietatea stil bordur sau pentru fiecare parte separat folosind proprietățile de calificare stil bordur și așa mai departe. Nu moștenit.

stilul de chenar (stil chenar-sus, stil chenar-dreapta, stil chenar-jos, stil chenar-stânga)
Valori:
nici unul	Valoarea implicită înseamnă că nu există cadru. De asemenea, elimină chenarul elementului din grupul de elemente cu valoarea acestei proprietăți setată.
ascuns	Echivalent cu niciunul.
punctat	punctat
întreruptă	întreruptă
solid	solid
dubla	dubla
canelură	canelură
creastă	creastă
medalion	medalion
început	început
{1,4}	Enumerați patru stiluri diferite pentru marginile unui element deodată, doar pentru proprietatea stil de margine: (stil chenar: solid punctat, niciun punctat;)
iniţială
moşteni

Sintaxă

P (stil chenar: solid;) p (stil chenar: solid;)

2. Culoarea chenarului culoarea chenarului

Proprietatea stabilește culoarea cadrelor de pe toate părțile în același timp. Puteți utiliza proprietățile de rafinare pentru a seta o culoare personalizată pentru marginea fiecărei părți a unui element. Dacă nu este specificată nicio culoare a chenarului, aceasta va fi aceeași cu culoarea textului elementului. Dacă elementul nu are text, atunci culoarea chenarului va fi aceeași cu culoarea textului elementului părinte. Nu moștenit.

culoarea chenarului (culoare-chenar-sus-culoare, chenar-culoare-dreapta, chenar-culoare-jos, chenar-culoare-stânga)
Valori:
transparent	Setează culoarea transparentă pentru cadru. În acest caz, lățimea cadrului rămâne. Poate fi folosit pentru a schimba culoarea chenarului atunci când treceți mouse-ul peste un element pentru a evita mutarea elementului.
Culoare	Culoarea cadrului este setată folosind valorile proprietăților. (culoare-chenar: #cacd58;)
{1,4}	Enumerați patru culori diferite pentru marginile unui element în același timp, doar pentru proprietatea border-color: (culoare-chenar: #cacd58 #5faf8a #b9cea5 #aab238;)
iniţială	Setează valoarea unei proprietăți la valoarea implicită.
moşteni	Moștenește valoarea proprietății de la elementul părinte.

Sintaxă

P (culoare-chenar: #cacd58;)

3. Lățimea chenarului

Lățimea cadrului este specificată folosind unități de lungime sau cuvinte cheie. Dacă proprietatea de tip chenar este setată la niciunul și chenarul elementului este setat la o anumită lățime, atunci lățimea chenarului este setată la zero în acest caz. Nu moștenit.

Sintaxă

P (lățimea chenarului: 2px;)

4. Setarea cadrului cu o singură proprietate

Proprietatea border vă permite să combinați următoarele proprietăți: border-width , border-style , border-color , de exemplu:

Div ( lățime: 100 px; înălțime: 100 px; chenar: 2 px gri solid; )

În acest caz, proprietățile specificate vor fi aplicate la toate marginile elementului simultan. Dacă nu este specificată nicio valoare, valoarea implicită îi va lua locul.

5. Setarea unui cadru pentru un chenar al unui element

În cazul în care trebuie să setați un stil diferit pentru marginile unui element, puteți utiliza o notație scurtă pentru chenarul corespunzător.
Proprietățile enumerate mai jos combină următoarele proprietăți într-o singură declarație: border-width , border-style și border-color . Lista proprietăților este specificată în ordinea dată, în timp ce una sau două valori pot fi omise, caz în care valorile lor vor prelua valorile implicite.

Stilul chenarului de sus este setat folosind proprietatea border-top, chenarul de jos este chenar-jos , chenarul din stânga este chenar-stânga și chenarul din dreapta este chenar-dreapta .

Sintaxă

P (chenar-sus: 2px gri solid;)

6. Contur contur

Proprietatea stabilește marginea exterioară în jurul elementelor (adică în afara graniței normale). Scopul principal al acestei proprietăți este de a evidenția un element. Spre deosebire de proprietatea border, aplicarea acestei proprietăți nu afectează dimensiunea sau poziția elementului, așa cum conturul este redat deasupra casetei elementului, ceea ce, la rândul său, poate cauza suprapunerea marginilor elementului și a zonelor adiacente.

De asemenea, conturul exterior, spre deosebire de chenarul elementului, înconjoară elementul din toate părțile, încadrându-l în întregime.

Conturul exterior este întotdeauna dreptunghiular și nu urmează marginea casetei care este setată la border-radius .

Proprietatea outline vă permite să combinați următoarele proprietăți: outline-color , outline-style , outline-width . Dacă nu este specificată nicio valoare, valoarea implicită îi va lua locul.

Div ( lățime: 100px; înălțime: 100px; contur: #cacd58 solid 2px; )

6.1. Stil de contur stil de contur

Aspectul liniei conturului exterior este stabilit în același mod ca și stilul cadrului elementului. Nu moștenit.

Sintaxă

P (stil contur: creasta;)

6.2. Culoarea conturului culoarea conturului

Culoarea conturului exterior poate fi setată numai atunci când este setat stilul conturului. Nu moștenit.

Sintaxă

P (stil contur: creasta; culoarea conturului: argintiu; )

6.3. Lățimea conturului exterior outline-width

Grosimea liniei conturului exterior este stabilită în același mod ca și grosimea cadrului elementului. Nu moștenit.

Sintaxă

P (stil contur: punctat; lățime contur: 5px; )

Bună ziua, dragi prieteni și oaspeți ai blogului! Astăzi continuăm să ne familiarizăm cu elementele construcției site-ului și să învățăm cum să creăm cadre CSS. În ultimul meu articol, v-am spus și v-am arătat cum sunt create, dar cadre css arata mai frumos si mai atractiv. Prin urmare, cine a învățat cum să facă cadre html va stăpâni crearea unui cadru css. Și te voi ajuta cu asta! Să începem...

Cum se fac chenarele CSS pentru site?

După cum v-am spus mai sus, cadrele css sunt mult mai frumoase și mai practice decât cadrele html și nu vă va fi dificil să creați singuri astfel de cadre css dacă ați învățat deja cum să faceți cadre html.

De ce avem nevoie pentru a face borduri CSS? Nimic scandalos! Dorinta ta si articolul meu, in care iti voi explica totul in detaliu.

Iată codul ei:

Cadrele noastre CSS!

Iată un al doilea exemplu de bordura CSS:

Iată codul ei:

Cadrele noastre CSS!

Iată un al treilea exemplu de cadru punctat:

Acesta este codul ei:

Cadrele noastre CSS!

Acesta este al patrulea exemplu de chenar cu două curse:

Iată codul ei:

Cadrele noastre CSS!

Și dacă aplicați valoarea „crestă”, atunci acesta este cadrul pe care îl obțineți:

Iată codul ei:

Cadrele noastre CSS!

Acum să facem marginile rotunjite ale cadrului nostru css cu aceste valori „border-radius” și „box-shadow”:

Iată un cadru cu margini rotunjite și codul său:

Cadrele noastre CSS!

Acum să facem un chenar cu margini neclare, arată și destul de atractiv și este ușor de făcut, trebuie doar să schimbați numărul din valoarea „box-shadow” la o valoare mai mare. Și iată ce se întâmplă:

Iată codul ei:

Cadrele noastre CSS!

Acum facem un cadru cu contururi multicolore, adăugăm doar câteva culori la valoarea „box-shadow”:

Iată codul ei:

Cadrele noastre CSS!

Și acum apogeul cadrelor noastre CSS este un cadru rotund. Acest lucru se face și prin simpla schimbare a valorii „razei de frontieră”. Uite aici:

Iată codul ei aici:

Cadrele noastre CSS!

Ei bine, asta e tot pentru azi. Ne vedem în curând!

Dacă ți-a plăcut materialul, te rugăm să faci următoarele...

1. Da-i un „like”.

1. Faceți un retweet.

1. Distribuie această postare prietenilor tăi de pe rețelele sociale.

Vă mulțumim pentru atenție!

In acest capitol:

Modelul cutie este o modalitate de afișare a elementelor de către browsere care tratează toate etichetele ca pe niște blocuri mici, pentru ei orice etichetă este un container cu conținut: text, imagini, alte etichete etc.

• marginea(marja) - spațiu alb (marja) care separă un element de altul. Cel mai simplu exemplu de indentare este decalajul dintre paragrafele consecutive. Zona de margine este transparentă și nu poate avea o culoare personalizată sau alte efecte de stil.
• Frontieră(chenarul elementului) - chenarul de pe ambele părți ale elementului. Cadrul poate fi instalat atât pe toate părțile elementului, cât și pe o parte. Folosirea unui chenar poate pur și simplu decora frumos un element sau poate separa vizual conținutul elementului curent de alte elemente de pe pagină.
• Captuseala(padding) - spațiul gol dintre conținutul elementului și chenarul acestuia. Zona de umplutură este transparentă și nu poate avea o culoare personalizată sau alte efecte de styling.
• Majoritatea elementelor au o zonă de conținut care conține totul conţinut element (text, imagini inserate sau alte elemente).

Cadru

Un chenar este o linie simplă care este afișată în jurul elementului care urmează să fie stilat. Dar nu este necesar să aplicați un cadru care înconjoară elementul din toate părțile. Îl puteți adăuga doar din partea necesară a elementului. De exemplu, dacă adăugați un chenar numai din partea de jos a unui element bloc, acesta va avea același efect ca element

---

(linie orizontală), acționând ca un separator.

Fiecare cadru are trei proprietăți pe care le putem controla cu CSS: lățime, stil și culoare, să ne uităm la ce proprietăți putem folosi pentru a le seta și modifica:

În loc să specificați toate cele trei proprietăți, puteți specifica doar una - proprietate de frontieră, care vă permite să specificați lățimea, stilul și culoarea pentru chenar în același timp:

Primul paragraf.

Al doilea paragraf.

Al treilea paragraf.

Pentru a controla cadrul separat pe fiecare parte a elementului, sunt utilizate proprietățile corespunzătoare:

• vârf de frontieră- cadru superior
• granița-stânga- cadru din stânga
• granita-dreapta- cadru drept
• marginea-de jos- cadru de jos

Aceste proprietăți funcționează exact în același mod ca proprietatea chenar, cu excepția faptului că controlează doar chenarul pe o parte a elementului care este stilat.

Marginile exterioare și interioare

indentare- spațiul gol dintre conținutul elementului și chenarul acestuia (dacă este setat unul). Pentru a adăuga și a controla lățimea căptușelii pe toate cele patru laturi ale unui element, utilizați proprietatea de umplutură.

Umplutura este un spațiu alb care separă un element de alte elemente sau de marginile ferestrei browserului. Pentru a adăuga și a controla lățimea marginilor pe toate cele patru laturi ale unui element, utilizați proprietatea marjei.

Proprietățile de umplutură și de marjă pot lua una până la patru valori:

Unde valorile sunt setate în sensul acelor de ceasornic, începând de sus:

Dacă specificați o singură valoare pentru proprietăți, atunci indentațiile de pe toate laturile vor avea aceeași lățime.

La prima vedere, efectul vizibil atunci când utilizați aceste proprietăți arată același, pentru a observa diferența vizuală dintre ele, puteți, de exemplu, să setați un cadru pentru un element sau să setați un fundal:

Paragraf obișnuit.

Pentru indentări, precum și pentru cadre, există proprietăți care vă permit să controlați dimensiunea indentării pe fiecare parte separat. Indentările sunt controlate de proprietăți: captuseala de sus , umplutura dreapta , umplutură de fundși padding-stânga. Marjele sunt controlate de proprietăți: margine-top , margine-dreapta , margine-fondși margine-stânga.

Notă: Valorile proprietăților de umplutură și margine nu sunt moștenite de elementele copil, așa că trebuie să specificați lățimea de umplutură separat pentru fiecare element care are nevoie de ele.

Lățimea și înălțimea elementului

În mod implicit, elementele bloc utilizează lățimea automată. Aceasta înseamnă că elementul va fi întins exact atât cât există spațiu liber. Înălțimea elementelor blocului este setată automat în mod implicit, de exemplu. browserul întinde zona de conținut în direcția verticală, astfel încât să fie afișat tot conținutul. Pentru a seta dimensiuni personalizate pentru zona de conținut a unui element, puteți utiliza proprietățile de lățime și înălțime.

O aplicație interesantă a proprietății CSS3 box-shadow este crearea unui chenar dublu în jurul unui element. Un efect foarte interesant pentru decorarea paginii, dar va funcționa doar în versiunile noi de browsere care acceptă box-shadow .

Cu toate acestea, există mai multe alte metode de a crea un astfel de efect. Mai mult decât atât, utilizarea evidentă a unei imagini de fundal este foarte departe de a fi ideală.

Acest tutorial prezintă cinci metode pentru crearea unui chenar dublu în jurul unui element. Și doar unul dintre ele necesită o imagine, iar toate celelalte folosesc cod CSS pur cu suport excelent pentru browser.

Metoda 1: chenar și contur

Această metodă funcționează numai în browserele care acceptă proprietatea outline (toate cu excepția IE6/7). Adăugați atât proprietățile de chenar, cât și de contur elementului.

Unul ( chenar: solid 6px #fff; conturul: solid 6px #888; )

Motivul pentru care această metodă funcționează este că conturul desenează întotdeauna în exteriorul dreptunghiului. Problema cu proprietatea contur este atunci când se utilizează elemente plutitoare, deoarece conturul se suprapune cu elementele adiacente.

Metoda 2: pseudo element

Această metodă necesită poziționarea absolută a cadrului:

Două ( chenar: solid 6px #fff; poziție: relativ; z-index: 1; ) .two:before ( conținut: ""; afișare: bloc; poziție: absolut; sus: -12px; stânga: -12px; chenar: solid 6px #888; lățime: 312px; umplutură de jos: 12px; înălțime minimă: 100%; z-index: 10; )

Punctele cheie sunt setarea proprietății z-index (astfel încât pseudo-elementul să se suprapună cu conținutul), poziționarea și valoarea minimă a înălțimii. Ultima proprietate păstrează elasticitatea cadrului.

Metoda 3: umbra

Cea mai bună metodă, deoarece este nevoie de o singură linie de cod pentru a seta proprietatea box-shadow.

Trei (cutie-umbră: 0 0 0 6px #fff, 0 0 0 12px #888; )

Două umbre sunt folosite pentru a face să apară chenarul dublu. Sunt separate prin virgule. Neclaritatea este setată la 0. Deoarece a doua umbră se suprapune pe prima, are o lățime de două ori mai mare. Punctul cheie este utilizarea culorilor opace, care creează o graniță clară între rame.

La fel ca proprietatea outline, box-shadow nu afectează elementele adiacente și le poate suprapune. Prin urmare, este necesar să se stabilească un câmp pentru formarea aspectului compoziției.

Desigur, suportul pentru proprietatea box-shadow este limitat la browserele mai noi.

Metoda 4: element div suplimentar

Această metodă folosește un element extern