Umplutură și margini în CSS folosind parametrii de margine, de umplutură și de chenar. CSS: chenar

(Mod implicit:
mediu, niciunul, fără culoare)

lățimea cadrului poate fi mediu, subțire sau gros, sau specificat în unități.
stil_cadru poate fi nici unul sau solid

Argument culoare folosit pentru a defini culoarea de umplere a fundalului unui element în timp ce acesta se încarcă, precum și în spatele părților transparente ale elementului. Dacă treceți în schimb adresa imaginii, modelul se va repeta, umplând conturul cadrului.

#org
{
latime: 80%;
margine-top: 2em;
margine-stânga: auto;
margine-dreapta: auto;
chenar-rază: 10px 10px;
-moz-border-radius: 10px 10px;
-webkit-border-radius: 10px 10px;
umplutură: 15px 20px 15px 80px;
marjă: 0px 0px 0px 0px;
-webkit-box-shadow: 2px 2px 3px #999;
-moz-box-shadow: 2px 2px 3px #999;
/*Hack de înălțime minimă IE*/
înălțime minimă: 40px;
inaltime:auto !important;
înălțime: 40px;
preaplin:vizibil;

Poziție:rudă;
jos: 6px;
dreapta: 6px;
chenar: 1px solid #7e5a25;
/*Setați poziția imagine de fundal*/
fundal-poziție: 20px 50%;
background-repeat: fără repetare;
text-align: justificare;
dimensiunea fontului: 0.9em;

Culoare de fundal: #e8e3d4;
imagine de fundal: url(baba.gif);
}

• table--> bgcolor=#000000 style="border:2px solid #a3852f"
• td--> style="padding: 5px"

Exemplul 4: Utilizare granițe invizibile in masa

ÎN în acest exemplu Culoarea de fundal a unei pagini web este introdusă prin proprietatea de fundal adăugată la selectorul BODY. Deși albul este culoarea implicită, uneori este de dorit să o setați pentru a împiedica utilizatorul să-și specifice culoarea de fundal prin setările browserului. Liniile de tabel ar trebui să aibă, de asemenea, aceeași culoare în acest caz, nu sunt clar vizibile și doar împart celulele între ele.

Rezultatul Exemplului 4 este prezentat mai jos.

Orez. 3. Aspectul chenarelor care se potrivesc cu culoarea de fundal

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: zona de umplutură, chenarul, umplutura ș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 se află lângă el în cod). Reguli de baza:

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

Valoarea „auto” înseamnă că browserul va analiza independent aceste valori. Dimensiunea 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ă, marginile elementelor din interiorul containerului părinte se vor ciocni unele cu altele.

