Learning Css by Saturngod

Learning CSS

written by Saturngod at http://www.mysteryzillion.com/forum/ CSSဆတာ Copyright by www.mysteryzillion.com

သငယခငးမားခငဗာ ! AခေဖာျပထားတAေၾကာငးAရာမားဟာ www.mysteryzillion.com/forum ထက ျဖစပါတယ . . ျမနမာလငယေတြ ကြနျပတာနညးပညာပငးမာ ပမစတပါ၀ငစား ေလလာလကစားႏငေAာင ေAာကပါရညရြယခကေကာငးမားန႕ တညေထာငထားတ စကား၀ငးျဖစပါတယ . .

ကၽြနေတာတ႕ MYSTYER ZILLION COMPUTER FORUM က... Computer ပငးတြင AခကAချဖစေနသမား... Computer ပငးက စတငေလလာသမား... Computer ပငးတြင ေဆြးေႏြးလသမား... Computer ပငးတြင နညးပညာျဖန႔ေ၀လသမား... ႏင Computer ပငးႏငသကဆငေသာ နယပယေလးတစခက ကၽြနေတာတ႕ တညေဆာကထားျခငးျဖစသည

ျမနမာမား စတခမးသာကယခမးသာစြာျဖင.... ဗဟသတ ၊ ပညာမား တးတကေစလေသာေၾကာင... ကၽြနေတာတ႕ ၾကးစားျပး တညေဆာကထားျခငးပင … Member မား ၊ လာေရာကေလလာသမား Aားလး စတေရာလေရာ ကနးမာခမးသာပါေစ ခငဗာ...

ဒလေနရာမးက ေမာလငေနတာၾကာျပမ႕ . . ၀မးေျမာက၀မးသာန႕ၾကဆမပါတယခငဗာ. . ျမနမာလငယေတြက Chatting န႕ Social Website ေတြၾကားထကေန ဆြထတေပးႏငမယလ႕ ယၾကညမပါတယ . .

Aခေလလာၾကရမယ CSS ဆတာ ကေရးသားထားသကေတာ႕ က Saturngod ျဖစပါတယ . .

ဒဖငန႕ Aထမာပါတ AေၾကာငးAရာမားန႕ ပတသကျပး စာေရးသ က Saturngod ရ႕သေဘာထားန႕ ေစတနာက ေကာကႏႈတေဖာျပထားပါတယ . . ရပါတယ... သမားေတြက လညး ဗဟသတရေAာင မေ၀ႏငရင Aေကာငးဆးေပါ...

ဗဟသတ ရရျပး ကၽြနေတာတ႕ ျမနမာေတြ တးတကလာေAာင ဖြငထားတာပါ.. . . . တျခားေတာတ လေတြ မေ၀တာလညး ရႏငေAာငဖြငထားတာပါ . . . ဒ Forum က ဟာေတြက စးပြားျဖစမဟတပ... ဗဟသတ ရရေAာင မေ၀ေပးခငတယဆရငေတာ ခြငျပတာေပါဗာ . . .

Aေသးစတသခငရငေတာ႕ . http://www.mysteryzillion.com/forum/showpost.php?p=80&postcount=10 မာဆကဖတႏငၾကပါတယ . . ပညာလလားၾကတ သငယခငးမားAားလး ကယစတႏလးေAးခမးရႊငလနးျပး ယခထကပျပးေလ႕လာ သငယႏငရငး တငးျပညန႕လမးAကးက ဆထကထမးပး တးတကထမးေဆာငႏငၾကပါေစလ႕ ဆမြနေကာငးေတာငးေပးလကပါတယ ခငဗာ . . .

Learning CSS


