Pages

▼

Pages

▼

css_9


List Style
CSS List ေတြကိုေတာ့ ေသခ်ာေလ့လာပါ၊ ဒီမွာအေျခခံ ေကာင္းေကာင္း သင္ေပးမယ္၊ ဒါေပမယ့္ တကယ္ကၽြမ္းက်င္ျပီး အေကာင္းဆံုး
အသံုးခ်ႏိုင္ေအာင္ေတာ့ ကိုတိုင္ေလ့လာပါ၊ အလွဆံုး အသံုးခ်ျပထားတဲ့ CSS List Style ေတြကိုေတာ့ 72coder.com ရဲ့
လက္ေတြ႔သင္ခန္းစာေတြမွာေသခ်ာေလ့လာပါ၊
HTML မွာေတာ့ List style ႏွစ္မ်ိဳးရွိပါတယ္၊
  • unordered lists - အစီအစဥ္မက်တဲ့ သေကၤသပံုစံ ေတြနဲ႔ ဖြဲ႔ စည္းထားတဲ့ List
  • ordered lists -  အစီအစဥ္က်တဲ့ပံုစံနဲ႔ ဖြဲ႔ စည္းထားတဲ့ လင့္ Style ပါ၊
ဒါေပမယ့္ CSS ကိုသံုးျပီးေတာ့ List Style ကိုပိုမိုထိေရာင္ေအာက္ အလွဆင္ႏိုင္ပါတယ္၊ နားလည္သြားေအာင္လက္ေတြ႔ List တစ္ခုတည္ေဆာက္လိုက္မယ္၊
အဲ့ဒီ့ List ကို class ခြဲမယ္၊ ျပီးရင္ အဲ့ဒီ့ class ကို CSS နဲ႔ ေခၚျပီး ျပဳျပင္မယ္၊
HTML Document
<html>
<head>
<link href= "coder.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul class = "a">
<li> car </li>
<li> bar</li>
<li> far </li>    
</ul>
</html>

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

အထက္က ဖိုင္ႏွစ္ခုကို Run ၾကည့္လိုက္၊ ဒါဆိုရင္ေတာ့ ေအာက္က အတိုင္း စက္၀ိုင္းေလးေတြနဲ႔ ေဖာ္ျပတဲ့ list ကိုေတြ႔ရမယ္၊


အထက္က ဖိုင္ကိုေသခ်ာၾကည့္ရင္ CSS ရဲ့ List Style မွာ ul.a {list-style-type:circle;} ဆိုျပီး HTML Doucment က class a မွာရွိတဲ့ List ေတြကို circle
ပံုစံေျပာင္းမယ္လို႔ အမိန္႔ေပးထားတဲ့ အတြက္ စက္၀ိုင္းပံုစံ List Style ကိုေတြ႔ရမယ္၊ သံုးထားတဲ့ Property ကေတာ့ list-style-type ပါ၊
အခု အထက္က HTML Document ထဲမွာပဲ ေနာက္ထပ္ စာရင္းတစ္ခုထပ္ထည့္မယ္၊ အဲ့ဒီ့ စာရင္းကို class = “b” လို႔သတ္မွတ္မယ္၊ ေအာက္မွာၾကည့္ပါ၊
HTML Document
<html>
<head>
<link href= "coder.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul class = "a">
<li> car </li>
<li> bar</li>
<li> far </li>    
</ul>
<ul class = "b">
<li> how </li>
<li> now</li>
<li> brown </li>           
</ul>
</html>

CSS File
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
အထက္က ဖိုင္ႏွစ္ခုကို Run ၾကည့္လိုက္၊ ဒါဆိုရင္ေတာ့ ေအာက္က အတိုင္း ဒုတိယ ထပ္ထည့္လိုက္တဲ့ class= “b” ရဲ့ List Style ကို ေလးေထာင့္ကြက္
(Square) ေလးေတြနဲ႔ ေဖာ္ျပေန တာကိုေတြ႔ရမယ္၊


အထက္က ဖိုင္ကိုေသခ်ာၾကည့္ရင္ CSS ရဲ့ List Style မွာ ul.b {list-style-type:square;} ဆိုျပီး HTML Doucment က class b မွာရွိတဲ့ List ေတြကို
square ေလးေထာင့္  ပံုစံေျပာင္းမယ္လို႔ အမိန္႔ေပးထားတဲ့ အတြက္ ေလးေထာင့္ပံုစံ List Style ကိုေတြ႔ရမယ္၊ သံုးထားတဲ့ Property ကေတာ့
list-style-type ပါ၊
အခု အထက္က HTML Document ထဲမွာပဲ ေနာက္ထပ္ စာရင္းတစ္ခုထပ္ထည့္မယ္၊ အဲ့ဒီ့ စာရင္းကို class = “c” လို႔သတ္မွတ္မယ္၊ ဒီတစ္ခါ HTML
ဖိုင္ထဲကိုထည့္မွာက  ordered list ျဖစ္တဲ့ အစီအစဥ္တစ္က် စရင္းကိုထည့္မွာ၊ ေအာက္မွာၾကည့္ပါ၊
ံHTML Document
<html>
<head>
<link href= "coder.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul class = "a">
<li> car </li>
<li> bar</li>
<li> far </li>    
</ul>
<ul class = "b">
<li> how </li>
<li> now</li>
<li> brown </li>           
</ul>
<ol class = "c">
<li> fit </li>
<li> gig</li>
<li> hit </li>    
</ol>
</html>

CSS File
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
အထက္က ဖိုင္ႏွစ္ခုကို သိမ္းျပီး Run ၾကည့္လိုက္ရင္ေတာ့ odered list ရဲ့ class A လို႔နာမည္ေပးထားတဲ့ အုပ္စုထဲက စာရင္းေတြအားလံုး က ေရာမ
အကၡရာေတြျဖစ္ေနမယ္၊ ေအာက္က အတိုင္း


