Post on 11-Apr-2017
อาจารยสธารตน ชาวนาฟาง
สาขาวศวกรรมซอฟตแวร มหาวทยาลยราชภฏนครปฐม
เอกสารนเปนสวนหนงของรายวชา 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 ตางๆ ทวทงเอกสาร
Webpage Design and Programming Workshop
ประโยชนของภาษา CSS
Webpage Design and Programming Workshop
• สามารถควบคมการแสดงผลใหเหมอนกน หรอใกลเคยงกน ไดในหลาย
Web Browser
• สามารถก าหนดการแสดงผลในรปแบบทเหมาะกบสอชนดตาง ๆ ไมวาจะ
เปนการแสดงผลบนหนาจอ, บนกระดาษเมอสงพมพ, บนมอถอ หรอบน
PDA โดยทเปนเนอหาเดยวกน
• ท าใหเปนเวบไซตทมมาตรฐาน หากใช CSS กบเอกสาร HTML จะท าให
เขากบเวบเบราเซอรในอนาคตไดด
Webpage Design and Programming Workshop
ไวยากรณของ 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>
Webpage Design and Programming Workshop
การเรยกใชงาน 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;">
Webpage Design and Programming Workshop
การเรยกใชงาน 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>
Webpage Design and Programming Workshop
ในหนาเวบเพจเดยวกนจะใช ID ชอซ ากน ไมได
การตงชอ ID ตอง ไมมชองวาง
ไม ขนตนดวยตวเลข
Webpage Design and Programming Workshop
CSS Syntax (ไวยากรณ) Selector { Property: Value; /* This is a comment */ }
หรอ @media MediaName { Selector { Property: Value; } } /* This is a comment */
Webpage Design and Programming Workshop
CSS Syntax - ตอ h1 { background-color: blue; /* This is a comment */ }
หรอ
@media print { h1 { text-align: center; } } /* This is a comment */
Webpage Design and Programming Workshop
CSS Syntax - ตอ /* For mobile devices */ @media handheld {
h1 { background-color: blue; }
} /* For printers */ @media print { h1 { text-align: center; } }
Webpage Design and Programming Workshop
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, ฯลฯ
Webpage Design and Programming Workshop
CSS Length Units - ตอ /* ตวอยางการใช Length Units */
h1 { font-size: 2em; margin: 1ex; padding: 0.5cm; width: 90%; top: 12pt; left: -1in; }
Webpage Design and Programming Workshop
คาส (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%)
คาส - ตอ /* ตวอยางการใช 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);
Webpage Design and Programming Workshop
CSS Selector CSS Selector ก าหนด Element ทจะท างานดวย เชน
1. ท างานกบแทกใดแทกหนง เชน h1, p, ul, li, em, ฯลฯ
2. ท างานกบแทกทใชแอททรบวต class เทากบคาใดคาหนง
3. ท างานกบแทกทใชแอททรบวต id เทากบคาใดคาหนง
4. ท างานกบแทกทใชแอทรบวตบางอยาง
5. ท างานกบแทกทตดกบแทกใดแทกหนง
6. ท างานกบแทกทเปน Element ลกของแทกใดแทกหนง
7. ท างานกบแทกโดยมเงอนไขมากกวา 1 เงอนไขขางตน ฯลฯ
Webpage Design and Programming Workshop
CSS Selector - ตอ • Element Selector (ใชแทกเปนตวเลอก)
• ID Selector (ใช ID เปนตวเลอก)
• Class Selector (ใช Class เปนตวเลอก)
• Selector ของลงค (a-anchor)
• Select แบบผสม
Webpage Design and Programming Workshop
Element Selector (ใชแทกเปนตวเลอก) /* CSS document */ h1 { text-align: center; font-size: 2em; }
<!-- HTML Document --> <body> <h1> หวเรองล าดบท 1 </h1> </body>
Webpage Design and Programming Workshop
Element Selector - ตอ /* CSS document */ p { text-align: justify; padding: 0.5em; }
<!-- HTML Document --> <body>
<h1> หวเรองล าดบท 1 </h1> <p> ยอหนาทหนง</p>
</body>
Webpage Design and Programming Workshop
ID Selector /* CSS document */ #content { background-color: rgb(0, 34, 50); color: #00cc00; } <!-- HTML Document --> <div id=“content”>
<h1> หวเรองล าดบท 1 </h1> <p> ยอหนาทหนง </p>
</div>
Webpage Design and Programming Workshop
ID Selector - ตอ /* CSS document */ div#content { /* เขยนชอแทกก ากบไวได */ background-color: rgb(0, 34, 50); color: #00cc00; }
<!-- HTML Document --> <div id=“content”>
<h1> หวเรองล าดบท 1 </h1> <p> ยอหนาทหนง </p>
</div>
Webpage Design and Programming Workshop
Class Selector - ตอ /* CSS document */ .news { background-color: rgb(0, 34, 50); color: #00cc00; } <!-- HTML Document --> <div id=“content”> <h1> หวเรองล าดบท 1 </h1> <p class=“news”> ยอหนาทหนง </p> </div>…
ในหนาเวบเพจเดยวกนจะใช ID ชอซ ากนไมได การตงชอ ID ตองไมมชองวาง ไมขนตนดวยตวเลข
Webpage Design and Programming Workshop
Class Selector - ตอ /* CSS document */ p.news { background-color: rgb(0, 34, 50); color: #00cc00; }
<!-- HTML Document --> <div id=“content”>
<h1> หวเรองล าดบท 1 </h1> <p class=“news”> ยอหนาทหนง </p>
</div>
ในหนาเวบเพจเดยวกนสามารถเรยกใชคลาสเดยวกนไดมากกวา 1 ครง ชอคลาสตองไมมชองวาง ไมขนตนดวยตวเลข
Webpage Design and Programming Workshop
Selector ของลงค (แทก a) /* CSS document */ a:link { color: blue; } a:visited { color: gray; } a:hover { color: red; } a:active { color: green; }
<!-- HTML Document --> <div id=“content”>
<h1>หวเรองล าดบท 1</h1> <p>…<a href=“http://www.firefox.com”>ดาวนโหลดโปรแกรม Firefox</a>…</p>
</div>
Webpage Design and Programming Workshop
Selector แบบผสม /* CSS document */ p span { /* แทก span ทอยในแทก p */ text-decoration: underline; }
<!-- HTML Document --> <div id=“content”>
<h1>หวเรองล าดบท 1</h1> <p>…<span>ขอความ</span>…</p> <h2><span>หวเรองล าดบท 2</span></h2>
</div>
Webpage Design and Programming Workshop
Selector แบบผสม - ตอ /* CSS document */ p span.underline { /* แทก span ทใช class=“underline” ทอยในแทก p */ text-decoration: underline; }
<!-- HTML Document --> <div id=“content”>
<h1>หวเรองล าดบท 1</h1> <p>…<span class=“underline”>ขอความ</span>…<span>ขอความถดไป
</span>…</p> </div>
Webpage Design and Programming Workshop
Selector แบบผสม - ตอ /* CSS document */ div#content ul li { /* แทก li ทอยใน ul ทอยใน div ทใช id=“content” */ list-style-type: upper-roman; }
<!-- HTML Document --> <div id=“content”> <ul> <li>Item A</li> <li>Item B</li> </ul> </div>
Webpage Design and Programming Workshop
Selector แบบผสม - ตอ /* CSS document */ div#mainmenu a:hover { /* แทก a (hover action) ทอยใน div ทใช id=“mainmenu” */ font-weight: bold; }
<!-- HTML Document --> <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>
Webpage Design and Programming Workshop
Selector แบบผสม - ตอ /* CSS document */ h1, h2, h3, h4 { /* ก าหนดการแสดงผลหลายแทกพรอมกน */ font-weight: bold; }
<!-- HTML Document --> <div id=“mainmenu”>
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 1</h4>
</div>
Webpage Design and Programming Workshop
เมอใดตองใช Selector แบบไหน Element Selector (การใชชอแทกเปนตวเลอก)
วธการน เหมาะส าหรบการ ”ก าหนดการแสดงผลทว ๆ ไปใหกบแทกนน ๆ” หมายถงวา ไมวาจะเรยกใชแทกนนเมอไร กจะแสดงผลในรปแบบทก าหนดไวเสมอ ทกหนา ทกเอกสาร
Webpage Design and Programming Workshop
เมอใดตองใช Selector แบบไหน - ตอ Element Selector (การใชชอแทกเปนตวเลอก) • วธการน เหมาะส าหรบการ ”ก าหนดการแสดงผลทว ๆ ไปใหกบแทกนน ๆ”
หมายถงวา ไมวาจะเรยกใชแทกนนเมอไร กจะแสดงผลในรปแบบทก าหนดไว
เสมอ ทกหนา ทกเอกสาร เชน ตองการใหแทก <h1> อยตรงกลางในทก ๆ หนาเอกสาร, ตองการใหตวอกษรในแทก <p> ในทกเอกสารใชตวอกษรสเทาเขม เปนตน
Webpage Design and Programming Workshop
เมอใดตองใช Selector แบบไหน - ตอ Class Selector (การใชคลาสเปนตวเลอก) • เหมาะส าหรบการสรางการแสดงผลบางอยางใหกบ Element เปนครงคราว
โดยจะมผลกบเฉพาะอลเมนตทเรยกใชคลาสเทานน หากไมไดเรยกใชกจะ
แสดงผลตามคาปกตทก าหนดไว และสามารถเรยกใชไดมากกวา 1 ครง เชน
ตองการขดเสนใตขอความ, ตองการใหตวหนงสอเปนสแดง เปนตน
Webpage Design and Programming Workshop
เมอใดตองใช Selector แบบไหน - ตอ ID Selector (การใช ID เปนตวเลอก) • วธการนเหมาะกบการวางเลยเอาทเอกสาร เพอใหงายตอการก าหนดการ
แสดงผลใหกบแตละสวนโดยไมกระทบกบสวนอน ๆ มกใชแทก div พรอมกบก าหนดแอททรบวต id ดวยเพอตงชอใหกบสวนนน ๆ สงทตองพงระวงคอ อยาใช ID ชอเดยวกนในเอกสารเดยวกน เนองจากหากมการเขยนสครปตเพอใหมผลกบ ID แลวจะเกดขอผดพลาดได (สามารถเรยกใช ID เดมไดเพยงครงเดยวเทานน) ตวอยางการใชงาน
Webpage Design and Programming Workshop
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> <!-- Main Menu --> <div id=“mainmenu”> …… </div> <!-- Local Menu --> <div id=“localmenu”> …… </div> <!-- Content --> <div id=“content”> …… </div> <!-- Footer --> <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 – ตอ
Webpage Design and Programming Workshop
ตวอยาง
• ในแตละ 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>
Webpage Design and Programming Workshop
ตวอยาง
• การก าหนดใหขอความทอยใน Tag<p> เปนสด าและวางอยกงกลาง
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>