Css ဆတာ CSS ဆတာ Cascading Style Sheets ပါ။ သက web design Aတြကသးပါတယ.. ဘယလသးလဆရင သ႕က external File Aေနန႕ေရာ ၊ HTML ထလညး ေရာျပးသးႏငပါတယ... Adding Style to a selection of Text <p>This is normal styleing <p style="font-family:Verdana">This is Verdana A ဒါကေတာ ရးရးေလးသးတာေပါ... Style ရ႕ Font က ေျပာငးလကတာပါ... The <span>Tag <span> tage ကေတာ HTML ပသးတသေတြ သးတာရားတယ.. သက စာတစေၾကာငးတညးမာပ style ေတြေျပာငးခငလ႕သးတာမားတယ... <p>This is normal style, this selection use span tag <span style="font-family:verdana">This is verdana</span> က...A ဒါေလးက run လကရငသမာပါ... This is verdan တစခပ စာလးေျပာငးသြားမာပါ.. Using Internal Style Sheet Class class ကေတာ element A မးA စားမားၾကးA တြက style တစခပသးခငရင A သးျပပါတယ... <span class="myhead"> ဆျပးA သးျပႏငပါတယ.. .myhead { font-family:verdana; color:red; } ID ID ကေတာ class A တငးပါပ... ဒါေပမယ သ႕က သးခငရငေတာ id="myhead" ဆျပးသးရပါတယ... #myhead { font-family:verdana; color:red; } က..A ခ internal သးပေလးစလကရေA ာင <style type="text/css"> </style> A လမးေရးရပါတယ.. Uပမာ <style type="text/css">

Learning CSS


.myhead { font-family:verdana; color:red; } </style> ဆျပးေရးသားရပါတယ.. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> .myhead { font-family:verdana; color:red; } #myid { font-family:verdana; color:blue; } </style> </head> <body> <span class="myhead">This is span tag class</span> <span id="myid">This is span tag id</span> </body> </html> A လဆရင this is span tag class က verdana font A နေရာငျဖစေနလမမယ... this is span tag id ကေတာ A ျပာေရာငေပါ...

Learning CSS


HTML Tag ႏင CSS ကၽြနေတာတ႕ CSS က html tag ေတြမာလညး ေရာသးလ႕ရပါတယ... ကၽြနေတာဆလတာက body , a , td A လ tage ေတြA တြကပါ... <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> body { font-family:Zawgyi-one; color:green; // not a name of sone ma :) } .myhead { font-family:verdana; color:red; } #myid { font-family:verdana; color:blue; } </style> </head> <body> This is green color <span class="myhead">This is span tag class</span> <span id="myid">This is span tag id</span> This is body message </body> </html> ဒါဆရငေတာ This is green color န႕ This is body message ေတြက A စမးေရာငA ေနန႕ ေပၚေနပါမယ... Link with CSS .link {

Learning CSS


text-decoration:none } <a href="test.html" class="link">Home</a> A ဒါဆရင ကၽြနေတာတ႕ သးလကတ Home မာ ေA ာကမာ မUးသားထားသာက ေတြ႕ရမာမဟတေတာဘး... ဘာျဖစလ႕လညးဆကၽြနေတာတ႕ttext-decoration:noneလ႕ေရးသားထားခလ႕ပါ.. <html><head><title>CSS</title><head> <style> .link , .link:visited { text-decoration:none } .link:hover { color:green; text-decoration:underline; } </style></head> <body> <a href="test.html" class="link">Home</a></body> </html> ဒါဆရငေတာ တမးဆနးသြားတာေပါ... .link:visited ဆတာ ကယသြားျပးတ link လညး .link န႕ တတပျဖစခငလ႕ comma ချပးေရးလကတာပါ... .link:hover ဆတာကေတာ mouse တငလကရင ျဖစသြားမယ style ပါ... ဒမာဆရငေတာ A ေရာငက A စမးေရာငျဖစသြားမယ... underline တားမယ...A လေလးေပၚလာပါလမမယ... <html><head><title>CSS</title><head> <style> a , a:visited { text-decoration:none; } a:hover { color:green; text-decoration:underline; } .link , .link:visited { color:green;

Learning CSS


text-decoration:underline; } .link:hover { text-decoration:none; } </style></head> <body> <a href="test.html">Home</a> <a href="test.html">Home2</a> <a href="test.html" class="link">Link</a> </body> </html> ကဒါဆရငေတာ a tage မနသမရ႕ style က တစပစတညးထားခငးပါတယ.. link မာေတာ style ထညခပါတယ... class သးတ တစခပပေျပာငးေနပါမယ.. ကနတာကေတာ a tage style A တငးေပါ... h1 { text-transform:uppercase; } A လေလး style tage ထမာေရးျပး <h1>hello</h1> လ႕ေရးထားခရငေတာ HELLO ဆျပးေပၚေနပါမယ... A ...A ဒလ သးရမယ function ေလးေတြက ဘယလသလဆရငေတာ dreamweaver မာ auto ပါျပးသားပါ.. h1 { ျပးေတာ space ျခားလကတာန႕ ေပၚလာပါမယ... ေရြးလကရပ... ကဒါဆရင HTML Tage ေတြမာသးလ႕ရတာသေလာကျပထငတယ... ဒထကနညနညးျမငတ A ပငးေလးေတြ မၾကာခငသြားေတာမယ... }

