Cum se creează marginea exterioară a paginii css. Model de casetă CSS

Să ne uităm la un document. Elementele HTML sunt formate pe acesta (afișate pe ecran în browser). Ele sunt formate pe baza etichetelor. Tu plasezi etichete, acestea sunt procesate de parserul html (disponibil în orice browser) și construiește elemente html. Și cum vor arăta aceste elemente este determinat de CSS.

Toate elementele html au 4 zone: area marginile, chenar, umplutură și conținutul elementului. Pentru ce sunt necesare?

• Sunt necesare marje pentru a regla interacțiunea acestui element cu granițele altor elemente.
• Umplutura este distanța de la cadru la conținutul unui element dat.
• Conținutul elementului în sine. Este clar aici. Dacă există elemente imbricate, atunci acestea sunt situate în această zonă.
• Cadru (chenar). Conturează limitele unui element. Schematic, cele 4 zone pot fi reprezentate astfel:

Trebuie înțeles că fiecare element se află într-o anumită zonă. Această zonă pentru elementul care se află în interiorul său se numește container. Acestea. container este zona de conținut element părinte. Această zonă determină spațiul pentru construirea elementului interior. Aceasta înseamnă că elementul intern se va ajusta la dimensiunea acestei zone.

Marjele

Acesta este momentul în care elementul nostru interacționează cu limitele containerului și cu limitele elementelor învecinate (cele care sunt situate lângă el în cod). Reguli de baza:

• margin-top: auto|magnitude|% - marginea superioară.
• margin-right: auto|magnitude|% - margine din dreapta.
• margin-bottom: auto|magnitude|% - margine de jos.
• margin-left: auto|magnitude|% - marginea stângă.
• margin: margin-sus margine-right margin-bottom margin-left – o regulă prefabricată.

Valoarea „auto” înseamnă că browserul va analiza independent aceste valori. Mărimea indentării poate fi specificată în următoarele valori: em, ex, px. Procentele (%) sunt calculate din lățimea containerului (din zona de conținut a elementului părinte). Dacă specificați o valoare negativă, atunci marginile elementelor din interior container părinte se vor întâlni unul cu altul.

Regula „marginei” este una compusă; aici sunt indicate valorile tuturor celor 4 margini (începând de sus și în sensul acelor de ceasornic). Exemple:

Marja: 10px 20px 20px 30px; marjă: 10px 20px 30px; - marja de la stânga la dreapta este aceeași marjă: 10px 20px; - marginea de sus-jos și stânga-dreapta este aceeași marjă: 10px; - toate liniuțele sunt aceleași

Captuseala

Nu pot exista valori negative aici, pentru că Este imposibil să mutați conținutul dincolo de cadrul elementului. Procentele sunt calculate în funcție de lățimea containerului.

• padding-top: valoare|%.
• padding-right: valoare|%.
• padding-bottom: valoare|%.
• padding-left: valoare|%.
• padding: padding-top padding-right padding-bottom padding-stânga - regulă prefabricată. Similar cu „marja”.

Frontiere în CSS

Toate ramele au următoarele caracteristici:

• Grosime - lățime-chenar: valoare (subțire|mediu|gros). Implicit este mediu.
• Culoare - chenar-culoare: culoare. Implicit este culoarea fontului din acest element.
• Tip - stil de chenar: niciunul|punct|liniat|solid|dublu|canelu|cresta|inset|initie. Tipuri: fără cadru | puncte | punctat | solid | dublu | imitație de relief.

Regulile cadrului în sine:

• chenar-sus-(lățime|culoare|stil).
• chenar-dreapta-(lățime|culoare|stil).
• chenar-jos- (lățime|culoare|stil).
• chenar-stânga- (lățime|culoare|stil).
• bordura: bordura-latime chenar-stil chenar-culoare. Regula echipei.

În procesul de proiectare a unui site web, mulți constructori de site-uri web începători se întreabă cum să schimbe fontul, dimensiunea și culoarea titlurilor. Da, aceasta este într-adevăr o opțiune grozavă cu care poți adăuga puțină prospețime designului site-ului tău. Dar există o altă întrebare la fel de intrigantă: cum să faci un cadru html.

Pentru ce este cadrul html?

De fapt, nicio funcție specială acest element nu poartă. Dar totuși, textul, închis într-un cadru atrăgător, trezește un anumit interes în rândul cititorilor. Prin urmare, un cadru în jurul textului poate fi numit în siguranță una dintre modalitățile de a sublinia importanța textului încadrat.

Caracteristici ale creării unui cadru în jurul textului

Desigur, variații în designul cadrului folosind CSS mult mai mult, dar asta este o cu totul altă poveste. În plus, această metodă este potrivită pentru constructorii de site-uri mai avansați. Cred că tu și cu mine și cu ajutorul editării cod html nu se va dovedi mai puțin cadru frumos html.

