Web Design's note: CSS

Showing posts with label CSS. Show all posts

Thursday, September 5, 2013

CSS Chapter 8 – List

List style နဲ.ပတ္သတ္ျပီး HTML Chapter 7 မွာ အေသးစိတ္ ရွင္းျပထားပါတယ္။ ၄င္းမွာေတာ့ HTML အေၾကာင္းကို အဓိကထား ေျပာထားတဲ့ အတြက္ inline style ကိုပဲအဓိကထားျပီး ေရးျပခဲ့ပါတယ္။ က်ေနာ္က HTML ကိုအရင္ေလ့လာျပီးမွ CSS ကိုေလ့လာဖို. တိုက္တြန္းထားပါတယ္။ ဒါေၾကာင့္ ယခု List နဲ.ပတ္သတ္ျပီး အက်ဥ္းခ်ဳပ္ျပန္ေျပာျပျပီး List ေတြကို HTML အခန္းမွာေျပာျပထားတဲ့ style ေတြအျပင္ ယခု CSS မွာ list style ေတြကို မိမိစိတ္ၾကိဳက္ ပံုေတြ နဲ.အစားထိုး ေရးသားနည္းကို အဓိကထားျပီး ေျပာျပေပးသြားမွာပါ။
List မွာ အဓိက ႏွစ္မ်ိဳးရွိပါတယ္။ ၄င္းတုိ.မွာ
Unordered Lists ႏွင့္
Ordered Lists တို.ျဖစ္ၾကပါတယ္။

ေအာက္ပါ Example တြင္ CSS မွာ Lists style ႏွစ္မ်ိဳး အတြက္ class selector ကိုအသံုးျပဳျပီး ေရးျပထားပါတယ္။

<!DOCTYPE html>
<html>
<head>
<style>
ul.c {list-style-type:circle;}
ul.s {list-style-type:square;}
ol.r {list-style-type:upper-roman;}
ol.a {list-style-type:lower-alpha;}
</style>
</head>

<body>
<p>Example of unordered lists:</p>
<ul class="c">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ul>
<ul class="s">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="r">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ol>
<ol class="a">
<li>HTML</li>
<li>CSS</li>
<li>JAVASCRIPT</li>
</ol>
</body>
</html>

<Style> tag ထဲမွ upper-roman ေနရာမွာ lower-roman ႏွင့္ lower-alpha ေနရာမွာ upper-alpha အျဖစ္ေျပာင္းေရးလို. လဲရပါတယ္။

ဒီတစ္ခါေတာ့ က်ေနာ္တို.ကိုယ္တိုင္ ဖန္တီးထားတဲ့ image နဲ. Bullet ေနရာေတြမွာ ထည့္သံုးၾကည့္္ပါမယ္။ က်ေနာ္ကေတာ့ ေအာက္ပါပံုေလးကို အသံုးျပဳပါမယ္။ name ကိုေတာ့ arrow လို.ေပးထားျပီး .png file အမ်ိဳးအစားျဖစ္ပါတယ္။

CSS Chapter 7 – Link

CSS မွာ Link နဲ.ပတ္သတ္ျပီး ေလးမ်ိဳး ေရးရပါတယ္။ ၄င္းတို.မွာ

a:link (unvisited link)

a:visited (visited link)

a:hover (mouse over link)

a:active (selected link)

CSS မွာ link proerties ေတြေရးတဲ့ အခါ အထက္ပါ order အတိုင္းေရးရပါတယ္။ ေအာက္က Example မွာေရးျပထားပါတယ္။

Example

<!DOCTYPE html>
<html>
<head>
<style>
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>
<body>
<p><b><a href="">This is a link</a></b></p>
</body>
</html>

Browser မွာ run ၾကည့္ျပီး This is a link ေပၚမွာ Pointer ကိုတင္ၾကည့္ပါ။ ေျပာင္းလဲမွဳေတြကိုေတြ.ရ ပါမယ္။ a:visited လုပ္ေဆာင္မွဳကေတာ့ ဒီေနရာမွာ မသိတာပါဘူး။ a:hover ကေတာ့ pointer တင္လိုက္ရင္ CSS မွာေရးထားတဲ့ အေရာင္ေျပာင္းသြားမွာျဖစ္ျပီး a:active ကေတာ့ link ရွိေသာစာကို click ႏွိပ္လိုက္တဲ့ အခ်ိန္မွာ အျပာေရာင္ေျပာင္းသြားမွာျဖစ္ပါတယ္။

