CSS සිංහලෙන් - 02
CSS කොහොමද වෙබ් පිටුවට Add කරන්නේ?
මේ වැඩේට ක්‍රම 3ක් තියෙනවා
- External style sheet
- Internal style sheet
- Inline style
External Style Sheet එකක් යොදා ගන්නේ බොහෝ වේලාවට එකම CSS code එක ගොඩක් පිටු වලට යොදා ගන්නවනම් තමයි. ඉතින් css code වෙනස් කරලා පහසුවෙන් එම සෑම පිටුවකම Interface එක වෙනස් කරගන්න පුළුවන්. මේ සෑම පිටුවකම අපි <link> tag එක භාවිතා කර Style sheet එක link කල යුතුයි. මෙන්න මේ විදිහට..
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
External Style Sheet එකක් අපිට ඕනෑම Text Editor එකක් මගින් ලිවිය හැකියි. මෙහිදී වැදගත් වන්නේ එය Save කිරීමේදී extension එක ලෙස .css යනුවෙන් ලබා දීමයි.
CSS සිංහලෙන් - 01
ඔන්න ඉතින් තව tute එකක් දාන්න යන්නේ. CSS (Cascading Style Sheets) ගැන. මොකද ගොඩක් අය HTML දැනන් හිටියට CSS ගැන දන්නෑ. ඉතින් ඒ අයට තමයි මේ TUTE එක.කෙටියෙන්ම කිව්වොත් අපි CSS use කරන්නේ වෙබ් පිටුව ලස්සන කරගන්න. ඒ කියන්නේ HTML elements display වෙන්න ඕන විදිය තමයි මේකදි කථා කරන්නේ.
- Selector - කියන්නේ අපිට Style කරන්න අවශ්‍ය HTML Element එක.
- Declaration - කියන කොටසේ ඇතුලත් කරන්නේ අපිට වෙනස් කරන්න අවශ්‍ය Property එක සහ එහි Value එකයි. සෑම Declaration එකක්ම " ; " එකකින් අවසන් විය යුතු අතර Declaration සියල්ලම සඟල වරහන් තුල විය යුතුයි.
- Property & Value - සෑම property එකකටම value එකක් ඇත. ( Propertyname : Value ; )
Comment Box එක ලස්සන කරමුද ?
අද මම ඔයාලට පොඩි CSS code එකක් දෙන්න යන්නේ. මේ code එකෙන් වෙන්නේ tuteslk වල තියෙන comment style එක වගේ එකක් ඔයාලගේ Blog එකට දාගන්න එක. (සැලකිය යුතුයි මෙය මා විසින් නිර්මාණය කළ ලද්දක් නොවේ) ඔයාල මේක වෙනස් කරලා බලන්න.
හරි ඉස්සෙල්ලාම ඉතින් හැමදාම වගේ Blogger Dashboard-->Template --> Edit HTML යන්න.Ctrl + F ගහලා ]]></b:skin> Tag එක හොයාගන්න. දැන් ඔය පල්ලෙහා තියෙන code එක ඔය Tag එකට උඩින් paste කරගෙන Save Template යන්න click කරගන්න. දැන් ඔයාලගේ Blog එකටත් ලස්සන Comment Box එකක් ඇවිල්ලා ඇති.
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#56d805}
Flash : වතුරට පණ දෙමු
Post Title එක දැක්කම බලන්න ඇති මේ මොකක්ද මේ කියලා. ඔන්න ඔය පල්ලෙහා තියෙන වගේ එකක් තමා අපි හදන්න යන්නේ. මේ link එකෙන Source File ටික Download කරගන්නකෝ.
Subscribe to:
Posts (Atom)
