cascading style sheet မိတ္ဆက္(၂)

Specifying Values
     ေနာက္သိသင့္တာ တစ္ခုကေတာ့ အကြာအေဝးအတိုင္းအတာ (length) ႏွင့္ အေရာင္ (color) သတ္မွတ္ရာတြင္ အသံုးျပဳရတဲ့ Values ေတြအေၾကာင္းပါ။ အဲ့ဒီမွာ Absolute values ႏွင့္ Relative values ဆိုျပီး(၂) မ်ိဳး႐ွိပါတယ္။
Absolute values တြင္
 Inches (in),
Centimeter (cm),
Millimeter ( mm),
Point (pt),
Picas (pc),
Pixels (px) တို႔ကိုအသံုးျပဳပါတယ္။
Relative values တြင္ Emt (em), Ex (ex) ႏွင့္ Percentage (%) ဆိုျပီး႐ွိပါတယ္။
ဥပမာ…
                <style type="text/css">
.                      header {
                                            width: 960px;
                                            height:5cm;
                                            color:rgb(3%,10%,30%);
                                            font-size:12pt;
                                            letter-spacing:1.2em;
                                       }
                </style>   

Specifying Color
    အေရာင္ေတြကို အေရာင္နာမည္ ႏွင့္ေဖၚျပတာႏွင့္ နံပါတ္ေတြႏွင့္ေဖၚျပတာဆိုျပီး (၂) မ်ိဳး႐ွိတယ္။ အေရာင္ကိုနာမည္ႏွင့္ သတ္မွတ္ရင္ေတာ့ Browser တိုင္းတြင္ကိုယ္လိုခ်င္ေသာ အေရာင္ကို ရႏိုင္မည္ မဟုတ္ပါ။ Browser အေပၚတြင္မူတည္ျပီး အေရာင္ မတူညီႏိုင္ပါဘူး။ (W3C) သတ္မွတ္ထားတဲ့ အေရာင္ (၁၆) မ်ိဳးကေတာ့…

aqua       gray         navy       silver
black      green       olive        teal
blue        lime         purple     white
fuchsia    maroon    red         yellow

အေရာင္ေတြကို နံပါတ္ေတြႏွင့္သတ္မွတ္ရင္ေတာ့ Browser တိုင္းတြင္တူညီေသာ အေရာင္ကို ရႏိုင္မွာျဖစ္တယ္။ အေရာင္ေတြကို ေအာက္ပါအတိုင္း သတ္မွတ္ႏိုင္ပါတယ္။

    h1 {color: 0000ff ;}
    h1 {color: 00f ;}
    h1 {color: rgb(0,0,255);}
    h1 {color: rgb(0%,0%,100%);}
    h1 {color: rgb(0%,3.5%,25.8%);}

    ပထမနည္းက RGB Values ကို ႏွင့္ two-digit hexadecimal ႏွင့္ေဖၚျပျခင္းျဖစ္သည္။ အနည္းအမ်ားက 00 ကစျပီး FF ထိ႐ွိတာပါ။ hexadecimal တန္ဖိုးကိုေတာ ့သိျပီျဖစ္မယ္ ထင္လို႔ ထပ္ျပီးမ႐ွင္းေတာ့ပါဘူး။ ဒုတိယနည္းက တန္ဖိုးတစ္လံုး စီေလွ်ာ့ေရးတာပါ။ လိုတာကို Browser ကထပ္ျဖည့္ေပးပါလိမ့္မည္။
     ေအာက္ကႏွစ္နည္းကေတာ့ တန္ဖိုးေတြကို ဂဏန္းတန္ဖုိး (values) ေတြႏွင့္ ေရးတာပါ။ photoshop အသံုးျပဳဖူးရင္ေတာ့ သိမွာပါ။ သူ႕တန္ဖိုးေတြက အနည္းဆံုး သုည(00) အမ်ားဆံုး ထိ႐ွိပါတယ္။ ရာခိုင္ႏႈန္း Percentage (%) ကေတာ့ အားလံုးသိတဲ့ အတိုင္း အနည္းဆံုး (0%) က (100%) ထိေပါ့။ ဒႆမႏွင့္လည္း ေရးႏိုင္ပါတယ္။

Font properties
Font-Family
    Values: font-family: [<family-name> | [serif | sans-serif | cursive | fantasy |     nonospaced],]
    Inherited: Yes
    Works with: All elements
