දනාගෙ පලා මල්ල
Follow Me
  • මුල් පිටුව
  • ගමේ විත්ති >>>
  • ----- අපේ ගම
  • ----- පෘතුගීසී ආක්‍රමණය
  • ----- ගමේ පන්සල
  • ----- අපේ දහම් පාසල
  • ----- ආදර්ශමත් කතාවක්
  • ----- විමලරතනාභිධාන
  • ----- අයාලේ ගිය සිතක සටහන්
  • ----- කිවිපති ගලහේනේ හෙන්ද්‍රික්
  • ----- සොදුරු මං සළකුණු
  • ----- යකඩ කුරුල්ලෝ
  • පරම්පරාවෙ කතා >>>
  • ----- කරතොට ශ්‍රී ධර්මාරාම පරපුර
  • ----- වැලිවිට ශ්‍රී සංඝරාජ පරපුර
  • ----- වේහැල්ලේ ශ්‍රී ධම්මදින්න පරපුර
  • ----- ගුණානන්ද සිල්වත් තැන
  • ----- ජපන් රටට ගිය වලස් පැටව්
  • ----- දියතලාවෙන් ලියමනක්
  • ----- සීයාගේ රස කතා
  • ----- පරපුරක අවසානය
  • ශාස්ත්‍රාලයේ කතා >>>
  • ----- අනද විදු භූමිය
  • ----- පාසල් ජීවිතේ සොදුරු මතකයන්
  • ----- ආනන්දයේ පෙරළිය
  • ----- අපේ ඉතිහාසය සෑර්
  • ----- අපේ සයන්ස් සෑර්
  • ----- ආනන්දේ සඝ රස බස්
  • ----- ආනන්දේ කළු ජූලිය
  • ----- සිංහලේ දින දර්ශනය
  • ----- අගමැතිතුමා නෑ
  • හෙළ වෙද නැණ >>>
  • ----- ප්‍රාණික් හීලිං
  • ----- පාරම්පරික රස වෙදකමේ අනුහස්
  • NSBM මතක >>>
  • ----- ගුරුකුලයට අරුණල්ලක් 01
  • ----- ඒ කාලෙ NSBM
  • සොදුරු කතා බහ >>>
  • ----- සංහිදියාවයි ලොවට කියන්නේ
  • ----- මන්දාකිණියෙන් ඔබ්බට
  • ----- රංග භූමිය සිසාරා
  • ----- වයලීනෝ සබැදි කතා
  • ----- වයලීනෝ සබැදි කතා II
  • ----- වයලීනෝ සබැදි කතා III
  • ----- උපසිරැසි කොටන්නෝ
  • ----- සටන් භූමිය මත
  • ----- තුන්වෙනි සීනුව
  • ----- යටගියාව සොයා
  • ----- නටන්නමයි හිත
  • ----- ප්‍රමිත්ගෙ පද පේළි
  • ----- ප්‍රමිත්ගේ සෙනෙහසේ මතකය
  • ----- අරුම පුදුම ප්ලාස්ටික් කරාබු
  • ----- චක්‍රායුධ කැළ
  • ----- චක්‍රායුධ කැළ 02
  • ----- පාද යාත්‍රාවක වගතුග
  • ----- eLearning.lk
  • ----- Miyu Comics
  • යමින් එමින් ගමන් >>>
  • ----- යටිබේරිය බෞද්ධ මධ්‍යස්ථානය වෙත
  • ----- බෝම්බ බිය
  • ----- සිරකරුවන්ද මනුෂ්‍යයෝ වෙත්
  • ----- පන්සල පන්සලක් කරමු
  • ----- ඉසිපතනාරාමය සොයා
  • ----- මුහුදු වෙරළක උදෑසනක්
  • ----- මිල්ලංගොඩ ලොකු රාජා
  • ----- පාවෙන පොත්ගුල
  • ----- ගාලු ප්‍රදීපාගාරය වෙත
  • ----- බස් කතා
  • ----- රෝද තුනේ කතා
  • ----- යාචක සිතුවිලි
  • ----- දළ රළ පෙළ පැරදූ පිළිරු
  • ----- BPISL අමතක නොවන සිදුවීම්
  • ----- ඉරණම් විපාක පතන
  • මගේ කටුගේ >>>
  • ----- රත්තරං ඔරලෝසුව
  • ----- ඉපැරණි වාස්තු විද්‍යාව
  • ----- කැමරා සොහොයුරෝ
  • පරිකල්පිත >>>
  • ----- ජීවිත මතක පද
  • ----- ජීවිත මතක පද 02
  • ----- මිනිසාගේ අනාගතය
  • ----- අඹ බෞද්ධයො
  • ----- මට හිතෙන හැටි
  • ----- පිපුණු මලේ රුව
  • ----- ජල වාෂ්ප සහ අමනුෂ්‍යයෝ
  • ගවේෂණ >>>
  • ----- ගවේෂණ අංක 01
  • ----- ගවේෂණ අංක 02
  • ----- ගවේෂණ අංක 03
  • ----- ගවේෂණ අංක 04
  • ----- ගවේෂණ අංක 05
  • ----- ගවේෂණ අංක 06
  • ----- ගවේෂණ අංක 07
  • ----- ගවේෂණ අංක 08
  • ----- ගවේෂණ අංක 09
  • ----- ගවේෂණ අංක 10
  • ----- ගවේෂණ අංක 11
  • ----- ගවේෂණ අංක 12
  • ----- ගවේෂණ අංක 13
  • අධ්‍යන >>>
  • ----- මාළිගාවේ නාගසිංහම්
  • ----- ථේරවාදී බුදු දහමේ ව්‍යාප්තිය
  • ----- නත්තලේ විරාමය
  • ----- අමතක වුණු පාඩම
  • ----- බීමේ ආදීනව
  • ----- මිත්‍යාවක් මැද හිද
  • ----- ටෙලි රූ මතක 01
  • ----- ටෙලි රූ මතක 02
  • ----- කැමරන්ගේ කැලිෆෝනියන්
  • ----- සැබෑ සොහොයුරු කණ්ඩායම
  • ----- අවාසනාවන්ත ලුසිටානියා
  • ----- ඒ කාලේ Games 01
  • ----- ඒ කාලේ Games 02
  • ----- ජුරාසික් පාර්ක් වැරදි
  • ----- ධර්ම සංගායනා
  • ----- පාට මාරු කරන නැව්
  • ----- මහාමාරි වෛද්‍යවරු
  • ----- පළමු ලෝක යුද්ධය අප්‍රසිද්ධ ඇයි?
  • ----- Titanic - Dunkirk සම්බන්ධය
  • ----- නත්තලේ ගීතය
  • ඇහුණු කතා >>>
  • ----- ඩොටේ අක්කා
  • ----- අපි නොදන්න ඇමරිකා
  • ----- අපි නොදන්න ඇමරිකා 02
  • ----- අපි නොදන්න ඇමරිකා 03
  • ----- ලොකු අයියා
  • ----- නවීගේ දහම් පාසල 01
  • ----- භූත ගෙදර
  • ----- කැවුම් පෙරේතයා
  • ----- තරසර ඇසතු රුක
  • පොඩි පොඩි වැඩ >>>
  • ----- වට්ඨගාමිණීගෙ කතාව
  • ----- කවරයේ කතාව
  • ----- කෝපි මේස පොත
  • අපේ CSS පංතිය>>>
  • ----- CSS පාඩම් අංක 01
  • ----- CSS පාඩම් අංක 02
  • ----- CSS පාඩම් අංක 03
  • ----- CSS පාඩම් අංක 04
  • ----- CSS පාඩම් අංක 05
  • ----- CSS පාඩම් අංක 06
  • ----- CSS පාඩම් අංක 07
  • ----- CSS පාඩම් අංක 08
  • ----- CSS පාඩම් අංක 09
  • ----- CSS පාඩම් අංක 10
  • මම ගැන >>>
  • ----- සංකල්පය
  • ----- අනිත් කෙරුම්
  • ----- මගේ දිනපොත
  • ----- මේ ගැනත් හිතන්න
  • ----- සොදුරු මතක සටහන්
  • ----- මට ලියන්න

