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
අපි 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
kasun , බොහොමත්ම ස්තූතියි දාල ගිය අදහසට...දැන් මගෙ ලිපිය සම්පුරණද බලල කියනවද මිත්‍රය..
ReplyDeleteඔහොම යමු.. ඔහොම යමු....
ReplyDeleteඔතන (<P) කියන්නේ parapraph කියන එකද? -nepa
ඔව්.HTML වල පාවිච්ච කරන < P > ටැග් එකම තමා.
Deleteමේක ගොඩක් වටිනවා. ඔයාල අපි වගේ අලුතෙන් ඉගෙන ගන්න අයට ලොකු උදව්වක් කරනනේ. ගොඩක් ස්තුතියි...
ReplyDeleteFatta👌
ReplyDeleteගොඩක් වටිනවා
ReplyDeletethat is a great
ReplyDeletevery good