Cascading Style Sheet မိတ္ဆက္

Cascading Style Sheet

CSS ဆိုတာ web document ေတြကို presentation လုပ္ရာတြင္ HTML ႏွင့္ မေျဖ႐ွင္းႏိုင္ေသာ ကန္႔သက္ခ်က္မ်ားကို W3C ကစံအျဖစ္သတ္မွတ္ထားတဲ့ web language တမ်ိဳးပါ။ web designer ေတြက web design ဖန္တီးရာတြင္ အဓိက အသံုးျပဳလာၾကပါသည္။

CSS ကိုအသံုးျပဳျခင္းျဖင့္ စာစီစာ႐ိုက္ program ကုိအသံုးျပဳသလို web စာမ်က္ႏွာကို ထိန္းခ်ဳပ္ ႏိုင္ျခင္း။

HTML ႏွင့္ design ကိုေရးသာရန္ မလိုေတာ့ဘဲ presentation document ကိုသာေရးသာရန္ လိုအပ္ျခင္း။

Style ႏွင့္ Document ကိုခြဲေရးေသာေၾကာင့္ File size ေသး၍ (Download Time) Browsing Time တိုေတာင္းေစျခင္း။

CSS style တစ္ File ကိုသာျပဳျပင္ ျခင္းျဖင့္ သူႏွင့္ ခ်ိတ္ထားေသာ ရာေထာင္ခ်ီေသာ Web Pages ၏ design ကိုျပဳျပင္ႏိုင္ျခင္း တို႔ေၾကာင့္ CSS ကို အဓိကထား အသုံး ျပဳၾကသည္။

Cascading style sheet တြင္ selector ႏွင့္ declaration ဆိုျပီး ႏွစ္မ်ိဳးခြဲထားပါသည္။ declaration တြင္ property ႏွင့္ value ဆိုျပီး႐ွိတယ္။

Selector

Selector တြင္ Type selector, contextual selectors, Class and ID attribute selector, Pseudo-selectors ဆိုျပီး (၄) မ်ိဳး႐ွိတယ္။

