css for stater

CSS for starterIntroCSS ဆတာကေတာ Web Essential ပငးမာ မသမျဖစ လအပပါတယ။ Web ပငးမာ HTML တစခတညးတတေနရန႕ မရပါဘး။ HTML က သင site တစခလးက လသြားေအာင ေဆာကရြကေပးႏငမာမဟတဘး။ CSS က HTML တတျပးတသတငး အလြယတက ေလလာႏငပါတယ။ ကၽြနေတာတ႕ေတြ Internet website ေတြမာ ျမငေနရတ site ေတြ အားလးဟာ CSS က အသးျပထားပါတယ။ HTML န႕ တညေဆာကျပး လပေအာင တနဆာဆငဖ႕ CSS က ေလလာထားဖ႕လအပပါတယ။

ကၽြနေတာအေနန႕လညး ဘယလေရးရလဆတ အေျခခန႕ ဘာေတြ ရတယ။ ဘာေတြ သးလ႕ရလဆေတာ ကပ ရငးျပေပးႏငပါတယ။ CSS ဟာကယျပန႕ျပးေတာ ကယ အေတြးအေခၚ ကယ design ေပၚမာ မတညျပး site ရ႕ design ကလညး ေျပာငးလသြားတာပါ။ အခ စာအပက w3school က အေျခချပး ေရးသားထားပါတယ။ စတငေလလာမယသေတြ အတြက အသးဝငမယ စာအပ တစအပ ျဖစမယလ႕လညး ေမာလငပါတယဗာ။

CSS for starter , written by saturngod ( www.saturngod.net )

1

Chapter 1: CSS Basic CSS Syntax (CSS = Cascading Style Sheet )CSS က ေရးသားပက HTML န႕ မတေတာ ပ ေရးသားပေတြ ကြာျခားသြားပါတယ။ css code ေလးက ၾကညရေအာင။

Selector ကေတာ ကယ ဘာဟာက CSS အသးျပမလဆတာက ေျပာတာပါ။ အခ h1 ဆတ tag က select လပထားလကတာပါ။ Declaration က တစခထက ပထညႏငပါတယ။ တစခ ဆးတငး ; ေလး ထညေပးရပါတယ။ Property န႕Value ရပါတယ။ ကၽြနေတာတ႕ HTML မာတနးက attribute န႕ value ထညသလေပါ။ property န႕ value က : ေလး ချပး ထညပါတယ။

color:blue; font-size:12px;

ဆတ သေဘာက စာလးအေျပာေရာင စာလးအရြယ 12 px လ႕ဆလကတာပါ။

ဥပမာ။ ေအာကက code ေလးက notepad မာ ေရးျပး စမးၾကညလကပါ။

<html>

<head>

<title>CSS</title>

<style type="text/css">

p { color: red;}

</style>

</head>

<p>Hi! I am red.</p>


2

</html>

အဒါေလးက save သမးျပး firefox န႕ ဖြငလကရင ေအာကကပလ ျမငရပါလမမယ။

CSS ေရးမယဆရင <style> န႕ စျပး </style> န႕ ဆးတ ၾကားထမာ ေရးရပါတယ။ အမားအားျဖငေတာ <head> န႕ </head> ၾကားထမာ ေရးရပါတယ။

Comment

HTML မာတနးကလညး comment လပပေျပာခပါတယ။ HTML comment ဆရင  န႕ေရးခတာ မတမအးမယထငပါတယ။ CSS မာလညး comment ေရးလ႕ရပါတယ။ သကေတာ ဒလေရးပါတယ။

/* This is comment */

/* န႕ စျပး */ ဆး ပါတယ။ ၾကားထမာ comment ေရးရတာပါ။

Selectorအေပၚမာ ကၽြနေတာ ေျပာခဘးပါတယ။ Selector အေၾကာငးပါ။ Select မာ HTML element ေတြ ျဖစတ p , h3 စတာေတြ သးလ႕ရသလ id န႕class ကလညး သးလ႕ရပါတယ။ HTML attribute မာ id န႕class ဆတာ ရပါတယ။

ID Selector

ကၽြနေတာတ႕ html attribute id ဆတာက ထညျပး အဒါက css မာ တြသးႏငပါတယ။ ဥပမာက ေအာကက code က ေလလာၾကညလကပါ။

<html>

<head>

<title>CSS</title>


3


#red_id { color: red;}

</style>

</head>

<p id="red_id">Hi! I am red id.</p>

<p >Hi! I am normal.</p>

</html>

အဒါေလးက browser န႕ဖြင လကရင ေအာကကလ ျမငရပါမယ။

id မာ red_id ဆျပးေရးထားပါတယ။ အဒါက ျပနေခၚဖ႕ CSS မာ #red_id န႕ျပနေခၚထားတာက ေတြ႕မာပါ။ အရငတနးကေတာ p ဆတ html tag က ေခၚခေပမယ အခ တစခထက သးသန႕ေခၚခငေတာ id ေပးျပး ေခၚလကတာပါ။

Class Selector

id လပ HTML attribute တစချဖစတ class ဆတာက သးႏငပါတယ။ id ကေတာ အမားအားျဖင တစခတညးက နာမညသေဘာမး identify သေဘာမးန႕ေပးတတၾကျပး class ကေတာ အမားက ကယစားျပတအေနန႕ေပးပါတယ။ class ကလညး id လမးပ အသးျပႏငပါတယ။ ေအာကက code ေလးက ၾကညလကပါ။

<html>

<head>

<title>CSS</title>


.red_class { color: red;}

</style>

</head>

<p class="red_class">Hi! I am red class.</p>

<p> Hi! I am normal.</p>


4

<p class="red_class">Hi! I am red class.</p>

</html>

အဒါဆရင Hi! I am red class ဆတ စာလးေတြက နေနတာက ေတြ႕မာပါ။ ဒါေလးကေတာ ကယတင စမးၾကညႏငပါတယ။ ပေလးေတာ မျပေတာဘး။ အတတပမ႕ပါ။ class က dot(.) ေရ႕မာ ထားျပး ေရးပါတယ။ class က ေနာကတစမးေရးလ႕ရပါတယ။ ဥပမာ p tag မာ သးထားတ class ဆရင

p.red_class { color: red;}

ဆျပး ေရးလ႕ရပါတယ။ h3 မာ သးထားရင

h3.red_class { color: red;}

ဆျပးေရးလကရပါပ။ ေအာကက code ေလးက ၾကညလကပါ။

<html>

<head>

<title>CSS</title>


h3.red_class { color: red;}

</style>

</head>

<h3 class="red_class">Hi I am H3</h3>

<p class="red_class">Hi! I am red id.</p>

<p> Hi! I am normal.</p>

<p class="red_class">Hi! I am red id.</p>

</html>

အဒါက ဒလေလး ထြကလာမာပါ။


5

p မာ red_class လ႕ထညထားေပမယ css မာ h3.red_class လ႕ေရးထားပါတယ။ red_class လ႕ ေၾကျငာထားတ h3 ကပ select လပမယလ႕ ဆလတာပါ။

How to add CSS ?အေပၚမာတနးက ကၽြနေတာ ေျပာခပါတယ။ CSS ဘယလ ထညသြငးရမယဆတာကေပါ။ <head> န႕ </head> ၾကားမာ style tag န႕ ထညတယလ႕။ အဒါအျပင အျခား ၂ နညးရပါေသးတယ။ စစေပါငး ၃ မးထညသြငးလ႕ရပါတယ။

1. Internal Style Sheet2. Inline Stye Sheet3. External Style Sheet

Internal Style Sheet

ကၽြနေတာတ႕ internal Style Sheet အေၾကာငးေျပာချပးပါျပ။ အေပၚမာ သးခတာေတြ အားလးက Internal style sheet သေဘာတရားေတြပါ။

Inline Style Sheet

ကၽြနေတာတ႕ေတြအေနန႕ တစခါတစေလမာ style sheet တစခတညးက html tag ထတြသးခငတအခါမာ သးလ႕ရေအာငပါ။သ႕က ဒလေရးပါတယ။

<p style="color:red"> Hi! I am red.</p>


6

အဒါဆရင Hi! I am red က အနေရာငေလး ျဖစသြားတာက ေတြ႕မာပါ။ ကၽြနေတာတ႕ေတြအေနန႕ အခ႕အခါေတြမာ class တ႕ id တ႕ မေၾကျငာပ ေရးခငတအခါေတြ မာ အသးျပႏငပါတယ။

External Style Sheet

Internal Style Sheet က page တစခတညးအတြက အဆငေျပေပမယ page ေတြက တစခထကမက သးမယ။ ဒ style ပ သးမယဆရင Internal Style Sheet က အဆငမေျပေတာပါဘး။ HTML အသစ တစခေဆာကတငး copy paste လကလပရမယ။ တစေနရာမာ ေျပာငးလကတငး HTML files အားလးမာ လကေျပာငးရမယ။ အလ အခါ အဆငမေျပေတာဘး။ ဒါေၾကာင HTML files ေတြ တစခထက မက သးမယဆရင External Style Sheet ကသးႏငပါတယ။ External Style Sheet က ေခၚမယဆရင ေအာကကလ ေခၚသးပါတယ။

<head>

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

</head>

external.css ကေတာ သးသန႕ file ပါ။ file path ေတြကေတာ HTML တနးက ေျပာချပးပါျပ။ image path ေတြ ေခၚတေနရာမာတနးက ရငးျပခပါတယ။ external.css ကလညး အလ ေခၚတာပါပ။

external.css ထမာေတာ ဒလေရးထားပါတယ။

.red_class { color: red;}

တစျခား ဘာမ မပါပ css ေတြ ခေရးထားရပါပ။ တျခား html tag ေတြ ထညစရာလညး မလပါဘး။

အခ အေျခခအခကေတြနားလညျပဆရငေတာ CSS styling အေၾကာငးေတြ စျပးေလလာလ႕ရပါျပ။ property က color တစခတညး မဟတပန႕ အျခား property အေၾကာငးေတြက ေနာက chapter မာ စပါမယ။


7

Chapter 2: CSS StylingCSS မာ property က အမားၾကးရပါတယ။ အရင chapter တနးကေတာ color property န႕ပ ဥပမာ ျပသြားပါတယ။

CSS BackgroundBackground က မေျပာခင background န႕ လပထားတ CSS ေလးက ျပပါတယ။

အဒါက CSS background image န႕ CSS backround color က သးထားတာပါ။ သာမာန HTML န႕ အလမး ဖနတးလ႕ မရပါဘး။

Background Color

Background color က ေနာကခ အေရာငပါ။ ေအာကက code ေလးက စမးၾကညလကရေအာင။

<html>

<head>

<title>Back ground</title>


