Ideea din titlul de mai sus e următoarea, stiid că putem avea mai multe proprietăţi pentru un selector, si mai exact mai multe valori pentru diferite părţi ale proprietăţii din selector, m-am gândit că merită să vă arăt o scurtătură.

“margin”,”padding” şi “border-width” sunt câteva valori ce vă oferă posibilitatea de a le personaliza gen “margin-top-width”, “margin-right-width” etc etc, ordinea proprietăţilor, să o reţineţi, că este top,right,bottom,left.

Aşadar, dacă avem :

p {
border-top-width: 1px;
border-right-width: 5px;
border-bottom-width: 10px;
border-left-width: 20px;
}

Mai putem scrie codul şi aşa :

p {
border-width: 1px 5px 10px 20px;
}

border-width, border-color şi border-style le mai putem scrie şi aşa :

p {
border: 1px red solid;
}

Dacă vei trece doar două valori, prima se va aplica pentru top şi bottom, iar cea dea doua pentru right şi left.Desigur mai avem şi pentru font, şi codul se va scrie cu selectorul font, unde vom trece proprietăţile fontului :

p {
font: italic bold 1em/1.5 courier;
}

(1.5 este valoarea pentru linia de contur a textului)

Acum pentru a le pune pe toate împreună, încearcă codul ăsta :

p {
font: 1em/1.5 “Times New Roman”, times, serif;
padding: 3em 1em;
border: 1px black solid;
border-width: 1px 5px 5px 1px;
border-color: red green blue yellow;
margin: 1em 5em;
}

Drăguţ nu?