CSS පාඩම් අංක 02

කලින් කිව්වා වගේම ID සහ Class වලට අපිට කැමති නමක් දෙන්න පුලුවන්. ඒ වගේම හැම HTML element එකකටම වගේ ID සහ Class පාවිච්චි කරන්න පුලුවන්. උදාහරණ කිහිපයක් බලමුද? 

HTML

CSS
<div id = "title"> This is the main title </div>

<div class = "title"> This is a sub title </div>

<button id = "submit"> Submit </button>

<button class = "submit"> Submit </button>

<table id = "time_table"> Timetable </table>

<table class = "time_table"> Timetable </table>


<form id = "registration"> Registration </form>

<form class = "registration"> Registration</form> 

<p id = "paragraph"> Hello </p>


<p class = "paragraph"> Hello </p>

<h2 id = "titles"> Sri Lanka </h2>


<h2 class = "titles"> Sri Lanka </h2>
#title             {                     }

.title              {                     }

#submit          {                     }

.submit           {                     }

#time_table      {                     }

.time_table       {                     }

#registration     {                     }

.registration      {                     }

#paragraph       {                     }

.paragraph        {                     }

#titles             {                     }

.titles              {                     }




කොහොමද CSS File එක Save කරන්නේ?

අපි HTML File එකක් Save කරනකොට එකේ අගට, එහෙමත් නැත්නම් Extension එක විදිහට ලියන්නේ .html කියලනේ? CSS File එකක් Save කරනකොට අගට දාන්නේ .css කියලා. File Name එක විදිහට තමන්ට කැමති නමක් දෙන්න පුලුවන්.

