CSS #1

Cascading Style Sheets (CSS)

දැන් අපි HTML වලින් වෙබ් පිටුවක structure එක හදාගන්න දන්නවා..දැන් ඒ වෙබ් පිටුවට styles දාල ලස්සන කරගන්න ඕනි..එකට තමා CSS  තියෙන්නේ..අපි මුලින්ම කිව්වා වෙබ් පිටුවක් කොටස් දෙකයි,එකක් head එක අනිත් කොටස body එක..
අපි styles type කරන්න ඕන head එකේ..හේතුව type කරන styles අපිට පේන්න අවශ්‍ය නෑ..නමුත් styles වල output එක අපිට පෙන්න ඕන..ඒ නිසා අපි styles දාන්නේ body එකේ තියෙන දේවල් වලට..

style එකක් දාන්න නම් අපිට <style> ….. </style> tags අවශ්‍ය වෙනවා..type කරන styles අපිට පේන්න අවශ්‍ය නැති නිසා style tags තියෙන්න ඕනි head එක ඇතුලේ..

1

 

 

 

 

 

 

උදාහරණයක් වශයෙන් අපි paragraph එකකට styles දාමු..මගේ වෙබ් පිටුව තමයි මේ.

2

 

 

 

 

 

මම මේ paragraph එකේ color එක blue සහ font එක arial කියන font එකට වෙනස් කරන්න අවශ්‍ය style sheet එක ලියන්න යන්නේ..

මුලින්ම අපි web browser එකට කියන්න ඕනි අපේ style එක මොන style එකක්ද කියලා..ඒකට අපි කරන්නේ style  එකට type කියන attribute එකක් යොදන එක..ඒ type එක css වෙන්න ඕනි..එය ඇතුලත් කරන්නේ මෙහෙම..

4

 

 

 

 

ඕනම style එකක් දාන්න අපිට element එකක් තියෙන්න ඕනි..ඒ කියන්නේ paragraph එකක්ද,header එකක්ද  මොකද්ද කියන එක..දැන් අපි හදන්න යන්නේ paragraph එකකට styles.HTML වල paragraph එකක් හදුන්වන්නේ <p> tag එකෙන්..ඒ නිසා element එකේ නම ගන්නේ “p” විදිහට.(ඕනම tag එකක element එක කියන්නේ brackets ඇතුලේ තියෙන එක )

මට අවශ්‍ය color එක blue සහ font එක arial..ඒක CSS style sheet එකට දාන්නේ මෙහෙම..

5

 

 

 

6

 

 

 

 

 

 

output එක මේක

 

 

මේ විදිහට අවශ්‍ය ඕනම properties ගානක් අවශ්‍ය values දීලා වෙනස් කරගන්න පුළුවන්..

structure එක මේක..

element එක {

                     property : value ;

                   }

මේ ආකාරයට වෙබ් පිටුවේ සියලුම tags වලට style දාන්න පුළුවන්..

ඉහත උදාහරණය අනුව අපි paragraph එකේ විවිධ වෙනස්කම් කරා..නමුත් විශාල,professional වෙබ් පිටුවක් සැලකුවොත් අපිට paragraphs විශාල ප්‍රමාණයක් දැකගන්න පුළුවන්…මේ විදිහට style එක් කිරීමෙන් වෙබ් පිටුවේ සියලුම paragraph වලට තියෙන්නේ  එකම style එකක්..ඒ වගේම properties ගාන වැඩි වෙන තරමට වෙබ් පිටුවේ ප්‍රමාණයද විශාල වෙනවා..

මේ ගැටළු සියල්ල විසදගන්න විදිහ ඊලග post එකේ ඉදන්..

source codes,css cheat sheet  ටික මෙතනින්..

git 8094122684_9ffbdbe0c9

Advertisements

3 thoughts on “CSS #1

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