Myanmar IT Resource Forum
Myanmar IT Resource Forum
Myanmar IT Resource Forum

You are not connected. Please login or register

Myanmar IT Resource Forum » WEB DEVELOPERS ZONE »   » Cascading Style Sheet » Css ဆိုတာသိချင်လား [Tutorial]

View previous topic View next topic Go down  Message [Page 1 of 1]

bumarhacker

bumarhacker
MITR New User



CSS ဆိုတာ Cascading Style Sheets ပါ။ သူက web design Aတွက်သုံးပါတယ်..
ဘယ်လိုသုံးလဲဆိုရင် သူ့ကို external File Aနေနဲ့ရော ၊ HTML ထဲလည်း ရောပြီးသုံးနိုင်ပါတယ်...
Adding Style to a selection of Text
Code:
<p>This is normal styleing
<p style="font-family:Verdana">This is Verdana
A ဲဒါကတော့ ရိုးရိုးလေးသုံးတာပေါ့...
Style ရဲ့ Font ကို ပြောင်းလိုက်တာပါ...
Code:
The <span>Tag
<span> tage ကိုတော့ HTML ပဲသုံးတဲ့သူတွေ သုံးတာရှားတယ်..
သူက စာတစ်ကြောင်းတည်းမှာပဲ style တွေပြောင်းချင်လို့သုံးတာများတယ်...
Code:
<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 သုံးပြုနိုင်ပါတယ်..
Code:
.myhead
{
font-family:verdana;
color:red;
}
ID
ID ကတော့ class A တိုင်းပါပဲ... ဒါပေမယ့် သူ့ကို သုံးချင်ရင်တော့ id="myhead" ဆိုပြီးသုံးရပါတယ်...
#myhead
{
font-family:verdana;
color:red;
}
ကဲ..A ခု internal သုံးပုံလေးစလိုက်ရေA ာင်
Code:
<style type="text/css">
</style>
A ဲလိုမျိုးရေးရပါတယ်..
Uပမာ
Code:
<style type="text/css">
Learning CSS
written by Saturngod at http://www.bumarhacker.com/forum/ CSSဆိုတာ
Copyright by [You must be registered and logged in to see this link.]
.myhead
{
font-family:verdana;
color:red;
}
</style>
ဆိုပြီးရေးသားရပါတယ်..
Code:
<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
written by Saturngod at [You must be registered and logged in to see this link.] CSSဆိုတာ
Copyright by [You must be registered and logged in to see this link.]
HTML Tag နှင့် CSS
ကျွန်တော်တို့ CSS ကို html tag တွေမှာလည်း ရောသုံးလို့ရပါတယ်...
ကျွန်တော်ဆိုလိုတာက body , a , td A ဲလို tage တွေA တွက်ပါ...
Code:
<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 နေနဲ့
ပေါ်နေပါမယ်...
Code:
Link with CSS
.link
{
Learning CSS
written by bumarhacker at http://www.bumarhacker.com/forum/ CSSဆိုတာ
Copyright by [You must be registered and logged in to see this link.]
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 ဲလိုလေးပေါ်လာပါလိမ့်မယ်...
Code:
<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
written by bumarhacker at http://www.bumarhacker.com/forum/ CSSဆိုတာ
Copyright by [You must be registered and logged in to see this link.]
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 ပိုင်းလေးတွေ မကြာခင်သွားတော့မယ်...
Code:
}
Div
PHP Code:
<html>
<head>
<title>CSS</title>
<style>
.mydiv
{
background-color:#009966;
color:#FFFFFF;
}
</style>
</head>
Learning CSS
written by bumarhacker at http://www.bumarhacker.com/forum/ CSSဆိုတာ
Copyright by [You must be registered and logged in to see this link.]
<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 တစ်ခုလုံးဖြစ်မှာမဟုတ်ဘူး..
Code:
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
written by bumarhacker at [You must be registered and logged in to see this link.] CSSဆိုတာ
Copyright by [You must be registered and logged in to see this link.]
နောက် mydiv2 ရောက်တော့ postion ဟာ HTML စာပေါ်မှာ မူမတည်တော့ဘူး... ကိုယ်ပိုင်
A ကွာA ဝေးတွေထည့်လိုက်တယ်... A ဲလိုမျိုးကိုယ်ပိုင် A ကွာA ဝေးတွေ သုံးလို့ရေA ာ် position ကို
absolute လို့ပြောင်းထားခဲ့ရတယ်.. နောက်ပြီးမှ browser A ပေါ်ကနေ A ကွာA ဝေးနဲ့ left
A ကွာA ဝေးတွေထည့်လိုက်တယ်...
Code:
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
written by bumarhacker at [You must be registered and logged in to see this link.] CSSဆိုတာ
Copyright by [You must be registered and logged in to see this link.]
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 ပိုင်းလေးပေါ့...
Code:
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 Cre
ative Suite with Adobe Bridge, the nextgeneration
file browser. Efficiently browse, tag, search, and process
your images. (See About Adobe Bridge.)
Color management improvements Maintain common color settings througho
ut the Adobe Creative Suite components. Print with the simplified pri
nting interface for color management. (See To synchronize color setti
ngs across Adobe applications.)
Version Cue®️ 2.0 Manage files and versions as a single user or in a s
mall workgroup. Integrate with Adobe Bridge to manage files for your
Photoshop and Adobe Creative Suite projects. (See Version Cue managed
projects.)
Enhanced photo capabilities
Multiimage
Camera Raw Process an entire photo shoot in a fraction of the t
ime. With support for a comprehensive range of digital cameras, you c
an automatically adjust settings, convert to universal Digital Negati
ve (DNG) format, and apply nondestructive edits to batches of images.
(See The Camera Raw plug-in.)
Learning CSS
written by Saturngod at http://www.mysteryzillion.com/forum/ CSSဆိုတာ
Copyright by [You must be registered and logged in to see this link.]
High Dynamic Range (HDR) Work with images in 32-bits-perchannel,
extended dynamic range. Photographers can capture the full d
ynamic range of a scene with multiple exposures and merge the files i
nto a single image. (See About High Dynamic Range images.)
Optical lens correction Correct for lens aberrations such as barrel a
nd pincushion distortion, chromatic aberration, and lens vignetting.
Easily correct image perspective using the filter’s grid. (See The Le
ns Correction filter.)
Noise reduction Reduce digital image noise, JPEG artifacts, and scan
ned film grain. (See Reducing image noise.)
Smart Sharpen filter Sharpen images with new algorithms for better ed
ge detection and reduced sharpening halos. Control the amount of shar
pening in the highlights and shadows. (See To use the Smart Sharpen f
ilter.)
Spot Healing tool Quickly heal spots and blemishes without selecting
source content. (See To use the Spot Healing Brush tool.)
One-click redeye
correction Fix red eyes with one click. Set options to adjust pup
il size and darkening amount. (See To remove red eye.)
Blur filters Apply blur effects using new blur filters: Box Blur, Sha
pe Blur, and Surface Blur. (See Blur filters.)
Productivity boosters
Customizable menus Set up and save custom menus and workspaces, highl
ight new or commonly used menu items, and reduce onscreen
clutter for easier access to the tools you need. (See To defin
e a set of menus.)
Image Processor Process a batch of files to multiple file formats. (S
ee About the Image Processor.)
All new PDF engine Comprehensive, customizable presets and PDF 1.6/Ac
robat 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 T
o 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 fon
t size in the work area.)
Update Manager Automatically search for Photoshop updates.
Variables Create datadriven
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 Firewi
re (IEEE1394) link. (See To preview your document on a video monitor.
)
WYSIWYG Font menu Preview font families and font styles directly in t
he Font menu. (See To choose a font family and style.)
Designer enhancements
Vanishing Point Paste, clone, and paint image elements that automatic
ally match the perspective planes in an image. (See About Vanishing P
oint.)
Smart Objects Perform nondestructive transforms of embedded vector an
d of pixel data. Create multiple instances of embedded data and easil
y update all instances at once. (See Smart Objects.)
Multiple layer control Work with layers as objects. Select multiple l
ayers and move, group, align, and transform them. (See Selecting laye
rs and To group and ungroup layers.)
Image Warp Easily create packaging mockups
or other dimensional effects by wrapping an image around any shap
e 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 a
nimation in ImageReady. (See Creating an animation.)
Learning CSS
written by Saturngod at http://www.mysteryzillion.com/forum/ CSSဆိုတာ
Copyright by [You must be registered and logged in to see this link.]
Japanese type features Format text with new character alignment (Moji
soroe) and more Kinsoku Shori types. (See About Asian type.)
Smart Guides Align the content of layers as you move them using guide
lines that appear only when you need them. (See About guides and the
grid.)
Integrated Adobe Online Services Access and download professional Ado
be Stock Photos and share and print online with Adobe Photoshop Servi
ces. (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
written by Saturngod at [You must be registered and logged in to see this link.] CSSဆိုတာ
Copyright by [You must be registered and logged in to see this link.]
ပတ်လမ်းကြောင်း
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 ဆိုတဲ့
ပုံကို ယူမယ်ဆိုတဲ့ သဘောပါ..
Code:
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
written by Saturngod at http://www.mysteryzillion.com/forum/ CSSဆိုတာ
Copyright by [You must be registered and logged in to see this link.]
<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
ဘာတွေကျန်သေးလဲတော့ မသိဘူး....
ကုန်သလောက်တော့ ရှိသွားပြီ...
ကျန်နေသေးတာ...
မသိတာလေးတွေ မေးနိုင်ပါတယ်ဗျာ...


[You must be registered and logged in to see this link.]



တတ်ချင်ရင် ...........................သင်
တော်ချင်ရင် ..........................ကျင့်
မမေ့ချင်ရင် .........................စိတ်ဝင်စား
မှားချင်ရင် ..........................ပြန်စစ်
အောင်မြင်ချင်ရင် ..........................၀ရိ၇ထား

bumarhacker

bumarhacker
MITR New User



၀န်ခံချက်.........ကျွန်တော်အီးဘုတ်တခုကိုပြန်ဖြည်ပေးထားတာပါ

nay@zaw

nay@zaw
VIP Member



VIP Member
CSS ဆိုတာတကယ်တော့ ဘာမှ သိပ်မရှုပ်ထွေးပါဘူး / selector ဆိုတာကိုသိရမယ် ။
selector ဆိုတာ CSS ရဲ့အသက်ပဲ ။
selector တခုမှာ property နဲ့ value ပါတာကိုနားလည်ရမယ် ။
နောက်
1. selector ကိုသုံးမျိုး ခွဲသုံးလို့ရတယ်ဆိုတာသိရမယ် ။
2. internal css နဲ့ external css အကြောင်း သေချာသိရမယ်

ဒါဆိုရင် CSS တော်တော် လွယ်သွားပါပြီ Smile

linnlinn

linnlinn
MITR New User



သိပ်မရှင်းဘူးအကိုရာ

သီရိ

သီရိ
MITR New User



HTML ကိုမသိတဲ့သူတစ်ယောက်က css ကိုနားလည်နိုင်မယ်မထင်ဘူး.. Smile

CSS ကိုသိချင်ရင် HTML ကိုအရင်လေ့လာရမယ်
CSS ဆိုတာ HTML ကို decoration လုပ်တဲ့ code တစ်မျိုးပဲ
HTML က web page တွေကိုမြင်နိုင်အောင်ရေးတာ...
CSS ဆိုတာက အဲ့ဒီ web page တွေကို အလှဆင်တာပါ။

CSS ကလည်း language တစ်မျိုးလိုပဲ .. သူ့ rules တွေရှိပါတယ်။
selectors, property, value တို့ဆိုတာက သူ့ရဲ့ syntax ပါ။

သူ့ရဲ့ syntax က ဒီလိုပါ။
selector {property:value;}

h1 {font-size:30px;}

h1ဆိုတာကselector
font-size ကတော့ property ပါ
30px ဆိုကတော့ value ပါ
==============
နားလည်မယ်ထင်ပါတယ်။ Very Happy

alt.332

alt.332
Administrator



Administrator
သိတဲ့သူတွေ ဆက်ရေးကြပါနော်...ကျွန်တော့်လို မသိတဲ့ကောင်ကတော့ ဘေးကထိုင်ကြည့်ပြီးအားပေးမယ်....အတော်လေး စုံသွားရင် E-book လုပ်လိုက်မယ်.. Smile

http://www.myanmaritresource.info

alt.332

alt.332
Administrator



Administrator
သြော်...ဒါ့ကြောင့် A နောက်ပစ်လေးတွေ မြင်ဖူးပါတယ်လို့ လက်စသတ်တော့ Ctrl C V သမားပဲကိုး...ကျန်တဲ့ တိတိကျကျ CSS ကိုသိတဲ့သူတွေ ၀င်ရေးပေးကြပါနော်..ဒုတိယမိ ထပ်တိုက်တွန်းပါတယ်...

http://www.myanmaritresource.info

K0ht3t

K0ht3t
Moderator



Moderator
ဟုတ်တယ်လေ .. သူအောက်မှာပြောတယ်လေ .. သူက Ebook တစ်ခုကို ပြန်ဖြည်ပေးထားတာပါတဲ့ ပြောထားတယ်.. Smile Smile Smile Smile

SkipSoft

SkipSoft
MITR New User



Now, I am written CSS3
Code:
http://www.myanmaritresource.info/css-f30/five-effect-of-css3-t2049.htm



Last edited by ET on 17th August 2011, 10:09 am; edited 2 times in total (Reason for editing : Link ပြင်လိုက်ပါတယ်အစ်ကို)

yay zet

yay zet
MITR New User



css ဆိုတာ သိပ်တော့ နားမလည်သေးပါဘူး
တော်ပီတော့ လုပ်သွားပါတယ်

အိမ်ရောက်မှ ကောင်းကောင်းလေး ခိုင်းကြည့်ဦးမယ်
သူကပဲ ကိုယ့်ကို ပြန်ခိုင်းမလား
ကိုယ်ကပဲ သူကို ခိုင်းနိုင်မလားပေါ့
တွေ ့ကြတာပေါ့

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

Myanmar IT Resource Forum » WEB DEVELOPERS ZONE »   » Cascading Style Sheet » Css ဆိုတာသိချင်လား [Tutorial]

Permissions in this forum:
You cannot reply to topics in this forum

 

Free forum | ©phpBB | Free forum support | Report an abuse | Cookies | Forumotion.com