În prima etapă, trebuie să înțelegeți că un cadru poate fi făcut pentru toată lumea element html indiferent de ce fel de etichetă este

,

, , etc.

La rândul său, există o diferență între cadrele elementelor inline și bloc.

Rama de tip încorporat se află în interiorul etichetelor, sau mai corect, persoana responsabilă pentru aceasta afișaj html cod inclus între anumite etichete. Ca rezultat, obținem un cadru html în jurul textului, pentru care trebuie să scriem anumite comenzi pentru a seta marginile interne.

Cadrele bloc sunt formate pe toată lățimea blocului, ceea ce provoacă necesitatea de a specifica comenzi legate de limitarea lățimii.

Desigur, pentru a face text într-un cadru html, va trebui să apelăm la stilurile încorporate. Aceasta metoda va fi cel mai potrivit pentru evidențierea unor fraze individuale, paragrafe în text și imagini. Dacă trebuie să evidențiați o anumită parte a șablonului care este afișată pe toate paginile site-ului, este rezonabil să editați fișierul style.css al șablonului.

Cum să faci un cadru în jurul textului în html

Cred că există o mulțime de teorie. E timpul să exersezi. De exemplu, voi include într-un cadru verde deschis luminos cu fundal gri una dintre propunerile importante ale acestui articol.

Punct important! Stilurile încorporate funcționează perfect și nu dăunează validității HTML a site-ului.

Pentru a implementa același cadru, trebuie să vă referiți la etichetă

SUGESTIA DVS.

Din moment ce în în acest exemplu incorporat stiluri css, consider la fel de important să vă prezint pe fiecare dintre ele.

1. frontieră– proprietate responsabilă cu afișarea cadrului. Pentru a simplifica sarcina, nu am specificat fiecare proprietate separat - border-width (grosimea chenarelor cadrului), border-color (culoarea cadrului html). În schimb, am scurtat puțin codul html scriind toate proprietățile după două puncte.

Pentru schimbare aspect cadru doar schimba valoarea solid. Există următoarele limite ale cadrului:

Ridge – relief.

Punctat - punctat.

Dublu dublu.

Punctată - punctată.

Solid - solid.

2. umplutura– o proprietate responsabilă pentru distanța dintre cadru și obiectul închis în acesta.

Dacă doriți, vă puteți juca puțin mai mult cu stilurile adăugând la numărul de comenzi cuprinse între etichetele de deschidere și de închidere

Proprietate marginea. În acest fel, puteți indenta elementele care se află în afara cadrului.

pentru a se schimba fundalul Este suficient să înregistrați proprietatea culoarea de fundal, specificând codul culorii dorite după două puncte.

Cadrul din jurul imaginii html este realizat în același mod, așa că nu ar trebui să aveți probleme cu el. Singurul lucru pe care un începător trebuie să știe este că, pentru a-l afișa, proprietățile trebuie scrise într-o singură etichetă .

Pentru a rezuma, putem spune că pentru a realiza un cadru în jurul unei imagini sau text, este suficient să deschideți afișajul codului html al articolului și să scrieți în el proprietăți speciale între anumite etichete.

Vă mulțumesc pentru atenție și pe curând pe paginile Stimylrosta.

Găsit în text eroare gramaticală? Vă rugăm să raportați acest lucru administratorului: selectați textul și apăsați combinația de taste rapide Ctrl+Enter

Această proprietate creează o chenar în jurul unui element. Puteți citi mai multe despre această proprietate la link, iar în acest articol I schiță generală Voi descrie cum funcționează. Aceste informații vor fi suficiente pentru a înțelege cum să faci cadre folosind CSS.

Sintaxă proprietăți de frontieră simplu: chenar: 1px negru solid; . Această proprietate are trei semnificații:

• 1px - grosimea marginii.
• solid - tip cadru, solid este o linie continuă, dublu este o linie continuă dublă, întreruptă este o linie punctată. Există alte câteva tipuri de chenare, informații despre ele pot fi găsite aici: CSS border.
• negru - setează culoarea marginii. Culorile pot fi specificate după nume, valori valide sunt aici: tabel de culori CSS, sau de cod hexazecimal. Cum se face acest lucru este descris în articolul: culori în CSS.

cadru de text CSS

Iată un exemplu de utilizare a proprietății border pentru a crea un chenar cu lățime de un pixel și negru:

Acestui paragraf i se atribuie clasa exemplu-1.

În acest exemplu am folosit și proprietatea Umplutură CSS, sau umplutură. Această proprietate specifică cantitatea de indentare de la text la contur (chenarul elementului).

Să ne uităm la un alt exemplu simplu, doar pentru a înțelege ideea. Să creăm un cadru de trei pixeli lățime, roșu și fără nicio umplutură ( proprietate CSS umplutură).

Acestui paragraf i se atribuie clasa exemplu-2.

După cum putem vedea, fără căptușeală, cadrul de text arată cu coarne.