උදා :-

project.css
style.css
screen.css



එතකොට HTMLවලට සම්බන්ධ කර ගන්නේ?
මුලින්ම තමන්ගේ වෙබ් එකේ ප්‍රධාන Folder එක ඇතුළේ CSS කියලා උප Folder එකක් හදාගෙන ඉන්න. ඒක ඇතුළේ තමයි ඔයාලගේ ඔක්කොම CSS Files දාන්නේ. සාමාන්‍යයෙන් මුළු වෙබ් එකේම CSS ටික ලියන්නේ එක CSS File එකක් ඇතුළේ. ඒත් තමන්ට කැමති නම්, CSS Files 100ක වුණත් ලියන්න පුලුවන්. ඒත් එක File එකක ලිවීමේ තියෙන වාසිය තමයි, ඔක්කොම CSS Codes ටික එකම File එකකින් බලා ගන්න පුලුවන් වෙන එක.

ඊට පස්සේ අදාළ වෙබ් පිටුවේ HTML File එකට යන්න. ඒ File එකේ <head> එක ඇතුළේ මේ Code එක ලියන්න.



<link rel="stylesheet" href="         ">

මේකේ href කියන Tag එක ඇතුළේ, HTML File එකේ ඉදලා CSS File එකට යන Path එක දෙන්න. දැන් ඔයාගේ HTML File එකයි, CSS File එකයි එකට සම්බන්ධ වෙලා තමයි තියෙන්නේ. දැන් පුලුවන් HTML File එක ඇතුළේ HTML Codes ලියලා, CSS Codes ටික CSS File එක ඇතුළේ ලියන්න ගන්න.

Picture
Photo Credits - www.knowledgeport.in

දැන් කොටන්න පටන් ගත්තොත් නරකද?

01. Background
වෙබ් පිටුවක ප්‍රධාන Backgrond Image එක අපි ලියන්නේ <body> එක ඇතුළේ. ඒ එකේ Path එකත් එක්ක... එහෙම කළාම, Images ගොඩක් පෙන්නන්න ගන්නවා. එකම Background Image එක Repeat වීමක් එතනදි දකින්න පුලුවන්.

<body background="a.jpg">

Picture

ඒක නවත්තගන්න අපිට CSS File එකේ මෙහෙම Code එකක් ලියන්න පුලුවන්.

body {background-repeat:no-repeat;}

