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

Sunday, February 14, 2016

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 ගැන තවත් අලුත් දෙයක් ඊලග පාඩමෙන් කථා කරමු...










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 ...