Type selector

          အ႐ိုး႐ွင္းဆံုးျဖစ္ျပီး HTML Elements မ်ားကို Selector အျဖစ္အသံုးျပဳတာျဖစ္ပါတယ္။ ဥပမာ…

          H1 {color: black}

         H2 {color: blue}

          P {color: #ff0000; font-size: 12pt ;}

Declaration တူတာေတြကို တစ္ေၾကာင္းျခင္းစီ မေရးေတာ့ဘဲ အုပ္စုဖြဲ႔ျပီး coma (,) ခံေရးရင္လည္း ရပါတယ္။ ဥပမာ…

h1, h2, h3, h4, h5, h6 {color: blue; font-weight: bold ;}

ဒီလုိဆိုရင္ေတာ့ heading 1 မွ 6 အထိ စာလံုးမ်ား အျပာေရာင္ႏွင့္ Bold တင္ျပီးျဖစ္သြားမွာပါ။

h1, h2, h3, h4, h5, h6 {color: blue; font-weight: bold ;}

h3 {font-style: italic ;}

ဒီလိုမ်ိဳး h3 ကို (font-style: italic) ေၾကျငာမယ္ ဆိုရင္ေတာ့ h3 တမ်ိဳးတည္း စာလံုး အေစာင္း ျဖစ္သြားျပီး က်န္တာေတြ မေျပာင္းလဲပါ။

ေနာက္ျပီးေတာ့ Universal selector ျဖစ္ေသာ ( * ) ႏွင့္

* {color: gray}

ဆိုရင္ေတာ့ HTML Elements အားလံုး႐ွိစာသားမ်ားအားလံုး မီးခိုးေရာင္ျဖစ္သြားမွာပါ။

Block element တခုျဖစ္တဲ့ <div> tag တြင္ style attribute ႏွင့္ေရးရင္…

<div style="color: blue">

<h1> Heading</h1>

<p> This is a whole paragraph of text. </p>

</div>

<div> tag အတြင္း႐ွိ elements အားလံုးတြင္စာသားမ်ားအားလံုး အျပာေရာင္ျဖစ္မွာပါ။ <span> ကေတာ့ inline style အျဖစ္သံုးမွာပါ။ အေပၚကဥပမာတြင္…

<p> This is a whole <span style="color: red ;"> Paragraph</span> of text. </p>

ဆိုျပီးျပင္လိုက္ရင္ Paragraph ဆိုေသာ စားသားတြင္အနီေရာင္ ျဖစ္သြားျပီေပါ့။ ၾကားျဖတ္ျပင္လိုက္သည့္ သေဘာေပါ့။

Contextual selector

ပထမဆံုးအေနႏွင့္ em { color: red;} လို႔ေရးရင္ html tag ျဖစ္ေသာ <em>…….</em> အတြင္း႐ွိစာသားမ်ားအားလံုး အနီေရာင္ေျပာင္းမွာပါ။ က်န္တဲ့ html tag ေတြမွာေတာ့ ေျပာင္းလဲမႈ မ႐ွိပါဘူး။

li em {color: green;}

ဒါကေတာ့ list element <li>…..</li> ေအာက္႐ွိ <em>…..</em> တြင္သာ အစိမ္းေရာင္ေျပာင္းျပီး။ တျခား <em>…..</em> ေတြမွာေတာ့ေျပာင္းလဲမည္ မဟုတ္ပါ။ (မွတ္ခ်က္။   ။ li ႏွင့္ em ၾကားတြင္ space တစ္ခ်က္သာျခားရမည္)

h1 b, h2 b, h3 b {color: yellow;}

<b>…. </b> ႏွင့္ bold တင္ထားေသာ heading 1 to 3 သာလွ်င္ အဝါေရာင္ေျပာင္းျပီး bold မတင္ထားေသာ ့h1,h2,h3 heading မ်ားတြင္ေတာ့ေျပာင္းလဲမႈမ႐ွိပါဘူး။

Class and ID attribute selector

Class selector ကေတာ့ (.) ႏွင့္စေရးရတာပါ။

h1.important {color: red ;}

p.important {color: red ;}

Class name တြင္ space ျခား၍မရပါ။ space အစား hyphens (-) ႏွင့္ underscores (_) ကို အသံုးျပဳႏိုင္ပါသည္။

          <h1 class="important">Attention! </h1>

          <p class="important">Your account is past due. </p>

Class selector ျဖစ္ေသာ (.important) ဆိုေသာ class ကို <h1> ႏွင့္ <p> မ်ားတြင္သာ အသံုးျပဳႏိုင္ပါသည္။ h2, h3, h4, h5, h6 စေသာ heading မ်ားႏွင့္အျခား elements မ်ားတြင္သံုး၍ မရပါ။ တျခားေသာ elements မ်ားတြင္သံုးခ်င္ရင္ေတာ့…

.important {color: red ;}

ဆိုျပီးေတာ့ေရးရပါတယ္။ Html elements အားလံုးတြင္ class attributes ႏွင့္သံုးနိုင္ပါတယ္။ class selector ကေတာ့ အၾကိမ္ေပါင္းမ်ားစြာအသံုျပဳႏိုင္တာပါပဲ။

(#) ႏွင့္ ေရးတာကို ID selector လို႔ေခၚတာပါ။ style တြင္ ….

p#12345 {color: red;}

လို႔ေရးျပီး Html တြင္ေတာ့…

<p id="12345">new item add today. </p>

<p> tag တြင္သာသံုးႏိုင္ပါတယ္။ အျခား tag တြင္ေတာ့အလုပ္လုပ္မွာမဟုတ္ပါဘူး။ အျခား tag တြင္အလုပ္လုပ္ေစခ်င္ရင္ေတာ့…

                   #12345 {color:red ;}

မည္သည့္ Html tag တြင္မဆို တစ္ၾကိမ္သံုးႏိုင္ပါတယ္။ ID selector ကေတာ့တစ္ၾကိမ္သာ သံုးႏိုင္တာပါပဲ။

Pseudo selector

Pseudo selector တြင္ pseudo-classes ႏွင့္ pseudo-elements ဆိုျပီး (၂) မ်ိဳး႐ွိတာေပါ့။

Pseudo-classes

          a:link {color: red;}

          a:visited {color: blue;}

a:hover {color: orange;}

a:active {color: maroon;}

Pseudo-elements

          p:first-line {letter-spacing:6pt;}

ဒီလိုေရးရင္ေတာ့ <p> paragraph ၏ ပထမစာေၾကာင္း (first line) က စာလံုး တစ္လံုးႏွင့္တစ္လံုး 6pt ျခားေဖၚျပေပးပါလိမ့္မည္။ ေနာက္တစ္ခုကေတာ့…

          p.opener:first-letter{font-size:300%}

<p class="opener">…. </p> ႏွင့္ေရးထား paragraph တြင္သာ ပထမစာလံုး (first letter) အ႐ြယ္အစားသည္ 300% ျဖစ္သြားေပလိမ့္မည္။

          CSS ေရးနည္း (၃) သြယ္မွာ Inline style, embedded style, external style တို႔ျဖစ္တယ္။

Inline style ကေတာ့ HTML tag တြင္ "style" ဆိုေသာ attribute ႏွင့္တြဲေရးျခင္းျဖစ္တယ္။

ဥပမာ…

<h1 style="color:red;">This Heading will be red.</h1>

<p style="font-size: 12px; font-family: arial, sans-serif">This is the content if the paragraph to be set with the described style. </p>

HTML document ၏ <head>…. </head> tag အဖြင့္ႏွင့္ အပိတ္အၾကားတြင္ <style>…. </style> tag ကို အသံုျပဳေရးသာျခင္းကို embedded style ဟုေခၚပါတယ္။

ဥပမာ…

<html>

<head>

<style type="text/css">

H1 {color: red ;}

P {font-size: 12pt; font-family: Verdana, sans-serif ;}

</style>

<title>Style Sheets</title>

</head>

---------

</html>

          External style ကေတာ့ HTML tag ျဖစ္ေသာ <link> tag ႏွင့္ @import directive ကို အသံုးျပဳျပီးခ်ိတ္ဆက္ ျခင္းျဖစ္တယ္။ CSS style မ်ားကို HTML document ထဲတြင္မေရးဘဲ (style.css) ႏွင့္သိမ္းျပီးျပန္ခ်ိတ္သံုးတာပါ။

ဥပမာ…

<head>

<link rel="stylesheet" href="/pathname/style.css" type="text/css"/>

</head>

ေနာက္တစ္နည္းက……

<style type="text/css">

@import url (http://pathname/style.css)

</style>

@import directive ကိုအသံုးျပဳရင္ Browser တိုင္းတြင္ အလုပ္မလုပ္ေသာေၾကာင့္ အသံုျပဳမႈ မ႐ွိသေလာက္ နည္းပါလာပါျပီ။

          ႐ႈပ္သြားတယ္လို႔မထင္လုိက္နဲ႔ေနာ္ Tutorials မ်ားတြင္ၾကည့္လိုက္ရင္ ႐ွင္းသြားပါလိမ့္မယ္။ အေျခခံကစေရးတာေၾကာင့္ ႐ွည္ခ်င္႐ွည္သြားပါလိမ့္မယ္။ စိတ္ေတာ့ မပ်က္ၾကပါနဲ႔ေနာ္။ ေနာက္လာမယ့္ Tutorials အခန္းမ်ားကို ဆက္ေလ့လာရင္ ႐ွင္းသြားမွာပါ။

tutorials file ကို   ဒီမွာ  ေဒါင္းျပီးေလ့လာလိုက္ပါ။ ႐ွင္းသြားပါလိမ့္ မယ္။