මේක දුන්නම Repeat වෙන එක නවතිනවා. 
Picture
දැන් මේක පෙන්නන්නේ පොඩියට. අපිට ඕන මේ පින්තූරය Screen එකේ ප්‍රමාණයට අරගන්න. ඒකට අපිට පුලුවන් මේ පින්තූරයට Size එකක් දෙන්න. ඒ කිව්වේ Background Size එකක්. එහෙම දෙන Size එක ආකාර දෙකකින් දෙන්න පුලුවන්. එක්කෝ ප්‍රතිශතයකින් (%). එහෙමත් නැත්නම් පික්සල් (px) වලින්.  

අපි හිතමු අපිට මේ පින්තූරයේ Size එක 100%ක් කරන්න ඕනි කියලා. එහෙම නම් අපිට මෙහෙම ලියන්න පුලුවන්. 

body {background-repeat:no-repeat; background-size: 100%;}

එතකොට වෙබ් පිටුව පෙන්නන්නේ මෙහෙමයි.
Picture
එහෙමත් නැත්නම් මේ විදිහට ලිව්වත් හරි.

body {background-repeat:no-repeat; background-size: 100% 100%}

මුලින්ම ලියලා තියෙන්නේ පින්තූරයේ පළලට ලබා දෙන % ප්‍රමාණය. ඊට පස්සේ ලියලා තියෙන්නේ පින්තූරයේ දිග පැත්තට ලබා දෙන % ප්‍රමාණය. Size එක Px වලින් දෙන්න ඕන නම්, ලියන්න ඕනි මෙහෙමයි.

body {background-repeat:no-repeat; background-size: 1366px 643px;}


මුලින්ම ලියලා තියෙන්නේ පින්තූරයේ පළලට ලබා දෙන Px ප්‍රමාණය. ඊට පස්සේ ලියලා තියෙන්නේ පින්තූරයේ දිග පැත්තට ලබා දෙන Px ප්‍රමාණය. Px වලින් දෙනවා නම් දිග සහ පළලට අනිවාර්යෙන්ම අගයන් දෙන්න ඕන. 

body {background-repeat:no-repeat} කියලා ලිව්වේ නැත්නම්, Background image එක තිරස් අතටත්, සිරස් අතටත් Repeat වෙන්න ගන්නවා. සාමාන්‍යයෙන් x අක්ෂයෙන් අදහස් කරන්නේ තිරස් අත. y අක්ෂයෙන් අදහස් කරන්නේ සිරස් අත. අපිට ඕනි නම් x හෝ y අක්ෂයන්ගෙන් එකකට විතරක් Repeat කරවන්න, මෙහෙම ලියන්න පුලුවන්.

body {background-repeat: repeat-x;}
Picture

body {background-repeat: repeat-y;}
Picture

එහෙමත් නැත්නම් අපිට පුලුවන් Background Image එකට Position එකක් Set කරන්න. 

background-position: center; කියලා දැම්මොත්, Background Image එක වෙබ් පිටුවේ මැද්දට යනවා. 
වෙන තැනකට යවන්න ඕන නම් අපිට පුලුවන් % හෝ px වලින් අගය දෙන්න. එහෙම දෙනකොට මුලින්ම දෙන්න ඕන x අක්ෂයට. ඊට පස්සේ y අක්ෂයට. මෙන්න මේ වගේ....

background-position: 30% 20%;  හෝ

background-position: 100px 260px; 


Background එකට දාන්න පුලුවන් Images විතරද හැබෑටම? නෑ ! අපිට ඕනි නම් පාටක් දාන්න වුණත් පුලුවන්. CSS වලින් පාටක් හදුන්වනකොට ක්‍රම කිහිපයක්ම තියෙනවා. 


{background-color: yellow;} 
නම
Picture


{background-color: #00ff00;}


HEX අගය
Picture

{background-color: rgb(255,0,255);}
RGB අගය
Picture

{background-color: rgba(0, 0, 255, 0.3);}
RGBA අගය


(A = Alpha)
Picture

background-color: hsl(120, 60%, 70%);
HSL අගය

 
Picture

background-color: hsla(120, 60%, 70%, 0.3);
HSLA අගය


(A = Alpha)
Picture


Get your own Flash MP3 Player

Powered by Create your own unique website with customizable templates.