body {background-color:#b0c4de;}

</style>

</head>

<body>


8

</body>

</html>

အဒါေလးက run လကရင ခရမးေရာင background က ျမငရမာပါ။

Color ေတြကေတာ ေအာကကပစေတြန႕ သးလ႕ရပါတယ။1. name :: color နာမညန႕ ေခၚယသးစြျခငး။ ဥပမာ ။။ red, blue2. RGB :: RGB value အေနန႕ ေခၚယသးစြျခငး။ ဥပမာ ။။ rgb(255,0,0)3. Hex :: hex value အေနန႕ အသးျပျခငး။ ဥပမာ ။။ #FF00004. RGBA :: RGB န႕ အတတပါပ။ သ႕ေပမယ ေနာကမာ Alpha channel value ပါလာပါတယ။ ဥပမာ ။။ rgba(255,0,0,0.5)

Color ကေတာ အေသးစတမေျပာေတာပါဘး။ ကၽြနေတာ HTML မာတနးက ေသခာေျပာချပးပါျပ။ ေအာကက example ေလးက စမးၾကညရေအာင။

<html>

<head>

<title>Back ground</title>


h1 {background-color:#6495ed;}

p {background-color:#e0ffff;}

div {background-color:#b0c4de;}

</style>

</head>

<body>

<h1>Header</h1>

<div>

This is DIV Layer using background-color.

<br/>

<p>This is paragraph using background-color.</p>

</div>

</body>

</html>

အဒါေလးက ဒလေလး ျမငရမာပါ။


9

ဒေလာကဆရငေတာ background-color က သေဘာေပါကေလာကပါျပ။

Background Image

Background Image ကေတာ ပေတြ မာ background ထညတာေပါ။

ဒပေလးကေတာ paper.gif ပါ။

<html>

<head>


body {background-image:url('paper.gif');}

</style>

</head>

<body>

<h1>Hello World!</h1>

</body>

</html>

အဒ code ေလးက browser မာ ဖြငလကရင ဒလျမငရပါလမမယ။


10

background တစခလး paper.gif ေတြ ျပညသြားတာက ျမငရမာပါ။ ပတစပတညးက tile လပသြားတာပါ။ တနညးေျပာရင pattern လမး တစကြကျပး တစကြက အျပညျဖညသြားတာေပါ။ ဒါေၾကာင wallpaper ေတြက background ထညလကရင Title ျဖစသြားျပး ၾကညမေကာငးျဖစတတတယ။

Background Image - Repeat Horizontally or Vertically

ကၽြနေတာတ႕ေတြ background image က repeat horinonal ပလပခငတယ။ ဒါမမဟတ vertical ပလပခငတယဆရငလညး လပလ႕ရပါတယ။

အလ gradient လပထားတ ပက background image န႕သးလကရင ေအာကကလ ျဖစသြားပါလမမယ။


11

သက horizontal fill သြးာတာ ျပနာ မဟတေပမယ vertical ျဖညသြားေတာ ၾကညရ ဆးသြားပါတယ။ vertical မျဖညဘး။ horizontal ပ လပမယဆရင ဒလေရးရပါတယ။

<html>

<head>


body

{

background-image:url('gradient2.png');

background-repeat:repeat-x;

}

</style>

</head>

<body>


</body>


12

</html>

အဒါေလးက run လကရင ဒလ ရပါလမမယ။

အဒါဆရင ၾကညလ႕ေကာငးသြားပါျပ။ repeat-x ဆတအတြကေၾကာင horizontal ပrepeat လပပါမယ။ တကယလ႕ repeat-y လ႕သာ ေရးခမယဆရငေတာ vertical ပ repeat လပမာပါ။ repeat-y ကေတာ ဥပမာ န႕ မျပေတာပါဘး။ ကယတငသာ စမးၾကညလကပါ။

Background Image : Set Position

အရငဆး ဒ code ေလးက run ၾကညလကပါ။

<html>


13

<head>


body

{

background-image:url('img_tree.png');

background-repeat:no-repeat;

}

</style>

</head>

<body>


<p>W3Schools background image example.</p>

<p>The background image is only showing once, but it is disturbing

the reader!</p>

</body>

</html>

သျပးသားေနမာပါ။ image_tree.png ကေတာ မမ စကထမာ ရတ ပထက အဆငေျပတာေလးန႕ သးလကပါ။အဒါက ေအာကပါအတငး ျမငရမာပါ။


14

ပက background မာရေနပါတယ။ ဘယဘက ေထာငမာ ကပေနတာပါ။

ကၽြနေတာတ႕ ညာဘကေထာငက ပကပမယ။ ေနာကျပး စာကလညး ပက မဖးခငဘး။ ပရ႕ width က 200px ရတယ။ ဒါဆရင ဒလေရးလကပါတယ။


body

{

background-image:url('img_tree.png');


background-position:top right;

margin-right:200px;

}

</style>

</head>


15

အမာ margin-right:200px ဆတာက ညာဘက margin 200px ထ ဆြထားလကတာပါ။ margin ပငး ေနာကပငးမာ ေျပာျပပါမယ။ background-position:top right; က ၾကညပါ။ top right ျဖစေနပါတယ။ top ကေတာ အေပၚဆးမာထားမယေပါ။ ကၽြနေတာတ႕ ညာဘက ကပခငေတာ right လ႕ေရးလကပါတယ။

Background - Shorthand propertyကၽြနေတာတ႕ တစချခငးဆ လကမေရးျခငဘး။ တစေၾကာငးတညးန႕ မျပးဘးလား။ ကၽြနေတာတ႕ေတြ တစေၾကာငးတညးန႕ background css က ေရးလ႕ရပါတယ။ ဥပမာ။။

body {background:#ffffff url('img_tree.png') no-repeat top right;}

လ႕ေရးထားတာ အေပၚက code န႕ အတတပါပ။ background ဆတ property မာ ေအာကက property ေတြေပါငးျပး ေရးလ႕ရပါတယ။

• background-color• background-image• background-repeat• background-attachment


16

• background-position

Background - background attchmentကၽြနေတာ background-attchment အေၾကာငး မေျပာခရေသးပါဘး။ background attachment မလပခင ေအာကက code ေလးက စမးၾကညပါအး။

<html>

<head>


body

{

background-image:url('smiley.gif');


}

</style>

</head>

<body>

<p>The background-image is fixed. Try to scroll down the page.</p>















</body>

</html>


17

အမာ ကၽြနေတာတ႕စာက ဆြခလကရင background image ေလး ေပာကသြားပါလမမယ။ background image မေပာကခငဘး။ fixed ျဖစေနေစခငတယဆရင ေအာကကလ ေျပာငးေရးလကပါ။


body

{

background-image:url('smiley.gif');


background-attachment:fixed;

}

</style>

ဒ code ေလးကေတာ ကယတင စမးၾကညလကပါ။

All CSS background properties

Property Description Values

background background အားလးအတြက သးႏငသည။

background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positioninherit

background-attachment

background image fix လပမလား scrolls လပမလား အတြက

scrollfixedinherit

background-color background color ထညသြငးရန

color-rgbcolor-hexcolor-nametransparentinherit

background-image image background တြင ထညသြငးရန

url(URL)noneinherit


18


background-position background image position က ခနညရန

left topleft centerleft bottomright topright centerright bottomcenter topcenter centercenter bottomx% y%xpos yposinherit

background-repeat image မားက repeat ဘယလ လပမညအတြက။

repeatrepeat-xrepeat-yno-repeatinherit


19

CSS Text FormattingText formatting ဆတာကေတာ စာလးေတြက အေရာငထညတာေတြ ေနာကျပး font ေတြေျပာငးတာ alignment လပတာ စတာေတြက css က ေဆာငရြကလ႕ရပါတယ။

Text Color

text color ကေတာ CSS မာ color လ႕သးပါတယ။ ေအာကမာ ဥပမာ ၾကညပါ။

body { color:#FF0000; }

လ႕ဆရင body စာလးေတြက အနေရာငန႕ ျပေပးမာပါ။

Text alignment

text alignment ကေတာ left, right , center,justify ဆျပး သတမတေပးတာပါ။ ကၽြနေတာတ႕ html မာက align န႕ လပခတာ မတမအးမယထငပါတယ။ CSS မာကေတာ

p { text-align: center; }

h1 { text-align: right; }

h2 { text-align : justify }

left ကေတာ default ပါ။ ဒါေလးေတြက လြယေသးေတာ ကယဘာသာ ကယစမးၾကညလကပါ။

Text Transformation

ကၽြနေတာတ႕ေတြ HTML မာ upper case ေတြ lower case ေတြေျပာငးခငရင စာေတြ ျပနျပငရကရပါတယ။ CSS သးရင အလ ျပနျပငရကတ ျပနာ ရငးသြားပါတယ။ ေအာကက example ေလး က ၾကညၾကညပါ။

<html>

<head>

<title>Sample</title>



20

p.uppercase {text-transform:uppercase;}

p.lowercase {text-transform:lowercase;}

p.capitalize {text-transform:capitalize;}

</style>

<body>

<p class="uppercase">uppder case</p>

<p class="lowercase">LOWER CASE</p>

<p class="capitalize">capitalize</p>

</body>

</head>

</html>

အဒါေလး က run လကရင ေအာကကလ ျမငရပါလမမယ။

Text Indentation

စာလးေတြကေရႊ႕ခငတယဆရင indentation က သးလ႕ရပါတယ။ ေအာကက ဥပမာေလး ကၾကညၾကညပါ။

<html>

<head>

<title>Sample</title>


p {text-indent:50px;}

</style>

<body>

<p>

Testing Testing Testing Testing Testing Testing Testing Testing



21


Testing Testing Testing Testing

</p>

</body>

</head>

</html>

အဒါေလး က run လကရင ေအာကကလ ျမငရပါလမမယ။

Space between characters

Characters တစခန႕ တစခၾကား space ေတြက ျခားခငရငေတာ letter-spacing ဆတာက သးလ႕ရပါတယ။

<html>

<head>


h1 {letter-spacing:2px;}

h2 {letter-spacing:-3px;}

</style>

</head>

<body>

<h1>This is heading 1</h1>


</body>

</html>

အဒါက ေအာကကလ ေပၚပါလမမယ။


22

Space Between Lines

Characters တစခန႕ တစခၾကား space အကြာအေဝး ခနညလ႕ရသလ line တစခန႕ တစခၾကားလညး line-height န႕ ခနညလ႕ရပါတယ။ ေအာကက example ေလးက ေလလာၾကညပါ။

<html>

<head>


p.small {line-height:90%;}

p.big {line-height:200%;}

</style>

</head>

<body>

<p>

This is a paragraph with a standard line-height.

The default line height in most browsers is about 110% to 120%.

This is a paragraph with a standard line-height.

</p>

<p class="small">

This is a paragraph with a smaller line-height.



</p>

<p class="big">

This is a paragraph with a bigger line-height.



23


</p>

</body>

</html>

အဒါကေတာ ေအာကကလ ေတြ႕ရပါလမမယ။

Right To Left Text

ဒါကေတာ ကၽြနေတာတ႕ေတြ သးခတယ။ left to right ေရးရတ ဘာသာစကားေတြအတြက သးတာပါ။ ဥပမာ ေတာ မျပေတာဘး။ ဘယလေပၚလ သခငရင စမးၾကညႏငပါတယ။

p{direction:rtl;}

Word Spacing

Character spacing , line spacing ေတြျပးေတာ word spacing ေပါ။<html>

<head>


p

{

word-spacing:30px;

}

</style>

</head>


24

<body>

<p>

This is some text. This is some text.

</p>

</body>

</html>

word-spacing သးလကရင ေအာကကလ ျမငရပါလမမယ။

Nowrap

စာလးေတြက wrap မျဖစခငဘး။ စာလးက တစတနးျပညသြားေပမယ ေအာကတစလငး မဆငးသြား ေစခငဘးဆရင white-space က nowrap ေပးရပါတယ။

p

{

white-space:nowrap;

}

ကယဘာသာ ကယစမးၾကညလကေပါ။

Vertical Align

image ေတြမာ ကၽြနေတာတ႕ေတြ HTML တနးက align ေတြလကထညရတယ။ text align ညတာေပါ။ အလမးပ CSS မာလညး သးလ႕ရပါတယ။

<html>

<head>


img.top {vertical-align:text-top;}

img.bottom {vertical-align:text-bottom;}


25

</style>

</head>

<body>

<p>An <img src="w3schools_logo.gif" alt="W3Schools" width="270"

height="50" /> image with a default alignment.</p>

<p>An <img class="top" src="w3schools_logo.gif" alt="W3Schools"

width="270" height="50" /> image with a text-top alignment.</p>

<p>An <img class="bottom" src="w3schools_logo.gif" alt="W3Schools"

width="270" height="50" /> image with a text-bottom alignment.</p>

</body>

</html>

ဒလေလးေပၚလမမယ။

Text-shadow

စာလးေတြေနာကမာ shadow ထညခငတအခါမာေတာ text-shadow က သးႏငပါတယ။

<html>

<head>

<style>

p.test {

text-shadow: #6374AB 20px 25px 2px;

}


26

</style>

</head>

<body>

<p class="test">This is txt shadow</p>

</body>

</html>

text-shadow: #အေရာင , X , Y, bluer ဆျပး ထညေပးရတာပါ။ အေပၚက code ေလးက run လကရင ေအာကကလ ေပၚပါလမမယ။

CSS Text Properties


color text color color

direction text direction ltrrtl

line-height line တစခန႕ တစခၾကား အျမင normalnumberlength%

letter-spacing characters တစခန႕ တစခၾကား အကြာအေဝး normallength

text-align text align ညျခငး leftrightcenterjustify


27


text-decoration add decoration to text noneunderlineoverlineline-throughblink

text-indent indent ေရႊ႕ျခငး length%

text-shadow အရပထညျခငး nonecolorlength

text-transform uppercase , lowercase ေျပာငးျခငး nonecapitalizeuppercaselowercase

vertical-align vertical align baselinesubsupertoptext-topmiddlebottomtext-btoomlength%

white-space wrap text လပမလပ normalprenowrap

word-spacing word တစခန႕တစခၾကား spacing normallength


28

FontsHTML မာတနးက ကၽြနေတာတ႕ေတြ font tag န႕ စာလးေတြက ေျပာငးခတာ မတမအးမယထငပါတယ။ CSS မာလညး font ေတြက ေျပာငးလလ႕ရပါတယ။ font tag သးမယဆရင ေနရာ အမားၾကးမာ font tag ေတြ လကထညေနရလမမယ။ ဒေတာ CSS class ေလး သးျပး လြယလြယကက ဖနတးႏငပါတယ။

Font Family

ေအာကက code ေလးက ေရးၾကညျပး စမးၾကညလကပါ။

<html>

<head>

<title>Font family</title>


.time

{

font-family: "Times New Roman", Times, serif;

}

.arial

{

font-family: Arial,Verdana;

}

</style>

</head>

<body>

<p class="time">This is time class</p>

<p class="arial">This is arial class</p>

</body>

</html>

အဒါက browser မာ ဖြငလကရင ေအာကကလ ျမငရမယ။ စာလး font မတတာက ေတြ႕ရမာပါ။ ကယ အသးျပခငတ font က font-family ထမာ ေရးရပ။ font list က , န႕ေရးရတယ။ ေရ႕ဆး font မရရင ဒတယ font က အသးျပပါတယ။


29

Font Style

စာလးေတြက italic လပခငတ အခါမာေတာ font style က အသးျပရပါတယ။<html>

<head>


p.normal {font-style:normal;}

p.italic {font-style:italic;}

p.oblique {font-style:oblique;}

</style>

</head>

<body>

<p class="normal">This is a paragraph, normal.</p>

<p class="italic">This is a paragraph, italic.</p>

<p class="oblique">This is a paragraph, oblique.</p>

</body>

</html>

အဒ code ေလးက browser မာ ၾကညရင ေအာကကလ ျမငရမာပါ။

Font Size


30

html မာ font size ေတြက font tag န႕ ျပငရပါတယ။ CSS မာေတာ လြယလြယကကေလး ျပငလ႕ရတယ။ ေအာကက code ေလးက ၾကညလကပါ။

<html>

<head>


h1 {font-size:40px;}

h2 {font-size:30px;}

p {font-size:14px;}

</style>

</head>

<body>



<p>This is a paragraph.</p>

<p>Specifying the font-size in px allows Firefox, Chrome, and

Safari to resize the text, but not Internet Explorer.</p>

</body>

</html>

အဒါေလးက run လကရင ေအာကကလ ျမငရပါလမမယ။

Font size with em


31

Internet Explorer မာ တစခါတစေလ font size ေပၚတ ပျခငးမတတတဘး။ W3C ကေတာ px အစား em က သးဖ႕ recommend လပထားပါတယ။

h1 {font-size:2.5em;} /* 40px/16=2.5em */

h2 {font-size:1.875em;} /* 30px/16=1.875em */

p {font-size:0.875em;} /* 14px/16=0.875em */

16px em က 1 em န႕ ညပါတယ။

Font Bold

font ေတြက bold လပခငတ အခါမာ b tag ထညေပးရပါတယ။ တစခါတညး CSS မာလညး bold လပမယလ႕ ေျပာလ႕ရပါတယ။

ေအာကက code ေလးက တခကၾကညလကပါ။

<html>

<head>


p.normal {font-weight:normal;}

p.light {font-weight:lighter;}

p.thick {font-weight:bold;}

p.thicker {font-weight:900;}

</style>

</head>

<body>

<p class="normal">This is a paragraph.</p>

<p class="light">This is a paragraph.</p>

<p class="thick">This is a paragraph.</p>

<p class="thicker">This is a paragraph.</p>

</body>

</html>

အဒ code ေလးက run ၾကညလကရင ဒလ ေလးျမငရပါလမမယ။


32

သပျပး ထးထးျခားျခား ေျပာငးလသြားတာက ေတြ႕ရမာ မဟတပါဘး။ အဓက bold ျဖစမျဖစ ပ ကြာျခားမႈ ရပါတယ။

Font Variant

font variant ကေတာ font ပစေျပာငးတာေပါ။ အကနလးက စာလးအၾကးေတြပ။ ဒါေပမယ ေရ႕ဆးအလးက font အၾကးလပခငတအခါေတြမာ သးလ႕ရပါတယ။ ရငးသြားေအာင ေအာကက example ေလးက ၾကညလကပါ။

<html>

<head>


p.normal {font-variant:normal;}

p.small {font-variant:small-caps;}

</style>

</head>

<body>

<p class="normal">My name is Hege Refsnes.</p>

<p class="small">My name is Hege Refsnes.</p>

</body>

</html>


33

Font Properties


font font properties အားလး က အသးျပရန

font-stylefont-variantfont-weightfont-sizefont-family

font-family font နာမည font-name

font-size font အရြယအစား xx-smallx-smallsmallmediumlargex-largexx-largesmallerlarger%lengthinherit

font-style font style normalitalicobliqueinherit

font-variant small caps text ပ normalsmall-cpasinherit


34


font-weight font bold ပစ normalboldbolderlighter100200..900


35

Style LinkLink ေတြကလညး css က အသးျပလ႕ရပါတယ။ ဘယလမးေတြလဆေတာ စာလး အေရာင ၊ font ၊ background စတာေတြက ထညသြငးလ႕ရတာေပါ။

link အတြက selector ၄ ခ ကသဖ႕ လပါတယ။

1. a:link - ပမန အေျခအေန2. a:visited - visited လပျပးသား link3. a:hover - mouse တငလကတ အခန4. a:active - mouse click လကတ အခန

ေအာကက code ေလးက စမးၾကညလကပါ။

<html>

<head>


a:link {color:#FF0000;} /* unvisited link */

a:visited {color:#00FF00;} /* visited link */

a:hover {color:#FF00FF;} /* mouse over link */

a:active {color:#0000FF;} /* selected link */

</style>

</head>

<head>

<a href="http://www.saturngod.net">Saturngod’s Blog</a>

</head>

</html>

မရငး အနကေန mouse တငလကတ အခါမာ စာအေရာငေျပာငးသြားတာေတြ႕ပါမယ။ click လပျပး mouse က ဖထားခနမာေတာ အျပာေရာင ေျပာငးသြားပါမယ။ Link က တစေခါကႏပျပးသြားရင သ႕မဟတ သြားထားဖးရငေတာ အစမးေရာင ျဖစေနပါလမမယ။

Common Link Style


36

link န႕ အဓက တြသးလ႕ရတ style ေလးေတြ ျပသြားပါမယ။ link ရ႕ selector ၄ ခက နားလညသြားရင css code ေတြက စတၾကကထညသြငးေရးသားႏငပါျပ။ စာသားအေရာင ေနာကခ အေရာင အျပင အေရာငမးမး လြယလငတက ေရးသားႏငပါတယ။

Text Decoration

link န႕ အဓက အသးမားတာကေတာ text-decoration ပါ။ သက ဘာလပေပးတာလဆေတာ link မာ underline ေဖာကခငတ အခါမာ အသးျပႏငပါတယ။

a:link {text-decoration:none;}

a:hover{text-decoration: underline}

link က ပမန underline ပါေပမယ text-decoration:none ဆရင underline ေပာကသြားပါတယ။ mouse တငလကတ အခါမာ ျပနေပၚခငတအတြကေၾကာင a:hover မာ text-decoration:underline ဆျပး သးလကပါတယ။

background color

ကၽြနေတာ ေထြေထြ ထးထး မေျပာေတာပါဘး။ background-color န႕ ပတသကျပးေတာ ကၽြနေတာ အေပၚမာ ေျပာထားချပးပါျပ။ link မာ css က code ေတြက လြယလငတက အသးျပႏငပါတယ။ အတတပါပ။ link မာ အဓက selector ၄ ခက အသးျပတယဆတာက မတမဖ႕ပလပါတယ။

<html>

<head>


a:link {background-color:#B2FF99;}

a:visited {background-color:#FFFF85;}

a:hover {background-color:#FF704D;}

a:active {background-color:#FF704D;}

</style>

</head>

<head>

<a href="http://www.google.com">Google</a>

</head>

</html>


37

http://www.google.com

http://www.google.com

ListsList ဆတာကေတာ ul န႕ ol ပ ေပါ။ ul က အခေနာကပငး CSS ေတြမာ table အစား အသးျပလာတာ ေတြ႕ရပါတယ။ table အစား အသးျပတယဆတာက ရးရး html မာ မျဖစႏငသလပ။ ဒါေပမယ CSS န႕ ေပါငးျပး သးလကတ အခါမာေတာ Table လမး ဖနတးလာႏငပါတယ။

Different List Item Markers

<html>

<head>


ul.a {list-style-type:circle;}

ul.b {list-style-type:square;}

ol.c {list-style-type:upper-roman;}

ol.d {list-style-type:lower-alpha;}

</style>

</head>

<body>

<p>Example of unordered lists:</p>

<ul class="a">

<li>Coffee</li>

<li>Tea</li>

<li>Coca Cola</li>

</ul>

<ul class="b">

<li>Coffee</li>

<li>Tea</li>

<li>Coca Cola</li>

</ul>

<p>Example of ordered lists:</p>

<ol class="c">


38

<li>Coffee</li>

<li>Tea</li>

<li>Coca Cola</li>

</ol>

<ol class="d">

<li>Coffee</li>

<li>Tea</li>

<li>Coca Cola</li>

</ol>

</body>

</html>

အဒါက run လကရင ေအာကကလ ျမငရပါမယ။

ပမန HTML မာလညး လြယလငတက ဖနတးႏငသလ css န႕လညး ဖနတးႏငပါတယ။ CSS ရ႕ အားသာခကေတြကေတာ ကၽြနေတာေျပာျပးပါျပ။ ဒါေၾကာင css က အသးျပျပး ေျပာငးလလ႕ရတာဟာ


39

list ေတြ အမားၾကးအတြက အဆငေျပလပါတယ။ အခမာေတာ list မာ ဘာေတြပါလဆတာေလာကပ ေရးပါအးမယ။ ေနာကပငးမာေတာ list န႕ menu တညေဆာကပေတြ ရငးျပသြားပါမယ။

value for Unordered list property

Value Description

none No marker

disc Default. စကဝငးအမညး

circle စကဝငး

square ေလးေထာငပ

Value for Ordered Lists

Value Description

armenian Traditional Amenian numbering

decimal number

decimal-leading-zero number padded by initial zeros (01,02,03,etc)

geogrian tradional Georgian numbering (an,ban,gan,etc)

lower-alpha lower-alpha (a,b,c,d,etc)

lower-greek lower-greek(alpha,beta,gamma,etc)

lower-latin lower-latin(a,b,c,d,etc)

lower-roman lower-roman(i,ii,iii,etc)

upper-alpha upper-alpha (A,B,C,etc)

upper-latin upper-latin(A,B,C,D,etc);

upper-roman upper-roman( I, II,III,etc)


40

Image List

တစခါတစေလ ကၽြနေတာတ႕ေတြ list ေတြက ကယပင image ေလးေတြန႕ ထညခငတယ။ A,B,C,D , I, II , III စတာေတြက မသးခငဘး။ အဒါဆရငေတာ HTML တခတညးန႕ မရေပမယ CSS န႕ ေပါငးျပး အလြယတက ဖနတးႏငပါတယ။

<html>

<head>


ul

{

list-style-image:url('sqpurple.gif');

}

</style>

</head>

<body>

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Coca Cola</li>

</ul>

</body>

</html>

အဒါက browser မာ ၾကညလကရင ေအာကကလ ေတြ႕ပါလမမယ။ image ကေတာ ခပေသးေသးပေပါ။ 9 x 9 px ဆရင ရပါျပ။

IE , Opera တ႕မာ နညးနညးေလး image က ျမငေနပါလမမယ။ Chrome, Safari, Firefox တ႕ေလာက ၾကညမေကာငးပါဘး။ ဒါေလးက ဂရစကဖ႕ လပါလမမယ။


41

Cross browser Solution

အကနလးမာ ေသခာေပၚဖ႕အတြကဆရငေတာ နညးနညး ပျပး ထပေရးရပါလမမယ။

<html>

<head>


ul

{

list-style-type:none;

padding:0px;

margin:0px;

}

li

{

background-image:url(sqpurple.gif);


background-position:0px 5px;

padding-left:14px;

}

</style>

</head>

<body>

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Coca Cola</li>

</ul>

</body>

</html>

ဒ code က နညးနညးမားသြားျပ။ ul က list-style-type က none လပျပး padding, margin က 0px ေပးျပး ညလကတယ။ ျပးမ li က background-image န႕ ပထညျပး position က ေရႊ႕လကတာေပါဗာ။


42

အဒနညးလမးက အရငကနညးလမးထက ေကာငးတာေတာ အမနပဗ။ browser အားလးမာ အဆငေျပေျပ ျမငရတာေပါ။

Shorthand property

တစခါတစေလ လငးတစေၾကာငးတညးန႕ ျပးသြားေစခငတ အခါမာ shorthand style သးျပး ေ၇းလကလ႕ရပါတယ။

ul

{

list-style:square url("sqpurple.gif");

}

ေရးတ အခါမာေတာ

• list-style-type• list-style-position• list-style-image

ဆျပး အစအစဥတငးေရးပါတယ။ ၃ ခလး တျပငတညး မဟတရငေတာင တစခတညးပ ျဖစျဖစ ၂ ခတြပ ျဖစျဖစ တြျပး ေရးႏငပါတယ။

CSS List Properties


list-style property ေတ အကန တစေနရာတညးမာ ျဖညျခငး

list-style-typelist-style-positionlist-style-image

list-style-image list item မာ ပန႕ အသးျပ > ? @ AB URLnone

list-style-position list item ေပၚC D EA ေနရာ insideoutside


43


list-style-type list item အမ GB H I J B nonedisccirclesquaredecimaldecimal-leading-zeroarmeniangeorgianlower-alphaupper-alphalower-greeklower-latinupper-latinlower-romanupper-roman


44

CSS TablesHTML table က CSS န႕တြျပး သးတ အခါမာ ေအာကကလမး table တစခ ဖနတးႏငပါတယ။

Tables Borders

အေပၚက ပမာ table က border color န႕ ေတြ႕ရမာပါ။

<html>

<head>


table,th,td

{

border:1px solid black;

}

</style>

</head>

<body>

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>


45

<tr>

<td>Peter</td>

<td>Griffin</td>

</tr>

<tr>

<td>Lois</td>

<td>Griffin</td>

</tr>

</table>

</body>

</html>

အဒ code ေလးက run ၾကညလကပါ။ ေအာကကလ ျမငရပါမယ။ CSS က border တစခပ ထညထားပါတယ။ border ကေတာ ေနာကပငးမာ ရငးျပပါမယ။ သးသန႕ ရငးျပမျဖစမာမ႕ပါ။

Collapse Borders

အေပၚမာ boder က ဟ ေနပါတယ။ တစကယလ႕ border တစခတညး ျဖစခငရငေတာ Collapse Borders ဆတာက သးရပါမယ။ code က တခကေလာက ၾကညလကပါ။

<html>

<head>


table

{

border-collapse:collapse;

}

table, td, th

{


}


46

</style>

</head>

<body>

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

</tr>

<tr>

<td>Lois</td>

<td>Griffin</td>

</tr>

</table>

<p><b>Note:</b> If a !DOCTYPE is not specified, the border-

collapse property can produce unexpected results.</p>

</body>

</html>


ဆတာေလး ထညလကတ အခါမာေတာ border တစခတညး ျဖစသြားပါတယ။

Table န႕ ပတသကလ႕မားမား စားစားမရပါဘး။ ပမန CSS ေတြက ေခၚသးသြားတာ။ အဓကေတာ html tag ေတြက css န႕ တြသးလကတာပါ။ table, th, td စတ selector ေတြက ယသးျပး ပမန CSS ပ သးသြားတာပါ။


47

Table Width And Height

<html>

<head>


table,td,th

{


}

table

{

width:100%;

}

th

{

height:50px;

}

</style>

</head>

<body>

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Savings</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

<td>$100</td>

</tr>

<tr>

<td>Lois</td>

<td>Griffin</td>

<td>$150</td>


48

</tr>

<tr>

<td>Joe</td>

<td>Swanson</td>

<td>$300</td>

</tr>

<tr>

<td>Cleveland</td>

<td>Brown</td>

<td>$250</td>

</tr>

</table>

</body>

</html>

code ေလးကေတာ ပမနပါပ။ table ရ႕ width က 100% သးလကျပးေတာ th ရ႕ height ကေတာ 50 px ေပးလကပါတယ။ သာမာန ရးရငး တ code ေလးပါပ။

Table Text Alignment

Text alignment မာ vertical န႕ horizontal ဆျပး ၂ မးရပါတယ။ horizontal ကေတာ text-align ကပသးပါတယ။ text-align မာ left, right, center, justify ဆျပး ရပါတယ။ အခေတာ သသာေအာင

text-align:right;

န႕ ျပထားပါတယ။

<html>


49

<head>


table,td,th

{


}

td

{

text-align:right;

}

</style>

</head>

<body>

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Savings</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

<td>$100</td>

</tr>

<tr>

<td>Lois</td>

<td>Griffin</td>

<td>$150</td>

</tr>

<tr>

<td>Joe</td>

<td>Swanson</td>

<td>$300</td>

</tr>

<tr>

<td>Cleveland</td>


50

<td>Brown</td>

<td>$250</td>

</tr>

</table>

</body>

</html>

အဒ code က run လကရင

စာေတြ အကန ညာဖက ကပေနတာက ေတြ႕မာပါ။

vertical align ကေတာ top , bottom , middle ဆျပး ရပါတယ။ တခကေလာက code ေလးက ၾကညလကရေအာင

td

{

height:50px;

vertical-align:bottom;

}

ကပ သးထားတယ။

<html>

<head>


table,td,th

{



51

}

td

{

text-align:right;

}

</style>

</head>

<body>

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Savings</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

<td>$100</td>

</tr>

<tr>

<td>Lois</td>

<td>Griffin</td>

<td>$150</td>

</tr>

<tr>

<td>Joe</td>

<td>Swanson</td>

<td>$300</td>

</tr>

<tr>

<td>Cleveland</td>

<td>Brown</td>

<td>$250</td>

</tr>

</table>

</body>


52

</html>

အဒါက run လကရင ေအာကကလ ေတြ႕ပါမယ။

အကနလး ေအာကမာ ေရာကေနတာက ေတြ႕ပါလမမယ။

Table Padding

table မာ padding က အေရးၾကးပါတယ။ padding က ဘာလဆတာကေတာ HTML table အခနးမာ ျပနလည ဖတရႈႏငပါတယ။ ရငးေအာင ေျပာရရငေတာ padding က border န႕ စာ အကြာအေဝးလ႕ ဆရပါလမမယ။

padding အတြကကေတာ

td

{

padding:15px;

}

အလမးေရးပါတယ။ code အျပညအစကေတာ

<html>


53

<head>


table, td, th

{


}

td

{

padding:15px;

}

</style>

</head>

<body>

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Savings</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

<td>$100</td>

</tr>

<tr>

<td>Lois</td>

<td>Griffin</td>

<td>$150</td>

</tr>

<tr>

<td>Joe</td>

<td>Swanson</td>

<td>$300</td>

</tr>

<tr>

<td>Cleveland</td>


54

<td>Brown</td>

<td>$250</td>

</tr>

</table>

</body>

</html>

အဒါက run ၾကညလကရင

စာသားေတြက ေဘာငန႕ ျခားသြားတာက ေတြ႕ႏငပါလမမယ။

Table Color

table မာ ေနာကထပ လပ ေအာငျပငရမယ အပငးကေတာ color ပါပ။ color ဆတအထမာ border color န႕ background color ဆျပး ရပါတယ။ border အေၾကာငးကေတာ basic css style ေတြ ျပးသြားျပး box Model အပငးမာ ရငးျပေပးပါမယ။

table အတြကက color ကေတာ

table, td, th

{

border:1px solid green;

}


55

th

{

background-color:green;

color:white;

}

ဆျပး သးပါတယ။ တခကေလာက code အျပညအစက ၾကညလကရေအာင။

<html>

<head>


table, td, th

{



padding:5px;

}

th

{


color:white;

}

</style>

</head>

<body>

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Savings</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

<td>$100</td>

</tr>

<tr>


56

<td>Lois</td>

<td>Griffin</td>

<td>$150</td>

</tr>

<tr>

<td>Joe</td>

<td>Swanson</td>

<td>$300</td>

</tr>

<tr>

<td>Cleveland</td>

<td>Brown</td>

<td>$250</td>

</tr>

</table>

</body>

</html>

က.. အဒ code ေလးက run လကရင ေအာကကလ ျမငရပါလမမယ။

ပမန table န႕ လးဝက မတေတာပါဘး။ ကၽြနေတာတ႕ code က နညးနညးေလး ျပနျပငရေအာင။ တစေၾကာငးျပးတငး အေရာငေလးေတြ ေျပာငးသြားေအာငေပါ။

tr.alt

{

background-color:#D5FFC8;

}


57

ဆျပး ထပျဖညလကမယ။code အျပညအစကေတာ ေအာကမာ ၾကညပါ။ tr တစခေကာတငးမာ alt ဆျပး class ေတြ လကျဖညထားတာက ေတြ႕ပါလမမယ။

<html>

<head>


table, td, th

{



padding:5px;

}

tr.alt

{

background-color:#D5FFC8;

}

th

{


color:white;

}

</style>

</head>

<body>

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Savings</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

<td>$100</td>

</tr>


58

<tr class='alt'>

<td>Lois</td>

<td>Griffin</td>

<td>$150</td>

</tr>

<tr>

<td>Joe</td>

<td>Swanson</td>

<td>$300</td>

</tr>

<tr class='alt'>

<td>Cleveland</td>

<td>Brown</td>

<td>$250</td>

</tr>

</table>

</body>

</html>

အဒါက run လကရငေတာ

ဆျပး ျမငရပါလမမယ။

အခဆရငေတာ CSS style basic ပငးျပးသြားပါျပ။ ေနာကအပငးကေတာ box model အေၾကာငးလာပါေတာမယ။ border ေတြ အေၾကာငးေပါ။


59

Chapter 3: CSS Box ModelBox ModelCSS Box Model ဆတာကေတာ CSS မာ တြျပးသးရမယ margin , padding , border စတာေတြက ေျပာျပသြားမာပါ။ margin န႕ padding က အစ ေလလာသေတြ အေနန႕ အျမေရာေထြးေနတတပါတယ။ ရငးသြားေအာင ေအာကက ပေလးက တခကၾကညလကပါ။

content ဆတာကေတာ ကၽြနေတာတ႕ စာေတြ ေပၚမယေနရာေပါ။

padding ဆတာက ေတာ border န႕ content ၾကား အကြာအေဝးေပါ။

border ဆတာကေတာ content ရ႕ ေဘာငေပါ။margin ကေတာ လကရ ရေနတ ေနရာကေန အကြာအေဝးလ႕ ဆလ႕ရပါတယ။

ပျပး ရငးသြားေအာင ေအာကက code ေလးက ၾကညလကပါ။

<html>

<head>


div.ex


60

{

width:220px;

padding:10px;

border:5px solid gray;

margin:0px;

}

</style>

</head>

<body>

<img src="250px.gif" width="250" height="1" /><br /><br />

<div class="ex">The line above is 250px wide.<br />

The total width of this element is also 250px.</div>

<p><b>Important:</b> This example will not display correctly in

IE!<br />

However, we will solve that problem in the next example.</p>

</body>

</html>

အဒါက browser မာ ေအာကကလ ျမငရပါမယ။


61

padding 10px ေၾကာင အေပၚက img န႕ 10 px ေလာကကြာေနတာက ေတြ႕ပါမယ။ border 5 px လပထားတအတြကေၾကာင div ရ႕ border က ထေနပါတယ။ solid ျဖစတအတြကေကာင လငးက အျပညေပၚပါတယ။ အေရာငကေတာ gray ေပါ။

CSS Borderက... table အခနးကတညးက ပါလာတ border အေၾကာငး အခ ရငးပါျပ။ border ဆတာ ဘာလဆတာကေတာ ေထြေထြထးထး ရငးဖ႕ မလေတာပါဘး။

Border StyleBorder style ကေတာ border က ဘယလမး ပလဆတာအတြကေပါ။ border style မာ solid border ကေတာ အေရ႕မာ သးခပါတယ။

border-style values:

value ေတြက dotted, dashed , solid, double, grrove , ridge , inset, outset ေတြပါ။ ပေတြကေတာ ေအာကကလ ျမငရပါတယ။


62

<html>

<head>


p.none {border-style:none;}

p.dotted {border-style:dotted;}

p.dashed {border-style:dashed;}

p.solid {border-style:solid;}

p.double {border-style:double;}

p.groove {border-style:groove;}

p.ridge {border-style:ridge;}

p.inset {border-style:inset;}

p.outset {border-style:outset;}

p.hidden {border-style:hidden;}

</style>

</head>

<body>

<p class="none">No border.</p>

<p class="dotted">A dotted border.</p>

<p class="dashed">A dashed border.</p>

<p class="solid">A solid border.</p>

<p class="double">A double border.</p>

<p class="groove">A groove border.</p>


63

<p class="ridge">A ridge border.</p>

<p class="inset">An inset border.</p>

<p class="outset">An outset border.</p>

<p class="hidden">A hidden border.</p>

</body>

</html>

အဒါက run ၾကညလကရငေတာ

Border Width

border width ကေတာ border အထအပါးက အသးျပပါတယ။ border-width ဆျပး သးပါတယ။

<html>

<head>


p.one

{

border-style:solid;


64

border-width:5px;

}

p.two

{

border-style:solid;

border-width:medium;

}

p.three

{

border-style:solid;

border-width:1px;

}

</style>

</head>

<body>

<p class="one">Some text.</p>

<p class="two">Some text.</p>

<p class="three">Some text.</p>

<p><b>Note:</b> The "border-width" property does not work if it is

used alone. Use the "border-style" property to set the borders

first.</p>

</body>

</html>

အဒါေလးက browser မာ ဒလျမငရပါမယ။


65

border အထအပါး ေတြ ကြာျခားေနတာက သတျပႏငပါတယ။

Border Color

border color ကေတာ border ရ႕ အေရာငေတြေပါ။ HTML မာ အေရာငသးတ ကစၥက ကၽြနေတာ ေရးခဖးပါတယ။ name သ႕မဟတ #RRGGBB န႕ အသျပပါတယ။ CSS မာေတာ rgb(0,0,255) လမး အသးျပလ႕ရပါေသးတယ။

အခ code ေလးမာေတာ border-color က သးထားတာကေတြ႕ႏငပါတယ။

<html>

<head>


p.one

{

border-style:solid;

border-color:red;

}

p.two

{

border-style:solid;

border-color:#98bf21;

}

</style>

</head>

<body>

<p class="one">A solid red border</p>

<p class="two">A solid green border</p>


66

<p><b>Note:</b> The "border-color" property does not work if it is

used alone. Use the "border-style" property to set the borders

first.</p>

</body>

</html>

အဒါကေတာ ေအာကကလ ျမငရပါလမမယ။

Border- Individual sides

left လား right လား top လား bottom လား စျပး အေသးစတက အသးျပလ႕ရေအာငလညး CSS မာ ေရးသားႏငပါတယ။ တစခါတစေလ ညာဘကမာ border style တစမး ေျပာငးျပး ေဖာျပခငတ အခါမးမာေပါ

p

{

border-top-style:dotted;

border-right-style:solid;

border-bottom-style:dotted;

border-left-style:solid;

}

ဆျပး အသးျပပါတယ။ code အျပညအစန႕ စမးၾကညမယဆရငေတာ

<html>

<head>


p

{


67

border-top-style:dotted;

border-right-style:solid;

border-bottom-style:dotted;

border-left-style:solid;

}

</style>

</head>

<body>

<p>2 different border styles.</p>

</body>

</html>

ဘယလမး ေပၚမလဆရငေတာ

တကယလ႕ ၄ ေၾကာငးမေရးပန႕ ၁ေၾကာငးတညး ဒလေရးလ႕ရပါတယ။

border-style:dotted solid;

ေရ႕ကေတာ အေပၚန႕ ေအာကျဖစျပး ေနာကကေန ဘယန႕ ညာန႕ ပါ။ အေပၚန႕ ေအာက အတတ ပျဖစေနရင ဘယန႕ ညာ အတတပ ျဖစေနရင တစေၾကာငးတညးန႕ ေရးလ႕ရပါတယ။border-style မာ value က ၄ ခေလာကထ ထညလ႕ရပါတယ။

border-style: dotted solid double dashed;

top border က dottedright border က solidbottom border က doubleleft border ကေတာ dashed

border-style: dotted solid double;


68

top border က dottedright န႕ left border က solidbottom border က double

border-style: dotted solid;

top န႕ bottom border က dottedright န႕ left border က solid

border-style: dotted;

border အားလး dotted

Border - Shorthand property

တကယလးက ေပါငးျပး တစေၾကာငးတညး ေရးခငရငတာ border: ဆျပး ေရးပါတယ။ table အခနးမာေရးသြားတာက shorthand ပစပါ။ border 5px solid red အတြက အေၾကာငးေတြ အမားၾကး မေရးပ

border:5px solid red;

ဆျပး ေရးလ႕ရပါတယ။

property ကေတာ

border-widthborder-styleborder-color

ဆျပး အသးျပပါတယ။


69

CSS Border Properties


border properties အားလး အတြက border-widthborder-styleborder-color

border-bottom border bottom properties အားလးအတြက

border-bottom-widthborder-bottom-styleborder-bottom-color

border-bottom-color bottom border color ေျပာငးရန

border-color

border-bottom-style border bottom style ျပငရန border-style

border-bottom-width border bottom width က ျပငရန

border-width

border-color border အားလးအတြက color color_namehex_numberrgb_numbertransparent

border-left border left properties အားလးအတြက

border-left-widthborder-left-styleborder-left-color

border-left-color border left color အတြက ျပငရန

border-color

border-left-style border left style ျပငရန border-style

border-left-width border left width ျပငရန border-width

border-right border right အတြက အကနျပငရန

border-right-widthborder-right-styleborder-right-color

border-right-color border right color ျပငရန border-color

border-right-style border right style ျပငရန အတြက

border-style


70


border-right-width border right width ျပငရနအတြက

border-width

border-style border အားလးအတြက style nonehiddendotteddashedsoliddoublegrooveridgeinsetoutsetinherit

border-top border top ႏင သကဆငရာ အားလး

border-top-widthborder-top-styleborder-top-color

border-top-color border top color ျပငရန border-color

border-top-style border top style ျပငရန border-style

border-top-width border top width ျပငရန border-width

border-width border အားလးရ႕ width thinmediumthicklength


71

CSS Outlineoutline ကေတာ link ေတြထညလကတအခါ ပေတြ ၊ စာေတြရ႕ ပတလညမာ dotted line ေလး က ေျပာတာပါ။ သ႕က border န႕ မားတတပါတယ။ ေသခာေအာင ေအာကက example ေလးက ၾကညလကပါ။

<html>

<head>


p

{

border:1px solid red;

outline:green dotted thick;

}

</style>

</head>

<body>

<p><b>Note:</b> IE8 supports the outline properties only if a !

DOCTYPE is

specified.</p>

</body>

</html>

အဒ code ေလးက run လကတ အခါမာ ေအာကကလ ျမငရပါလမမယ။

border ကေတာ အနေရာငျဖစျပး outline ကေတာ အစမးေရာင dotted ေလးန႕ ျပထားပါတယ။

outline ကေတာ

outline:[color] [style] [width];


72

ဆျပး အသးျပပါတယ။

CSS MarginCSS မာ margin န႕ padding ပငးက အေရးၾကးပါတယ။ margin န႕ padding က အစပငးမာ ေရာေထြးေနတတပါတယ။ သ႕ေပမယ margin န႕ padding က လးဝ ကြာျခားပါတယ။ ဒ အေၾကာငးက HTML မာတနးက ကၽြနေတာ ေျပာချပးပါျပ။ margin က ေအာကကလ မး အသးျပပါတယ။

margin:25px 50px 75px 100px;

top margin က 25pxright margin က 50pxbottom margin က 75pxleft margin က 100px

လ႕ ဆတာပါ။

margin: 25px 50px 75px;

top margin က 25pxright န႕ left margin က 50pxbottom margin ကေတာ 75px


margin:25px 50px;

top န႕ bottom က 25px right န႕ left ကေတာ 50px

ပါ။


73

margin:25px;

margin အားလးက 25px

လ႕ဆပါတယ။

margin က စမးထားတ example ေလး ၾကညရေအာင။

<html>

<head>


p

{

background-color:yellow;

}

p.margin

{

margin:100px 50px;

}

</style>

</head>

<body>

<p>This is a paragraph with no specified margins.</p>

<p class="margin">This is a paragraph with specified margins.</p>

</body>

</html>

အဒါက run လကရင ေအာကကလ ေတြ႕မာပါ။


74

top န႕ bottom က 100px ျဖစျပး left န႕ right က 50px ကြာထားတာက ေတြ႕ႏငပါတယ။ margin က အျပငကေန အကြာအေဝးပါ။ padding ကေတာ အတြငး အကြာအေဝးေပါ။ ေနာကျပး တစခ ျခငးဆ အေနန႕ ခြေရးလညးရပါတယ။

margin-top:100px;margin-bottom:100px;margin-right:50px;margin-left:50px;

margin top က 100 px , bottom ကလညး 100px , left န႕ right ကေတာ 50 px ဆျပး တစချခငးဆ ေရးသားထားတာပါ။

CSS Paddingpadding ကလညး margin လမးပါပ။ သကေတာ အတြငးကေန အကြာအေဝးပါ။ သ႕ အသးျပပကလညး margin အတငးပါပ။

padding:25px 50px 75px 100px;

top padding က 25pxright padding က 50pxbottom padding က 75pxleft padding က 100px


padding: 25px 50px 75px;


75

top padding က 25pxright န႕ left padding က 50pxbottom padding ကေတာ 75px


padding:25px 50px;

top န႕ bottom က 25px right န႕ left ကေတာ 50px

ပါ။

padding:25px;

padding အားလးက 25px

လ႕ဆပါတယ။

သ႕ကလညး တစခ ျခငးဆ ခြေရးလ႕ရပါတယ။

padding-top:25px;padding-bottom:25px;padding-right:50px;padding-left:50px;

က။ ဥပမာေလး ၾကညရေအာင။

<html>

<head>


p

{

background-color:yellow;


76

}

p.padding

{

padding-top:25px;

padding-bottom:25px;

padding-right:50px;

padding-left:50px;

}

</style>

</head>

<body>

<p>This is a paragraph with no specified padding.</p>

<p class="padding">This is a paragraph with specified paddings.</

p>

</body>

</html>

အဒါကေလးက run လကရင ေအာကကလ ျမငရပါမယ။

အဒါဆရငေတာ padding န႕ margin က သေဘာေပါကေလာကပါျပ။

အခဆရငေတာ CSS အေျခခအဆငေလာကက သသြားျပလ႕ ဆႏငပါျပ။ ေနာကအခနးေတြကေတာ advanced ပငး နညးနညးေရာကလာပါျပ။ ဒါေၾကာင example ေတြ အကနမျပေတာ သလ အေသးစတ႐ငးလငးခကေတြလညး သပျပး ပါလာေတာမာ မဟတပါဘး။


77

Chapter 4: Advanced CSSGrouping CSSCSS ေတြေရးတ အခါမာ တညတ code ေတြက စစညးျပး ေၾကျငာလ႕ရပါတယ။ ဥပမာ

h1

{

color:green;

}

h2

{

color:green;

}

p

{

color:green;

}

လ႕ ေရးထားတာက

h1,h2,p

{

color:green;

}

လ႕ ျပငေရးလ႕ ရပါတယ။

တညတာေတြက စစညးေရးသားလကျခငးအားျဖင စာေၾကာငးတသြားသလ file size လညး ေသးသြားပါတယ။ ဒါေၾကာင website loading လညး ပျမနလာပါလမမယ။


78

Nesting Selectors

ကၽြနေတာတ႕ေတြ တစခါတစေလ မာ ဘယ ေအာကက ဘာ ဆျပး ေခၚသးခငတာေတြ ႐ပါတယ။ ဥပမာ ။။ .marked ေအာကက p ဆျပးေတာေပါ။ အဒါက ဒလေရးလ႕ရပါတယ။

p

{

color:blue;

text-align:center;

}

.marked

{

background-color:blue;

}

.marked p

{

color:white;

}

လ႕ ေရးထားတာက .marked ေအာကက p tag ေတြအားလးက အျဖေရာငန႕ ျပဆျပး ေၾကျငာလကတာပါ။

CSS DimensionCSS မာ အရြယအစားေတြ က သတမတဖ႕ ေအာကက properties ေတြက အသးျပႏငပါတယ။


79

Property Description Value

height ပေသ အျမင ျဖစသည။ စာေၾကာငးမားသြားလင အျမင ထပမတး သလ စာနညးေနရငလညး မေလာပါ။ ပေသ သတမတခကျဖစသည။

autopx%

max-height အမားဆး ေရာက႐ခြင႐သည အျမငျဖစသည။

autopx%

max-width အမားဆး ေရာက႐ခြင႐သည အကယျဖစသည။

autopx%

min-height အနညးဆးထားရမည အျမင ျဖစသည။

autopx%

min-width အနညးဆးထားရမည အကယျဖစသည။

width ပေသ အကယ ျဖစသည။ စာေၾကာငးမားသြားလင ထပမကယေတာ သလ စာနညးေနရငလညး မတပါ။ ပေသ သတမတခကျဖစသည။

CSS Display and Visibilityမျမငလတ selector ေတြက display:none သ႕မဟတ visibility:hidden ဆျပး ေဖာကထားလ႕ရပါတယ။ မျမငခငတ စာေတြက ေဖာကတာေတြက အဓက javascript န႕ တြျပး အသးျပပါတယ။ ဥပမာ ။။ ပေတြက button ေလးႏပလကမ ေပာကသြားတာမးေပါ။ အဒ အပငးက css တစခတညးန႕ မရပါဘး။ javascript ပါ တြ သးရပါတယ။ အခေတာ ကၽြနေတာ a tag န႕ တြသးျပပါမယ။

<html>

<head>



80

a:hover {visibility:hidden;}

</style>

</head>

<body>

<a href="http://www.saturngod.net">hover and hide</a>

</body>

</html>

က run တ အခါမာ hover and hide ဆတာ ေပၚလာပါမယ။ အဒ ေပၚ mouse တငလကရင စာ ေပာကသြားတာ ေတြ႕ရမာပါ။

<html>

<head>


h1.hidden {display:none;}

</style>

</head>

<body>

<h1>This is a visible heading1</h1>

<h1 class="hidden">This is a hidden heading 2</h1>

<p>Notice that the hidden heading does not take up space.</p>

</body>

</html>

က စမးၾကညရင ဒလ ျမငရပါမယ။


81

http://www.saturngod.net

http://www.saturngod.net

Block and Inline Elements

Block န႕ Inline ကေတာ list ေတြန႕ တြသးၾကပါတယ။ list န႕ တြသးျပမသာ block န႕ inline က နားလညပါလမမယ။ block ကေတာ block တစခလး အျပညယသြားတာပါ။ inline ကေတာ တစေနရာတညးမာ တစေၾကာငးတညး အေနန႕ ေဖာျပေပးမာပါ။ ဥပမာ။။ menu ေတြ လမးေပါ။

<html>

<head>


li{display:inline;}

</style>

</head>

<body>

<p>Display this link list as a horizontal menu:</p>

<ul>

<li><a href="/html/default.asp" target="_blank">HTML</a></li>

<li><a href="/css/default.asp" target="_blank">CSS</a></li>

<li><a href="/js/default.asp" target="_blank">JavaScript</a></li>

<li><a href="/xml/default.asp" target="_blank">XML</a></li>

</ul>

</body>

</html>

က run လကရင ေအာကကလ ျမငရပါမယ။

li ေတြက inline သးထားတအတြက list ေတြက တစေၾကာငးတညးမာ ျမငရေနတာပါ။ default က display:block ျဖစတအတြက တစေၾကာငးစ ခြျပး ျမငေနရတာပါ။


82

HTML မာ တနးက တစေၾကာငးတညးမာ အသးျပခငလ႕ div အစား span က သးခတာ မတမအးမယ ထငပါတယ။ span က div လမး line breaking ျဖစသြားေအာင display:block န႕ ဖနတးလ႕ရပါတယ။

<html>

<head>


span

{

display:block;

}

</style>

</head>

<body>

<h2>Nirvana</h2>

<span>Record: MTV Unplugged in New York</span>

<span>Year: 1993</span>

<h2>Radiohead</h2>

<span>Record: OK Computer</span>

<span>Year: 1997</span>

</body>

</html>

က run လကရင ေအာကကလ ျမငရပါမယ။


83


84

PositionCSS မာ position က အေရးပါတ အထမာ ပါပါတယ။ Position မာ fixed , relative , absolute ဆတာေတြ ရပါတယ။

Fixed Position

Fixed ဆတာကေတာ တစေနရာတညးမာ အတညျဖစေနတာပါ။ ဥပမာ ေျပာရရငေတာ facebook က chat လမး ေအာကမာ ကပေနတာမးေပါ။

<html>

<head>


p.pos_fixed

{

position:fixed;

top:10px;

right:5px;

}

p.pos_fixed2

{

position:fixed;

bottom:5px;

left:5px;

background:#453245;

color:#FFF;

}

</style>

</head>

<body>

<p class="pos_fixed">Some more text</p>

<p><b>Note:</b> IE7 and IE8 supports the fixed value only if a

!DOCTYPE is specified.</p>


85

<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</

p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</

p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</

p><p>Some text</p><p>Some text</p><p>Some text</p><p

class="pos_fixed2">Bottom</p>

</body>

</html>

အဒ code ေလးက run လကရင ေအာကကလ ျမငရပါလမမယ။

windows က ေသးေသးထားျပး scroll ဆြၾကညပါ။ ဘယဘက အေပၚက စာန႕ ေအာကညာဘကက စာက ေနရာမေျပာငးပ အျမ ကပေနတာေတြ႕ပါလမမယ။

Relative Position

Relative position ကေတာ လကရ ရေနတ position ေပၚမာ မတညျပး ေျပာငးလ ေပးတာပါ။ ေအာကက ဥပမာ ေလးက ၾကညၾကညလကပါ။ သက position absolute န႕ အျမ ေရာေထြးတတပါတယ။

<html>


86

<head>


h2.pos_left

{

position:relative;

top:-40px;

}

</style>

</head>

<body>

<h2>This is a heading with no position</h2>

<h2 class="pos_left">This heading is moved left according to its

normal position</h2>

<div><h2>Another One</h2><h2 class="pos_left">This heading is

moved left according to its normal position</h2></div>

<p>This is testing page</p>

</body>

</html>

အဒါေလးက ေအာကကလ ျမငရပါလမမယ။


87

Absolute Position

စာမကႏာေပၚမာ ၾကကတ ေနရာက ေရႊ႕ခငတအခါမာ position က absolute ထားေပးရပါတယ။ ျပးရင top , bottom ,left,right value ေတြန႕ ေရႊ႕ေပးလ႕ရပါတယ။ ေအာကက ဥပမာ ေလးက ၾကညၾကညလကပါ။

<html>

<head>


h2

{

position:absolute;

left:100px;

top:150px;

}

</style>

</head>

<body>

<h2>This is a heading with an absolute position</h2>

<p>With absolute positioning, an element can be placed anywhere on

a page. The heading below is placed 100px from the left of the

page and 150px from the top of the page.</p>

</body>

</html>


88


အခ position relative န႕ position absolute က ၾကညရေအာင။

<html>

<head>


h2.abs

{

position:absolute;

left:100px;

top:0px;

}

h2.abs2 {

position:absolute;

top:0px;

right:0px;

}

div.relative {

color:#FFF;

background:#000;

position:relative;

height:200px;

}

</style>

</head>

<body>


89

Lorem Ipsum is simply dummy text of the printing and typesetting

industry. Lorem Ipsum has been the industry's standard dummy text ever

since the 1500s, when an unknown printer took a galley of type and

scrambled it to make a type specimen book. It has survived not only five

centuries, but also the leap into electronic typesetting, remaining

essentially unchanged. It was popularised in the 1960s with the release

of Letraset sheets containing Lorem Ipsum passages, and more recently

with desktop publishing software like Aldus PageMaker including versions

of Lorem Ipsum.

<div>

<h2 class="abs">This is header</h2>

</div>

<div class="relative">

Sample Text

<h2 class="abs2">This is header</h2>

</div>

</html>


position က absolute ထားလကတ အခါမာ browser ေပၚက ၾကကတ ေနရာက ေရႊ႕လ႕ရပါတယ။ သ႕ေပမယ menu ေတြ တညေဆာကတအခါမာ ျဖစျဖစ layout ခတ ေနရာ မာ ျဖစျဖစ div layer ထက ၾကကတ ေနရာက ပ ေရႊ႕ခငတအခါမာ div က position: relative ဆျပး ေၾကျငာထားရပါမယ။


90

Z-Index

Z-Index ဆတာကေတာ CSS မာ ဘယသက အေပၚမာ ေျပာေစခငလဆတာက သတမတတာပါ။ တနညးေျပာရင တစခန႕ တစခထပေနတအခါ ဘယသက အေပၚ ဘယသက ေအာကဆျပး သတမတေပးတာပါ။

<html>

<head>


div.below,div.upper {

position:absolute;

top:100px;

left:100px;

}

div.below {

background:#0F0;

z-index:1;

}

div.upper {

background:#F00;

left:130px;

z-index:10;

}

</style>

</head>

<body>

<div class="upper">

Sample

</div>

<div class="below">

Sample

</div>

</body>

</html>


91

တကယတနးေတာ ေအာကက ေရးထားတ background အနေရာငေပၚ အစမးေရာငက ဖးေနရမာပါ။ သ႕ေပမယ z-index ကြာတာေၾကာင အနေရာငက အစမးေရာငက ဖးထားျပးသား ျဖစသြားတာပါ။


92

CSS FloatingCSS Floating ဆတာက ဘယဘက ကပမလား ညာဘကကမလားဆျပး သတမတေပးတာပါ။ position absolute န႕ မတတာက သက လကရ ရေနတ ေနရာကေန ညာဘက သြားကပတာပါ။ ေအာကက code ေလးက ၾကညျပး run ၾကညလကပါ။

<html>

<head>


img

{

float:right;

}

</style>

</head>

<body>

<p>In the paragraph below, we have added an image with style

<b>float:right</b>. The result is that the image will float to the

right in the paragraph.</p>

<p>

<img src="logocss.gif" width="95" height="84" />

This is some text. This is some text. This is some text.










</p>

</body>

</html>


93

အဒါက browser မာ ဒလ ျမငရပါမယ။

float က right ထားလကတာေၾကာင image က ညာဘက ေထာငကပသြားတာက ေတြ႕ရမာပါ။

အခေတာ float က သးျပး gallery ေလး လပၾကညရေအာင။ ပမန အားျဖင img ေတြက ေရးလကရင တစလငးဆငးျပးေတာ ေပၚေနပါလမမယ။ ဒါေၾကာင float:left ဆျပး အကနလးက တစလငးထ ေပၚေအာင ဖနတးလကပါမယ။ float left က display:inline န႕ မတတာကေတာ screen width ျပညသြားရင သ႕အလလ ေနာကတစလငး ေျပာငးသြားေပးတာပါ။

<html>

<head>


.thumbnail

{

float:left;

width:110px;

height:90px;

margin:5px;

}

</style>

</head>

<body>

<h3>Image Gallery</h3>


94

<p>Try resizing the window to see what happens when the images

does not have enough room.</p>

<img class="thumbnail" src="klematis_small.jpg" width="107"

height="90">

<img class="thumbnail" src="klematis2_small.jpg" width="107"

height="80">


height="90">


height="90">


height="90">


height="80">


height="90">


height="90">

</body>

</html>



95

ေနာကျပးေတာ float က ရငးခငရငေတာ clear:both ဆျပး အသးျပပါတယ။ ေနာကထပ code တစခက ထပၾကညရေအာင။

<html>

<head>


.thumbnail

{

float:left;

width:110px;

height:90px;

margin:5px;

}

.text_line

{

clear:both;

margin-bottom:2px;

}

</style>

</head>

<body>

<h3>Image Gallery</h3>

<p>Try resizing the window to see what happens when the images

does not have enough room.</p>


height="90">


height="80">


height="90">


height="90">

<h3 class="text_line">Second row</h3>


height="90">


96


height="80">


height="90">


height="90">

</body>

</html>

အဒါက browser မာ ဒလေပၚေနပါမယ။

All CSS Float Properties

Property Description Value

clear float က ရငးရန leftrightbothnone

float box က ေရႊ႕ရန leftrightnone


97


98

CSS Pseudo ClassCSS pseudo-class ကေတာ အထးသးသန႕ selector ေတြပါ။ ဘယလ ေတြလဆေတာ ကၽြနေတာတ႕ anchor မာ သးခသလ a:hover , a:link တ႕မာ :hover , :link တ႕က pseudo class ေတြပါပ။

First Child

first-child pseudo class ကေတာ ပထမဆး child က ေခၚတာပါ။ ရငးသြားေအာင code ေလးက ၾကညလကပါ။

<html>

<head>


p:first-child

{

color:blue;

}

</style>

</head>

<body>

<p>This is some text.</p>

<p>This is some text.</p>

<p><b>Note:</b> For :first-child to work in IE8 and earlier, a

DOCTYPE must be declared.</p>

</body>

</html>

အဒါက browser မာ ဒလ ျမငရပါမယ။


99

ပထမဆး p က အျပာေရာငန႕ ေပၚေနတာက ေတြ႕ပါလမမယ။

ထပျပး ရငးသြားေအာင ေအာကက code က ထပၾကညၾကညပါ။

<html>

<head>


p > i:first-child

{

color:blue;

}

</style>

</head>

<body>

<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>

<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>

<p><b>Note:</b> For :first-child to work in IE8 and earlier, a

DOCTYPE must be declared.</p>

</body>

</html>

အမာ ပထမဆး i tag န႕ ေရးထားတ strong က အျပာေရာင ျဖစေနပါလမမယ။

p>i ဆတာကေတာ p ေအာကမာ ရတ i က ဆလတာပါ။ p:first-child i ဆရငေတာ ပထမဆး p ရ႕ i က ပ ေျပာငးပါလမမယ။ အဒါကေတာ ကယတင စမးၾကညလကပါ။

:before and :after


100

:before န႕ :after selector ေတြက content န႕ တြျပး အသးျပပါတယ။ စာန႕ ရငးျပေနရင နညးနညး ရႈပပါတယ။ code ေလးက ၾကညလကပါ။

<html>

<head>


p.no1:before {

content:"Hello";

background:#000;

color:#FFF;

}

p.no2:after {

content:"good bye";

background:#000;

color:#FFF;

}

</style>

</head>

<body>

<p class="no1">

This is sample text

</p>

<p class="no2">

This is sample text

</p>

</body>

</html>

အဒါက ေအာကကလ ျမငရပါလမမယ။


101

before ကေတာ မတငခငမာ ထပျဖညေပးတာေပါ။ after ကေတာ ျပးတ အခါမာ ထပျဖညဖ႕ အတြကပါ။

All Pseudo Property

Property Example Description

:link a:link unvisited link ေတြ အားလးက အတြက selector

:visited a:visited visited link ေတြ အတြက selector

:active a:active active ျဖစတအခနအတြက selector

:hover a:hover mouse hover လပလကတ အခနအတြက

:focus input:focus input မာ focus ျဖစသြားတ အခနအတြက selector

:first-letter p:first-letter paragraph မာ ပထမဆး စာလး အတြက selector

:first-line p:first-line <br/> မတငခင ပထမဆး line အတြက

:first-child p:first-child ပထမဆး child အတြက

:before p:before paragraph တြင စာ မ စခင အတြက

:after p:after paragraph တြင စာ ဆးျပး အတြက


102

Opacityပေတြ background color ေတြက ေဖာကျပး ျမငရေအာင အတြက opacity က ေလာခေပးရပါတယ။ ေအာကက code ေလးက ေလလာၾကညပါ။

<html>

<head>


body {

background:#000;

}

div {

background:#F00;

opacity:0.5;

color:#FFF;

}

</style>

</head>

<body>

<div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nullam velit nisl, aliquet vitae egestas a, fringilla quis arcu.

Sed pulvinar nunc et tortor lacinia sed elementum arcu ultricies.

Integer non dolor dolor. Vivamus lobortis sem ut nibh mattis

interdum. Proin tristique rhoncus erat vitae mollis. Ut vulputate

adipiscing nibh, sit amet imperdiet nisi adipiscing ac. Aliquam

lacinia odio quis ipsum semper aliquet. Fusce aliquet ligula

felis, non euismod enim. Quisque viverra, diam non fringilla

commodo, nisi tortor dignissim dolor, sed lacinia ante dolor sed

elit. Maecenas adipiscing purus nec urna molestie et vehicula elit

iaculis. Mauris eget elit bibendum nibh mattis sollicitudin

tristique ac purus. Vestibulum ante ipsum primis in faucibus orci

luctus et ultrices posuere cubilia Curae; Ut ultrices egestas

quam, sit amet pellentesque augue hendrerit eu.

</div>


103

</body>

</html>

အဒါက browser မာ ဆရင ေအာကကလ ျမငေနရပါမယ။

အနေရာငက opacity ေလာခထားတအတြက အနကေရာငဘကက ေဖာကျပး ျမငေနရပါတယ။ ေသခာ ေအာင ကၽြနေတာ တ႕ background က image ထညျပး ၾကညရေအာင။

background image ထညလကရင အေပၚကလမး ျမငရပါလမမယ။ အခ ပက စာပါ opacity ေလာသြားပါတယ။ background တစခပ ေလာခငရငေတာ rgba က သးရပါမယ။ ေအာကက ဥပမာ ေလးက ၾကညလကပါ။

<html>

<head>


body {

background:url('pattern.gif');

}

div {

background:rgba(255,0,0,0.5);

color:#FFF;

}


104

</style>

</head>

<body>

<div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nullam velit nisl, aliquet vitae egestas a, fringilla quis arcu.

Sed pulvinar nunc et tortor lacinia sed elementum arcu ultricies.

Integer non dolor dolor. Vivamus lobortis sem ut nibh mattis

interdum. Proin tristique rhoncus erat vitae mollis. Ut vulputate

adipiscing nibh, sit amet imperdiet nisi adipiscing ac. Aliquam

lacinia odio quis ipsum semper aliquet. Fusce aliquet ligula

felis, non euismod enim. Quisque viverra, diam non fringilla

commodo, nisi tortor dignissim dolor, sed lacinia ante dolor sed

elit. Maecenas adipiscing purus nec urna molestie et vehicula elit

iaculis. Mauris eget elit bibendum nibh mattis sollicitudin

tristique ac purus. Vestibulum ante ipsum primis in faucibus orci

luctus et ultrices posuere cubilia Curae; Ut ultrices egestas

quam, sit amet pellentesque augue hendrerit eu.

</div>

</body>

</html>


opacity က အကနလးက သကေရာကေစပါတယ။ background color တစခတညး သကေရာက ေစလတ အခါမာ rgba က အသးျပႏငပါတယ။ rgba ဆတာကေတာ red , green , blue , alpha ပါ။ alpha န႕ opacity က အတတပါပ။ value အျမငဆးက 1 ျဖစျပး အနမဆးကေတာ 0 ပါ။


105

Image Spriteimage sprite ဆတာကေတာ ပေတြ အမားၾကးထက ပ တစပထမာ ထညထားတာပါ။ အဒ အတြကေၾကာင ပ ေတြ အမားၾကးအတြက တစခါပ request လပရပါပ။ ျပးမ ပေတြက ခြ ျပးေတာ ျပနသးတာေပါ။

ဆတ ပေလးမာ ပ ၃ ပက တစခတညး ေပါငးထားတာပါ။ ပကေတာ http://www.w3schools.com/css/img_navsprites.gif ကေန ရယထားပါတယ။

အဒါက အသးျပျပး ေအာကက code က ေရးလကပါမယ။

<html>

<head>


img.home

{

width:46px;

height:44px;

background:url(img_navsprites.gif) 0 0;

}

img.next

{

width:43px;

height:44px;

background:url(img_navsprites.gif) -91px 0;

}

</style>

</head>

<body>

<img class="home" src="img_trans.gif" width="1" height="1" />

<br /><br />


106

http://www.w3schools.com/css/img_navsprites.gif




<img class="next" src="img_trans.gif" width="1" height="1" />

</body>

</html>

background က 0 0 သးထားတာက ေတြ႕မာပါ။ left position က 0 , top position က 0 လ႕ ဆထားတာပါ။ တတယ ပ left position က 91px မာ စပါမယ။ တတယ ပက ေခၚခငေတာ -91px ဆျပး ေခၚလကပါတယ။ ဒတယပက ေခၚခငရငေတာ -47 ဆျပး ေခၚလကဖ႕ လပါလမမယ။ အဒါက browser မာ ေအာကကလ ျမငရပါလမမယ။

အဒ image က သးျပးေတာ navigation ေဆာကၾကညရေအာင။ ေသခာေအာင ေအာကက example ေလးက ထပၾကညလကပါ။

<html>

<head>


#navlist{position:relative;}

#navlist li{margin:0;padding:0;list-

style:none;position:absolute;top:0;}

#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}

#home{background:url('img_navsprites.gif') 0 0;}

#prev{left:63px;width:43px;}

#prev{background:url('img_navsprites.gif') -47px 0;}

#next{left:129px;width:43px;}

#next{background:url('img_navsprites.gif') -91px 0;}

</style>


107

</head>

<body>

<ul id="navlist">

<li id="home"><a href="default.html"></a></li>

<li id="prev"><a href="css_intro.html"></a></li>

<li id="next"><a href="css_syntax.html"></a></li>

</ul>

</body>

</html>

အဒါက run လကရင ေအာကကလ ျမငရပါလမမယ။

ကၽြနေတာတ႕က row တစခ တညးျဖစေနတအတြက top က 0px န႕ ပ ေခၚေနပါတယ။ တကယလ႕ ကၽြနေတာတ႕ေတြ hover effect ေတြ သးခငတအခါမာ row ၂ ခက အသးျပရင ရသလ ၁ ခ တညးမာလညး ရပါတယ။ အခ top position အေၾကာငး သသြားေအာင ေအာကက ပက အသးျပပါမယ။

ဒတယ row ကေတာ hover လပတအခါမာ ေျပာငးသြားဖ႕ပါ။ ပကေတာ http://www.w3schools.com/css/img_navsprites_hover.gif ကေန ရယႏငပါတယ။

<html>

<head>


#navlist{position:relative;}

#navlist li{margin:0;padding:0;list-

style:none;position:absolute;top:0;}


108

http://www.w3schools.com/css/img_navsprites_hover.gif




#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}

#home{background:url('img_navsprites_hover.gif') 0 0;}

#home a:hover{background: url('img_navsprites_hover.gif') 0

-45px;}

#prev{left:63px;width:43px;}

#prev{background:url('img_navsprites_hover.gif') -47px 0;}

#prev a:hover{background: url('img_navsprites_hover.gif') -47px

-45px;}

#next{left:129px;width:43px;}

#next{background:url('img_navsprites_hover.gif') -91px 0;}

#next a:hover{background: url('img_navsprites_hover.gif') -91px

-45px;}

</style>

</head>

<body>

<ul id="navlist">

<li id="home"><a href="default.html"></a></li>

<li id="prev"><a href="css_intro.html"></a></li>

<li id="next"><a href="css_syntax.html"></a></li>

</ul>

</body>

</html>

အေပၚက code မာ hover effect အတြက top ေတြက -45px က သးထားတာက ေတြ႕ႏငပါတယ။


109

Attribute Selectorတစခါတစေလမာ selector ေတြက attribute န႕ အသးျပဖ႕ လပါတယ။ ဥပမာ input လမးေပါ။ input ရ႕ type ေတြမာ textbox , password , checkbox , file , submit , image စတာေတြ ရတအခါမာ textbox ေတြ အကနလးကပ select လပခငတယ။ အဒ အခါမးမာ attribute selector က အသးျပႏငပါတယ။

<html><head><style type="text/css">input[type="text"] { background:#F00; color:#FFF;}</style></head>

<body><input type="text" value="Text" /><input type="password" value="password" /></body></html>

ဆတာက browser မာ ေအာကကလ ျမငရပါမယ။

type=”text” ျဖစေနတာကပ ေျပာငးေပးထားတာက ေတြ႕ႏငပါတယ။

attribute selector က အသးျပတအခါမာေတာ

[attribute_name=attribute_value]

ဆျပး ေလးေထာင ကြငးန႕ အသးျပႏငပါတယ လ႕ ေျပာရငး နဂး ခပလကပါတယ။


110

What Next ?HTML န႕ CSS က ေလလာျပးတအခါမာေတာ ထပျပးေတာ javascript , jquery တ႕က ေလလာသငပါတယ။ အခ ကၽြနေတာ ေရးထားခတ စာအပ က HTML 4 န႕ CSS 2 ပ ရပါေသးတယ။ ဒါေၾကာင HTML 5 န႕ CSS 3 က လညး ေလလာသငပါတယ။ HTML 5 န႕ CSS 3 မာ ပမေကာငးမြနတ feature ေတြ အေျမာကအျမား ပါဝငပါတယ။ javascript , jquery တ႕က တတကြမးထားတ အခါမာ HTML , CSS တ႕န႕ တညေဆာကတ website ထကပ ျပးေကာငးမြန ေအာင လပလ႕ရလာပါတယ။ ဒါေၾကာင စာအပဖတျပးသြားတ အခါမာ ရပမေနပ အသစသစေတြက ထပမေလလာျပး လပ ေကာငးမြနတ web site ေတြ တညေဆာကႏငၾကပါေစဗာ။


111

css for stater

Documents