Box

Դաս 1.

Box -ի հատկությունները

Box-ի հատկությունները հասկանալու համար կիառենք մեկ բջջից բաղկացած աղյուսակ:
Box -ն ունի պարունակության տարածք (content area) և իրեն շրջապատող padding (բացատ), border(եզր), և margin(լուսանցք):
Յուրաքանչյուր box ունի 4 եզր: Եզրերը լինում են. top - վերին, right - աջակողմյան, bottom - ներքևի, և left - ձախակողմյան:
1. Պարունակությունը (Content)
Չափսերը պարունակության (content area) սահմանում են width և height հատկություններով:
2.Լուսանցք (margin)
margin -ը շրջապփակում է box -ին:
3.Բացատ (Padding)
Բացատը շրջափակում է էլեմենտին և հեռացնում մյուս էլեմենտներից:
4.Եզր /եզրագիծ/ (Border)
Եզրը գծում է եզրագիծ box -ի շուրջը:
Այժմ սահմանենք չափսեր եզրագծի համար: Փորձենք գրել կոդերը գրատախտակին:

height:120px; width:230px;

After that hit Preview button.

Օրինակ 1!
Փորձենք այս պարամետրերը.
height:130px;width:300px;
height:3cm;width:8cm;
height:25%;width:50%;
height:48mm; width:100mm;
height:23em;width:em15em;
height:43;width:32;

background: #FF0000;

Դաս 2.

MARGIN PROPERTIES
Margin properties: margin-top, margin-right, margin-bottom, margin-left, and margin. Margin properties specify the width of the margin area of a box. If there are two values, the top and bottom margins are set to the first value and the right and left margins are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left.
Please, write on blackboard.
margin:120px;
margin:12px 23px 14px 19px;
margin:13px -3px -33px 25px;
margin-top:23px;
margin-bottom:16px;
margin-left:11px;
margin-right:44px;

Սեղմեք կոճակը և տեսեք արդյունքը:
Exercise 2!
margin:24px;
margin: 24px 34px;
margin:12px 24px 32px -120px;
margin-top:36px;
margin-bottom:36px;
margin-left:36px;
margin-right:36px;

Try set another values.

Դաս 3.

PADDING- ի հատկությունները
This is a shortcut attribute, and we can set the padding for four edges of an element with one statement or with padding-top, padding-bottom, padding-left and padding-right attributes.
Please, write on blackboard.
padding:120px;
padding:12px 23px 14px 19px;
padding:13px -3px -33px 25px;
padding-top:23px;
padding-bottom:16px;
padding-left:11px;
padding-right:44px;

After that hit Preview button.
Exercise 3!
padding:44em;
padding:22em 33em;
padding:12px 14px 16px;
padding:12px 15px 33px 17px;
padding-top:18px;
padding-bottom:24px;
padding-left:28px;
padding-right:25%;

Try set another values.

Lesson 4.

BORDER PROPERTIES
This is a shorthand attribute for setting the width, style, color of all four borders around an element.
Please, write on blackboard.
border:120px;
border:12px 23px 14px 19px;
border:13px -3px -33px 25px;
border-top:23px;
border-bottom:16px;
border-left:11px;
border-right:44px;

After that hit Preview button.
Exercise 4!
border:44em;
border:22em 33em;
border:12px 14px 16px;
border:12px 15px 33px 17px;
border-top:18px;
border-bottom:24px;
border-left:28px;
border-right:25%;
Try set another values.
Exercise 5!
border-style properties
You can use border-top-style, border-bottom-style,border-left-style, border-right-style.
The values for border-style are none, hidden, dotted, solid, double, groove, ridge, inset, outset.
Please, try these values:
border-style:dotted;
border-style:double, inset, groove;
border-top-style:groove;
border-left-style:outset;
border-right-style:inset;

Try set another values.
border-color properties
You can use border-top-color, border-bottom-color,border-left-color, border-right-color.
You can use values like these: red, lightyellow, RGB(72, 93, 155), #f00000.
Please, try these values:
border-color:black;
border-color:#FFFF00;
border-top-color:#C00;
border-left-color:#ff9900;
border-right-color:white;

Try set another values.
border-width properties
You can use border-top-width, border-bottom-width,border-left-width, border-right-width.
You can use values like these:13px; 14 mm; 15cm; 26em; thin; thick; medium;
Please, try these values:
border-width:24;
border-width:12px 45px;
border-top-widthr:thin;
border-left-width:15%;
border-right-width:2em;

Try set another values.

Note! Pay attention to order of atributes!
border:12px;
border-style:inset;
border-color:green;

----------------------- 
 The border-radius and box-shadow 
properties are very powerful things. 
Through them we can make  round and 
shadow borders . Please, try these 
examples and write your own one!

border-radius: 27px;
box-shadow: 8px 330px 20px 8px #000000;
background-image: linear-gradient(top,#ffffff, #000000);
background-clip: padding-box;
opacity: 0.7;

border-radius: 25px 50px 80px 75px;
box-shadow: 10px 20px 10px 22px #000000;
/*10px-horizontal, 20px-vertical, 10px-blur, 22px-spread*/
background-image: linear-gradient(left, #3cff0f, #0a10ff);
background-clip: padding-box;
opacity: 3;

background-color: #ff1753;
border: 2px solid #56fc98;
border-radius: 50px;
 box-shadow: 10px 20px 17px 22px #000000;
background-image: linear-gradient(left,#3cff0f, #0a10ff);
background-clip: padding-box;
opacity: 0.2;