ဥပမာ…
              P {font-family:"Trebuchet MS", Arial, serif, sans-serif ;}
    ဦးစားေပး Display လုပ္ေစခ်င္ေသာ font ကိုေ႐ွ႕ဆံုးတြင္အရင္ေရးရပါတယ္။ Trebuchet MS, Arial ဒါေတြကိုေတာ့ family name လို႔ေခၚပါတယ္။ serif | sans-serif | cursive | fantasy | nonospaced ဒါေတြကေတာ့ Generic family name ေတြပါ။ ကိုယ္ Display လုပ္လိုေသာ font family အျပင္ Generic family name ကိုပါထည့္ေရးရမွပါ။
     ဘာလို႔လည္း ဆိုေတာ့ User ၏ (PC) Computer မွာအဲ့့ဒီ font (install) တင္မထားဘူးဆိုရင္ Generic family name ထည့္ေရးထားမွ အျခား font တခုခုႏွင့္ Browser က Display လုပ္ႏိုင္မွာပါ။ Generic family name ကိုတစ္ခုေတာ့ အနည္းဆံုး ထည့္သင့္ပါတယ္။
    Font family တြင္ space ျခားေနလွ်င္ (single or double) quotation marks ("…") or ('…') ထည့္ေပးရတယ္။ Generic family name တြင္ေတာ့ထည့္ေပရန္ လံုးဝ (လံုးဝ) မလိုပါဘူး။
Font-Size
Values: font-size: [xx-small | x-small | small | large | x-large | xx-larger] | [larger | smaller] | <length> | <percentage> | inherit
    Inherited: Yes
    Works with: All elements
ဥပမာ…      
                      P {Font-size: small ;}
                      P {Font-size: larger ;}
                      P {Font-size: 14px ;}
                      P {Font-size: 125% ;}
xx-small | x-small | small | large | x-large | xx-larger ေတြကေတာ့ Absolute size လုိ႔ေခၚျပီး ၊ larger | smaller ကေတာ့ Relative size ေတြပါ။ <length> ကေတာ့ number+ em|ex|pt|px|mm|cm|in ဆိုျပီးေရးရပါတယ္။ <percentage> ကေတာ့႐ွင္းပါတယ္။ Font-size: 125% ေပါ့။
Font-Style   
    Values: font-style: normal | italic | oblique | inherit
    Inherited: Yes
    Works with: All elements
ဥပမာ…
               H1 {font-style: italic ;}
Default ကေတာ့ Normal ပါ။ Normal မဟုတ္ရင္ေတာ့ italic ႏွင့္ oblique ေပါ့။
Font-Weight
Values: font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
    Inherited: Yes
    Works with: All elements
ဥပမာ…
    .strong {font-weight: 700 ;}
normal | bold | bolder | lighter ဆိုျပီးေရးႏိုင္သလို 300,400,500 စေသာဂဏန္း တန္ဖိုး မ်ားႏွင့္ လည္းေရးႏိုင္ပါတယ္။ 400 ကေတာ့ normal ႏွင့္ ညီျပီးေတာ့ 700 ဆိုရင္ေတာ့ bold ပါ။ က်န္တာေတာ့ မေျပာေတာ့ပါဘူးသိမွာပါ။ ေအာက္ကဥပမာကိုၾကည့္ လုိက္ရင္ေတာ့႐ွင္းသြားမွာပါ။
ေအာက္ကအနီေရာင္စာမ်ားကို font.html လို႔နာမည္ေပးျပီ save လုပ္စမ္းၾကည့္လိုက္ပါ။ font properties ႏွင့္ပတ္သက္ တဲ့ style ေတြကို ျပင္ျပီးစမ္းၾကည့္ေစခ်င္ပါတယ္။ ဒါမွပိုျပီးနားလည္ သြားမွာပါ။
<html>
<head>
<style>span{color:000066;}</style>
</head>
<body>
<h1 style="color:maroon;">Font size and color</h1>
<span style="font-size: xx-small;color:olive">xx-small olive color</span><br/>
<span style="font-size:x-small;color:fuchsia">x-small fuchsia color</span><br/>
<span style="font-size:small;color:lime"> small lime color</span><br/>
<span style="font-size:medium;color:navy">medium navy color</span><br/>
<span style="fot-size:large;color:purple">large purple color</span><br/>
<span style="font-size:x-large;color:teal">x-large teal color</span><br/>
<span style="font-size:xx-large;color:aqua;font-style:italic;">xx-large aqua color</span><br/>
<h1 style="color:maroon;">Font Weight</h1>
<span style="font-weight:normal">normal</span>
<span style="font-weight:bold">bold</span>
<span style="font-weight:bolder">bolder</span>
<span style="font-weight:lighter">lighter</span><BR>
<span style="font-weight:100">100</span>
<span style="font-weight:200">200</span>
<span style="font-weight:300">300</span>
<span style="font-weight:400">400</span>
<span style="font-weight:500">500</span><br>
<span style="font-weight:600">600</span>
<span style="font-weight:700">700</span>
<span style="font-weight:800">800</span>
<span style="font-weight:900">900</span>
</body>
</html>

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 ကို   ဒီမွာ  ေဒါင္းျပီးေလ့လာလိုက္ပါ။ ႐ွင္းသြားပါလိမ့္ မယ္။