အထက္မွာေတာ့ ordered List ျဖစ္တဲ့ class “c” က စာရင္းေတြကို ေရာမ အကၡရာနဲ႔ ေဖာ္ျပေနမယ္၊ အေၾကာင္းကေတာ့ အဲ့ဒီ့စာရင္းေတြကို ol.c {list-
style-type:upper-roman;} ဆိုျပီး List style မွာ ေရာမအကၡရာ စာလံုးၾကီးထည့္လို႔ အမိန္႔ေပးထားလို႔ပါ၊ သံုးတဲ့ Property က list-style-type ျဖစ္ျပီး
value ကိုေတာ့ upper-roman လို႔ထည့္လိုက္တယ္၊ lower-roman လို႔ထည့္ရင္ျဖင့္ List style မွာ ေရာမအကၡရာ စာလံုး အေသးကိုေတြ႔ရပါမယ္၊
အထက္က HTML Document ထဲမွာပဲ ေနာက္ထပ္ List style တစ္မ်ိဳးကိုထပ္ျပီး စမ္းသပ္ၾကည့္မယ္၊ list style class ကို “c” လို႔သတ္မွတ္ထားျပီး
တည္ေဆာက္လိုက္၊ပါ၊ ေအာက္က အတိုင္း
ံHTML Document
<html>
<head>
<link href= "coder.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul class = "a">
<li> car </li>
<li> bar</li>
<li> far </li>    
</ul>
<ul class = "b">
<li> how </li>
<li> now</li>
<li> brown </li>           
</ul>
<ol class = "c">
<li> fit </li>
<li> gig</li>
<li> hit </li>    
</ol>
<ol class = "d">
<li> fit </li>
<li> gig</li>
<li> hit </li>    
</ol>
</html>

CSS file
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;}
အထက္က ဖိုင္ႏွစ္ခုကိုေရးျပီး Run လိုက္ရင္ေအာက္က အတိုင္း ၀က္ဆိုက္စာမ်က္ႏွာကိုရမယ္၊


အထက္က ေနာက္ဆံုးထည့္လိုက္တဲ့ calss “d” က list ေတြကို အဂၤလိပ္အကၡရာ အေသးပံုစံနဲ႔ ေတြ႔ရမယ္၊ အေၾကာင္းကေတာ့ အဲ့ဒီ့စာရင္းေတြကို ol {list-
style-type:lower-alpha;} ဆိုျပီး List style မွာ အဂၤလိပ္ အကၡရာ စာလံုးေသးထည့္လို႔ အမိန္႔ေပးထားလို႔ပါ၊ သံုးတဲ့ Property က list-style-type ျဖစ္ျပီး
value ကိုေတာ့ lower-alpha လို႔ထည့္လိုက္တယ္၊ lower-alpha မွာ alpha က alphabet ရဲ့ အတိုေကာက္ျဖစ္ျပီး အဂၤလိပ္အကၡရာ အေသးထည့္လို႔
အမိန္႔ေပးလိုက္တာပါ၊အဂၤလိပ္အကၡရာ အၾကီးထည့္ခ်င္ရင္ျဖင့္ upper-alpha လို႔ထည့္ႏိုင္ပါတယ္၊


အထက္မွာ သင္ျပခဲ့တာကေတာ့ ordered List နဲ႔ unordered list တို႔ကို သေကၤသေတြ အကၡရာေတြအျဖစ္သတ္မွတ္နည္းပါ၊ ဒီ့ အျပင္ ဓာတ္ပံုေတြကိုလဲ
List Style မွာထည့္သံုးလို႔ရပါတယ္၊ ေအာက္က ပံုကိုထည့္သံုးျပမယ္၊


css lesson 8 pic 5
အထက္က ပံုကို List Style အျဖစ္အသံုးျပဳျပမယ္၊ ပံုရဲ့နာမည္ကိုေတာ့ bulb.png လို႔ေပးထားတယ္၊ အခု HTML Document ကိုစေရးမယ္၊ ေအာက္က အတိုင္း
ံHTML Document
<html>
<head>
<link href= "coder.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul class = "a">
<li> car </li>
<li> bar</li>
<li> far </li>    
</ul>
</html>

CSS File
ul.a {list-style:url(bulb.png);}
အထက္က ဖိုင္ႏွစ္ဖိုင္လံုးကိုေရးျပီးသိမ္းလိုက္ရင္ျဖင့္ ေအာက္က ပံုစံအတိုင္း သင့္၀က္ဆိုက္စာမ်က္ႏွာကိုေတြ႔ရမွာပါ၊


အထက္မွာေတာ့ List Style မွာ ဘာအကၡရာမွလဲမပါဘူး၊ ဘာ စာသားမွလွမထည့္ထားဘူး၊ ဓာတ္ပံုကိုသံုးထားတယ္၊ ဓတ္ပံုကိုသံုးတာလဲ မခက္ပါဘူး၊
Property ကို list-style လို႔ထည့္ျပီး Value မွာေတာ့ url( ) လို႔ထည့္ရပါတယ္၊ လက္သဲကြင္းထဲမွာေတာ့ ဓာတ္ပံုရဲ့ နာမည္ကိုထည့္ရပါတယ္၊
စမ္းသပ္ဆဲ ေလ့က်င့္ဆဲကာလမွာ ဓာတ္ပံုကို HTML Document နဲ႔ CSS ဖိုင္တို႔ကို သိမ္းထားတဲ့ Folder ထဲမွာပဲသိမ္းပါ၊  ဒါမွာ အဆင္ေခ်ာမယ္၊
All CSS List Properties
at

No comments:

Post a Comment