css cascading style sheets 2.pdf · css • css ย่อมาจา cascading style sheets •...
TRANSCRIPT
![Page 1: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/1.jpg)
Theerayut Thongkrau
CSSCascading Style Sheets
Chapter 2
![Page 2: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/2.jpg)
CSS• CSS ยอมาจาก Cascading Style Sheets• เปนภาษาทใชในการก าหนดรปแบบการแสดงผลของ
HTML Element• เกดขนพรอมกบ HTML 4.0 เพอแกปญหาการแสดงผล• สามารถแทรกค าสง CSS ในโคด HTML หรอแยกสวนออกเปนไฟล .css ได
2
![Page 3: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/3.jpg)
CSS กบ HTML• HTML ใชก าหนดโครงสรางและก ากบสวนประกอบของหนาเวบ
• CSS ใชก าหนดรปแบบการแสดงผลของหนาเวบ ในแตละสวนของเอกสาร
• แทก หรอ attribute ของ HTML ทใชในการจดรปแบบสวนใหญถกยกเลกแลวใน HTML version 5 เชน <center>, alignซงยงใชไดอย แตเพอใหแยกสวนกนชดเจนควรใช CSS
3
![Page 4: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/4.jpg)
4
bedroom {ผามาน: สเทา;พน: ยาง ลายไม;
}
bathroom {พน: กระเบอง สเขยว;ผนง: สขาว;
}
CSS กบ HTMLHTML = การวางโครงสรางของบานCSS = การตกแตงบาน
![Page 5: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/5.jpg)
CSS Syntax• CSS ประกอบดวย 2 สวน ไดแก Selector และ รายการ Property
5
h1 { color: blue; font-size: 12px;}
propertyvalue
Selector
• Selector คอ ชออลเมนต, ชอคลาส หรอ id ทตองการน ามาจดรปแบบ
• CSS Property คอ ชอคณสมบตทตองการจดรปแบบ
• Value คอ คาทตองการก าหนดรปแบบใหกบ Property อาจมไดหลายคา แตละคาคนดวยชองวาง และปดทายดวย ;
• เครองหมาย { } ใชก าหนดขอบเขตของ Selector
![Page 6: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/6.jpg)
CSS Property
6
Property
คณสมบตเกยวกบส color (สตวอกษร)background-color (สพนหลง)
คณสมบตเกยวกบการจดชองวาง(Spacing)
margin paddingmargin-left, margin-right, margin-top, margin-bottompadding-left, padding-right, padding-top, padding-bottom
คณสมบตกรอบตางๆ border-widthborder-styleborder-colorborder (ก ำหนดควำมกวำง รปแบบ สในครงเดยว)
การจดต าแหนงขอความ text-aligntext-indentword-spacingletter-spacingline-heightwhite-space
![Page 7: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/7.jpg)
CSS Property
7
Property
Font font-familyfont-sizefont-weightfont-stylefont-varianttext-decoration
ขนาด widthheight
Layout positionleft, rightfloat, clear
Graphics background-imagebackground-repeatbackground-position
![Page 8: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/8.jpg)
คมอ CSS• เราสามารถเลอก CSS Property มาปรบใชกบเวบเพจโดยดจาก CSS Properties Reference
https://cssreference.iohttp://devdocs.io/css
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
8
![Page 9: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/9.jpg)
การแทรกค าสง CSS• Internal Style Sheet - ใสค าสง CSS ในแทก <head> ภายใตแทก <style> วธนเหมาะ
กบการจดรปแบบใหกบเวบหนาเดยว• External Style Sheet - ใสค าสง CSS ในไฟลแยกตางหาก แลวอางถงไฟลในแทก
<link> ซงอยภายใตแทก <head> เหมาะกบการจดรปแบบใหกบเวบหลายหนาทใชรปแบบเดยวกน
• Inline Style Sheet - ใสค าสง CSS ในแทกทตองการโดยตรง เพอจดรปแบบเฉพาะแทกนนๆ วธนควรท าเมอมความจ าเปนเทานน เพราะยากตอการกลบมาแกไขในภายหลง
หมายเหต หากมชอ Selector ซ ากน Browser จะเลอกใชรปแบบตามล าดบดงน
Inline Internal External 9
![Page 10: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/10.jpg)
Internal Style Sheet<!doctype html>
<html>
<head>
</head>
<body>
<h1>Computer Science Department, KKU</h1>
<p>ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยขอนแกน จดตงอยางเปนทางการเมอวนท 23 มนาคม 2537 ผลตบณฑตระดบปรญญาตรมาแลว 21 รน และปรญญาโทมาแลวมากกวา 10 รน </p>
<h2>เปาหมาย</h2><p>ผลตบณฑตทมคณภาพ มคณธรรมจรยธรรม และมความเชยวชาญเฉพาะดาน ตรงกบความตองการของผประกอบการ</p>
</body>
</html>
10
เพม CSS ในการก าหนดส font ของแทก <p>
<style>
p {color: maroon;
}
</style>
ผลลพธ
![Page 11: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/11.jpg)
External Style Sheet
11
<!doctype html>
<html>
<head>
<style>
p {
color: maroon;
}
</style>
</head>
<body>
<h1>Computer Science Department, KKU</h1>
<p>ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยขอนแกนจดตงอยางเปนทางการเมอวนท 23 มนาคม 2537 ผลตบณฑตระดบปรญญาตรมาแลว 21 รน และปรญญาโทมาแลวมากกวา 10 รน</p>
<link type="text/css" rel="stylesheet" href="../style/mystyle.css">
mystyle.css
p {color: maroon;
}
/* ไมตองใสแทก HTML ใดๆในน */
หากอยบน server เดยวกนควรอางองโดยใช Relative URL
![Page 12: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/12.jpg)
Inline Style Sheet
• ใช Attribute style แทรกในแทก แลวก าหนดคณสมบต CSS
12
<!doctype html><html><body>
<h1 style="font-family:sans-serif; color:gray;">Computer Science Department, KKU
</h1>
<p style="color:maroon">ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร</p>
<h2>เปาหมาย</h2><p style="color:maroon">ผลตบณฑตทมคณภาพ มคณธรรมจรยธรรม</p>
</body></html>
![Page 13: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/13.jpg)
p {
background-color: red;
border: 1px solid gray;
}
1 Selector มไดหลาย Property
13
ก าหนดใหแทก <p> มสพนเปนสแดง และ
ม 2 property
มกรอบขนาด 1 พกเซล แบบทบ สเทา
คาของ property สามารถมไดหลายคา โดยคนแตละคาดวยชองวาง
![Page 14: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/14.jpg)
Selector ทมรปแบบเหมอนกน
14
h1 {font-family: sans-serif;color: gray;
}
h2 {font-family: sans-serif;color: gray;
}
h1, h2 {font-family: sans-serif;color: gray;
}
รปแบบเหมอนกน สามารถก าหนดชอแทกไวดวยกนได โดยคนดวย comma
![Page 15: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/15.jpg)
ก าหนดรปแบบเพมเตมให Selector เดม
15
border-bottom: 1px solid black;
h1, h2 {font-family: sans-serif;color: gray;
}
เพมรปแบบเสนใตใหกบแทก<h1> และ <h2>
h1 {border-top: 1px solid black;
}
เมอตองการเพมบางรปแบบใหกบ <h1> ซงถกก าหนดรปแบบไปแลวสามารถท าไดโดยการระบ Selector h1 เพยงอยางเดยว
ผลลพธ
![Page 16: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/16.jpg)
การสบทอด property• เมอมการก าหนดคณสมบต CSS ในแทกทอยระดบเหนอกวา แทกทซอนอยจะไดรบคณสมบตนนไปดวย
16
body {font-family: sans-serif;
}
h1 {font-family: sans-serif;color: gray;
}
ไมจ าเปนตองใส เพราะไดรบการสบทอดจากแทกทอย level เหนอกวาแลว
![Page 17: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/17.jpg)
ปญหาการใช Selector โดยชอแทก
17
ถาตองการก าหนดส font ของแทก<p> ตวท 2 ใหมความแตกตางกบแทก <p> ตวแรกจะท าอยางไร ?
<!doctype html>
<html>
<head>
<style>
p {
color: maroon;
}
</style>
</head>
<body>
<h1>Computer Science Department, KKU</h1><p>ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร </p><h2>เปาหมาย</h2>
<p>ผลตบณฑตทมคณภาพ มคณธรรมจรยธรรม และมความเชยวชาญเฉพาะ</p>
</body>
</html>
![Page 18: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/18.jpg)
Class Selector• การก าหนด selector เปนชอ tag จะท าให tag เดยวกนมรปแบบเหมอนกนหมด ดงนนเราจะตงชอ Class ขน เพอใชในการจ าแนกรปแบบทมความแตกตางกน
18
p.greentea {color: green;
}
p.red {color: red;
}
คลาส red คลาส greentea
![Page 19: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/19.jpg)
Class Selector
19
<!doctype html>
<html>
<head>
<style>
p {
color: maroon;
}
</style>
</head>
<body>
<h1>Computer Science Department, KKU</h1><p>ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร </p><h2>เปาหมาย</h2>
<p>ผลตบณฑตทมคณภาพ มคณธรรมจรยธรรม และมความเชยวชาญเฉพาะ</p>
</body>
</html>
p.red {color: red;
}
p.greentea {color: green;
}
<p class="red">ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร </p>
<p class="greentea">ผลตบณฑตทมคณภาพ มคณธรรมจรยธรรม และมความเชยวชาญเฉพาะ</p>
ผลลพธ
![Page 20: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/20.jpg)
<!doctype html>
<html>
<head>
<style>
p {
color: maroon;
}
</style>
</head>
<body>
<h1>Computer Science Department, KKU</h1><p>ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร </p><h2>เปาหมาย</h2>
<p>ผลตบณฑตทมคณภาพ มคณธรรมจรยธรรม และมความเชยวชาญเฉพาะ</p>
</body>
</html>
p.greentea {color: green;
}
class ทไมผกกบแทก
20
<h1 class="greentea">Computer Science Department, KKU</h1>
<h2 class="greentea">เปาหมาย</h2>
p.red {color: red;
}
.greentea {color: green;
}
<p class="red">ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร </p>
<p class="greentea">ผลตบณฑตทมคณภาพ มคณธรรมจรยธรรม และมความเชยวชาญเฉพาะ</p>
ผลลพธ
![Page 21: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/21.jpg)
การใชรปแบบจากคลาส 2 คลาสขนไป
21
<html><head><style>
.red {color: red;
}
.line {border-bottom: 1px solid black;
}</style></head><body>
<p class="red line">Computer Science Department, KKU</p></body></html>
ผลลพธ
คนชอคลาสทน ามาใชดวยชองวาง
![Page 22: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/22.jpg)
ID Selector• id ใชส าหรบก าหนดรปแบบทปรบใชกบ 1 Element เทานน (single/unique element)
22
<html><head><style>#para1 { text-align:center; color:red; }#para2 { text-align:right; }
</style></head><body>
<div id="para1">This is a paragraph 1.</div><div id="para2">This is a paragraph 2.</div>
</body>
</html>
ผลลพธ
![Page 23: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/23.jpg)
Pseudo Selectors• Element บางตวสามารถใส
รปแบบพเศษได เชน แทก <a> ม 4 สถานะ ไดแก link, visited, hover, และ active การก าหนดรปแบบใหแตกตางกนไปในแตละสถานะนเรยกวา Pseudo Selectors
23
<!DOCTYPE html><html><head><style>a:link {color:green; text-decoration:none;}a:hover {color:red;background-color:yellow;}a:active {color:blue;}a:visited {color:pink;}
</style></head><body>
<a href="http://www.pantip.com">Pantip</a></body></html>
a:link a:hover
a:active a:visitedผลลพธ
![Page 24: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/24.jpg)
Attribute Selectors• Attribute Selectors คอ การเลอกใสรปแบบใหกบ Element ทมคา attribute ตามทก าหนด
24
<!DOCTYPE html><html><head><style>input[type="password"] {
background-color:red;}
</style></head><body>Username: <input type="text" name="username"><br>Password: <input type="password" name="pwd">
</body></html>
ผลลพธ
![Page 25: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/25.jpg)
สรป Selector
25
Selectors CSS code HTML code
Tag h1, h2 { color: red; } <h1>…</h1><h2>…</h2>
Tag รวมกบ Class p.large { font-size: 2em;} <p class="large">...</p>
Class .large { font-size: 16pt; } <p class="large">...</p> หรอ<div class="large">...</div> หรอ<span class="large">...</span>
id #para1 { text-align:center; } <p id="para1">…</p> หรอ<div id="para1">…</div> หรอ<span id="para1">…</span>
Pseudo a:link { text-decoration:none; } <a href="http://www.cc.com">…</a>
Attribute input[type="password"] {background-color:red;
}
<input type="password">
![Page 26: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/26.jpg)
CSS Comment• การอธบายสวนตางๆของโคด CSS จะชวยใหการแกไขโคดงายขนในภายหลง Comment ทเขยนขน Browser จะไมสนใจ
/*This is a comment*/
p {
text-align: center;
/*This is another comment*/
color: black;
font-family: arial;
}
26
![Page 27: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/27.jpg)
การก าหนดสใน CSS• แบบค าทมความหมายส เชน silver, maroon, yellow
ดสอนท https://developer.mozilla.org/en/docs/Web/CSS/color_value
• แบบเลขฐาน 16#ff0000
• แบบเลขฐาน 10rgb(255,255,0)
• แบบก าหนด % ความเขมของสrgb(80%,80%,100%)
27
R G B
R G B
ตวอยางp {
font-family: Arial, sans-serif;
background-color: #00ff00;
color: rgb(255,255,0);
font-size: 2em;
font-weight: bold;}
![Page 28: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/28.jpg)
คณสมบต Transparency• การท าสแบบโปรงแสงจะใช
วธก าหนดคาสดวย rgba(red, green, blue, คา alpha)
• การท าใหภาพมความโปรงแสงจะใชคณสมบต
opacity: คา alpha
28
<html><head><meta charset="utf-8"><style>
h1 {background-color: rgba(34, 234, 0, 0.3);border: 1px #336699 solid;
}img:hover {
opacity: 0.5;}
</style></head><body background="https://dev.cs.kku.ac.th/_temp/lemon-tile.jpg"><h1>Computer Science Department, KKU</h1><img src="https://dev.cs.kku.ac.th/_temp/Dog.png"></body></html>
คา alpha มคาในชวง 0-10 - โปรงใส1 - สทบ
![Page 29: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/29.jpg)
หนวยตางๆใน CSSชอหนวย ค าอธบาย
% เปอรเซนต
in นว
cm เซนตเมตร
mm มลลเมตร
em1em มขนาดเทากบฟอนตปจจบนของ Element นน 2em หมายถง 2 เทาของฟอนตปจจบน ตวอยางเชร Element นนมขนาดฟอนต 12 pt เมอก าหนดขนาด 2em จะเพมขนาดเปน 24 pt
ex 1ex คอ 1/2 ของความสงของฟอนตปกต
pt point (1 pt = 1/72 นว)
pc pica (1 pc = 12 points)
px pixels (จดบนหนาจอ)29
![Page 30: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/30.jpg)
หนวยตางๆใน CSSแนะน าใหใช ใชเทาทจ าเปน ไมแนะน าใหใช
ส าหรบแสดงผลออกทางหนาจอ em, px, % ex
pt, cm, mm,
in, pc
ส าหรบแสดงผลออกทางกระดาษทสงจากเครองพมพ
em, cm, mm,
in, pt, pc, %px, ex
30
1in = 2.54cm = 25.4mm = 72pt = 6pc
ทมา: https://www.w3.org/Style/Examples/007/units.en.html
![Page 31: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/31.jpg)
คณสมบตพนหลง (Background)• background-color สพนหลง
background-color: #e0ffff;
• background-image ระบภาพพนหลง
background-image: url('img_tree.png');
• background-size ก าหนดขนาดภาพพนหลง (กวางและสง) เชนbackground-size: 80px 60px;
• background-attachment ก าหนดใหยดภาพพนหลง ไมใหเลอนตามbackground-attachment: fixed;
31
![Page 32: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/32.jpg)
background-position ก าหนดต าแหนงภาพพนหลง
• left top• left center• left bottom• right top• right center• right bottom• center top• center center• center bottom
32
![Page 33: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/33.jpg)
คณสมบต background-repeat• repeat – วางพนหลงใหเตม (คา default)• repeat-x – วางพนหลงเฉพาะในแนวนอน• repeat-y – วางพนหลงเฉพาะในแนวตง• no-repeat – วางพนหลงเพยงครงเดยว
33
body { background-image: url('smiley.gif');background-repeat: no-repeat;background-position: left bottom;
}
![Page 34: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/34.jpg)
ตวอยาง
34
<html><head><style>.decoratedBox {
width: 600px;height: 130px;border: 1px solid gray;margin: 20px;padding: 20px;background-image: url('top-left.png'), url('bottom-right.png');
background-position: left top, right bottom;
background-repeat: no-repeat, no-repeat;}</style></head>
<body><div class="decoratedBox"><p>This box combines two background images, which are positioned in its top-left and bottom-right.</p></div></body></html>
ภาพแรก ใหแสดงดานบนซาย แสดงครงเดยว
ภาพทสอง ใหแสดงดานลางขวา แสดงครงเดยว
![Page 35: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/35.jpg)
ตวอยาง
35
<html><head><style>body {
margin: 20px;padding: 20px;background-image: url('top-left.png'), url('bottom-right.png');background-position: left top, right bottom;background-repeat: no-repeat, no-repeat;
}</style></head>
<body><p>This box combines two background images, which are positioned in its top-left and bottom-right.</p><br><br><br><br><br><br><br><br><br><br><br></body></html>
![Page 36: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/36.jpg)
ชนดของ HTML Element• Block Element คอ Element ทจองพนทบนหนาเวบในแนวนอนทงหมดของ browser เชน <h1>, <p>, <ul>, <table>, <div> ซง browser จะแสดงผลในบรรทดใหมเสมอ
• Inline Element คอ Element ทจองพนทบนหนาเวบตามขนาดของเนอหาภายในแทก หรอตามขนาดจรง เชน <b>, <td>, <a>, <img>, <span> การแสดงผลจะแสดงในแนวนอนเรยงตามล าดบ โดยไมขนบรรทดใหม จนกวาพนทแนวนอนจะเตม
36
![Page 37: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/37.jpg)
<div> และ <span>• แทก <div> (เปน Block) และแทก <span> (เปน Inline) มกใชใน
การก ากบ (Markup) หรอครอบสวนตางๆของหนาเวบ เพอน า class หรอ id มาจดรปแบบในสวนทก ากบ
37
<html>
<head>
<style>
.greentea { color: green; }
</style>
</head>
<body>
I love <div class="greentea">KKU</div> Jub Jub<br><br>
I love <span class="greentea">KKU</span> Jub Jub
</body></html>
ผลลพธ
![Page 38: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/38.jpg)
โครงสรางของ Block Element
Block Element ประกอบดวยสวนตางๆดงน• Margin คอ ชองวางทอยรอบกรอบ (border) สวนนอก ซง Margin จะไมมสพน แตจะ
เปนสโปรงใส (Transparent)• Border คอ เสนกรอบทลอมรอบสวนทเปน Padding และเนอหา • Padding คอ ชองวางทอยลอมรอบเนอหา
38
width
height
paddingbordermargin
top
left right
bottom
![Page 39: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/39.jpg)
CSS Property ส าหรบ Block Element• การก าหนดพนททง 4 ดาน ใชเพยง margin หรอ padding
margin: 60px; /* margin ทงสดาน 60 pixel เทากน */ padding: 30px; /* padding ทงสดาน 30 pixel เทากน */padding: 15px 30px 15px 30px; /* บน-15 ขวา-30 ลาง-15 ซาย-30 */
• ก าหนดพนทดานใดดานหนง เชนmargin-left: 50px;
margin-top: 30px;
padding-right: 3in;
padding-bottom: 5cm;
39
![Page 40: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/40.jpg)
Property ส าหรบ Block Element
40
<html><head><style>.box1 {margin: 30px;border: 2px solid black;padding: 30px;width: 400px;height: 50px;background: gray;
}.rounded {border-radius: 20px;
}.shadow {box-shadow: 5px 5px 10px gray;
}</style></head><body>
<div class="box1">W3C announced on... Forum (IDPF)</div><div class="box1 rounded">W3C announced... Forum (IDPF)</div><div class="box1 rounded shadow">W3C announced... Forum (IDPF)</div>
</body></html>
คาความ Blur เงา สเงา
ระยะหางของเงากบกรอบในแนวตง
ระยะหางของเงากบกรอบในแนวนอน
![Page 41: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/41.jpg)
Display Property• คา default ของทก Element มคา display ตามชนด elementอยแลว– Block Element คา default คอ display: block; – Inline Element คา default คอ display: inline;
• Element ทเปน Block สามารถก าหนดใหเปน inline ได เชน
img { display: block; }
• display property หากก าหนดคาเปน none แลว element นนจะไมแสดงผล 41
![Page 42: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/42.jpg)
display: flex; • display property ทมคาเปน flex ใชครอบ Block Element ทตองการใหปรบ width
หรอ height ได เพราะความกวางของ Block Element จะใชพนทในแนวนอนทงหมดเสมอ สวนความสงจะขนกบเนอหา
ศกษา Flex Layout เพมเตมทน https://css-tricks.com/snippets/css/a-guide-to-flexbox 42
ใช Flex Layout ไมใช Flex Layout
CSS.flex-container {
display: flex; background-color: grey;
}.item {
background-color: blue;margin: 10px;
}
HTML<div class="flex-container">
<div class="item">item 1</div><div class="item">item 2</div><div class="item">item 3</div>
</div>
![Page 43: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/43.jpg)
การจดโครงสรางของเวบ• การวางโครงสรางของเวบเกดจากการใชแทก<div> หรอ Semantic Markup ในการจดวาง รวมกบการใชค าสง CSSไมควรใช <table> ในการจดโครงสรางเวบ
43
![Page 44: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/44.jpg)
การจดโครงสรางของเวบดวย <div>
44
<html><head><style>body {
width:500px;margin-top: 0px;margin-left: auto;margin-right: auto;
}
#header {background-color:navy;color: white;font-size: 25px;margin-bottom: 0px;
}
#section {display: flex;
}
#menu {background-color: aqua;height: 200px;width: 100px;
}
#content {background-color: gray;height: 200px;width: 400px;
}
#footer {background-color:blue;text-align:center;
}
</style></head>
<body><div id="header">My Web Site</div><div id="section">
<div id="menu"><b>Menu</b><br>Add<br>Edit<br>Delete
</div><div id="content">Content...</div>
</div><div id="footer">Developed by...Mr.Yeah</div>
</body></html>
![Page 45: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/45.jpg)
Semantic Element• HTML5 มแทกทใชในการก ากบต าแหนงของหนาเวบ ทมชอทม
ความหมายมากขน <article>, <section>, <aside>, <hgroup>, <header>, <footer>, <nav>, <time>, <mark>, <figure>,<figcaption>
• แทกเหลานไมมผลตอการแสดงผลลพธ แตชวยใหการก ากบมความหมายมากขน และยงชวยให Search Engine เขาใจ
• ศกษาเพมเตม https://www.w3.org/TR/html5/sections.html45
![Page 46: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/46.jpg)
การจดโครงสรางของเวบดวยแทก Semantic
46
<html><head><style>body {width:500px;margin-top: 0px;margin-left: auto;margin-right: auto;
}
header {background-color:navy;color: white;font-size: 25px;margin-bottom: 0px;
}
section {display: flex;
}
nav {background-color: aqua;height: 200px;width: 100px;
}
article {background-color: gray;height: 200px;width: 400px;
}
footer {background-color:blue;text-align:center;
}
</style></head>
<body><header>My Web Site</header><section>
<nav><b>Menu</b><br>Add<br>Edit<br>Delete
</nav><article>Content...</article>
</section><footer>Developed by...Mr.Yeah</footer>
</body></html>
![Page 47: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/47.jpg)
จดกงกลางขอความ• ใชแทกทเปน black element และก าหนด text-align เปน center
47
CSS
.textcenter {text-align: center;
}
HTML
<div class="textcenter">The lines in this paragraph are all centered</div>
![Page 48: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/48.jpg)
จดกงกลาง block ทก าหนดขนาด• Block Element ทระบความกวาง การจดกงกลางจะก าหนดพนทดานซายและขวาให
เทากนดวยการใช auto กบ property margin-left และ margin-light
48
CSS.blocktext {
width: 200px;margin-left: auto;margin-right: auto;
}
margin-left: auto; margin-right: auto;
width: 200px;
HTML<div class="blocktext">
This rather narrow block of text is ...example.
</div>
![Page 49: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/49.jpg)
จดกงกลางรปภาพ• ก าหนดใหภาพแสดงผลแบบ Block Element (ปกตภาพเปนแบบ Inline Element) ดวย
display: block; และก าหนด margin-left และ margin-light เปน auto
49
CSS.center-img {
display: block;margin-left: auto;margin-right: auto;
}
HTML
<img src="wool.png" class="center-img">
margin-left: auto; margin-right: auto;
![Page 50: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/50.jpg)
การจดกงกลางในแนวตง• ก าหนดสวนสงของ Block Element ควรก าหนดเปน Flex Layout กอน แลวก าหนด
align-items: center;
50
CSS.vcenter {height: 150px;display: flex;align-items: center;background-color: aqua;
}
HTML
<div class="vcenter">This paragraph is vertically centered.</div>
margin-right: auto;
height: 150px;
![Page 51: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/51.jpg)
การจดกงกลางทงแนวตงและแนวนอน• ก าหนดสวนสงของ Block Element ควรก าหนดเปน Flex Layout กอน แลวก าหนด
align-items: center;
51
CSS.vcenter {height: 150px;display: flex;align-items: center;justify-content: center;background-color: aqua;
}
HTML
<div class="vcenter">This paragraph is vertically centered.</div>
![Page 52: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/52.jpg)
การจดกงกลางทถกยกเลกใน HTML5• attribute align ถกยกเลกแลวใน HTML5 เชน
<h6 align="center"> ... </h6>
• แทก center ถกยกเลกแลวใน HTML5 เชน<center>Hello</center>
52
![Page 53: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/53.jpg)
การวางต าแหนงขอความและรปภาพ
53
<!DOCTYPE html><html><head><style>
#img1 {vertical-align: top;
}#img2 {
vertical-align: middle;}#img3 {
vertical-align: baseline;}
</style></head><body>
<p>ภำพน <img src="icon.png" id="img1"> ใช vertical-align: top</p><p>ภำพน <img src="icon.png" id="img2"> ใช vertical-align: middle</p><p>ภำพน <img src="icon.png" id="img3"> ใช vertical-align: baseline</p>
</body></html>
![Page 54: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/54.jpg)
การจดวาง ElementElement ในเวบเพจสามารถจดวางไดหลายแบบ ดงน• Fixed• Relative• Absolute• Overlapping
54
![Page 55: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/55.jpg)
การจดวางแบบ Fixed• แบบ Fixed คอ การก าหนดต าแหนงบน Browser โดยท Browser
จะไมมการเคลอนท Element นนเมอมการเลอนหนา
55
<!DOCTYPE html><html><head><style>
p.pos_fixed {position:fixed;top:30px;right:5px;
}</style></head><body>
<p class="pos_fixed">Some more text</p><p><b>Note:</b> IE7 and IE8 supports the fixed value only if a !DOCTYPE is specified.</p></body></html>
ก าหนดต าแหนงทจะน าไปวาง
30pixel
5pixel
![Page 56: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/56.jpg)
การจดวางแบบ Relative
56
<!DOCTYPE html><html><head><style>
h2.pos_left {position: relative;left: -20px;
}h2.pos_right {
position: relative;left: 20px;
}</style></head><body><h2 class="pos_left">This heading.</h2><h2 class="pos_right">This heading.</h2></body></html>
ถอยหลงจากขอบทางซาย 20 pixel
เดนหนาจากขอบทางซาย 20 pixel
• แบบ Relative คอ การก าหนดต าแหนงบน Browser โดยเรมจากจดท Element นนอย เชน บรรทดท 2 ของหนา ถาตองการใหเคลอนไปทางซาย 20pixel กจะใชค าสง left: 20px
![Page 57: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/57.jpg)
ตวอยาง
57
<html><head><style>img {
position: relative;top: 100px;left: 100px;transform: rotate(10deg);
}</style></head><body>
<img src="https://dev.cs.kku.ac.th/_temp/r1.jpg"></body></html>
ก าหนดใหหมน 10 องศา จากจดปจจบน
![Page 58: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/58.jpg)
การจดวางแบบ Absolute• แบบ Absolute คอ การก าหนดต าแหนงโดยนบจากจดเรมตนคอดานบนและดานขางของ Browser
58
<!DOCTYPE html><html><head><style>h2 {
position: absolute;left: 100px;top: 150px;
}</style></head><body><h2>This is a heading with an absolute position</h2><p>With absolute positioning, an element can be placed anywhere on a page.</p></body></html>
150 pixel
100 pixel
![Page 59: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/59.jpg)
การจดวางแบบ Overlapping• แบบ Overlapping คอ การจดล าดบชนของ Element ในแนวแกน z โดย
ก าหนดเปนคาบวกหรอลบ คาบวกจะท าให Element อยดานบน คาลบจะท าใหอยดานลาง
59
<!DOCTYPE html><html><head><style>img {
position: absolute;left: 0px;top: 0px;z-index: -1;
}</style></head><body><h1>This is a heading</h1><img src="http://202.28.94.20/_temp/dog.png"><p>Because the image has a z-index of -1, it will be placed behind the text.</p></body></html>
ก าหนดต าแหนงภาพท (0,0) วางไวดานหลง
![Page 60: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/60.jpg)
ตวอยาง
60
<!DOCTYPE html><html><head><style>img {
position: relative;top: 100px;left: 100px;
}
img: hover {transform: rotate(10deg) scale(2);z-index: 2;
}</style></head><body>
<img src="https://dev.cs.kku.ac.th/_temp/r1.jpg" height="100"><img src="https://dev.cs.kku.ac.th/_temp/r2.jpg" height="100"><img src="https://dev.cs.kku.ac.th/_temp/r3.jpg" height="100">
</body></html>
ใหภาพอยเหนอภาพปจจบนระบใหขยายภาพแนวตงและนอน 2 เทา
ก าหนด Pseudo Selector เพอใหใชรปแบบนเมอมเมาสมาวาง
![Page 61: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/61.jpg)
Font• การก าหนด Font ใน CSS สามารถก าหนดชอฟอนตส ารองไวไดหลายชอ
• เมอ Browser หาฟอนตบนเครองผใชไมเจอ จะคนหาฟอนตทก าหนดไวในล าดบถดไป
61
body {
font-family: Verdana, Geneva, Arial, sans-serif;
}
![Page 62: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/62.jpg)
คณสมบต text-shadow
62
<!DOCTYPE html><html><head><style>#shadow1 {
font-size: 30px;font-weight: bold;text-shadow: gray 10px 10px 7px;
}
</style></head><body><div id="shadow1" align="center">
Shadow Text</div></body></html>
ระยะหางของเงากบขอความในแนวนอน ระยะหางของเงากบ
ขอความในแนวตง
คาความ Blur,คาการกระจายของเงา
สเงา
![Page 63: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/63.jpg)
Web Font• Web Font คอ ฟอนตทเกบไฟลไวบนเวบตของตนเอง เมอตองการใชฟอนตจะโหลดมาพรอมกบหนาเวบเพจ
• Web Font แกปญหาการใชฟอนตทมความแตกตางกนไปในแตละเครอง ท าใหไมตองกงวลวาเครองใดจะไมมฟอนตตดตงอย
• Web Font ชวยใหสามารถใชฟอนตทแปลกใหมได โดยไมตองแปลงขอความใหเปนรปภาพ
63
![Page 64: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/64.jpg)
ชนดของ Web Font• TTF, OTF – ใชไดกบทก Browser ยกเวนบน IE และ IOS
• EOT – ใชบน IE อยางเดยว
• WOFF – ใชไดทก Browser (ก าลงจะเปนมาตรฐาน)
• SVG – ใชบน IOS เทานน64
![Page 65: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/65.jpg)
การใช Web Font
65
<html><head>
<meta charset="UTF-8"><style>
/* 1. โหลดไฟล font */@font-face {
font-family: "myFont"; /* ต งชอ font */src: url("THSarabunNew.ttf"); /* ระบชอไฟล font ทจะโหลด */
}
/* 2. น า font ทโหลดแลวมาใช โดยใชชอตามทต งไว */body {
font-family: "myFont"; }
</style></head><body>ทดสอบ
</body></html>
สามารถเกบในโฟลเดอรอน และอางถงดวย Relative URL ได
![Page 66: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/66.jpg)
แหลง download font• Font ภาษาองกฤษ
– Font Squirrel, https://www.fontsquirrel.com– Dafont, https://www.dafont.com– Everything Fonts, https://everythingfonts.com/fonts
• Font ภาษาไทย– https://www.f0nt.com
66
![Page 67: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/67.jpg)
Google Web Fonts• Google Web Fonts คอ Web Font แบบ online ทใหบรการฟรแกนกพฒนา โดยไมตอง
โหลดไฟลฟอนตมาไวทเวบไซตของตนเอง นกพฒนาเพยงระบฟอนตทตองการใช
67
เลอก Web Font ทตองการ
ขนตอนการใช Google Web Font1. เลอก Web Font ทตองการจาก
https://fonts.google.com
2. เลอกฟอนตทตองการจากไอคอน
3. กดทแถบ Family Selected จะมแทกค าสงส าหรบน าไปใชบนหนาเวบ เชน <link
href="https://fonts.googleapis.com/cs
s?family=Kanit" rel="stylesheet">
4. เมอตองการน าฟอนตมาใชกบ Selector ใด ใหใสชอตามท google ระบ เชนbody {
font-family: 'Kanit', sans-serif;}
![Page 68: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/68.jpg)
Awesome Fonts• Awesome Fonts คอ ฟอนตทอยในรปแบบของ vector icons ใชส าหรบ
นกพฒนาทตองการแสดงไอคอนบนหนาเวบ ซงมความคมชดสง• การอางองใหก าหนดไฟล CSS จากเวบ https://fontawesome.com/start
68
Copy ค าสงในการโหลดAwesome Fonts ไปวางไวในแทก <head>
![Page 69: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/69.jpg)
Awesome Fonts• เลอกไอคอนทตองการใชจาก https://fontawesome.com/icons?d=gallery
69
![Page 70: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/70.jpg)
Awesome Fonts
70
Copy ค าสงทอางองถงคลาสของไอคอนไปวางไวในสวนของเวบทตองการ
![Page 71: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/71.jpg)
Responsive Design• Responsive Design คอ วธการพฒนาเวบใหสามารถแสดงผลไดตามขนาด
ของอปกรณซงมอยหลากหลาย เชน เครอง PC, Tablet, Smart Phone• Responsive Design ใชแนวคดทวา เขยนครงเดยว ท างานไดทกอปกรณ
(write once, run everywhere)
71
![Page 72: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/72.jpg)
แนวทางในการสรางเวบแบบ Responsive Design
• Mobile-first หมายถง ใชรปแบบโครงสรางเวบทมความเรยบงายมากทสด โดยออกแบบเรมตนทหนาจอมอถอ
• ใชคา CSS Property แบบ Relative (การอางองจากคาเรมตน)เชน ขนาด Font, ขนาดรปภาพ
• ตรวจสอบหนาจอดวย Media Query• ใช CSS Framework ทรองรบ เชน Bootstrap, Bulma
72
![Page 73: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/73.jpg)
การก าหนด viewport ดวยแทก <meta>
73
ก าหนดใหปรบพนทการแสดงผลหนาเวบ (viewport) ตามความกวางของอปกรณทใชในการเปดหนาเวบ
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0">
คณสมบต ค าอธบาย
width ความกวางของอปกรณ ระบคาเปนตวเลข (หนวย pixel) หรอใชค าวา "device-width" เพอใหใชความกวางของหนาจอจรงๆ (หากไมบอก Browser จะแสดงเหมอนหนาจอใหญปกต)
height ความสงของอปกรณ ระบคาเปนตวเลข (หนวย pixel) หรอใชค าวา "device-height" เพอใหใชความสงของหนาจอจรงๆ
initial-scale ก าหนดการขยาย (zoom) หนาจอเมอมการเปดหนาเวบ คา 1.0 หมายถงไมตองขยาย
minimum-scale ก าหนดขอบเขตต าสดในการขยาย หากมคาเปน 1.0 ผใชจะไมสามารถขยายได
maximum-scale ก าหนดขอบเขตสงสดในการขยาย หากมคาเปน 1.0 ผใชจะไมสามารถขยายได
user-scalable ก าหนดใหผใชสามารถขยายหนาจอไดหรอไม ซงมคาเปน yes หรอ no
พนฐานของการสรางเวบในปจจบน ควรก าหนดคา meta นเสมอ เพอรองรบหนาจอทมความแตกตางกน
![Page 74: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/74.jpg)
การใชขนาด Font แบบ Relative• ก าหนดหนวยของ Font เปน em แทน px
74
<html><head><meta name="viewport" content="width=device-width, initial-
scale=1.0, maximum-scale=1.0">
<style>body { font-size: 100%; }.topic { font-size: 2em; }.content { font-size: 1em; }
</style></head><body>
<div class="topic">หวขออยทน</div><div class="content">เนอหา เนอหา เนอหา เนอหา เนอหา เนอหา </div>
</body></html>
ก าหนดใหทงเวบใชขนาดฟอนตมคาเรมตนท 100%
หากตองการใหฟอนตมขนาดเพมจากขนาดเรมตนกเทา ใหใชหนวย em แทน px เชน2 em = 200%1 em = 100%
![Page 75: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/75.jpg)
การใชขนาดรปภาพ แบบ Relative• ใช max-width เพอก าหนดใหแสดงภาพทความกวางเตมขนาดจอ
แตความกวางสงสดไมเกนความกวางของไฟลภาพจรง โดยระบขนาดเปนเปอรเซนต
75
<html><head><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"><style>
img {max-width: 100%;
}</style></head><body>
<div class="guarantee">This region represents the main content. In this layout, it uses a fixed width of 330 pixels. Here is some sample text to make it seem more realistic</div><img src="https://dev.cs.kku.ac.th/_temp/r1.jpg">
</body></html>
![Page 76: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/76.jpg)
Media Query• Media Query คอ คอ การตรวจสอบรายละเอยดของอปกรณทผใช ใชใน
การชมเวบไซต เชน ขนาด, resolution, color capabilities เปนตน • ขอมลทไดจาก Media query จะชวยใหนกพฒนาก าหนดรปแบบ CSS ท
เหมาะกบการแสดงผลได
76
![Page 77: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/77.jpg)
Media Query• การก าหนดรปแบบ CSS ใหกบหนาจอแตละขนาด ท าได 2วธ ไดแก– แยกไฟล CSS ส าหรบแตละหนาจอ– รวมไฟล CSS ส าหรบทกหนาจอในไฟลเดยว
77
![Page 78: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/78.jpg)
การแยกไฟล CSS ส าหรบแตละหนาจอ
• บรรทดท 1 คอ การก าหนด CSS ใหกบอปกรณทมความกวางสงสด 480 pixel หรอนอยกวานน
• บรรทดท 2 คอ การก าหนด CSS ใหกบอปกรณทมความกวางต าสด 481 pixel หรอมากกวานน
78
<link rel="stylesheet" media="screen and (max-width: 480px)" href="smartphone.css">
<link rel="stylesheet" media="screen and (min-width: 481px)" href="desktop.css">
![Page 79: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/79.jpg)
การรวมไฟล CSS ส าหรบทกหนาจอในไฟลเดยว
79
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"><style>@media screen and (max-width: 480px) {
.guarantee {margin-left: 30px;font-size: 2em;color: green;
}}
@media screen and (min-width: 481px) {.guarantee {
margin-left: 250px;color: blue;
}}</style></head><body><div class="guarantee">This region represents the main content. Inthis layout, it uses a fixed width of 330 pixels. Here is some sampletext to make it seem more realistic:</div></body></html>
![Page 80: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/80.jpg)
การก าหนด Media Query แบบชวง
80
/* ก าหนดรปแบบของหนาจอปกต */
@media (min-width: 600px) and (max-width: 700px) {/* ก าหนดรปแบบของหนาจอ 600-700 pixel */
}@media (min-width: 400px) and (max-width: 599.99px) {
/* ก าหนดรปแบบของหนาจอ 400-600 pixel */}@media (max-width: 399.99px) {
/* ก าหนดรปแบบของหนาจอทต ากวา 400 pixel */}
![Page 81: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/81.jpg)
การจด Layout แบบ Responsive Design
81
![Page 82: CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ](https://reader034.vdocuments.net/reader034/viewer/2022042810/5f9970618caf51112513f015/html5/thumbnails/82.jpg)
82
<html><head><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"><style>
.menu {background-color: black;color: white;text-align: center;width: 30%;
}
.content {background-color: gainsboro;width: 60%;
}
.ads {background-color: cornflowerblue;width: 10%;
}
.flex { display: flex; }
@media (max-width : 480px) {.flex { display: block; }.menu { width: auto; }.content { width: auto; }.ads { width: auto; }
}
</style></head><body><div class="flex">
<div class="menu">Menu1<br>Menu2<br>Menu3<br></div><div class="content">In publishing, art, and communication, … as speech, writing or any of various arts".</div>
<div class="ads">advertising<br>advertising<br>advertising<br></div></div></body></html>
ผลลพธเมอขนาดหนาจอไมเกน 480 pixel
ผลลพธเมอขนาดหนาจอมากกวา 480 pixel