දැනට තිබෙන පාඩම්...

Monday, February 22, 2016

web ඉගෙන ගනිමු - 7 පාඩම

අද අපි කථා කරන්නෙ CSS දෙවන කොටස...

මුලින්ම කථා කලොත් padding ගැන,
padding property ඒක පාවිච්චි වෙන්නෙ අපි හදාගන්න ඉඩේ size ඒක තීරණය කරන්න...

ex:

p{
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}

මේකෙ top කියන්නෙ උඩින් ඉඩ තියෙන ගාන. right left කියන්නෙ දකුණින් වගේම වමින්  ඉඩ තියෙන ගාන. bottom පහලින් තියෙන ඉඩ තීරණය කරනවා.

මේ ලොකු code ඒකම short කරලා පහල විදියට type කරන්න පුලුවන්.

ex:

p{
padding: 50px 60px 70px 80px;
}

මේකෙ පිිලිවෙල ඒන්නෙ top right bottom left පිලිවෙලට...

p{
padding: 50px 60px 70px;
}


මේ විදියට අාවොත් නම් top right bottom.

p{
padding: 50px 60px;
}

values 2යි නම් තියෙන්නෙ top right

p{
padding: 50px;
}

මේකෙන් කියවෙන්නෙ values 4ම 50px වෙනවා කියලා...

ඊලගට කථා කරමු div tag ඒක ගැන
div පාවිච්චි වෙන්නෙ කොටස් වලට කඩා ගන්න.

div කියන tag ඒක html කොටසේ යෙදුවට පස්සෙ

div{
width: 50px;
height: 50px;
}

div කොටසක width height කොටස්2 අනිවාර්යයි.
ඒ වගේම max-width, max-height , min-width, min-height tags වුනත් div කොටසට භාවිතා කරන්න පුලුවන්.

හුග දෙනෙක්ට තිබ්බ ගැටලුවක් තමයි font ඒක bold italic කරන හැටි.
ඒකට ගන්නෙ

p{
font-weight: bold;
}

ඊලගට කථා කරන්නෙ <a> tag ඒකට CSS දාන හැටි.

a.link{
               color:red;
}

a.visited{
              color:yellow;
}

a.hover{
              color:blue;
}

a.active{
              color:green;
}

මේකෙ a.link කියන්නෙ පවතින විදිහ අපි මුලින්ම දකින තැනදි පවතින විදිහ.
a.visited කියන්නෙ අපි කලින් බලලා තියෙන link ඒකක් අායෙත් පාරක් බලද්දි පෙන්වන විදිහ.
මේකට හොදම උදාහරනෙ තමයි google ඒකේ අපි කලින් බලපු link වෙනස් වෙලා පෙන්වන ඒක.
a.hover කියන්නෙ mouse ඒක ඒ link ඒක උඩින් අරන් යද්දි වන වෙනස්කම්.
a.active කියන්නෙ අපි click කරන link ඒක තවදුරටත් open වෙලානම් තියෙන්නෙ ඒක active link ඒකක් කියලා සලකනවා.

ඊලග පාඩමෙන් තවත් කොටසක්....

No comments:

Post a Comment

What is PowerShell -1

PowerShell mainly using by system administrators and system engineers to their daily work.  This task based command line mainly created by ...