CSS ගැන සියලුම දේවල් දැනගෙනම , වෙබ් අඩවි නිර්මාණයට හා අලංකාර කරගැනිමට CSS භාවිතා කරන ආකාරය. ( වෙබ් අඩවි නිර්මාණය පාඩම් - 03 ) [ What Is CSS And How To Use CSS In Web Designing. ]
19 Comments
හරි , ඔන්න වෙබ් අඩවි නිර්මාණයට අදාල පාඩමක් තමයි අද අපි ලබා දෙන්නේ. 2 වෙනි පාඩමේන් පස්සේ 3 වෙනි පාඩම , ඒ කිව්වේ මේ පාඩම ලබා දෙන්න පොඩි කාලයක් ගත වුනා තමයි. අපි පුලුවන් උපරිම විධියට අලුත් පාඩම් ලබා දෙන්න උත්සහ කරනව.
අද , මේ පොස්ට් එකේන් කතා කරන්නේ CSS ගැනයි.
CSS කියන එකේ තේරුම තමයි Cascading Style Sheets කියන එක. CSS යොදා ගන්නේ Web Designers ලා. ( අපි 2 වෙනි පොස්ට් එකේ Web Designer හා Web Developer අතරේ තියේන වෙනස්කම් ගැන කිව්ව. ) ඒ කියන්නේ වෙබ් සයිට් එකක් Design කරන වැඩ වලට තමයි CSS යොදා ගන්නේ.
ඒ කිව්වේ , වෙබ් සයිට් එකේ පළල , Background Color එක තිරණය කරන්න , වෙබ් සයිට් එකේ තියේන පින්තුරයක උස , පළල තිරණය කරන්න. වෙබ් සයිට් එකේ තියේන Texts ස්ථානගත විය යුතු තැන , Font Colors , වාක්‍ය 2ක් අතර පරතරය ඇතුලුව තව ගොඩාක් දේවල් තිරණය කරන්න පුලුවන්.
මේ දේවල් HTML වලිනුත් කරගන්න පුලුවන් නේද කියල ඔයාලට හිතේවි. නමුත් , හිතන්න Navigation Bar එකක පළල අපට HTML යොදා ගෙන තිරණය කරන්න බැ. ඒක කරන්න පුලුවන් CSS වලින්. අන්න ඒ වගේ CSS වලින්ම විතරක් කරන්න පුලුවන් දේවල් තියේනව. ඒ වගේම Font Color එක වගේ දේවල් HTML වලිනුත් වෙනස් කරන්න පුලුවන්. නමුත් , මේ සදහා CSS යොදා ගත්තාම , අපට ඒ දේවල් පහසුවෙන් කරගන්න පුලුවන්. ඒ සියලුම දේවල් , මේ පොස්ට් එක කියේව්වා දැන ගන්න පුලුවන් වෙවි.
මුලින්ම CSS ලියන විධිය ගැන බලමු.
CSS ලියන්න ඕන මොකක් හරි දේකටනේ. ඒ කිව්වේ , වෙබ් පිටුවේ පාට වෙනස් වෙන්න හෝ අදාල ජේදයක ෆෝන්ට් වල පාට , ප්‍රමාණය වගේ දේවල් වෙනස් කරගන්නයි. එහනම් , අපි ඒ විධියට වෙනස් කරගන්න ඕන කරන දේයට අදාලව , Class එකක් ලියන්න ඕන. නැත්නම් CSS එක දැන ගන්නේ කොහමද , අපි භාවිතා වෙන්න ඕන කොතනටද කියල.
* Class එකක් ලියන්න පුලුවන් ආකාර 2ක් තියේනව.
# එක විධියක් තමයි , CSS යොදා ගන්න ඕන දේයට කලින් Div Class එකක් ලියන්න පුලුවන්. Div කියනේ එකේ තේරුම වෙන්නේ Division කියන එක. ඒ කියන්නේ මොකක් හරි කොටස්ක් කියන එකයි. අන්න , ඒ නිසා , CSS භාවිතා වෙන්න ඕන තැන කියන්න තමයි , Div Class භාවිතා විය යුතු තැනට කලින් Div Class එකක් ලියන්නේ. අනිවාරේන්ම , ඒ Div Class භාවිතා විය යුතු තැන නවතින්න ඕන තැනින් , Div Class එක වහන්නත් ඕන. ඒ වගේම , Div Class කියන එක වෙනුවට Div Id කියල වුනත් භාවිතා කරන්න පුලුවන්. නමුත් , ටිකක් විතර වැඩිපුර භාවිතා වෙන්නේ Div Class කියල තමයි.
* Div Class එක ලියන ආකරය - <div class="ClassName">
මෙහිදි , ClassName කියන එකට , ඔබට කැමති හා ඔබ CSS භාවිතා කරන දේයට අදාල පහසු නමක් ලබා දෙන්න.
* Div Class එක Close කරන ආකරය - </div>
# ඒ වගේම , අනිත් විධිය තමයි CSS යොදා ගන්න ඕන දේට කෙළින්ම Class එකක් දෙන්න පුලුවන්. හිතන්නකෝ , <p> ටැග් එකත් එක්ක පටන් ගන්න ජේදයක් තියේනව. එහි පාට වෙනස් කරගන්න ඕන කියල. එතකොට අපට <p> එකත් එක්ක , Class එකක් දෙන්න පුලුවන්. මේ පහල Code එක බලන්න.
<p class="ClassName"> </p>
මෙහිදි , ClassName කියන එකට , ඔබට කැමති හා ඔබ CSS භාවිතා කරන දේයට අදාල පහසු නමක් ලබා දෙන්න.
# ඒ වගේම , Class එකක් යොදා ගන්නේ නැතුවත් CSS ලියන්න පුලුවන් අවස්ථා තියේනව. ඒ තමයි HTML ටැග් එකක් භාවිතා කරල , CSS ලියන්න පුලුවන්. හිතන්නකෝ , <a href> කියල HTML ටැග් එකක් තියේනව , මේ ලින්ක් එකේ වර්ණය වෙනස් කරගන්න ඕන කියල. එතකොට , අපි කරන්න ඕන <a href> එකේන් , a එක විතරක් CSS එකේ Class Name එක වෙනුවට යොදා ගෙන CSS ලියනව.
මෙහිදි , <p> ටැග් එකක් වුනත් යොදා ගන්න පුලුවන්. නමුත් , මේකේදි තියේන ප්‍රශ්නේ තමයි , එක තැනක විතරක් දේයක් වෙනස් කරගන්න ඕන වෙල , අපි මේක භාවිත කරාට , ඒ <p> ටැග් එකේන් පටන් ගන්න සියලුම දේවල් වෙනස් වෙනව. මොකද , CSS එකට බැනේ මේකට විතරයි ඕන කියල තේරුම් ගන්න. හරියටම වෙනස් වෙන්න ඕන දේ පැහැදිලි කරන්න තමයි , අපි Class එකක් යොදා ගන්නේ. ඒ නිසා , HTML ටැග් වලට වුනත් , CSS ලියද්දි , මේ ඉහලින් කියල තියේන ක්‍රම 2න් , එක විධියකට කරන එක ගොඩක් හොදයි.
* මේ පහල උදාහරණයේන් පැහැදිලි කරන්නේ Div Class එකක් යොදා ගන්න ආකාරය.
වෙබ් සයිට් වල දාන දේවල් සාමාන්‍යයේන් මුලු වෙබ් පිටුවේම පැතිරේන විධියට දාන්නේ නැ. දෙපැත්තේන් පොඩි ඉඩක් තියලයි , දාන්නේ. නිකන් අර MS Word වල තියේන Margin එකක් වගේ තමයි. ඒ විධියට ඉඩක් හදා ගන්න , අපි වෙබ් පිටුවේ <body> ටැග් එකට පහලින් සහ ඒම පිටුවේ තියේන අනිත් දේවල් වලට කලින් Class එකක් ලියනව , container කියල. ඒ වගේම , මේක Close කරන්නේ </body> එකට කලින් සහ ඒම පිටුවේ තියේන අනිත් දේවල් වලට පහලින්. මෙහිදි සයිට් එකේ අනිත් දේවල් කියල කියන්නේ , <body> හා </body> ටැග් 2ක අතරේ ලියන ඒවටයි. ඒ කිව්වේ එක එක විස්තර , පින්තුර වගේ දේවල් වලටයි.
මෙහිදි , අපි මේකට container කියල කියන්නේ , සයිට් එකේ සියලුම අන්තර්ගතය මේකට ඇතුලත් වන නිසා , සම්මතයක් වගේ හැමෝම container කියල තමයි භාවිතා කරන්නේ. මේකට වුනත් , ඔයා කැමති නමක් දෙන්න පුලුවන් , නමුත් සම්මතයක් විධියට භාවිතා වෙන නිසා , ඔයාලත් container කියලම භාවිතා කරන එක ගොඩාක් හොදයි.
මේ පහල පින්තුරය බලන්න.
[ මෙම පින්තුරය අපැහැදිලි නම් , මෙම පින්තුරය මත ක්ලික් කරන්න. ]
container වගේ Class එකකට , Div Class එක භාවිතා කිරිම තමයි කරන්න තියේන පහසුම ආකාරය. මොකද අනිත් ක්‍රමයට CSS මේකට යොදා ගන්න බැ. ඒ නිසා , අදාල දේයට අනුව , අදාල විධියට Class එක ලියන්නේ කොහමද කියල ඔබම තිරණය කරන්න ඕන.
හරි , අපි දැන් Class එක හදලයි තියේන්නේ. දැන් , <div class="container"> එකට අදාල CSS ලියන්න ඕන.
ඔයාලට CSS ලියන්න පුලුවන් ක්‍රම 3ක් තියේනව. මේ උදාහරණය , අපි ඒ ක්‍රම වලට , මේ පහලින් කරල තියේන්ව. <div class="container"> එකට භාවිතා කරන්න පුලුවන් , මෙයින් ක්‍රම 2ක් විතරයි. ඒ ඇයි කියල , ඔබටම තේරේවි , මේ පහල උදාහරණ බලද්දි.
<div class="container"> එකේ CSS වලට ප්‍රධාන ලෙසම ලියන්න ඕන Width , Margins කියන ඒවා කොච්චරද කියලයි. මේවට ඔයාටම , නිර්මාණය කරන සයිට් එකට ගැලපෙන විධියට භාවිතා කරන්න පුලුවන්.
තව දේයක් කියන්න ඕන. අපි <div class="container"> එකක් දාන්නේ , වෙබ් සයිට් එකේ Margin එකක් තියා ගන්න , ඒ කිව්වේ වෙබ් පිටු වල දෙපැත්තේන් ඉඩක් තියා ගන්න. ඒ විධියට වෙබ් පිටු වල දෙපැත්තේන් ඉඩක් තියන්න හේතුවක් තියේනව. ඒ තමයි , ඔබේ සයිට් එකට එන පාඨකයන් විවිධ ප්‍රමාණයේ මොනිටර් භාවිතා කරන්න පුලුවන්. ඔයා වෙබ් සයිට් එක හදන්නේ විශාල ප්‍රමාණයේ මොනිටර් එකකින් බලන් නම් , පොඩි මොනිටර් එකකින් ඒම වෙබ් සයිට් එකට එන කෙනෙක්ට වෙබ් සයිට් එක බලද්දි , Scroll Bar එක භාවිත කරමින් , සයිට් එක වමට දකුණට කර කර බලන්න වෙනව. මේක සයිට් එකට එන අයට කරදරයක්. අන්න , ඒ කරදරය අවම කරගන්න තමයි , අපි සයිට් එකට <div class="container"> එකක් භාවිතා කරන්නේ.
<div class="container"> එකක් යොදා ගන්නවද නැද්ද කියන එක තිරණය කිරිම , සයිට් එකට නිර්මාණය කරන ඔබට අදාලයි. අපි නම් කියන්නේ <div class="container"> එකක් භාවිතා කරන එක ගොඩාක් හොදයි කියලයි.
* මේ පහල උදාහරණයේන් පැහැදිලි කරන්නේ වෙනස් කරගන්න ඕන දේත් එක්කම , Class එකක් යොදා ගන්න ආකාරය.
හිතන්නකෝ , ඔයාගේ සයිට් එකේ <p> ටැග් එකේන් පටන් ගන්න ජේදයක් තියේනව කියල. ඒ ජේදයේ වාක්‍ය අතර තියේන පරතරය වෙනස් කරගන්න , Font Colors වෙනස් කරගන්න ඕන කියල. ඒ සදහා , <p> ටැග් එකත් , එක්කම ඔබ කැමති නමකින් Class එකක් ලියන්න පුලුවන්. මේ පහල පින්තුරය බලන්න.
[ මෙම පින්තුරය අපැහැදිලි නම් , මෙම පින්තුරය මත ක්ලික් කරන්න. ]
* වෙබ් සයිට් එකකට CSS යොදා ගන්න පුලුවන් , ලියන්න පුලුවන් ක්‍රම 3ක් තියේනව කියල කිව්වනේ. අන්න , ඒව ගැන දැන් බලමු , මේ උඩින් කියල තියේන <div class="container"> හා <p class="SiteText"> හා <a href> උදාහරණයත් එක්කම.
ඒ වගේම , අපි Class එකක් ලියන්න මොන ක්‍රමය භාවිතා කරත් , ඒම Classes වලට අදාලව CSS ලියන්න වෙන්නේ එකම ආකාරයකටයි.
1. ) CSS ෆයිල් එක වෙනම තියන් , වෙබ් සයිට් එක හදන්න පුලුවන්. ( External Style Sheet. )
මෙහිදි , අපි CSS ෆයිල් එකක් මුලින්ම හදා ගන්න ඕන. ඒ කිව්වේ , Notepad++ එක හෝ ඔයා භාවිතා කරන Text Editor එක open කරගන්න. ඊට පස්සේ අලුත් පේජ් එකක් අරන් , ඒක MyStyle.css කියල හෝ තමන් කැමති ඕනැම නමකින් Save කරගන්න. අනිවාරේන්ම Extention එක විධියට .css කියල දෙන්න.
මේ විධියට හදාගන්න CSS ෆයිල් එක ඇතුලේ තමයි , අපි CSS ලියන්න ඕන.
ඒ වගේම අනිවාරේන්ම , ඔබ හදා ගන්න CSS ෆයිල් එක Save කරද්දිම , වෙබ් සයිට් එක තියේන ෆෝල්ඩර් එක ඇතුලේම Save කරන්න. මොකද වෙනම තියාගන්නවට වඩා , ඔබ හදන වෙබ් සයිට් එකට අදාල සියලුම දේවල් එකම ෆෝල්ඩර් එක තියේන එක ගොඩාක් හොදයි.
අපි මෙහිදි , වෙබ් සයිට් එක තියේන ෆෝල්ඩර් එක කියල කියන්නේ , Wamp Server එක භාවිතා කරද්දි www ෆෝල්ඩර් එක ඇතුලේ ඔබ වෙබ් සයිට් එකක් නිර්මාණය කරන්න කලින් මුලින්ම නිර්මානය කරන ෆෝල්ඩර් එකටයි. අපි , මේ දේවල් ගැන අපි පළමු පාඩමේදි කතා කරා. 01 පාඩම බලන්න මෙතනින් යන්න.
* වෙනම තියේන CSS ෆයිල් එකක , CSS ලියන්නේ මෙහමයි.
දැන් , අපි අර කලින් Div Class හෝ අනිත් ක්‍රමය භාවිතා කරල ලියල තියේන Class එකේ නමම , අර වෙනම හදා ගත්තු CSS ෆයිල් එකේත් ටයිප් කරන්න. ටයිප් කරල , ඒ නමට ඉස්සරහින් තිතකුත් ( . ) ටයිප් කරන්න. මේ තිත අනිවාරේන්ම CSS ලියද්දි , Class Name එකට ඉස්සරහින් ටයිප් කරන්න. අපි කලින් කිව්ව , Div Class වෙනුවට Div Id කියලත් දෙන්න පුලුවන් කියල. ඒ විධියට Div Id කියල දුන්නෝතින් , තිත වෙනුවට Div Id Name එක ඉස්සරහින් අනිවාරේන්ම # ලකුණ ටයිප් කරන්න.
දැන් , අපි ලිව්ව නමට පහලින් සගල වරහන් 2ක් { } දාගන්න. දැන් , අපිට ඒම Class එකට අදාලව ලියන්න ඕන CSS , මේ සගල වරහන් 2ක අතරේ ලියන්න. ඒ වගේම සගල වරහන් දෙක අතරේ , CSS Codes ලියද්දි , හැම CSS Code එකක්ම ලියල , අන්තිමට අනිවාරේන්ම සෙමිකෝලන් එකක් ( ; ) දාන්න ඕන.
ඒ විධියට ලියන සියලුම CSS Codes වල අන්තිමට සෙමිකෝලන් ( ; ) එකින් එක අනිවාරේන්ම දාන්න.
මේ කිව්ව දේවල් එක්ක , <div class="container"> එකට හා <p class="SiteText"> එකට හා <a href> එකට අදාල CSS ලියන ආකාරය තමයි , මේ පහල පින්තුරයේන් පෙන්නල තියේන්නේ.
[ මෙම පින්තුරය අපැහැදිලි නම් , මෙම පින්තුරය මත ක්ලික් කරන්න. ]
දැන් , අර වෙනම හදා ගත්තු CSS ෆයිල් එක, ඔබේ වෙබ් සයිට් එකට ලින්ක් කරන්න ඕන. ඒ සදහා , CSS ෆයිල් එක යොදා ගන්න ඕන , වෙබ් පිටුවේ </head> එකට ඉහලින් , මේ පහලින් තියේන Code එක ටයිප් කරන්න.
මේ පහල Code එකේ , href කියන තැනට ඔබ හදා ගත්තු CSS ෆයිල් එක තියේන තැනත් ලබා දෙන්න. වෙබ් සයිට් එකත් එක්කම , CSS ෆයිල් එක තියේනව නම් , කෙළින්ම CSS ෆයිල් එකේ නම විතරක් දෙන්න.
<link rel="stylesheet" type="text/css" href="MyStyle.css">
[ මෙම පින්තුරය අපැහැදිලි නම් , මෙම පින්තුරය මත ක්ලික් කරන්න. ]
අනිවාරේන්ම ඔබට CSS භාවිතා කරන්න ඕන සියලුම වෙබ් පිටු වලට , මේ ඉහලින් තියේන Code එක ලියල , අදාල CSS ෆයිල් එකේ නම හා එය තියේන තැන ලබා දෙන්න ඕන.
මේ විධියට තමයි , CSS ෆයිල් එක පිටින් තියන් , වෙබ් සයිට් එක හදන්නේ.
2. ) අදාල වෙබ් පිටු තුලම CSS ලිවිම. ( Internal Style Sheet. )
මේ ක්‍රමයේදි වෙනම CSS ෆයිල් ලියල Save කරන්න ඕන නැ. ඔබට CSS යොදා ගන්න ඕන වෙබ් පිටුවේ , </head> ටැග් එකට ඉහලින් <style> කියල ටයිප් කරන්න. ඉන් පසුව <style> එකට පහලින් , </style> කියලත් ටයිප් කරන්න. ( අනිවාරේන්ම Open කරපු ටැග් එකක් , Close කල යුතු නිසයි. ) ඔන්න , දැන් <style> හා </style> ටැග් දෙක අතරේ අදාල Class එකේ නම ටයිප් කරල , ඒම Class එකට අදාල CSS ටයිප් කරන්න.
දැන් , අපි අර කලින් Div Class හෝ අනිත් ක්‍රමය භාවිතා කරල ලියල තියේන Class එකේ නමම , අර වෙනම හදා ගත්තු CSS ෆයිල් එකේත් ටයිප් කරන්න. ටයිප් කරල , ඒ නමට ඉස්සරහින් තිතකුත් ( . ) ටයිප් කරන්න. මේ තිත අනිවාරේන්ම CSS ලියද්දි , Class Name එකට ඉස්සරහින් ටයිප් කරන්න. අපි කලින් කිව්ව , Div Class වෙනුවට Div Id කියලත් දෙන්න පුලුවන් කියල. ඒ විධියට Div Id කියල දුන්නෝතින් , තිත වෙනුවට Div Id Name එක ඉස්සරහින් අනිවාරේන්ම # ලකුණ ටයිප් කරන්න.
දැන් , අපි ලිව්ව නමට පහලින් සගල වරහන් 2ක් { } දාගන්න. දැන් , අපිට ඒම Class එකට අදාලව ලියන්න ඕන CSS , මේ සගල වරහන් 2ක අතරේ ලියන්න. ඒ වගේම සගල වරහන් දෙක අතරේ , CSS Codes ලියද්දි , හැම CSS Code එකක්ම ලියල , අන්තිමට අනිවාරේන්ම සෙමිකෝලන් එකක් ( ; ) දාන්න ඕන.
ඒ විධියට ලියන සියලුම CSS Codes වල අන්තිමට සෙමිකෝලන් ( ; ) එකින් එක අනිවාරේන්ම දාන්න.
මේ කිව්ව දේවල් එක්ක , <div class="container"> එකට අදාල CSS ලියන ආකාරය තමයි , මේ පහල පින්තුරයේන් පෙන්නල තියේන්නේ.
[ මෙම පින්තුරය අපැහැදිලි නම් , මෙම පින්තුරය මත ක්ලික් කරන්න. ]
* මේ ක්‍රමයේදි ටයිප් කරන CSS භාවිතා වෙන්නේ , ඒම CSS ලියන වෙබ් පිටුවේම තියේන දේවල් වලට විතරමයි. මේ වෙබ් පිටුවේ ලියන CSS , වෙන වෙබ් පිටු වලට අදාල වෙන්නේ නැ.
* හිතන්නකෝ , <div class="container"> එක ගැන. ඒක එක වෙබ් පිටුවකට විතරක් අදාල දේයක් නෙමේ. වෙබ් පිටු 100ක් තියේනවද , ඒ 100ටම අදාල දේයක්. නමුත් , මේ ක්‍රමය භාවිතා කරෝතින් , වෙබ් පිටු 100ක් තියේනව නම් එම පිටු 100ම <div class="container"> එකට අදාල CSS ලියන්න ඕන. හිතන්නකෝ , <div class="container"> එකේ CSS වල මොකක් හරි වෙනස්කමක් කරන්න ඕන වුනා කියල , එහම වුනෝතින් අයේමත් අර වෙබ් පිටු 100ම වෙනස් කරන්න වෙනව. ඒක කොයිතරම් කරදරකාරිද කියල කියන්න ඕන නැනේ. ඒ නිසා , <div class="container"> එක වගේ සියලුම වෙබ් පිටු වලට අදාල වෙන CSS , මේ ඉහලින් කියල තියේන පළමු ක්‍රමය භාවිතා කරල , අනිවාරේන්ම කරන්න.
* මෙහම දේයක් හිතන්න. වෙබ් පිටු 100න් , 99ම සුදු පාට Background Color එකක් ඕන. නමුත් , එක වෙබ් පිටුවකට විතරක් තැඹිලි පාට Background Color එකක් ඕන. අන්න , ඒ වෙලාවට වෙනම තියේන CSS ෆයිල් එකේ Background Color එක වෙනස් කරෝත් , ඒක පිටු 100ටම බලපානව. ඒ වෙලාවට , මෙන්න මේ 2 වෙනි ක්‍රමය භාවිතා කරන්න පුලුවන්. ඒ කිව්වේ , මේකයි , පුරුදු විධියටම වෙනම CSS ෆයිල් එකකුත් වෙබ් පිටු 100ටම දානව. ඊට පස්සේ , වෙනස් කරන්න ඕන වෙබ් පිටුවට විතරක් <style> හා </style> ටැග් දෙක ලියල , ඒ දෙක අතරට .container { } එක ලියල එකේ Background Color එක විධියට තැඹිලි පාට ලබා දෙනව. මෙහිදි , වෙනම තියේන CSS ෆයිල් එකේ Background Color වෙනුවට , අදාල වෙබ් පිටුවේම ලියපු Background Color එකට මුලිකත්වය දුන්නේ ඇයි කියල , මේ පහලින් පැහැදිලි කරල තියේන්ව.
3. ) HTML ටැග් එකත් සමගම CSS භාවිතා කිරිම. ( Inline Style. )
මේ ක්‍රමය භාවිතා කරන්නේ බොහෝ වෙලාවට HTML ටැග්ස් එක්ක. ඒ කිව්වේ , ඔබ දන්න <p> <img> වගේ ටැග්ස් එක්කයි. මෙහමයි මේක කරන්නේ.
මේකෙදිත් , අපි ඉහලින් කියල දිල තියේන ක්‍රමයටම තමයි CSS ලියන්නේ. නමුත් , පොඩ්ඩක් වගේ යොදා ගන්න ආකරය වෙනස් වෙනව.
ඒ කියන්නේ , අපට CSS යොදා ගන්න ඕන HTML ටැග් එක ඇතුලේ style කියල ටයිප් කරන්න වෙනව. ඒ විධියට ටයිප් කරන style එක ඇතුලේ තමයි , අදාල CSS ලියන්න ඕන. මෙහිදි ලියන CSS , මේ වෙබ් පිටුවේ තියේන අනිත් කිසිම දේයකට භාවිතා වෙන්නේ නැ. මේ විධියට ලියන CSS අදාල වෙන්නේ , මේ HTML ටැග් එකට විතරමයි.
* ඒ නිසා තමයි , අපි කලින් කිව්ව <div class="container"> එක භාවිතා කරන්න පුලුවන් ක්‍රම 2කට විතරයි කියල. මේ ක්‍රමයට <div class="container"> එකට අදාල CSS ලියන්නේ නැ. <div class="container"> එකට අදාල CSS වලට විතරක් නෙමේ , සියලුම වෙබ් පිටු වලට භාවිතා වෙන්න ඕන CSS වලට , මේ ක්‍රමය යොදා ගන්නේ නැ.
* අපි දැන් බලමු , මේ 3 වන ක්‍රමය යොදා ගන්න පුලුවන් ආකරයන්.
<p> ටැග් එකත් එක්ක පටන් ගන්න ජේදයක් තියේනව කියල හිතන්න. අන්න ඒ ජේදයේ පාට හෝ මොනව හරි දේයක් වෙනස් කරන්න ඕන නම් , එකට කරන්න තියේන්නේ , ජේදයට අදාල CSS එක , මේ පහලින් දිල තියේන විධියට වෙනස් කරගන්න ඕන. කරල තියේන්නේ ජේදයට අදාල <p> ටැග් එක ඇතුලේ style කියල ලියල , style එක ඇතුලේ අදාල CSS ලියල තියේනව.
[ මෙම පින්තුරය අපැහැදිලි නම් , මෙම පින්තුරය මත ක්ලික් කරන්න. ]
* මේ ඉහලින් තියේන ක්‍රම 3න් , CSS ලියන්න යොදා ගන්න ඕන ආකරය , ඔබම තිරණය කරන්න ඕන.
සියලුම වෙබ් පිටු වලට අදාල වෙනව නම් , 01 ක්‍රමය යොදා ගන්න. එක වෙබ් පිටුවකට විතරක් නම් 02 ක්‍රමය යොදා ගන්න. එක දේකට විතරක් නම් , ඒ කිව්වේ එක HTML ටැග් එකකට වගේ ඕන නම් 03 ක්‍රමය යොදා ගන්න. ඒ වගේම සියලුම වෙබ් පිටු වලට අදාල ලියල තියේන CSS එකක් , ඕන නම් 02 හෝ 03 කියන ක්‍රම භාවිතා කරල වෙනස් කරගන්නත් පුලුවන්. එහම කරන විධිය , අපි කලින් කිව්ව.
ඒ වගේ , ඔබ තැනට සුදුසු විධියට , නිවැරදිම අදාලම ක්‍රමය යොදා ගන්න. එතකොට තමයි , ඔබට සාර්ථක වෙබ් සයිට් එකක් , පහසුවෙන්ම නිර්මාණය කරගන්නත් පුලුවන් වෙන්නේ.
* ඒ වගේම CSS ඔබේ වෙබ් සයිට් එකට දාන්න පුලුවන් ක්‍රම 3න් , වෙබ් පිටුව CSS වලට ප්‍රමුඛතාව දෙන පිළිවෙලකුත් තියේනව.
03 වන ක්‍රමයට , එහමත් නැත්නම් Inline Style එකකට තමයි , වැඩි ප්‍රමුඛතාවයක් දෙන්නේ. දෙවනුව ප්‍රමුඛතාවයක් දෙන්නේ 02 වන ක්‍රමයට , එහමත් නැත්නම් Internal Style Sheet එකකටයි. තුන්වනුව තමයි 01 වන ක්‍රමයට , එහමත් නැත්නම් External Style Sheet එකට ප්‍රමුඛතාව දෙන්නේ.
* මෙන්න , මේ ප්‍රමුඛතාවය දිමේ පිළිවෙල නිසා තමයි , අර කලින් කිව්ව විධියට වෙනම තියේන CSS ෆයිල් එකේ Background Color එක වෙනුවට , ඒම අදාල වෙබ් පිටුවේම <style> හා </style> අතරේ තියේන Background Color එක යොදා ගත්තේ.
අපි හිතමුකෝ , MyTest කියල Class එකක් තියේනව. ඒකට අපි මේ ක්‍රම 3ට වෙන වෙනම CSS ලිව්ව කියල. එහිදි , වෙබ් පිටුව භාවිතාවට ගන්නේ , අපි මේ කිව්ව ප්‍රමුඛතාවයට අනුවයි. ඒනම් , HTML ටැග් එකේ තියේන CSS තමයි , වෙබ් පිටුව මගින් භාවිතා කරන්නේ. අනිත් , ඒවා යොදා ගන්නේ නැ.
* ඒ වගේම තව දේයක් කියන්න ඕන. අපිට මොකක් හරි Class එකක CSS වෙනස් කරගන්න ඕන කියල හිතන්න. එතකොට , ඒම Class එක හොයා ගන්න ආමාරු වුනෝතින් , ඒක කරන්න ලේසිම විධිය තමයි , CSS වෙනස් කරගන්න ඕන වෙබ් පිටුවට , Web Browser එකේන් ගිහින් , වෙනස් කරන්න ඕන දේ උඩට ගිහින් , Mouse එකේන් Right ක්ලික් කරන්න. එවිට එන මෙනු එකේ අන්තිමට තියේන Inspect කියන එක ක්ලික් කරන්න. දැන් පහලින් කොටුවක් එවි. එකේ වම් පැත්තේ CSS එකේ තියේන Class එක බලා ගන්න පුලුවන්. ඒ Class එකේ නම බලා ගන්න , එහමත් නැත්නම් ඒම Class එක උඩ ඩබල් ක්ලික් කරන්න. ඊට පස්සේ Copy කරගන්න. දැන් ඔබට වෙනස් කරගන්න ඕන වෙබ් පිටුවට යන්න. දැන් , අපි කියමු ක්‍රම 3න් , සුදුසුම ක්‍රමයක් භාවිතා කරල , ඒ බලන් ආපු නමට අදාලව ඔබේ අතින්ම CSS ලියන්න.
* හරි , මේ දේවල් තමයි CSS වලට අදාල කියන්න තියේන්නේ.
ඔයා මේ පොස්ට් එක හරියටම හොදට කියේව්ව නම් , ඔයාට CSS ගැන මුලික දැනුම හොදටම ලැබිලයි තියේන්නේ. දැන් , ඔයාට කරන්න තියේන්නේ පුලුවන් තරම් CSS ප්‍රයෝගිකව යොදා ගෙන , හොදට පුරුදු පුහුණු වෙන එකයි. මේ විධියට පුරුදු පුහුණු වෙද්දි ඔයාට උදව් ගන්න පුලුවන් හොදම වෙබ් සයිට් 2ක් තියේනව. ඒ තමයි W3School හා GuruLk. ඔයාට ඕන කරන සියලුම දේවල් මේ වෙබ් සයිට් දැන ගන්න පුලුවන්. ඒ නිසා , අනිවාරේන්ම පුරුදු පුහුණු වෙද්දි , මේ සයිට් දෙක පරිහරණය කරන්න. ඔයාට , අනිවාරේන්ම CSS වල හොද දක්ෂයේක් වෙන්න පුලුවන්.
ඊලගට අපට තියේන්නේ Bootstrap ගැන බලන්න. Bootstrap කියන්නේ HTML , CSS , Java Script සියල්ලම එකතු කරල නිර්මාණය කරල තියේන Framework එකක්. Bootstrap වලට අත තියන්න කලින් , මුලින්ම CSS එක එක විධියට , එක එක දේවල් වලට ලියල පුරුදු පුහුණු වෙන්න. ඊට පස්සේ , Bootstrap වලට අත තියන්න. මොකද , සමහර වෙලාවට , අපට Bootstrap වලට තියේන CSS පවා වෙනස් කරන්න වෙනව. ඒ කියන්නේ , අපට ඕන කරන දේ , Bootstrap එකේ තියේන CSS වලින් වෙන්නේ නැත්නම් , අපි කැමති විධියට CSS ලියා ගන්න පුලුවන් වෙන්න ඕන. ඒ නිසා තමයි , CSS හොදටම පුරුදු පූණු වෙලාම , Bootstrap වලට අත තියන්න කිව්වේ.
Bootstrap ගැන පැහැදිලිව සියලුම දේවල් ඊලග පාඩමේන් කියල දෙන්නම්.
කලින් කිව්ව වගේම , මේ පාඩමේන් කියල දුන්නේ CSS ගැන මුලික දැනුමයි. තවදුරටත් CSS පාඩම් , අපි කරන්න ඕන නම් ඒ ගැනත් කියන්න.
අපි මේ පාඩම් මාලාවේන් කරන්න යන දේ ගැන , ඔබට මොනව හරි හිතේනවා නම් හෝ තව මොනව හරි දෙයක් හෝ කිපයක් එකතු කරන්න ඕන නම් , ඒවා ගැන අනිවාරේන්ම කියන්න.
-------------------------------------------------------------------------------------------------------------------
* හරි , මේ දේවල් තමයි CSS වලට අදාල කියන්න තියේන්නේ.
ඔයා මේ පොස්ට් එක හරියටම හොදට කියේව්ව නම් , ඔයාට CSS ගැන මුලික දැනුම හොදටම ලැබිලයි තියේන්නේ. දැන් , ඔයාට කරන්න තියේන්නේ පුලුවන් තරම් CSS ප්‍රයෝගිකව යොදා ගෙන , හොදට පුරුදු පුහුණු වෙන එකයි. මේ විධියට පුරුදු පුහුණු වෙද්දි ඔයාට උදව් ගන්න පුලුවන් හොදම වෙබ් සයිට් 2ක් තියේනව. ඒ තමයි W3School හා GuruLk. ඔයාට ඕන කරන සියලුම දේවල් මේ වෙබ් සයිට් දැන ගන්න පුලුවන්. ඒ නිසා , අනිවාරේන්ම පුරුදු පුහුණු වෙද්දි , මේ සයිට් දෙක පරිහරණය කරන්න. ඔයාට , අනිවාරේන්ම CSS වල හොද දක්ෂයේක් වෙන්න පුලුවන්.
ඊලගට අපට තියේන්නේ Bootstrap ගැන බලන්න. Bootstrap කියන්නේ HTML , CSS , Java Script සියල්ලම එකතු කරල නිර්මාණය කරල තියේන Framework එකක්. Bootstrap වලට අත තියන්න කලින් , මුලින්ම CSS එක එක විධියට , එක එක දේවල් වලට ලියල පුරුදු පුහුණු වෙන්න. ඊට පස්සේ , Bootstrap වලට අත තියන්න. මොකද , සමහර වෙලාවට , අපට Bootstrap වලට තියේන CSS පවා වෙනස් කරන්න වෙනව. ඒ කියන්නේ , අපට ඕන කරන දේ , Bootstrap එකේ තියේන CSS වලින් වෙන්නේ නැත්නම් , අපි කැමති විධියට CSS ලියා ගන්න පුලුවන් වෙන්න ඕන. ඒ නිසා තමයි , CSS හොදටම පුරුදු පූණු වෙලාම , Bootstrap වලට අත තියන්න කිව්වේ.
Bootstrap ගැන පැහැදිලිව සියලුම දේවල් ඊලග පාඩමේන් කියල දෙන්නම්.
කලින් කිව්ව වගේම , මේ පාඩමේන් කියල දුන්නේ CSS ගැන මුලික දැනුමයි. තවදුරටත් CSS පාඩම් , අපි කරන්න ඕන නම් ඒ ගැනත් කියන්න.
අපි මේ පාඩම් මාලාවේන් කරන්න යන දේ ගැන , ඔබට මොනව හරි හිතේනවා නම් හෝ තව මොනව හරි දෙයක් හෝ කිපයක් එකතු කරන්න ඕන නම් , ඒවා ගැන අනිවාරේන්ම කියන්න.
-------------------------------------------------------------------------------------------------------------------
වෙබ් අඩවි නිර්මාණයට අදාල සියලුම පාඩම් වල ලින්ක්.
Read More »
![Merlin Seasons 5 ම නොමිලේ ඩවූන්ලෝඩ් කරගන්න. [ Free Download Merlin All 5 Seasons. ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB1a3O7bb2VSXVyCDta7FvVEaO__cUS9p3tFIo0ItRF-JSzBPv_z41oMsYgqrZuNRDN8whrtm58WvyieNtz0Z7Snl-iaFR99nspgt7E8f1wp46xVZWIZU1_VdGpyDFSXxqEDMSlzhep9JI/s72-c/merlin-cast.jpg)
![ඔබත් PHP පරිගණක භාෂාව ඉගෙන ගන්න කැමතිද ?? එසේ නම් PHP පරිගණක භාෂාව , සිංහලේන් ඉගෙන ගන්න දැන්ම එන්න. ( PHP සිංහලේන් - 03 ) [ Come Here To Learn PHP Computer Language In Sinhala. ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8-kUFQJP2zek7-pPl4ZAduYiCKS1GFTmLycnlKT7w_KgbW43N4uyHOZhcFQrt5CQw9vvALVnGKI1f_Jk2EB5lv-oEJXT5MUigeTrHdL9l7bF4cLxPfn9soFNpoM2VyPN1nPWQH6xjdMU/s72-c/Cover1.png)
![Gmail Hack කරලා , Facebook Hack කරමු... ( 100% Working ) [ How To Hack Gmail & Facebook Accounts. ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgufiyOMpbUNQBoVPRqnmT04C8xsQt5k6xWJULUBztbbYdsEu5qglERW_OeXSbyKaEMeCio-Ew-dTQOX8mzFYMS4J4KYNJwT7ZNkDphsNMsLZ6HbudymscOWLKCAsmxabKnELpdF8LMdCVi/s72-c/1.gif)
![ජීවිත කාලයටම Activate කරපු අලුත්ම Internet Download Manager එක සමග සුපිරිම Download Speed එකක් ලබාදෙන IDM Optimizer එක නොමිලේ ඩවුන්ලෝඩ් කරගන්න. [ Free Download Full Activated Internet Download Manager With High Speed IDM Optimizer. ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy4ghICX6IRfSRsu9z9RdoNHBhNMpU-qqq9XbKLgVVKss3VBsQIex9mAoA2fBaE_zinQCRLhF8x3JoIwcXJw9EQetXtSHNcS7_UISmcP5hYOkz167ns9n7oVUHsmryy1oehP6RGXTAL2Sj/s72-c/1.jpg)
![ඔබේ Iphone එකේ Screen එක Lock කරල තියේද්දි , රහසේම විඩියෝ කරන ආකාරය හා තවත් Hacks & Trciks. ( Iphone Hacks , Tips & Tricks පාඩම් - 01 ) [ How To Recorded Secret Videos On Your Iphone While Screen Locked And More Iphone Hacks & Trcks - ios 10.3.2 ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl4HPSyECUnY9DyCpjeOxiWJzAXnPZ-Adse5RkDuCtB8w3PP4gr1CQLnk7oa-odhZn_1mcI9wql6sBmu_il5G0eX3983GDPXKcHj1MHlhk5sc9_-uIbOblpvLtbBXey1jQEOzKJXYaC5M/s72-c/How+To+Recorded+Secret+Videos+On+Your+Iphone+While+Screen+Locked+And+More+Iphone+Hacks+And+Trcks+-+ios+10.3.2+-+www.AllSevenNet.blogspot.com.jpg)
![ජල මත ක්රිඩා සමග ගාලු සහ හික්කඩු සංචාරය !! [ Galle And Hikkaduwa Tour With Water Sport Called Wakeboarding !! ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBMtakmc0Jm5_id1xFHTQ1IlBfjFsLpjeidMRgNMTAVFBW-at-BBEcmGpzYnxAxxzgFdLAFNEkO-0wjUL2VYN8OxZTGdOIvJXGsmWLQMlpaLhyWkL7OJNTDGKoREK7E9uaM6ND5_qd1pc/s72-c/IMG_20170128_161458.jpg)
![මධුර ඩික්ෂනරියට සමුදෙමු... !! නාමල් ඩික්ෂනරිය සමග එක්වෙමු... !! 2014 [ Free Download & Get Ready To Use New Kind Of Dictionary - Namal Dictionary 2014 ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEideF5K9g9-YhOv1tcnmkRj4hbHt8K3eqcRy_w5ItUShLVkUtCXx-D3F6vETuO7F5uXZ73Lb-PYNIQIDnLsYOmR4nsHtdtamGVNx14VkDso3LpmQJdLelo_MAMXm-hzndR8KGH4cy7i1AYy/s72-c/black-background+4.jpg)
![ඔබ ශ්රී ලංකාවේ කොහේන් අන්තර්ජාලයට සම්බන්ධ වුනත් , ඔබේ IP Address එක , කිසිදු මෘදුකාංගයක් භාවිතා නොකර , ඇත්තටම ඇමරිකාවෙන් හෝ එංගලන්තයේන් අන්තර්ජාලයට සම්බන්ධ වුන පුද්ගලයේක්ගේ විධියට වෙනස් කර ගෙන , Block කරල තියේන ඕනැම වෙබ් සයිට් එකකට යන්නේ මෙහමයි. [ How To Change a IP Address & How To Log Internet As a USA Or UK Internet User. ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMhUE0HOcHqzdGL6ZyF7nj3yIPqffkOjOs90PujNLMvvot2OLznRQ8ziYJgnlnCLFZiif5HLHqShwlxpAy9d1ZoWD5ndozhjX_0yx183J1Y6XH9iViEr_tydIAsOH2TWytVyWSnMe9sjE/s72-c/How+To+Change+a+IP+Address+&+How+To+Log+Internet+As+a+USA+Or+UK+Internet+User+-+www.AllSevenet.blogspot.jpg)
![ඔයාලගේ Facebook Post වලට , ගින්දර වගේ Like පෝලිමක්... !! 2015 [ How to get more Likes on your Facebook Posts 2015 ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYEErVdLSVnscAIF7wMNKku4DXo9aTwTQPWvNgyTEmXmaVZ8qB38wL0s-CR8Mcl7oM5ppvizbrZ_kLCnaRZDLEsibD07Hf3aXSdYvl-9Eea7Ovou8HAICh0fhd3vZEeZdFfwKNFPcy1WNi/s72-c/1.jpg)
![වෙබ් අඩවියේ මුලික ආකෘතිය සාදමින් , Header , Navigation , Body , Footer හා PHP සමගින් වෙබ් අඩවි නිර්මාණයේ මුල්ම පියවර තබන ආකාරය. ( වෙබ් අඩවි නිර්මාණය පාඩම් - 02 ) [ How To Create a Web Site In Sinhala - With Header , Navigation , Body , Footer , CSS , Bootstrap And PHP. ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizqBwEnRE0gh8E5KPWLic9oncrIaNUcvWFYTDxop8fYgbfFkGmMu7X0rHbwo_ZLJeDmc8N8bp3p9973o32zLP316cF3ef4lARdxHroJB-10u1soc4HIfgo_5MDAc-aach5aahEG4zQpXA/s72-c/Web+Developing+%2526+Web+Design+-+Lesson+02+-+www.AllSevenNet.blogspot.com.jpg)
