Tutorial CSS - Margin, Border si Padding
Pagina 1 din 1
Tutorial CSS - Margin, Border si Padding
CSS - incadrarea continutului.
Folosind CSS putem incadra contiunutul, putem stabilii distanta intre continut si border intre border si marginea paginii. Vom folosi urmatoarele atribute:.
- margin - distanta intre border si marginea paginii
- border - marginea si cutia care incadreaza continutul
- padding - distanta intr border si continut
- content - continutul propriu-zis (text, imagini, etc).
Vom aplica atributele de mai sus sub forma:.
div {
width:200px;
padding:15px;
border:5px solid;
margin:15px;
}
Observatie:
Vom considera exemplul de mai sus un element. Trebuie mentionat ca acest element are o latime totala de 270px (200+15x2+5x2+15x2=270px)..
Concluzie:
latimea continutului + left padding + right padding + left border + right border + left margin + right margin = Latimea totala
si
inaltimea continutului + left padding + right padding + left border + right border + left margin + right margin = Inaltimea totala.
Aceste doua formule trebuiesc luate in considerare atunci cand stabilim inaltimea si latimea continutului..
Nota:
Trebuie mentionat aici ca Internet Explorer, include padding-ul si border-ul in latime (width) in cazul in care acesta este specificat. Aceasta eroare se corecteaza introducand un DOCTYPE la inceputul documentului..
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
CSS - Border Style
Css border nu este altceva decat o bordura de jur-imprejurul continutului. Bordurile realizate cu ajutorul CSS vor fi puse in scena cu ajutiorul atributului border-style cu urmatoarele valori:.
- none
- solid
- dotted
- dashed
- double
- groove
- ridge
- inset
- outset.
Valorile precum groove, ridge, inset si outset pot genera borduri CSS 3D daca sunt alese culorile corecte.
CSS - Border Width
Lungimea bordurii in CSS este determinata de atributul border-width. Acest atribut nu va functiona in cazul in care nu este specificat in prealabil atributul border-style. Vom folosi ca unitati de masura pixelii sau putem pune valorile thin, medium sau thick. Iata si un exemplu:.
div {
border-style:solid;
border-width:2px;
}
CSS Border Color
Culoarea borduri va fi specificata de catre atributul border-color in sistemul hexazecimar, RGB, sau pur si simplu numind culorile. De retinut ca se poate stabili ca bordura sa fie transparenta in cazul in care este nevoie.
Pentru a putea stabilii culoarea bordurii in CSS trebuie mai intai sa stabilim stilul acesteia dupa cu urmeaza..
div {
border-style:solid;
border-color:red;
}
Observatie:
Se pot deasemenea stabilii proprietati individuale pentru fiecare dintre laturile chenarului obtinut..
div {
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
Forma scurta de a scrie toate aceste valori intr-o singura expresie este.
div {
border-style:dotted solid;
}
Folosind forma scurta de a scrie CSS putem stabill aceste valori mult mai simplu economisind timp. Iata cateva exemple care sper sa va lamureasca in privinta contruirii acestora:.
- div { border-style:dotted solid double dashed; }
Bordura de sus este "dotted", cea din stanga "solid", cea din dreapta "double" iar cea de jos este "dashed"..
- div { border-style:dotted solid double; }
Bordura de sus este punctata, cea din dreapta si din stanga sunt solide iar bordura de jos este dubla..
- div { border-style:dotted solid; }
Bordurile de sus si de jos sunt punctate iar cele din dreapta si din stanga sunt solide..
- div { border-style:dotted; }
Te las sa ghicesti.
Desi deasupra am luat un exemplu de baza folosind border-style, aceleasi reguli se aplica la toate celelalte atribute mentionate in acest tutorial CSS.
Observatie:
O alta metoda de a coda in CSS toate proprietatile bordurii intr-o singura expresie este:.
border: 4px dotted #EFEFEF;
De mentionat ca ordinea va fi mereu aceasta.
CSS - Outline
Atributul outline a aparut odata cu introducerea CSS2 si are urmatorile proprietati:.
- outline
- outline-color
- outline-style
- outline-width .
Outline deseneaza un chenar de jur imprejurul continutului.
Nota:
Vezi tabelul de referinte pentru valori disponibile atributului outline..
CSS - Margin
Atributul margin stabileste "dupa cum zice si numele" o distanta in afara bordurii stabilite anterior. Marginea definita nu va avea nici o culoare, cu alte cuvinte va fi transparenta..
Pentru a defini aceasta margine vom stabili valoarea fiecarei margini in parte cea de sus (margin-top)marginea din dreapta si din stanga ( margin-right si respectiv margin-left), si cea de jos (margin-bottom). Retine aceasta ordine intrucat iti va fi utila atunci cand stabilesti margin-ul folosind expresia scurta:.
margin: 30px 20px 30px 50px; (sus, dreapta, stanga, jos)
margin: 30px 20px 50px; (sus, dreapta si stanga, jos)
margin: 30px 20px (sus si jos, dreapta si stanga)
margin: 30px (sus jos dreapta si stanga - cu alte cuvinte o spatiere de 30 de pixeli de jur imprejurul bordurii).
CSS - Padding
Padding se refera la regiunea dintre continut si bordura (border). Vom stabili aceasta regiune in acelasi fel ca si la atributul margin, folosind:.
- padding-top:10px;
- padding-bottom:10px;
- padding-right:20px;
- padding-left:20px;.
Expresia CSS sub forma scurta se formeaza ca si la margin.
padding:25px 50px 75px 100px
Folosind CSS putem incadra contiunutul, putem stabilii distanta intre continut si border intre border si marginea paginii. Vom folosi urmatoarele atribute:.
- margin - distanta intre border si marginea paginii
- border - marginea si cutia care incadreaza continutul
- padding - distanta intr border si continut
- content - continutul propriu-zis (text, imagini, etc).
Vom aplica atributele de mai sus sub forma:.
div {
width:200px;
padding:15px;
border:5px solid;
margin:15px;
}
Observatie:
Vom considera exemplul de mai sus un element. Trebuie mentionat ca acest element are o latime totala de 270px (200+15x2+5x2+15x2=270px)..
Concluzie:
latimea continutului + left padding + right padding + left border + right border + left margin + right margin = Latimea totala
si
inaltimea continutului + left padding + right padding + left border + right border + left margin + right margin = Inaltimea totala.
Aceste doua formule trebuiesc luate in considerare atunci cand stabilim inaltimea si latimea continutului..
Nota:
Trebuie mentionat aici ca Internet Explorer, include padding-ul si border-ul in latime (width) in cazul in care acesta este specificat. Aceasta eroare se corecteaza introducand un DOCTYPE la inceputul documentului..
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
CSS - Border Style
Css border nu este altceva decat o bordura de jur-imprejurul continutului. Bordurile realizate cu ajutorul CSS vor fi puse in scena cu ajutiorul atributului border-style cu urmatoarele valori:.
- none
- solid
- dotted
- dashed
- double
- groove
- ridge
- inset
- outset.
Valorile precum groove, ridge, inset si outset pot genera borduri CSS 3D daca sunt alese culorile corecte.
CSS - Border Width
Lungimea bordurii in CSS este determinata de atributul border-width. Acest atribut nu va functiona in cazul in care nu este specificat in prealabil atributul border-style. Vom folosi ca unitati de masura pixelii sau putem pune valorile thin, medium sau thick. Iata si un exemplu:.
div {
border-style:solid;
border-width:2px;
}
CSS Border Color
Culoarea borduri va fi specificata de catre atributul border-color in sistemul hexazecimar, RGB, sau pur si simplu numind culorile. De retinut ca se poate stabili ca bordura sa fie transparenta in cazul in care este nevoie.
Pentru a putea stabilii culoarea bordurii in CSS trebuie mai intai sa stabilim stilul acesteia dupa cu urmeaza..
div {
border-style:solid;
border-color:red;
}
Observatie:
Se pot deasemenea stabilii proprietati individuale pentru fiecare dintre laturile chenarului obtinut..
div {
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
Forma scurta de a scrie toate aceste valori intr-o singura expresie este.
div {
border-style:dotted solid;
}
Folosind forma scurta de a scrie CSS putem stabill aceste valori mult mai simplu economisind timp. Iata cateva exemple care sper sa va lamureasca in privinta contruirii acestora:.
- div { border-style:dotted solid double dashed; }
Bordura de sus este "dotted", cea din stanga "solid", cea din dreapta "double" iar cea de jos este "dashed"..
- div { border-style:dotted solid double; }
Bordura de sus este punctata, cea din dreapta si din stanga sunt solide iar bordura de jos este dubla..
- div { border-style:dotted solid; }
Bordurile de sus si de jos sunt punctate iar cele din dreapta si din stanga sunt solide..
- div { border-style:dotted; }
Te las sa ghicesti.
Desi deasupra am luat un exemplu de baza folosind border-style, aceleasi reguli se aplica la toate celelalte atribute mentionate in acest tutorial CSS.
Observatie:
O alta metoda de a coda in CSS toate proprietatile bordurii intr-o singura expresie este:.
border: 4px dotted #EFEFEF;
De mentionat ca ordinea va fi mereu aceasta.
CSS - Outline
Atributul outline a aparut odata cu introducerea CSS2 si are urmatorile proprietati:.
- outline
- outline-color
- outline-style
- outline-width .
Outline deseneaza un chenar de jur imprejurul continutului.
Nota:
Vezi tabelul de referinte pentru valori disponibile atributului outline..
CSS - Margin
Atributul margin stabileste "dupa cum zice si numele" o distanta in afara bordurii stabilite anterior. Marginea definita nu va avea nici o culoare, cu alte cuvinte va fi transparenta..
Pentru a defini aceasta margine vom stabili valoarea fiecarei margini in parte cea de sus (margin-top)marginea din dreapta si din stanga ( margin-right si respectiv margin-left), si cea de jos (margin-bottom). Retine aceasta ordine intrucat iti va fi utila atunci cand stabilesti margin-ul folosind expresia scurta:.
margin: 30px 20px 30px 50px; (sus, dreapta, stanga, jos)
margin: 30px 20px 50px; (sus, dreapta si stanga, jos)
margin: 30px 20px (sus si jos, dreapta si stanga)
margin: 30px (sus jos dreapta si stanga - cu alte cuvinte o spatiere de 30 de pixeli de jur imprejurul bordurii).
CSS - Padding
Padding se refera la regiunea dintre continut si bordura (border). Vom stabili aceasta regiune in acelasi fel ca si la atributul margin, folosind:.
- padding-top:10px;
- padding-bottom:10px;
- padding-right:20px;
- padding-left:20px;.
Expresia CSS sub forma scurta se formeaza ca si la margin.
padding:25px 50px 75px 100px
Vizitato- Vizitator
Subiecte similare
» Tutorial CSS-Centrare
» Tutorial CSS - Pozitionare
» Tutorial CSS - Display
» Tutorial CSS - Float
» Tutorial CSS - Meta
» Tutorial CSS - Pozitionare
» Tutorial CSS - Display
» Tutorial CSS - Float
» Tutorial CSS - Meta
Pagina 1 din 1
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum
|
|