Marja, chenarul - liniuță și cadre folosind css

Parametrii liniuță CSS

Instrucțiuni pas cu pas pe câștigurile de pe șantierele de construcții sub comanda

este posibil să se stabilească două tipuri de umplutură Utilizarea Cascading Style Sheets.

1. intern padding - distanța de la limitele imaginare ale elementului pentru conținutul său. Intervalul de valori este setată utilizând parametrul de umplutură. O astfel de element de umplutură aparține și stocate în acesta.

2. liniuță externă - distanța dintre limita elementului curent paginii web și a limitelor elementelor adiacente, sau elementul părinte. Dimensiunea distanță reglabilă marja caracteristică. O astfel liniuță este membru în afara.

Pentru claritate imagine:

Marja, chenarul - liniuță și cadre folosind css

De exemplu, ia în considerare o masă de celule HTML umplut cu text. Apoi, căptușeala interioară este distanța dintre limita imaginară a celulei și textul conținute în acesta. Indentare exterioară este distanța dintre limitele celulelor adiacente. Să începem cu umplutură internă.

Padding în CSS folosind capitonarea (sus, jos, stânga, dreapta)

Instrucțiuni pas cu pas pe câștigurile de pe șantierele de construcții sub comanda

Stilul de proprietate padding-left, padding-top, padding-dreapta padding-jos și vă permit să specificați valoarea capitonarea interne, respectiv, la stânga, sus, dreapta și de jos a paginii web Element:

Indentare poate specifica pixeli (px), procent (%) sau alte acceptabil pentru unitățile CSS. Când specificați o valoare procentuală este calculată din lățimea elementului. Pentru a moșteni indică faptul că acesta este moștenit de la un părinte.

De exemplu, curentul am aplicat regula stil de paragraf care definește o marjă de stânga de 20 de pixeli, marginea de sus este de 5 pixeli, adâncitura 35 pe dreapta și pixeli de jos 10 pixeli. norme record în Cascading Style Sheets fișierul va arăta după cum urmează:

p.test padding-left: 20px;
padding-top: 5px;
padding-dreapta: 35px;
padding-bottom: 10px
>

regula padding Prefabricate vă permite să specificați marginile de pe toate laturile de la o dată pe elemente ale paginii web:

padding: <отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

În norma națională este permisă utilizarea unu, doi, trei, sau patru valori, separate printr-un spațiu între ele. În acest caz, efectul depinde de numărul de valori:

dacă specificați o valoare, se va stabili adâncitura din toate laturile elementului paginii;
dacă specificați două valori, primul va seta adâncitura în partea de sus și de jos, iar al doilea - în stânga și dreapta;
dacă specificați trei valori, prima va determina adâncitura din partea de sus, al doilea - în stânga și dreapta, iar al treilea - din partea de jos;
În cazul în care sunt date patru valori, prima liniuță pe partea de sus a valorii, a doua - pe dreapta, a treia - din partea de jos, în timp ce a patra - pe stânga.

Astfel, CSS regulile de mai sus se pot minimiza și scrise, după cum urmează:

proprietate marja sau padding în CSS extern

Instrucțiuni pas cu pas pe câștigurile de pe șantierele de construcții sub comanda

Atributele de stil stânga marja, marja de-top, marja de-dreapta si margin-bottom vă permit să specificați valoarea amprentei externe, respectiv, la stânga, sus, dreapta și de jos:

După cum sa menționat mai sus la exterior este indentat departe de limita elementului curent într-o celulă de frontieră vecine, sau, în cazul în care există elemente învecinate la limita interioară a containerului părinte.

Indentare poate specifica pixeli (px), procent (%) sau alte acceptabil pentru unitățile CSS:

Valoarea automată înseamnă că dimensiunea indentare va fi calculată automat de către browser. În cazul utilizării ratei de înregistrare, indentare calculată în funcție de lățimea containerului părinte. Și acest lucru este valabil nu numai pentru marja stânga și marja de-dreapta, dar, de asemenea, pentru marja de-sus și de marja de jos ca procent va fi calculată în funcție de lățimea, nu înălțimea containerului.

Deoarece valorile indentare externe este permisă aplicarea de valori negative:

În cazul în care elementele adiacente sunt împinse indentare pentru valori pozitive, atunci valoarea negativă a blocului învecinat pentru a naedet elementul pentru care am cerut-o adâncitură negativă.

