ภาษา css

อาจารยสธารตน ชาวนาฟาง

สาขาวศวกรรมซอฟตแวร มหาวทยาลยราชภฏนครปฐม

เอกสารนเปนสวนหนงของรายวชา Webpage Design and Programming Workshop

Webpage Design and Programming Workshop

ภาษา CSS

• CSS ยอมาจาก ภาษา CSS (Cascading

Style Sheets)

• ภาษา CSS ถกออกแบบขนมาเพอการ

ก าหนดรปรางหนาตา (style) และน าไป

จดเกบแยกตางหากในแฟม CSS

• ปจจบน Browser ของทกๆ คาย ตางรองรบ

การท างานของ css

ประโยชนของภาษา CSS

• จะชวยลดการใชภาษา HTML ในการตกแตงเอกสารเวบเพจ ท าให code

เหลอเพยงสวนเนอหา ท าใหเขาใจงายข น การแกไขเอกสารท าไดงายและ

รวดเรว

• ท าใหขนาดไฟลเลกลง จงดาวนโหลดไดเรว

• สามารถก าหนดรปแบบการแสดงผลจากค าสง style sheet ชดเดยวกน ใหม

ผลกบเอกสาร HTML ทงหนาหรอทกหนาได ท าใหเวลาแกไขหรอปรบปรงท า

ไดงาย ไมตองไลตามแกท HTML tag ตางๆ ทวทงเอกสาร


ประโยชนของภาษา CSS


• สามารถควบคมการแสดงผลใหเหมอนกน หรอใกลเคยงกน ไดในหลาย

Web Browser

• สามารถก าหนดการแสดงผลในรปแบบทเหมาะกบสอชนดตาง ๆ ไมวาจะ

เปนการแสดงผลบนหนาจอ, บนกระดาษเมอสงพมพ, บนมอถอ หรอบน

PDA โดยทเปนเนอหาเดยวกน

• ท าใหเปนเวบไซตทมมาตรฐาน หากใช CSS กบเอกสาร HTML จะท าให

เขากบเวบเบราเซอรในอนาคตไดด


การท างานของ CSS


ไวยากรณของ css

• selector สามารถเปน HTML Tag เชน <body>, <p>

หรอเปน Class name หรอ ID ทเราตงชอใหกได

• property คณสมบตในการจดรปแบบการแสดงผล เชน color ส าหรบ

ก าหนดส, font-size ส าหรบก าหนดขนาดตวอกษร

• value เปนคาทก าหนดใหกบ property ตางๆ

เชน color:white, font-size:14px

การเรยกใชงาน CSS 1. External CSS (เอกสาร CSS ภายนอก) • วธการนเหมาะกบกรณทม เพยง 1 style แลวตองการน าไปใชกบเอกสาร

HTML หลายๆ ไฟล

• โดยน าเอาค าสง Style Sheet ทอยใน

<style type="text/css"> ... </style> มาบนทกเปนไฟลใหม นามสกล .css

จากนนจงท าการผนวกไฟลของ Style Sheet นลงไปในเอกสาร HTML ทกไฟล

ทตองการใชงาน Style Sheet ชดน ไวในสวน <head>...</head>

* ควรใชวธน มากกวารปแบบการใชงานอน ๆ

การเรยกใชงาน CSS 1. External CSS (เอกสาร CSS ภายนอก)

แฟม external style sheet สรางดวย text editor ชนดใดกได แตตองไมมแทกของ

html และจะตองจดเกบในแฟมทมสวนขยายเปน .css เทานน ดงตวอยางขางลาง

<head>

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

</head>

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("images/back40.gif");}

การเรยกใชงาน CSS 1. External CSS (เอกสาร CSS ภายนอก) <html>

<head>

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

<body>

<h1>วธดแลรกษาสขภาพ</h1>

<p>รบประทานอาหารทมประโยชน หมนออกก าลงกาย และพกผอนใหเพยงพอ</p>

</body></html>

การเรยกใชงาน CSS - ตอ 2. Internal CSS (โดยใชแทก style ตรงสวน head ของเอกสาร html) • วธการใชเมอมเพยง HTML ไฟลเดยว

• เมอประกาศค าสง Style Sheet เพอก าหนดคณสมบต ใหกบ HTML Tag ใดๆ แลว จะมผลกบเอกสาร HTML ทงหนา

• ค าสง Style Sheet จะอยระหวาง <head>...</head>


การเรยกใชงาน CSS - ตอ

การเรยกใชงาน CSS - ตอ 3. Inline CSS (โดยใชแอททรบวต style)

• วธการนควรใชในกรณทตองการก าหนด style ใหกบ element ของ HTML เพยงอนเดยวเปนการเฉพาะ

• โดยการแทรกค าสง style sheet ใน HTML Tag อยในค าสง style=“”

ตวอยาง

<img src=”mypic.png” alt=”This is my picture” style=”border: 1px solid #ccc; padding: 2em; margin: 1em; “ />

ควรหลกเล ยงการเขยน style=”" ฝงลงใน HTML Tag เพราะมนท าใหอานยาก และน าไปใชตอไมได และเปนการยากทจะแกไข

<Tag style="property:value;">


การเรยกใชงาน CSS - ตอ 3. Inline CSS (โดยใชแอททรบวต style)

<html>

<body>

<h1 style="color:red; font-family:Arial"> วธดแลรกษาสขภาพ</h1>

<p style="color:black; font-family:Arial; font-weight:bold"> รบประทาน

อาหารทมประโยชน หมนออกก าลงกาย และพกผอนใหเพยงพอ</p>

</body>

</html>


ในหนาเวบเพจเดยวกนจะใช ID ชอซ ากน ไมได

การตงชอ ID ตอง ไมมชองวาง

ไม ขนตนดวยตวเลข


CSS Syntax (ไวยากรณ) Selector { Property: Value; /* This is a comment */ }

หรอ @media MediaName { Selector { Property: Value; } } /* This is a comment */


CSS Syntax - ตอ h1 { background-color: blue; /* This is a comment */ }

หรอ

@media print { h1 { text-align: center; } } /* This is a comment */


CSS Syntax - ตอ /* For mobile devices */ @media handheld {

h1 { background-color: blue; }

} /* For printers */ @media print { h1 { text-align: center; } }


CSS Length Units (หนวยความยาว)

ตวอยางของหนวยแบบเชงสมพนธ (สามารถปรบขนาดได)

em (em, ความสงของฟอนต) เชน 2em, 1.5em, 0.88em ฯลฯ

ex (x-height, ความสงของตวอกษร "x") เชน 1.5ex, 2ex, ฯลฯ

px (pixels, สมพนธกบคาความละเอยดของ Canvas) เชน 1px, 4px, ฯลฯ

% (percent) เชน 50%, 130%, ฯลฯ

CSS Length Units (หนวยความยาว) ตวอยางของหนวยแบบคงท (ไมสามารถปรบขนาดได)

in (inches; 1in=2.54cm) เชน 2in, 1.5in, ฯลฯ

cm (centimeters; 1cm=10mm) เชน 2cm, 1.11cm, ฯลฯ

mm (millimeters) เชน 50mm, 0.8mm, ฯลฯ

pt (points; 1pt=1/72in) เชน 12pt, 20pt, ฯลฯ

pc (picas; 1pc=12pt) เชน 1pc, 2pc, ฯลฯ


CSS Length Units - ตอ /* ตวอยางการใช Length Units */

h1 { font-size: 2em; margin: 1ex; padding: 0.5cm; width: 90%; top: 12pt; left: -1in; }


คาส (Color Units) 16 คาสจาก Windows VGA palette:

aqua, black, blue, fuchsia (แดงอมมวง), gray, green, lime, maroon (น าตาลแดง), navy, olive, purple, red, silver, teal (เขยวขนเปด), white, และ yellow

คาสแบบ RGB:

#rrggbb เชน #00cc00 #rgb เชน #ec0 หมายถง #eecc00 rgb(x,x,x) โดยท x คอจ านวนเตมตงแต 0-255 เชน rgb(0,204,0) rgb(y%,y%,y%) โดยท y คอเปอรเซนตตงแต 0%-100% เชน rgb(0%,80%,0%)

คาส (Color Units)

คาส - ตอ /* ตวอยางการใช Length Units */

สจาก Windows VGA Palette

h1 { background-color: yellow; }

ใชส RGB แบบเลขฐาน 16 จ านวน 6 หลก