Regula „marginei” este una compusă, valorile tuturor celor 4 margini sunt indicate aici (î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-dreap padding-bottom padding-stanga - regula prefabricata. 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:

• border-top- (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.

Informațiile înconjurate de un cadru vă permit să separați un material dintr-o pagină web de altul și să atrageți atenția cititorului.
În plus, cadrul adaugă eleganță designului site-ului.
Pentru a crea cadre sunt folosite mai multe metode, dintre care majoritatea folosesc proprietățile tabelelor. Stilurile completează capacitățile meselor și vă permit să creați diferite tipuri de rame prin mijloace simple. Mai jos sunt tehnici comune pentru obținerea cadrelor care pot fi găsite peste tot pe diferite site-uri.

Parametru frontieră

Cel mai simplu mod de a crea un chenar este să utilizați parametrii tabelului chenar, care determină grosimea chenarului, și bordercolor, care specifică culoarea acestuia. Cadrele create în acest fel diferă ca aspect în diferite browsere (Fig. 3.1).

Orez. 3.1. Cadrul obtinut folosind parametrul de bordura

Netscape simulează tridimensionalitatea cadrului, browser Operaîn general își lasă culoarea neschimbată și Internet Explorer face cadrul solid.

Exemplul 3.1. Folosind parametrul border

Parametrul chenar definește grosimea cadrului, bordercolor – culoarea acestuia, cellpadding specifică distanța de la cadru până la conținutul tabelului.

Tabele imbricate

Inca una simpla metoda universala construirea unui cadru, care funcționează la fel în browsere diferite, se bazează pe suprapunerea a două tabele una peste alta. Dacă luăm un dreptunghi din, de exemplu, hârtie roșie și punem un alt dreptunghi deasupra alb, puțin dimensiune mai mică, apoi vom vedea un cadru roșu. Doar în loc de o foaie de hârtie folosim eticheta TABLE și setăm culoarea tabelului cu parametrul bgcolor.

Exemplul 3.2. Utilizarea tabelelor imbricate

În tabelul de sus, setați lățimea și înălțimea tabelului după cum doriți, folosind parametrul bgcolor setați culoarea cadrului, spațierea celulelor atribuie-o la zero și umplutură celulară controlează grosimea chenarului. Cu cât acest parametru este mai mare, cu atât cadrul va fi mai gros.
Pentru un tabel intern, este necesar să setați culoarea acestuia, diferită de culoarea externă, pentru a se potrivi cu culoarea de fundal a paginii web, de exemplu, este setat albul; Parametru spațierea celulelor sau umplutură celulară(V în acest caz, indiferent care să folosească) determină distanța de la marginea cadrului până la conținutul tabelului.
Lățimea și înălțimea mesei interne trebuie să se potrivească cu lățimea și înălțimea mesei externe.
Cometariu:Întreruperile de linie în codul HTML adaugă automat un spațiu. Dacă cadrul în unele locuri se dovedește mai gros decât s-a prevăzut, ar trebui să îl eliminați spatii suplimentareîntre etichete și astfel reduceți numărul de linii.

Umplerea celulelor tabelului cu culoare

Utilizarea culorii de fundal a celulelor tabelului este una dintre modalitățile universale și comune de a crea un chenar. Creați un tabel (Fig. 3.2) și completați celulele exterioare în culoarea potrivită(Fig. 3.3).

Orez. 3.2. Orez. 3.3

Grosimea cadrului este determinată de lățimea și înălțimea celulelor. Asigurați-vă că plasați un distanțier în interiorul acestor celule de tabel - desen transparent 1 pe 1 pixel în dimensiune (în exemplu se numește spacer.gif), altfel această metodă nu va funcționa în browserul Netscape.

Exemplul 3.3. Crearea unui cadru prin umplerea celulelor tabelului cu culoare

		înălțime="2">
înălțime="2">	Conţinut	înălțime="2">
înălțime="2">		înălțime="2">

În acest exemplu, este realizat un cadru roșu cu o grosime de 2 pixeli, arată cel mai elegant. Opțiuni de masă spațierea celulelorȘi umplutură celulară sunt egale cu zero, astfel încât cadrul să rămână grosimea dorită și fără goluri. Dacă plasați text în interiorul unui astfel de tabel, acesta se va potrivi strâns pe cadru, care este urât și greu de citit. Pentru a adăuga indentări, puteți crea celule suplimentare în acest scop, puteți utiliza un tabel imbricat sau puteți utiliza stiluri.

Cometariu: Metoda de mai sus este sensibilă la parametri diferiți, prin urmare, în cazul desenării incorecte a cadrului, ar trebui să verificați următoarele:

• dacă dimensiunea tabelului este specificată în pixeli, trebuie să specificați dimensiuni fixe toate celulele;
• când lățimea tabelului este specificată ca procent, trebuie să plasați text în interiorul cadrului care „extinde” celula interioară la lățimea dorită; dacă nu există text sau alt conținut în interiorul unui tabel cu un cadru, lățimea acestuia va fi mult mai mare decât se dorește;
• Nu ar trebui să existe caractere de spațiu neseparabile în celulele în care trece chenarul ( ), ceea ce unii editori de pagini web iubesc să adauge automat;
• rupturile de linie adaugă automat un spațiu textului, deci între etichetele de deschidere și de închidere