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

කොහොමද යාලුවන්ට, අද අපි කථා කරන්නෙ CSS වල තවත් ප්‍රධාන කොටසක්.
අපි type කරන code ඒක page ඒක scroll කලා කියලා නැති වෙන්නෙ නැතුව ඒ position ඒක නොවෙනස්ව තියෙනවනම් අපට ඒක සෑහෙන්න වැදගත් වේවි.
ඒක කරන්න අපි පාවිච්චි කරන්නෙ position කියන property ඒක.
position ඒකෙ ප්‍රධාන අනු කොටස් කිහිපයක් තියෙනවා.

1. Position:fixed
මේකේදි position ඒක fix වෙනවා. තවත් පැහැදිලි කරනවනම් page ඒක scroll කලා කියලා  මේ දේවල් චලනය වෙන්නෙ නෑ. ඒක ඒතනට fix වෙලයි තියෙන්නනෙ....

ex:

p.fixed_posion
{
     position: fixed;
     top:20px;
     left:20px;
}

2.Position:relative
මේකෙදි position ඒක අදාල property ඒකේ original position ඒකත් ඒක්ක වෙනස් වෙනවා. ඒකයි මේකෙ position ඒක relative කියන්නෙ.

ex:

p.relative_position
{
      position:relative;
      left:20px;
}

3.Position:absolute
මේකෙදි පාවිච්චි වෙන absolute position ඒකේදි position ඒක ගැන හිතන්නෙ නැතුව properties පාවිච්චි කරන්න පුලුවන්.මේක හුගක් වෙලාවට පාවිච්චි කරනවා headers දාන කොට.

ex:

h1{
       position:absolute;
       left:100px;
}

අපි type කරන code ඒකකට shadow ඒකක් වුනත් දාන්න පුලුවන් CSS පාවිච්චි කරලා....

ex:

h1{
        color: white;
        text-shadow: 2px 2px 2px #000000;
}

ඒ වගේම div tag ඒක පාවිච්චි කරලා වෙන් කරන කොටසකට වුනත් shadow ඒකක් දාන්න පුලුවන්.

ex:

div{
          background-color: yellow;
          box-shadow: 10px 10px;
}

මේ කොටසින් CSS ඉවර වෙනවා. අපි ඊලග පාර ඉදන් Software engineering basic theories කථා කරමු.

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 ඒකක් කියලා සලකනවා.

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

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

අැත්තටම web පාඩම් මාලාව පාඩම් 6කටත් අැවිත්...

අද පොරොන්දු වුනා වගේම CSS පටන් ගන්නවා. මට යාලුවෙක් කිවුවා software engineering theories ඉදිරි පාඩමකින් කථා කරන්න පුලුවන්නම් හොදයි කියලා...
ඒ ගැන ඔයාලගෙ suggestionuත් අපිට  කියන්න.

අැත්තටම අපි html කථා කරද්දිත් css පොඩ්ඩක් කථා කලා.

අැත්තටම css කරන්නෙ ලොකු උදව්වක්. පිට ඉදන්  set වෙන css external file ඒකකින් පොඩි html code ඒකක් වුනත් ලස්සන කරන්න පුලුවන්!

css code ඒකක් මූලිකව කොටස් වලට කඩන්න පුලුවන්.
selector සහ deceleration විදියට...

selector ඒකේ දී අපි සදහන් කරන්නෙ මේක paragraph ද?, header ද?, footer ද? කියන මූලික කාරනාව.

deceleration ඒකෙන් කියවෙන්නෙ අපි දෙන selector ඒකේ properties වෙනස්  වෙන්නෙ කොහොමද කියන ඒක.

p{
  color: red;
}

උඩින් තියෙන code ඒකේ p කියන්නෙ  selector ඒක. curly bracket අැතුලෙ වැටෙන්නෙ deceleration ඒක.

ඊලගට අපි කථා කලොත් CSS වල selectors ගැන.

1.Element Selector
                  මෙතන දී මූලික වෙන්නෙ element ඒක. paragraph, header, element ඒකේ name ඒකෙන් තමයි මෙතනදි mention වෙන්නෙ.

h1{
        text-align: center;
        color:red;
}

2.ID Selector
                  මෙතනදි පාවිච්චි වෙන්නෙ element ඒකක අපි id කියලා ඒතනට භාවිතා වන නම.ඒ වගේම තමයි id ඒක පාවිච්චි වෙද්දි CSS කොටසෙදි id name ඒකට ඉදිරියෙන් "# " ලකුණ යෙදෙනවා.ඣක්

<p id="first"></p>  වුනොත් CSS කොටසට පාවිච්චි වෙන්නෙ first කියන කොටස.

#first{
             color:yellow;
             font-size: 20px;
}

3. CLASS Selector
                class selector ඒකේදි අපි භාවිතා කරන element ඒකේ class කියන attribute ඒක. මේකෙ css file ඒක වෙනම අදුරගන්න ". " ලකුණ පාවිච්චි වෙනවා.

<p class="center"></p> වුනොත් CSS කොටසට පාවිච්චි වෙන්නෙ center කියන කොටස.

.center{
              color:red;
              align-text:center;
}

මේකෙ විශේෂත්වය තමයි තවත් attribute ඒකක් තිබුනොත් class ඒක center වෙන ඒයාටත් මේ properties බලපානවා.

ex:

<h1 class="center"></h1> මේ header ඒකටත් උඩින් තිබ්බ CSS code ඒක බලපානවා.

මේකෙ තව විශේෂ දෙයක් තමයි අපිට attribute ඒකේ නමින්ම code ඒක හදාගන්න පුලුවන්.
කලින් උදාහරණයක්ම අපි ගත්තොත්...

<p class="center"></p> 

p.center{
                 color:red;
                 align-text:center;

}

මේක අපේ ඊට පස්සෙ උදාහරණය වුන <h1 class="center"></h1> ට බලපෑමක් කරන්නෙ නෑ. ඊට හේතුව අපේ CSS code ඒකේ "p.center" විදියට <p> tag ඒක define කරලා තියෙනවනෙ. ඒතකොට බලපාන්නෙ pට විතරයි.

CSS ගැන තවත් අලුත් දෙයක් ඊලග පාඩමෙන් කථා කරමු...