က်ေနာ္တို. အမွန္တကယ္ Web page ေတြဖန္တီးတဲ့ အခါမွာ ေတာ့ ဒီ link ေရးနည္း ေပၚမွာပဲ အေျခခံျပီး မိမိလိုခ်င္တဲ့ Link ပံုစံကို CSS မွာ selector ေတြနဲ. စိတ္ၾကိဳက္ျပန္ဖန္တီးယူပါတယ္။ ဒါကိုသိထားမွလည္း ဖန္တီးလို.ရမွာျဖစ္တဲ့ အတြက္ link အတြက္ေရးရတဲ့ အေျခခံကို နားလည္ဖို.လိုပါတယ္။

အထက္ပါ Example မွာ This is a link ဆိုတဲ့ link စာေၾကာင္းမွာ underline ပါေနတာေတြ.ရပါမယ္။ link ရွိတယ္ဆိုတာကို သိတာေစဖို. Underline က default အေနနဲ. ပါေနတာပါ။ က်ေနာ္တို. ဒါကို ျဖတ္လို.ရပါတယ္။ အထက္ပါ Example ရဲ့ style မွာ ေအာက္မွာ ေရးျပထားတဲ့ အတိုင္း text-decoration:none ကို ထည့္ေရးလိုက္ပါ။ Browser မွာေဖာ္ျပတဲ့ အခါ underline မပါေတာ့ပါဘူး။

