tuteslk
tuteslk
Up Comming :CSS සිංහලෙන්.

CSS සිංහලෙන් - 01

ඔන්න ඉතින් තව tute එකක් දාන්න යන්නේ. CSS (Cascading Style Sheets) ගැන. මොකද ගොඩක් අය HTML දැනන් හිටියට CSS ගැන දන්නෑ. ඉතින් ඒ අයට තමයි  මේ TUTE එක.කෙටියෙන්ම කිව්වොත් අපි CSS use කරන්නේ වෙබ් පිටුව ලස්සන කරගන්න. ඒ කියන්නේ HTML elements display වෙන්න ඕන විදිය තමයි මේකදි කථා කරන්නේ.

ඉහත පිංතුරයෙන් දැක්වෙන්නේ CSS Rule එකයි.
  1. Selector      - කියන්නේ අපිට Style කරන්න අවශ්‍ය HTML Element එක.
  2. Declaration - කියන කොටසේ ඇතුලත් කරන්නේ අපිට වෙනස් කරන්න අවශ්‍ය Property එක සහ එහි Value එකයි. සෑම Declaration එකක්ම " ; " එකකින් අවසන් විය යුතු අතර Declaration සියල්ලම සඟල වරහන් තුල විය යුතුයි.
  3. Property & Value - සෑම property එකකටම value එකක් ඇත. ( Propertyname : Value ; )
කියවීමේ පහසුව සඳහා CSS code මෙසේ ලියනු ලැබේ.
h1 {
color:blue;
font-size:12px;
}

CSS Comments

CSS Comment එකක් " /* " ආරම්භ වන අතර " */ " මඟින් අවසන් වේ.
/* This is a Comment */
h1 {
color:blue;
font-size:12px;
}

CSS id and class Selectors

id selector - එක Use කරන්නේ විශේෂයෙන් තනි HTML Element එකක් වෙනුවෙන්. id selector එකෙහි HTML attribute එක " id " වේ. css වල id එකක් අර්ථදැක්වීමට " # " ලකුණ යොදා ගනී. පහත උදාහරණය බලන්න. මෙමඟින් "pred' ලෙස id එක ඇති HTML Element එකෙහි Font color එක රතු පාට බවට පත්වේ.
#pred
{
color:red;
}

Class selector - විශේෂයෙන් තනි HTML Element කාණ්ඩයක් (Group) Style කිරීමට මෙය යොදා ගනී.  class selector එකෙහි HTML attribute එක " class" වේ. css වල class එකක් අර්ථදැක්වීමට " . " ලකුණ යොදා ගනී. පහත උදාහරණය බලන්න. මෙමඟින් "post-body" ලෙස class එක ඇති HTML Element සියල්ටම Border එකක් Add වේ.
.post-body {
border : 1px solid red;
}

හොඳයි අපි ඊළඟ Tute එකෙන් කොහොමද CSS code එකක් අපගේ Web Page එකකට Add කරන්නේ කියලා ඉගෙන ගනිමු. මෙම tute එක ගැන ඔබේ අදහස්, යෝජනා, චෝදනා මොනවද කියලා කියලා යන්න අමතක කරන්න එපා. ඊළඟ Tute සදහා Online Editor එකක හදන්නත් බලාපොරොත්තු. Like w3schools. ඒක ඔයාලට ගොඩක් පහසු වෙයි.

:) :( ;) :D ;;-) :-/ :x :P :-* =(( :-O X( :7 B-) :-S #:-S 7:) :(( :)) :| /:) =)) O:-) :-B =; :-c :)] ~X( :-h :-t 8-7 I-) 8-| L-) :-a :-$ [-( :O) 8- 2:-P (:| =P~ #-o =D7 :-SS @-) :^o :-w 7:P 2):) X_X :!! \m/ :-q :-bd ^#(^ :ar!

2 comments: