Friday, June 22, 2012

CSS සිංහලෙන් - 02

 CSS ස්ටයිල් ෂිට් 1ක් සාදාගැනීම.

අපි CSS කියන්නෙ මොකද්ද ඇයි ඒක පාවිච්චිකරන්නෙ වගේ දේවල් පළමු ලිපියෙන් කථාකරා.
අද බලමු කොහොමද අපි සිඑස්එස් ස්ටයිල් ෂිට් 1ක් හදාගන්නෙ කියල.

මම මුලින්ම කිවනෙ CSS හරියට HTML වගේ කියල. ඉතින් අපි මේකටත් පාවිච්චි කරන්නෙ notepad එකමයි. හරි අපි බලමු සරළ කෝඩ් එකක් මුලින්ම,

 P {
    font-family: Georgia, "Times New Roman", Times, serif ;
    font-size: 50px;
    font-style: italic;
    color: rgb(255,0,0);
   }

මේ කෝඩ් 1 නෝට්පෑඩ් එකතුළ ලියන්න.( පහත රූපය)



හරි .දැන් බලමු මේ කේත වලින් කියවෙන දේවල්,
  P කියල සඟලවරහන දාල තියන එකෙන් කියවෙන්නෙ වරහන ඇතුලෙ තියන ස්ටයිල් එක  HTML  වල  <P> ටැග් එක සහිත කොටසට පමණක් අයිති බවයි.

වරහන ඇතුලෙ පළවෙනි පේලියෙන් font වර්ගයත් ඊළග පේලියෙන් font size එකත් , ඊලගට font style එක ඒ කියන්නෙ normal, italic, oblique කියන 3න් මොකද්ද කියන 1ත් අන්තිම පේලියෙන් color 1ත් කියවෙනව. මේහිදි පාට දිල තියෙන්නෙ RGB ක්‍රමයට.

මම හිතනව මෙතනට එනකම් හරි කියල.
 දැන් මේක සේව් කරද්දි මතක ඇතුව save type එක all files දෙන්න. දැන් කැමති නමක් යොදල .css කියල දාන්න. උදාහරනයක් විදියට  001.css වගේ.හරි දැන් බලමු css එක කොහොමද අපි හදපු  HTML එකට add කරන්නෙ කියල.
උදාහරණයක් විදියට ,
<html>
    <head>
        <link href = "01.css" rel="stylesheet" type="text/css" >
    </head>

    <title>
        my 1st css
    </title>

    <body>
        <p>
            hellow guys..how ar u?
        </p>
    </body>
</html>

මේ සාමාන්‍ය පිටුවක් නම් පාට කරල තියන කොටසින් තමයි css එක එකතුකරල තියෙන්නෙ. 01.css කියන්නෙ මම save කරපු නම. ඒක ඔයාල save කරපු නම වෙන්න ඕන.
අන්තිමට ඔය page 1 පේන්නෙ මෙන්න මේ විදියට,




අදට එහෙනම් පාඩම ඉවරයි... ඊළගට අපි font properties ගැන කථාකරමු.
ප්‍රශ්න තිබ්බොත් කමෙන්ට් එකකින් අහන්න...ඊයකින් අහනවනම් harsha.thewalaarachchi@gmail.com

7 comments:

  1. kasun , බොහොමත්ම ස්තූතියි දාල ගිය අදහසට...දැන් මගෙ ලිපිය සම්පුරණද බලල කියනවද මිත්‍රය..

    ReplyDelete
  2. ඔහොම යමු.. ඔහොම යමු....
    ඔතන (<P) කියන්නේ parapraph කියන එකද? -nepa

    ReplyDelete
    Replies
    1. ඔව්.HTML වල පාවිච්ච කරන < P > ටැග් එකම තමා.

      Delete
  3. මේක ගොඩක් වටිනවා. ඔයාල අපි වගේ අලුතෙන් ඉගෙන ගන්න අයට ලොකු උදව්වක් කරනනේ. ගොඩක් ස්තුතියි...

    ReplyDelete
  4. ගොඩක් වටිනවා

    ReplyDelete