<style>
a:link {color:#FF0000;text-decoration:none;}    /* unvisited link */
a:visited {color:#00FF00;text-decoration:none;} /* visited link */
a:hover {color:#FF00FF;text-decoration:none;}   /* mouse over link */
a:active {color:#0000FF;text-decoration:none;} /* selected link */
</style>

CSS Chapter 6 _ Styling fonts

CSS ၏ font properties မ်ားမွာ ေအာက္ပါအတိုင္းျဖစ္ပါတယ္။

font-family

font-size

font-style

font-variant

font-weight

font

font-family, font-size ႏွင့္ font တို.ကေတာ့ အသံုးမ်ားပါတယ္။ font-style, font-variant ႏွင့္ font-weight တို.ကို Internet Explorer version တိုင္းမွာ support မလုပ္ေတာ့ သိပ္ျပီးမသံုးၾကပါဘူး။

Computer မွာအသံုးျပဳတဲ့ Basic font (၂) မ်ိဳးရွိပါတယ္။ ၄င္းတို.မွာ Sans-Serif ႏွင့္ Serif တို.ပဲျဖစ္ပါတယ္။ ေအာက္တြင္ Sans-serif ႏွင့္ Serif fonts တို.ရဲ့ ျခားနားျခင္းကိုေဖာ္ျပထားပါတယ္။

This example is from www.w3schools.com

Computer screens မွာေတာ့ Sans-serif font က Serif font ထက္ ဖက္ရတာ ရွင္းလင္းျပီး အဆင္ေျပလို. Sans-serif font ကိုပဲေရြးခ်ယ္အသံုး ျပဳၾကပါတယ္။

The font-family property

Font-family ကို အသံုးျပဳမယ့္ font အမ်ိဳးအစား ကို declaration လုပ္ဖို.သံုးပါတယ္။ font-family မွာ fallback system အေနနဲ. Several font ကိုသံုးျပီးလုပ္ေဆာင္ႏိုင္ပါတယ္။ တစ္ခါတေလက်ေနာ္တို.သံုးလုိက္တဲ့ font အမ်ိဳးအစားကို browser က support မလုပ္ေပးႏိုင္တဲ့အခါမ်ိဳးမွာ ေနာက္တစ္ခုကို choice လုပ္ျပီး ေဖာ္ျပေပးသြားပါတယ္။ ဆိုလိုတာက ပထမ ဦးစားေပး declaration လုပ္ထားတာ ကို support မလုပ္ႏိုင္ရင္ ေနာက္တစ္ခု declaration လုပ္ထားတာကို အစားထိုးေဖာ္ျပေပးသြားမွာပါ။

font-family အတြက္ value ေရးတဲ့ အခါမွာ မိမိအသံုးျပဳခ်င္တဲ့ font အမည္ကို အရင္ေရးရျပီး ေနာက္ဆံုးမွာေတာ့ generic family name (sans-serit or serif) နဲ. အဆံုးသတ္ေရးရပါတယ္။ က်ေနာ္တို. သတ္မွတ္ေပးတဲ့ font အမ်ိဳးအမည္ေတြ ကို user ရဲ့ browser က support မလုပ္ႏိုင္တဲ့အခါမွာ ၄င္း၏ base font အမ်ိဳးအစား တစ္ခုနဲ.အစားထိုးျပီးျပသြားေပးဖို.အတြက္ generic family name ကို ေနာက္ဆံုးမွာေရးသားရျခင္းျဖစ္ပါတယ္။

ေအာက္က example မွာ font-family အသံုးျပဳျပီး ေရးသားပံုကို ေလ့လာၾကည့္ပါ။

CSS Chapter 5 _ Styling Text

CSS text နဲ.ပတ္သတ္ျပီးေတာ့ အသံုးမ်ားတဲ့ text properties ေတြကိုပဲ ရွင္းျပသြားပါမယ္။ ၄င္းတို.မွာ

color

text-align

text-decoration

text-transform

text-indent

letter-spacing

line-height

word-spacing

Text Color

Text color အတြက္ color porperty ကိုသံုးပါတယ္။

Example of color property:
<!DOCTYPE html>
<html>
<head>
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is paragraph</p>
<p class="ex">This is paragraph using class attribute of CSS.</p>
</body>
</html>

This is paragraph မွာ အနီေရာင္ ျဖစ္ေနရျခင္းမွာ body {color:red;} လို.ေရးထားလို.ျဖစ္ပါတယ္။ body ထဲမွာရွိေသာ text color မွန္သမ်ွ အနီေရာင္လို. Style သတ္မွတ္ေပးလိုက္ျခင္း ျဖစ္ပါတယ္။ ဒါေၾကာင့္ ေနာက္ထပ္ <p> element ကိုေတာ့ အနီေရာင္ မသံုးျခင္လို. p.ex ဆိုျပီး style တစ္ခုေရးသားျခင္းျဖစ္ပါတယ္။

အကယ္၍ p ကိုပဲ p {color:rgb(0,0,255);} လို. Style ေရးလိုက္လ်င္ <p> tag နဲ.ေရးလိုက္တိုင္း အားလံုး အျပာေရာင္ေတြျဖစ္ကုန္မွာပါ။ ဒါေၾကာင့္ ေျပာင္းခ်င္တဲ့ <p> element အတြက္ပဲ class နဲ. Style ယူသံုးလို.ရေအာင္ p.ex ျဖင့္ style ေရးသားျခင္း ျဖစ္ပါတယ္။

CSS Chapter 4 _ Styling Background

CSS background properties မ်ားကို element တစ္ခု၏ background effects မ်ားအတြက္သံုးပါတယ္။ Background effects မ်ားအတြက္ CSS properties မ်ားမွာ

background-color

background-image

background-repeat

background-position

background-attachment

background-color

background-color ကို Element ေတြရဲ့ background အေရာင္အတြက္ သံုးပါတယ္။

Example:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:#ffffff;}
h1{background-color:#888888;}
p{background-color:#eeffff;}
div{background-color:#b0c4dd;}
</style>
</head>
<body>
<h1>This is heading </h1>
<p> This is paragraph.</p>
<div>
This is a text inside a div element.
<p>This is paragraph between div tag </p>
This is also inside a div element.<br><br>
</div>
</body>
</html>

CSS မွာ color ကို HEX value, RGB value, color name တို.ျဖင့္ ေရးသားႏိုင္ပါတယ္။
HEX value syntax: #0000ff;
RGB value syntax: rgb(255,0,0)
Color name syntax: red

CSS Chapter 3 _ Insert CSS

CSS ေရးနည္း သံုးမ်ိဳး ရွိပါတယ္။ ၄င္းတို.မွာ...

Inline style

Internal style sheet

External style sheet

Inline Style

Inline Style ကို Element တစ္ခုတည္းမွာပဲ unique style ေတြ ေျပာင္းလဲဖုိ.အတြက္ အသံုးျပဳပါတယ္။ ထို.ေၾကာင့္ CSS ကို မိမိ ျပဳလုပ္လိုေသာ HTML element ၏ Start Tag အတြင္းတြင္ style attribute ျဖင့္ ထည့္သြင္းေရးသားရပါတယ္။ Style attribute တြင္ CSS ၏ properties မ်ားအားလံုးကို အသံုးျပဳေရးသား ႏိုင္ပါတယ္။

Example:

<h1 style=”color:#ff0000; text-align:center;”>This is center-aligned heading</h1>
<p style=”color:blue; margin-left:20px;”>This is paragraph</p>

CSS Chapter 2 _ Selector

Selector

CSS မွာ HTML အတြက္ style ေတြေရးလ်င္ ၄င္းတို. ၏ p, body, h1 စသည္ျဖင့္ tagname ကိုသာသံုးျပီး ေရးပါတယ္။ ဥပမာ က်ေနာ္တို. <p> tag အတြက္ CSS မွာ color style အနီေရာင္ ကို ေရးထားတယ္ ဆိုပါေတာ့၊ HTML မွာ ရွိတဲ့ <p> tag ျဖင့္ ေရးထားတဲ့ element ေတြအားလံုး တညီတည္း အနီေရာင္ေတြ ျဖစ္ကုန္ပါတယ္။ ဒီလို problem ေတြမျဖစ္ေအာင္ html tagname ေတြမပာုတ္ပဲ ကိုယ္တိုင္ နာမည္ေပးသတ္မွတ္ ျပီး HTML မွာ Style setting မ်ား ေပါင္းထည့္ လုပ္ေဆာင္ျခင္းကို selection လို.ေခၚပါတယ္။ အဲဒီလို လုပ္ေဆာင္ႏိုင္ဖို. Selector ပံုစံ ၂ မ်ိုဳးကို css က ဖန္တီးေပးထားပါတယ္။ ၄င္းတို.မွာ id selector ႏွင့္ class selector တို.ျဖစ္ပါတယ္။

The id Selector

Each element can have one ID

Each page can have only one element with that ID

id selector ဆိုတာ a single, unique element (element တစ္ခုတည္း) အတြက္သံုးပါတယ္။ HTML တြင္ id selector ကိုသံုးဖို. Attribute မွာ id ျဖစ္ျပီး ၄င္း၏ value အတြက္ CSS ေရးရာတြင္ မိမိေပးခ်င္ေသာ နာမည္၏ ေရွ့တြင္ # ကို ထည့္ေပးရပါတယ္။

CSS Chapter 1 _ Introduction

CSS ကိုမေလ့လာခင္မွာ HTML အေၾကာင္းကို Basic ေလာက္သိထားဖို.လုိပါတယ္။ CSS tutorials လုပ္တဲ့ အခါမွာ HTML ႏွင့္ တြဲလုပ္ရပါတယ္။ ဒါေၾကာင့္ HTML ကို အရင္ေလ့လာျပီးမွ CSS ကိုေလ့လာဖို. တိုက္တြန္းခ်င္ ပါတယ္။

What is CSS?

CSS ဆိုသည္ မွာ Cascading Style Sheets ျဖစ္ပါတယ္။

HTML elements မ်ား၏ styles မ်ား အတြက္ အသံုးျပဳ ပါတယ္။

External Style Sheets မ်ားက works ေတြကို လုပ္ေဆာင္ရသက္သာေစပါတယ္။

Multiple Web pages မ်ားကို CSS တစ္ခုတည္းျဖင့္လည္း Control လုပ္ႏိုင္ပါတယ္။

CSS Syntax

Css syntax တစ္ခု ကို CSS rule ျဖစ္ေသာ အဓိက အပိုင္း ၂ ပိုင္းျဖစ္ ဖြဲစည္းထားပါတယ္။ ၄င္းတုိ.မွာ...

Selector

Declaration

Web Design's note

Thursday, September 5, 2013

CSS Chapter 8 – List

Wednesday, September 4, 2013

CSS Chapter 7 – Link

Example

Thursday, July 25, 2013

CSS Chapter 6 _ Styling fonts

The font-family property

Monday, July 22, 2013

CSS Chapter 5 _ Styling Text

Text Color

Sunday, July 21, 2013

CSS Chapter 4 _ Styling Background

background-color

Example:

Saturday, July 20, 2013

CSS Chapter 3 _ Insert CSS

Inline Style

Example:

Friday, July 19, 2013

CSS Chapter 2 _ Selector

Selector

The id Selector

Wednesday, July 17, 2013

CSS Chapter 1 _ Introduction

What is CSS?

CSS Syntax

About Me

Reference List

Total Pageviews