Cum se face o ramă de imagine în CSS

Cadrele pentru imagini sunt setate în mod similar utilizând proprietatea chenar. Să facem un cadru Culoare verde 4 pixeli grosime pentru imagine.

Exemplu-img ( chenar: 4px verde continuu; )

Iată cum va funcționa acest cod:

Cum să rotunjiți colțurile unui cadru în CSS

Rotunjirea colțurilor unui chenar în CSS se face folosind proprietatea border-radius. Această proprietate a fost introdusă în CSS3 și funcționează în toate browserele moderne.

Proprietatea border-radius poate avea de la una la patru valori. Dacă există o singură valoare, atunci stabilește gradul de rotunjire pentru toate colțurile. Să dăm un exemplu despre modul în care această proprietate va funcționa cu o singură valoare.

Exemplul-3 (chenar: 1px negru solid; chenar-rază: 15px; umplutură: 10px; )

Iată cum funcționează:

proprietate border-radius: 15px.>

Dacă blocul nu are chenar, atunci există o chenar-lățime: 0; , atunci zona umplută va fi rotunjită culoare de fundal(proprietate culoare de fundal). Iată un exemplu:

Exemplul-4 (border-width: 0; // deși această valoare este 0 în mod implicit culoarea de fundal: #DDD; border-radius: 15px; padding: 10px; )

Iată cum funcționează acest exemplu:

proprietate border-radius: 15px.>

După cum am scris mai devreme, proprietatea border-radius poate fi setată de la una la patru valori. Tabelul de mai jos descrie modul în care va funcționa fiecare combinație de valori.

Pentru proprietatea chenar-rază, valorile pot fi specificate ca procente.

Să desenăm un cerc în CSS. Pentru a face acest lucru, luați un bloc pătrat de 100 pe 100 de pixeli și rotunjiți colțurile regula CSS raza-limită: 50% .

Exemplul-5 ( lățimea: 100px; înălțimea: 100px; culoarea fundalului: #F00; raza chenarului: 50%; )

Iată cum funcționează acest exemplu:

Aceasta acoperă complet subiectul „cadrelor în CSS”. Succes la invatarea CSS!

chenar CSS elementul este una sau mai multe linii care înconjoară conținutul elementului și a acestuia umplutura. Cadrul este setat folosind proprietate scurtă hotar . Stilul cadrului este setat folosind trei proprietăți: stil, culoareȘi lăţime.

Decorarea cadrelor și chenarelor elementelor HTML folosind proprietăți CSS

1. Stil de chenar

În mod implicit, marginile sunt întotdeauna desenate deasupra fundalului elementului, cu fundalul extinzându-se până la marginea exterioară a elementului. Stilul cadrului determină afișarea acestuia; fără această proprietate, cadrele nu vor fi vizibile deloc. Puteți seta un chenar pentru un element pe toate părțile în același timp folosind proprietăți tip chenar sau pentru fiecare parte separat folosind proprietățile de clarificare border-top-style etc. Nu moștenit.

Sintaxă

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

2. Culoarea cadrului chenar-culoare

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

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 bordur este setată la niciunul și chenarul elementului este setată la o anumită lățime, atunci în acest caz, Lățimea cadrului este setată la zero. Nu moștenit.

Sintaxă

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

4. Setarea unui cadru 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: 100px; înălțime: 100px; chenar: 2px 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 este necesară setarea stil diferit limitele unui element, puteți utiliza notația scurtă pentru limita corespunzătoare.
Proprietățile enumerate mai jos combină următoarele proprietăți într-o singură declarație: border-width , border-style și border-color . Lista de proprietăți este specificată într-o ordine dată, în timp ce una sau două valori pot fi sărite, caz în care valorile lor vor prelua valorile implicite.

Stilul marginii superioare este setat folosind proprietatea border-top, jos - chenar-jos , stânga - chenar-stânga și dreapta - chenar-dreapta .

Sintaxă

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

6. Contur exterior

Proprietatea specifică o chenar 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, deoarece conturul este afișat deasupra casetei elementului, ceea ce, la rândul său, poate duce la suprapunerea suprapunerii exterioare a elementului și a zonelor adiacente.

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

Conturul exterior este întotdeauna dreptunghiular și nu urmează marginea blocului pentru care este specificată raza de margine.

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

Aspectul liniei de contur exterioare este setat în mod similar cu stilul cadrului elementului. Nu moștenit.

Sintaxă

P (stil contur: creasta;)

6.2. Culoarea conturului exterior culoarea conturului

Culoarea conturului exterior poate fi specificată numai când valoarea stabilită stil de contur. Nu moștenit.

Sintaxă

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

6.3. Grosimea conturului exterior lățimea conturului

Grosimea liniei de contur exterioare este setată în mod similar cu grosimea cadrului elementului. Nu moștenit.

Sintaxă

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