CSS #2

දැනට අපි මුලිකව style එකක් දාන්න දන්නවා..බොහොමයක් html tag වල නිසි ප්‍රයෝජනය ගන්න පුළුවන් styles බාවිතා කරලා ඒ tag එක පාවිච්චි කරනවානම් විතරයි.ඒ නිසා මේ ලිපියේ ඉදන් වැදගත් html tags සමගම ඒ tags වලට අලුත් styles දාන විදිහ ඉගෙනගමු.

මේ ලිපියෙන් කියන්නේ css class ගැන..කලින් සදහන් කරපු විදිහට අපිට එක එක elements වලට විවිද styles දාන්න වෙනවා…එකට විසදුම තමා class බාවිතා කරන එක..

දැනට මේ විදිහට මගේ ලග paragraph දෙකක් තියෙනවා.

c1සාමාන්‍ය විදිහට style එකක් දැම්මොත් මේ දෙකටම එකම style එක apply වෙනවා..දැන් මට අවශ්‍ය පලවෙනි  paragraph එකේ color එක red සහ දෙවැනි  paragraph එකේ color එක blue  කරගන්න..

ඒ නිසා මට අවශ්‍ය වෙනවා පලවෙනි paragraph එක refer කරන්න නමක්..වෙනත් විදිහකට කිව්වොත් .css වල අපි කියන්නේ class එකක් කියලා.ඒ නිසා අපි මේ විදිහට එක් එක් element එකට class හදුනවලා දෙනවා..aa

මේකේ “one” සහ “two” කියන්නේ මම එක් එක් class එකට යොදාගත්තා නම..ඒ නිසා structure එක වෙන්නේ

< tag class=” ඕනම නමක් ” > ………….. </tag >දැන් අපිට එක් එක් element එක හදුනාගන්න විදිහක් තියෙනවා..ඊළගට styles දාන්නේ කොහොමද බලමු.

සුපුරුදු පරිදි අපේ style tag අවශ්‍ය වෙනවා,style type එක අවශ්‍ය වෙනවා.

දැන් අපි web browser එකට කියන්න ඕනි අපි css classes බාවිතා කරනවා කියලා.ඒ වගේම අපි අපිට අවශ්‍ය class name එක දීලා  අවශ්‍ය  style එක apply කරගන්න ඕන .එක කරන්නේ මෙහෙම aasas

නැතිනම් මේ ආකාරයටත් පුළුවන්..
asasasaමේ ක්‍රම දෙකම පාවිච්චි කරලා අවසාන ප්‍රතිපලය තමා මේ.

2016-01-20_02h26_10මේ විදිහට තමා classes බාවිතා කරන්නේ..

දැන් අපි බලමු වැදගත් css properties සහ values

ඕනෑම text එකක් highlight කරලා බැලුවොත්,එක වටවුනු box එකක් දැකගන්න පුළුවන්..එකට background color එකක් දීලා නැති නිසා තමා අපිට පෙන්නේ නැත්තේ…2016-01-20_03h02_28

 

 

 

background-color: yellow; වලින් මම කහ පාටට හරවනවා..

2016-01-20_03h30_19

 

 

 

දැන් මට තියෙන්නේ මේ වගේ text එකක්..එකේ අපිට නොපෙනෙන properties කිහිපයක් තියෙනවා.

asassasas1.border- text එක වට වෙලා තියෙන කොටුවේ දාරය..අපිට මේක වෙනස් කරන්න පුළුවන් විදි තම මේ.

සම්පුර්ණ border එක වෙනස් කරන්න අවශ්‍යනම්

border-color, border-width,border-style කියන properties වලට අදාළ values දෙන්න පුළුවන්.

border එකේ උඩ කොටස  පමණක් වෙනස් කරගැනීමට අවශ්‍යනම්..

border-top-color:

border-top-width:

border-top-style:

ආකාරයට වෙනස් කරන්න පුළුවන්..මේ ආකාරයටම bottom,right,left වලටත් පාවිච්චි කරන්න පුළුවන්..

මෙහි color එකට RGB අගයන් හෝ සාමාන්‍ය වලංගු ඉංග්‍රීසි නාමය දෙන්න පුළුවන්..width එක pixel (px) සහ style එකට solid,dotted,dashed වැනි වලංගු values බාවිතා වෙනවා.

2.padding – text එක සහ border එක අතර ප්‍රදේශය..මෙහි වෙනස් කරන්න පුළුවන් දේවල් තමා

padding-top = text එක සහ උඩ border එක අතර කොටස

padding-bottom = text එක සහ යට  border එක අතර කොටස

padding-left  = text එක සහ left  border එක අතර කොටස

padding-right = text එක සහ right  border එක අතර කොටස

මේ සියලුම properties අවකාශය සම්බන්ද නිසා pixel(px) වලින් value එක දෙන්නේ..

තවත් අලුත් tags හා styles සමග ඊලග ලිපියෙන් හමු වෙමු..ජය වේවා !!!!!!!!!!!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s