p { color: #0011bb; }

ใชส RGB แบบเลขฐาน 16 จ านวน 3 หลก

div#content { background-color: #01b; }

ใชส RGB แบบตวเลข 3 ชด (0-255)

span.news { color: rgb(34, 45, 255); }

ใชส RGB แบบตวเลข 3 ชด (0% -

100%)

img { background-color: rgb(2%, 30%,

100%); }

URL /* CSS Document */

body { background: url(stripe.gif) }

body { background: url(http://www.htmlhelp.com/stripe.gif) }

body { background: url( stripe.gif ) }

body { background: url("stripe.gif") }

body { background: url(\"Ulalume\".png) }

@import url(mycss.css);


CSS Selector CSS Selector ก าหนด Element ทจะท างานดวย เชน

1. ท างานกบแทกใดแทกหนง เชน h1, p, ul, li, em, ฯลฯ

2. ท างานกบแทกทใชแอททรบวต class เทากบคาใดคาหนง

3. ท างานกบแทกทใชแอททรบวต id เทากบคาใดคาหนง

4. ท างานกบแทกทใชแอทรบวตบางอยาง

5. ท างานกบแทกทตดกบแทกใดแทกหนง

6. ท างานกบแทกทเปน Element ลกของแทกใดแทกหนง

7. ท างานกบแทกโดยมเงอนไขมากกวา 1 เงอนไขขางตน ฯลฯ


CSS Selector - ตอ • Element Selector (ใชแทกเปนตวเลอก)

• ID Selector (ใช ID เปนตวเลอก)

• Class Selector (ใช Class เปนตวเลอก)

• Selector ของลงค (a-anchor)

• Select แบบผสม


Element Selector (ใชแทกเปนตวเลอก) /* CSS document */ h1 { text-align: center; font-size: 2em; }

 <body> <h1> หวเรองล าดบท 1 </h1> </body>

Element Selector - ตอ /* CSS document */ p { text-align: justify; padding: 0.5em; }

 <body>

<h1> หวเรองล าดบท 1 </h1> <p> ยอหนาทหนง</p>

</body>

ID Selector /* CSS document */ #content { background-color: rgb(0, 34, 50); color: #00cc00; }  <div id=“content”>

<h1> หวเรองล าดบท 1 </h1> <p> ยอหนาทหนง </p>

</div>

ID Selector - ตอ /* CSS document */ div#content { /* เขยนชอแทกก ากบไวได */ background-color: rgb(0, 34, 50); color: #00cc00; }

 <div id=“content”>

<h1> หวเรองล าดบท 1 </h1> <p> ยอหนาทหนง </p>

</div>

Class Selector - ตอ /* CSS document */ .news { background-color: rgb(0, 34, 50); color: #00cc00; }  <div id=“content”> <h1> หวเรองล าดบท 1 </h1> <p class=“news”> ยอหนาทหนง </p> </div>…

ในหนาเวบเพจเดยวกนจะใช ID ชอซ ากนไมได การตงชอ ID ตองไมมชองวาง ไมขนตนดวยตวเลข

Class Selector - ตอ /* CSS document */ p.news { background-color: rgb(0, 34, 50); color: #00cc00; }


<h1> หวเรองล าดบท 1 </h1> <p class=“news”> ยอหนาทหนง </p>

</div>

ในหนาเวบเพจเดยวกนสามารถเรยกใชคลาสเดยวกนไดมากกวา 1 ครง ชอคลาสตองไมมชองวาง ไมขนตนดวยตวเลข


Selector ของลงค (แทก a) /* CSS document */ a:link { color: blue; } a:visited { color: gray; } a:hover { color: red; } a:active { color: green; }


<h1>หวเรองล าดบท 1</h1> <p>…<a href=“http://www.firefox.com”>ดาวนโหลดโปรแกรม Firefox</a>…</p>

</div>


Selector แบบผสม /* CSS document */ p span { /* แทก span ทอยในแทก p */ text-decoration: underline; }


<h1>หวเรองล าดบท 1</h1> <p>…<span>ขอความ</span>…</p> <h2><span>หวเรองล าดบท 2</span></h2>

</div>


Selector แบบผสม - ตอ /* CSS document */ p span.underline { /* แทก span ทใช class=“underline” ทอยในแทก p */ text-decoration: underline; }


<h1>หวเรองล าดบท 1</h1> <p>…<span class=“underline”>ขอความ</span>…<span>ขอความถดไป

</span>…</p> </div>


Selector แบบผสม - ตอ /* CSS document */ div#content ul li { /* แทก li ทอยใน ul ทอยใน div ทใช id=“content” */ list-style-type: upper-roman; }

 <div id=“content”> <ul> <li>Item A</li> <li>Item B</li> </ul> </div>

Selector แบบผสม - ตอ /* CSS document */ div#mainmenu a:hover { /* แทก a (hover action) ทอยใน div ทใช id=“mainmenu” */ font-weight: bold; }

 <div id=“mainmenu”> <ul> <li><a href=“www.somewhere.com”>Item A</a></li> <li><a href=“www.something.com”>Item B</a></li> </ul> </div>

Selector แบบผสม - ตอ /* CSS document */ h1, h2, h3, h4 { /* ก าหนดการแสดงผลหลายแทกพรอมกน */ font-weight: bold; }

 <div id=“mainmenu”>

<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 1</h4>

</div>

เมอใดตองใช Selector แบบไหน Element Selector (การใชชอแทกเปนตวเลอก)

วธการน เหมาะส าหรบการ ”ก าหนดการแสดงผลทว ๆ ไปใหกบแทกนน ๆ” หมายถงวา ไมวาจะเรยกใชแทกนนเมอไร กจะแสดงผลในรปแบบทก าหนดไวเสมอ ทกหนา ทกเอกสาร


เมอใดตองใช Selector แบบไหน - ตอ Element Selector (การใชชอแทกเปนตวเลอก) • วธการน เหมาะส าหรบการ ”ก าหนดการแสดงผลทว ๆ ไปใหกบแทกนน ๆ”

หมายถงวา ไมวาจะเรยกใชแทกนนเมอไร กจะแสดงผลในรปแบบทก าหนดไว

เสมอ ทกหนา ทกเอกสาร เชน ตองการใหแทก <h1> อยตรงกลางในทก ๆ หนาเอกสาร, ตองการใหตวอกษรในแทก <p> ในทกเอกสารใชตวอกษรสเทาเขม เปนตน


เมอใดตองใช Selector แบบไหน - ตอ Class Selector (การใชคลาสเปนตวเลอก) • เหมาะส าหรบการสรางการแสดงผลบางอยางใหกบ Element เปนครงคราว

โดยจะมผลกบเฉพาะอลเมนตทเรยกใชคลาสเทานน หากไมไดเรยกใชกจะ

แสดงผลตามคาปกตทก าหนดไว และสามารถเรยกใชไดมากกวา 1 ครง เชน

ตองการขดเสนใตขอความ, ตองการใหตวหนงสอเปนสแดง เปนตน


เมอใดตองใช Selector แบบไหน - ตอ ID Selector (การใช ID เปนตวเลอก) • วธการนเหมาะกบการวางเลยเอาทเอกสาร เพอใหงายตอการก าหนดการ

แสดงผลใหกบแตละสวนโดยไมกระทบกบสวนอน ๆ มกใชแทก div พรอมกบก าหนดแอททรบวต id ดวยเพอตงชอใหกบสวนนน ๆ สงทตองพงระวงคอ อยาใช ID ชอเดยวกนในเอกสารเดยวกน เนองจากหากมการเขยนสครปตเพอใหมผลกบ ID แลวจะเกดขอผดพลาดได (สามารถเรยกใช ID เดมไดเพยงครงเดยวเทานน) ตวอยางการใชงาน


CSS Layout (การแบงสวนเอกสาร) <div id=“mainmenu”> width: auto; margin: 0; padding: 1em;

<div id=“localmenu”> float: left; width: 14em; margin: 0; padding: 1em;

<div id=“content”> width: auto; margin-left: 16em; padding: 1em;

1

2 3

<div id=“footer”> width: auto; margin: 0; padding: 0;

4

www.themegallery.com

… <body>  <div id=“mainmenu”> …… </div>  <div id=“localmenu”> …… </div>  <div id=“content”> …… </div>  <div id=“footer”> …… </div> </body> </html>

1

2

3

4

CSS Layout – ตอ

www.themegallery.com

html, body { margin: 0; padding: 0; font-size: medium; font-family: Sans-serif, Arial; background-color: #fff; color: #000; } /* Main menu */ div#mainmenu { width: auto; margin: 0; padding: 1em; background-color: blue; } /* Local menu */ div#localmenu { width: 14em; float: left; margin: 0; padding: 1em; background-color: green; }

1

2

/* Content */ div#mainmenu { width: auto; margin: 0; padding: 1em; background-color: orange; } /* Footer */ div#mainmenu { width: auto; margin: 0; padding: 1em; background-color: fuchsia; }

3

4

CSS Layout – ตอ


ตวอยาง

• ในแตละ declarations ตองจบดวยเครองหมาย ; (semicolon) และ

กลมของ declaration ตองอยภายในเครองหมาย { }

p {color:red; text-align:center;}

www.themegallery.com Webpage Design and Programming Workshop

ตวอยาง

<html><head>

<style type="text/css">

P { color:red; text-align:center; }

</style>

</head><body>

<p> hello world! </p>

<p> this paragraph is styled with css. </p>

</body>

</html>


ตวอยาง

• การก าหนดใหขอความทอยใน Tag<p> เปนสด าและวางอยกงกลาง


ตวอยาง

<html><head>

<style type="text/css">

P { color:red; text-align:center; }

</style>

</head><body>

<p>hello world!</p>

<p>this paragraph is styled with css.</p>

</body>

</html>

ภาษา css

Education

Transcript of ภาษา css