padding extern putem specifica, de asemenea, marja folosind atributul de stil. Aceasta stabilește valoarea indentare, în același timp, pe toate laturile elementului pagină web:

Marja: <отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

Această proprietate în cazul setării de unu, doi, trei sau patru valori indentare urmează aceleași legi care guvernează și umplutură.

în parametrii folosind proprietatea de frontieră

Există trei tipuri de parametri atunci când configurați cadre:

border-width - grosimea ramei;
border-color - culoarea cadrului;
Stil de frontieră - linii de tip cu care să atragă un chenar.

Vom începe cu parametrul grosime cadru:

border-width: [valoare | subțire | mediu | gros] | moșteni

Grosimea cadrului poate fi setat în pixeli, sau în alte unități disponibile în css. Variabile subțire, cadru gros și o grosime medie este setat la 2, 4 și 6 pixeli, respectiv:

În ceea ce privește padding și marja de proprietăți pentru parametrul border-width pot utiliza una, două, trei sau patru valori, stabilind astfel grosimea cadrului pentru toate părțile dintr-o dată, sau fiecare separat:

border-width: 5px 3px 5px 3px

Pentru a face grosimea actuală punctul cadrului superior 1px, dreapta 2px, 3px mai mici, și a plecat de 4PX regula

Cu stilul atribute stânga border-width, border-top-width, border-dreapta-lățime și border-bottom-lățime poate fi specificată grosime, respectiv, din stânga, sus, dreapta și laturile de jos ale cadrului:

Următorul parametru de frontieră, culoarea cu care puteți controla culoarea cadrului:

border-color: [color | transparent] | moșteni

Acesta vă permite să setați culoarea cadrului o dată pentru toate laturile elementului sau doar pentru specificate. Valoarea poate fi luată în folosință pentru modurile de culoare HTML de locuri de muncă: codul hex, cuvinte cheie, etc.:

Valoarea stabilește cadrul transparent transparent de culoare, și moștenesc să moștenească mamă. În mod implicit, în cazul în care culoarea de frontieră nu este specificat, se va folosi cel care este utilizat pentru text în interiorul acestui element.

Cu atributele de stil din stânga-border-color, border-top-color, border-dreapta-color si border-bottom-color, puteți seta culoarea, respectiv, din stânga, sus, dreapta și de jos ale cadrului:

Și ultima opțiune este stilul de frontieră specifică tipul de cadru:

tip de cadru poate fi specificat o dată pentru toate laturile elementului sau doar pentru specificate. După cum valorile pe care le puteți utiliza mai multe cuvinte cheie. Tipul va depinde de grosimea browser-ului și a cadrului. Valoarea nici unul implicit și afișează cadrul și grosimea acestuia este setat la zero. Înțelesul ascuns are același efect. Frame obținute pentru alte valori în funcție de grosimea prezentată în tabelul de mai jos:

Atribute stil-stânga stil de frontieră, top-stil de frontieră,-stil de frontieră din dreapta și de jos în stil de frontieră stabilit stilul liniei, care vor fi trase, respectiv, din stânga, sus, dreapta și partea de jos a cadrului:

În ceea ce privește parametrii externi și padding interne pentru cadrul există o frontieră de proprietate universal. Acesta vă permite să setați simultan grosimea, stilul și culoarea marginii din jurul unui element:

frontieră: [stil de frontieră de frontieră-culoare de frontieră lățime] | moșteni

Valorile pot fi în orice ordine, separate printr-un spațiu:

Pentru a instala numai anumite elemente de delimitare există părți proprietăți border-top, de frontieră de jos, stânga-frontieră, frontieră-dreapta, specificați parametrii care permit, respectiv, pentru partea de sus, de jos, stânga și cadrele laterale dreapta.

Rămâne doar pentru a rezuma:

pentru a specifica utilizarea internă de proprietate umplutură umplutură;
Pentru a personaliza regula de umplutură există marjă;
Parametrii cadru sunt stabilite prin atributul de frontieră.

Rețineți că toate aceste proprietăți css crește dimensiunea elementului pagină web. Prin urmare, dacă vom schimba grosimea de frontieră sau mărimea decupării la blocul de containere care formează design pagina web, va trebui să se schimbe în mod corespunzător dimensiunea containerelor, sau pot fi deplasate, iar designul va fi rupt.

Asta e tot, până când ne vom întâlni din nou!

Crearea unui site de la început până la sfârșit

Ia-carte gratuită

Obțineți articol prin e-mail