Div PHP Code: <html> <head> <title>CSS</title> <style> .mydiv { background-color:#009966; color:#FFFFFF; } </style> </head>

Learning CSS


<body> Div tags <div class="mydiv"> This is div tage using class mydiv and this back ground is 009966 and font color is white. </div> </body> </html> ကၽြနေတာတ႕ mydiv ဆတ A ထမာ background-color ဆျပး background color ကထညထားခတယ... စာလးA ေရာငကေတာ A ျဖေရာငေပါ... ဒါေပမယ စာေတြဟာ Div tags ေA ာကကေရာကေနတယ... ဘာျဖစလ႕လညးဆရင Div ဟာ page ရ႕ width တစခလးက ယလကပါတယ... သ႕ဘာသာ သးသန႕ A ေနန႕ေပါ... တစေၾကာငးတညးျဖစခငရငေတာ <div></div> A စား <span></span> သးလ႕ရတယ.. span tag ကေတာ တစေၾကာငးမဆငးဘး... သ႕ style ကေတာ စာလးရသေလာကပ effect ျဖစမာပါ... page width တစခလးျဖစမာမဟတဘး.. PHP Code: <html> <head> <title>CSS</title> <style> .mydiv { background-color:#009966; color:#FFFFFF; width:100px; } .mydiv2 { position:absolute; background-color:#006666; color:#FFFFFF; width:100px; top:50px; left:180px; } </style> </head> <body> Div tage <div class="mydiv"> This is div tage using class mydiv and this back ground is 009966 and font color is white. </div> <div class="mydiv2"> This is div tage using class mydiv and this back ground is 009966 and font color is white. </div> </body> </html> ဒ coding မာဆ div tag ရ႕ A သး၀ငပ A နညးငယကေတြ႕ရမာပါ... mydiv ရ႕ width က ကန႕သတလကတယ.. 100px ပေပးေတာတယ...

Learning CSS


ေနာက mydiv2 ေရာကေတာ postion ဟာ HTML စာေပၚမာ မမတညေတာဘး... ကယပင A ကြာA ေ၀းေတြထညလကတယ... A လမးကယပင A ကြာA ေ၀းေတြ သးလ႕ရေA ာ position က absolute လ႕ေျပာငးထားခရတယ.. ေနာကျပးမ browser A ေပၚကေန A ကြာA ေ၀းန႕ left A ကြာA ေ၀းေတြထညလကတယ... PHP Code: <html> <head> <title>CSS</title> <style> .mydiv { background-color:#009966; color:#FFFFFF; width:100px; border:#00FF99 1px solid; } .mydiv2 { position:absolute; background-color:#006666; color:#FFFFFF; width:100px; top:31px; left:326px; border:rgb(200,10,30) 5px solid; } </style> </head> <body> Div tage <div class="mydiv"> This is div tage using class mydiv and this back ground is 009966 and font color is white. </div> <div class="mydiv2"> This is div tage using class mydiv and this back ground is 009966 and font color is white.</div> </body> </html> ကၽြနေတာတ႕ border ဆတာက ထပျဖညလကတယ... border:#00FF99 1px solid; A ဒသေဘာကေတာ ေရ႕က A ေရာင ေနာကျပးေတာ A ထ A သးျပမညပစေတြ႕ေပါ... A ေရာငက ဘယလသတမတလဆ hex color ပါ... 0 ကေန F A ထရတယ... 9 ျပးရင A, B, C, D ,E, F ဆျပးေျပာငးသြားပါတယ.. A သးျပတာကေတာ RGB ပါ... ေရ႕ႏစလးက RED ျပးေတာ Green ေနာကဆးကေတာ Blue ေပါ... A ဒလ color ေတြက A လြတမတစရာမလပါဘး... photoshop ကေနၾကညလကလ႕ရပါတယ.. hex color ကမၾကကဘးဆရငေတာ rgb(255,255,255) A လပစသးႏငပါတယ.. သကေတာ 0 ကေန 255 ထေပါ.. hex color မာ A မညးက #000000 A ျဖကေတာ #FFFFFF ပါ... rgb မာကေတာ rgb(0,0,0) ကေတာ A မညးျဖစျပး A ျဖကေတာ rgb(255,255,255) ပါ...

Learning CSS


border မာ solid A ျပငဘာေတြရေသးလဆရငေတာ မပပါန႕ dreamweaver မာ ေရြးလကရပ... <style> ခ ါတငးဆ style ရ႕ေနာကမာ "text/css" ဆတာပါတယ.. မထညလရတယေပါ... <meta http-equiv="content-type" content="text/html; charset=utf-8"/> page မာ A သးျပမည ပစကေျပာတပါ.. charset ဆတာက A သးျပမယ character set ေပါ.. unicdoe ဆရင unf-8 iso ကေတာ english စာA တြကေပါ.. dream weaver မာ page properties -> encoding မာ ေရြးလကရန႕ရပါတယ.. A ဒါမပါလညး ဘာမ မျဖစပါဘး... <style> လ႕ပေရးရင ရပါတယ... text/css က မပါရင လညး ရပါတယ..

Background Image က..ဒေန႕ေတာ background images ပငးေလးေပါ... PHP Code: <head> <title>Untitled Document</title> <style> body { background:url(bg.jpg); color:white; } </style> </head> <body> This is use background Image<br> New features Workflow improvements Adobe Bridge Simplify file handling in Photoshop and within Adobe Creative Suite with Adobe Bridge, the next-generation file browser. Efficiently browse, tag, search, and process your images. (See About Adobe Bridge.) Color management improvements Maintain common color settings throughout the Adobe Creative Suite components. Print with the simplified printing interface for color management. (See To synchronize color settings across Adobe applications.) Version Cue® 2.0 Manage files and versions as a single user or in a small workgroup. Integrate with Adobe Bridge to manage files for your Photoshop and Adobe Creative Suite projects. (See Version Cue managed projects.) Enhanced photo capabilities Multi-image Camera Raw Process an entire photo shoot in a fraction of the time. With support for a comprehensive range of digital cameras, you can automatically adjust settings, convert to universal Digital Negative (DNG) format, and apply nondestructive edits to batches of images. (See The Camera Raw plug-in.)

Learning CSS


High Dynamic Range (HDR) Work with images in 32-bits-per-channel, extended dynamic range. Photographers can capture the full dynamic range of a scene with multiple exposures and merge the files into a single image. (See About High Dynamic Range images.) Optical lens correction Correct for lens aberrations such as barrel and pincushion distortion, chromatic aberration, and lens vignetting. Easily correct image perspective using the filter’s grid. (See The Lens Correction filter.) Noise reduction Reduce digital image noise, JPEG artifacts, and scanned film grain. (See Reducing image noise.) Smart Sharpen filter Sharpen images with new algorithms for better edge detection and reduced sharpening halos. Control the amount of sharpening in the highlights and shadows. (See To use the Smart Sharpen filter.) Spot Healing tool Quickly heal spots and blemishes without selecting source content. (See To use the Spot Healing Brush tool.) One-click red-eye correction Fix red eyes with one click. Set options to adjust pupil size and darkening amount. (See To remove red eye.) Blur filters Apply blur effects using new blur filters: Box Blur, Shape Blur, and Surface Blur. (See Blur filters.) Productivity boosters Customizable menus Set up and save custom menus and workspaces, highlight new or commonly used menu items, and reduce on-screen clutter for easier access to the tools you need. (See To define a set of menus.) Image Processor Process a batch of files to multiple file formats. (See About the Image Processor.) All new PDF engine Comprehensive, customizable presets and PDF 1.6/Acrobat 7.0 compatibility. (See Saving files in Photoshop PDF format.) Script and action event manager Set JavaScripts and Photoshop actions to run automatically when a specified Photoshop event occurs. (See To set scripts and actions to run automatically.) UI font size customization Customize the size of text in the options bar, palettes, and the Layer Style dialog box. (See To change the font size in the work area.) Update Manager Automatically search for Photoshop updates. Variables Create data-driven graphics in Photoshop as you now do in ImageReady. (See About data-driven graphics.) Video preview Display your document on a video monitor using a Firewire (IEEE1394) link. (See To preview your document on a video monitor.) WYSIWYG Font menu Preview font families and font styles directly in the Font menu. (See To choose a font family and style.) Designer enhancements Vanishing Point Paste, clone, and paint image elements that automatically match the perspective planes in an image. (See About Vanishing Point.) Smart Objects Perform nondestructive transforms of embedded vector and of pixel data. Create multiple instances of embedded data and easily update all instances at once. (See Smart Objects.) Multiple layer control Work with layers as objects. Select multiple layers and move, group, align, and transform them. (See Selecting layers and To group and ungroup layers.) Image Warp Easily create packaging mock-ups or other dimensional effects by wrapping an image around any shape or stretching, curling, and bending an image using Image Warp. (See The Warp command.) Animation Create animated GIF files in Photoshop much as you create animation in ImageReady. (See Creating an animation.)

Learning CSS


Japanese type features Format text with new character alignment (Mojisoroe) and more Kinsoku Shori types. (See About Asian type.) Smart Guides Align the content of layers as you move them using guidelines that appear only when you need them. (See About guides and the grid.) Integrated Adobe Online Services Access and download professional Adobe Stock Photos and share and print online with Adobe Photoshop Services. (See About Adobe Stock Photos.) </body> </html> ဒ code မာဆရင scroll bar ကဆြခသြားတာန႕ background ပါ လကလာတာေတြ႕မာပါ... A ဒါဆျပသနာတစချဖစတတပါတယ... ဘာလဆရင ကယရ႕ background image က height က 600px ပရပါတယဆပါေတာ... ဆြခလကရင height 600px ေကာရင ပက repeat ျဖစသြားလမမယ... A ဒါဆရငၾကညရဆးတာေပါ.... PHP Code: background:url(bg.jpg) fixed; လ႕သာျပငလကရင ကယရ႕ background က fixed ျဖစသြားမယ.. scroll ဆြခတာန႕ မလကေတာဘးေပါ... PHP Code: background:url(bg.jpg) repeat-x; A ဒါဆရငေတာ ကယရ႕ Image repeat က horizonal သာျဖစေနမယ... scroll ဆြခလကရင ကယ image height ကနသာန႕ background color ေပၚလာေရာ... PHP Code: background:url(bg.jpg) repeat-y; A ဒါဆရငေတာ ကယရ႕ image repeat က vertical ပျဖစေနမာ... PHP Code: .myclass { background:url(bg.jpg) repeat-x; color:white; } #mydiv { background:url(bg.jpg) repeat-x; color:white; } class ေတြေရာ div မာပါသးလ႕ရတယ....

Learning CSS


ပတလမးေၾကာငး File လမးေၾကာငးေတြက တခ႕ေတြက HTML သငတနးက ရႈပျပး နားမလညတာေတြရတယ... ဒါေၾကာင ဒမာ ထပရငးျပပါမယ.. img/image.jpg A ဒါက index.html မာေရးထားတာဆပါဆ႕... A ဒ သေဘာက index.html န႕ img folder န႕က same root ပါ... ဒါေၾကာင img/image.jpg ဆျပး တဆငေခၚရတာ.. imageindex.jpg ဒါဆရငေတာ index.html န႕ image.jpg က same root ထမာရတယလ႕ဆလပါတယ.. ../imageindex.jpg index.html က image ဆတ Folder ေA ာကမာရတယဆပါဆ႕... သက ေခၚခငတာက A ျပငတဆငထြကမယ.. A ျပငတဆငက imageindex.jpg က ေခၚမယလ႕ဆလတာပါ... ../../ ဆရငေတာ up level ႏစခါလပသြားတာေပါ.. ../img/im1.jpg ဆရငေတာ uplevel တစခါလပမယ... ျပးရင img folder ေA ာကက im1.jpg ဆတ ပက ယမယဆတ သေဘာပါ.. PHP Code: <html> <head> <style> .mypadding { padding:15px; border:1px solid #000000; } .mymargin { margin:15px; border:1px solid #000000; } .normal { border:1px solid #FF0000; } </style> </head> <body> <div class="normal"> Normal text <div class="normal"> This is normal div </div> </div>

Learning CSS


<br> <div class="normal"> Normal text <div class="mypadding"> This is padding div </div> </div> <br> <div class="normal"> Normal text <div class="mymargin"> This is mymargin div </div> </div> </body> </html> padding ဆတာ ကေတာ A တြငးA ကြာA ေ၀းပါ။ ေဘာငန႕ စာန႕ A ကြာA ေ၀းေပါ.... margin ကေတာ A ျပငန႕ ေဘာင A ကြာA ေ၀းပါ... A ထကပါ code မာဆရင normal ကေတာ ပမနပါပ.. normal ထမာ normal ထညထားလ႕... border က ထသလျဖစသြားတာပါ.. ေနာကတစခကေတာ normal A ထမာ padding class ကထညထားတယ... border A နကထက စာက border န႕ ေ၀းေနတာက ေတြ႕ရပါမယ... ဘာျဖစလ႕လညးဆရငေတာ padding သးထားလ႕ပါ.. ေနာကတစခကေတာ normal A ထမာ margin class ကထညထားတယ... border ႏစခက ေ၀းေနတာက ေတြ႕ရပါမယ... ဘာျဖစလ႕လညးဆရငေတာ margin သးထားလ႕ပါ.. မမစတၾကက padding-bottom, padding-top, padding-left, padding-right စတာေတြရပါတယ... margin လညးA လေတြရပါတယ.. padding တစခတညးကေတာ A ကနလးက ျခေျပာတာပါ... ဒါမ မဟတ padding: 1px 5px 0px 10px; A ဒါကေတာ top 1px right 5px bottom 0px left 10px လ႕ဆတာပါ... margin လညး A ဒလ သးႏငပါတယ... Finish ဘာေတြကနေသးလေတာ မသဘး.... ကနသေလာကေတာ ရသြားျပ... ကနေနေသးတာ... မသတာေလးေတြ ေမးႏငပါတယဗာ...

Originally posted by Saturngod PDF created by everlearner

22 May 2007, Tuesday Copyright by www.mysteryzillion.com

Documents

Learning Css by Saturngod