Theerayut Thongkrau
CSSCascading Style Sheets
Chapter 2
CSS• CSS ยอมาจาก Cascading Style Sheets• เปนภาษาทใชในการก าหนดรปแบบการแสดงผลของ
HTML Element• เกดขนพรอมกบ HTML 4.0 เพอแกปญหาการแสดงผล• สามารถแทรกค าสง CSS ในโคด HTML หรอแยกสวนออกเปนไฟล .css ได
2
CSS กบ HTML• HTML ใชก าหนดโครงสรางและก ากบสวนประกอบของหนาเวบ
• CSS ใชก าหนดรปแบบการแสดงผลของหนาเวบ ในแตละสวนของเอกสาร
• แทก หรอ attribute ของ HTML ทใชในการจดรปแบบสวนใหญถกยกเลกแลวใน HTML version 5 เชน <center>, alignซงยงใชไดอย แตเพอใหแยกสวนกนชดเจนควรใช CSS
3
4
bedroom {ผามาน: สเทา;พน: ยาง ลายไม;
}
bathroom {พน: กระเบอง สเขยว;ผนง: สขาว;
}
CSS กบ HTMLHTML = การวางโครงสรางของบานCSS = การตกแตงบาน
CSS Syntax• CSS ประกอบดวย 2 สวน ไดแก Selector และ รายการ Property
5
h1 { color: blue; font-size: 12px;}
propertyvalue
Selector
• Selector คอ ชออลเมนต, ชอคลาส หรอ id ทตองการน ามาจดรปแบบ
• CSS Property คอ ชอคณสมบตทตองการจดรปแบบ
• Value คอ คาทตองการก าหนดรปแบบใหกบ Property อาจมไดหลายคา แตละคาคนดวยชองวาง และปดทายดวย ;
• เครองหมาย { } ใชก าหนดขอบเขตของ Selector
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
CSS Property
7
Property
Font font-familyfont-sizefont-weightfont-stylefont-varianttext-decoration
ขนาด widthheight
Layout positionleft, rightfloat, clear
Graphics background-imagebackground-repeatbackground-position
คมอ CSS• เราสามารถเลอก CSS Property มาปรบใชกบเวบเพจโดยดจาก CSS Properties Reference
https://cssreference.iohttp://devdocs.io/css
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
8
การแทรกค าสง CSS• Internal Style Sheet - ใสค าสง CSS ในแทก <head> ภายใตแทก <style> วธนเหมาะ
กบการจดรปแบบใหกบเวบหนาเดยว• External Style Sheet - ใสค าสง CSS ในไฟลแยกตางหาก แลวอางถงไฟลในแทก
<link> ซงอยภายใตแทก <head> เหมาะกบการจดรปแบบใหกบเวบหลายหนาทใชรปแบบเดยวกน
• Inline Style Sheet - ใสค าสง CSS ในแทกทตองการโดยตรง เพอจดรปแบบเฉพาะแทกนนๆ วธนควรท าเมอมความจ าเปนเทานน เพราะยากตอการกลบมาแกไขในภายหลง
หมายเหต หากมชอ Selector ซ ากน Browser จะเลอกใชรปแบบตามล าดบดงน
Inline Internal External 9
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>
ผลลพธ
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
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>
p {
background-color: red;
border: 1px solid gray;
}
1 Selector มไดหลาย Property
13
ก าหนดใหแทก <p> มสพนเปนสแดง และ
ม 2 property
มกรอบขนาด 1 พกเซล แบบทบ สเทา
คาของ property สามารถมไดหลายคา โดยคนแตละคาดวยชองวาง
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
ก าหนดรปแบบเพมเตมให 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 เพยงอยางเดยว
ผลลพธ
การสบทอด property• เมอมการก าหนดคณสมบต CSS ในแทกทอยระดบเหนอกวา แทกทซอนอยจะไดรบคณสมบตนนไปดวย
16
body {font-family: sans-serif;
}
h1 {font-family: sans-serif;color: gray;
}
ไมจ าเปนตองใส เพราะไดรบการสบทอดจากแทกทอย level เหนอกวาแลว
ปญหาการใช 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>
Class Selector• การก าหนด selector เปนชอ tag จะท าให tag เดยวกนมรปแบบเหมอนกนหมด ดงนนเราจะตงชอ Class ขน เพอใชในการจ าแนกรปแบบทมความแตกตางกน
18
p.greentea {color: green;
}
p.red {color: red;
}
คลาส red คลาส greentea
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>
ผลลพธ
<!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>
ผลลพธ
การใชรปแบบจากคลาส 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>
ผลลพธ
คนชอคลาสทน ามาใชดวยชองวาง
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>
ผลลพธ
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ผลลพธ
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>
ผลลพธ
สรป 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">
CSS Comment• การอธบายสวนตางๆของโคด CSS จะชวยใหการแกไขโคดงายขนในภายหลง Comment ทเขยนขน Browser จะไมสนใจ
/*This is a comment*/
p {
text-align: center;
/*This is another comment*/
color: black;
font-family: arial;
}
26
การก าหนดสใน 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;}
คณสมบต 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 - สทบ
หนวยตางๆใน 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
หนวยตางๆใน 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
คณสมบตพนหลง (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
background-position ก าหนดต าแหนงภาพพนหลง
• left top• left center• left bottom• right top• right center• right bottom• center top• center center• center bottom
32
คณสมบต 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;
}
ตวอยาง
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>
ภาพแรก ใหแสดงดานบนซาย แสดงครงเดยว
ภาพทสอง ใหแสดงดานลางขวา แสดงครงเดยว
ตวอยาง
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>
ชนดของ HTML Element• Block Element คอ Element ทจองพนทบนหนาเวบในแนวนอนทงหมดของ browser เชน <h1>, <p>, <ul>, <table>, <div> ซง browser จะแสดงผลในบรรทดใหมเสมอ
• Inline Element คอ Element ทจองพนทบนหนาเวบตามขนาดของเนอหาภายในแทก หรอตามขนาดจรง เชน <b>, <td>, <a>, <img>, <span> การแสดงผลจะแสดงในแนวนอนเรยงตามล าดบ โดยไมขนบรรทดใหม จนกวาพนทแนวนอนจะเตม
36
<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>
ผลลพธ
โครงสรางของ Block Element
Block Element ประกอบดวยสวนตางๆดงน• Margin คอ ชองวางทอยรอบกรอบ (border) สวนนอก ซง Margin จะไมมสพน แตจะ
เปนสโปรงใส (Transparent)• Border คอ เสนกรอบทลอมรอบสวนทเปน Padding และเนอหา • Padding คอ ชองวางทอยลอมรอบเนอหา
38
width
height
paddingbordermargin
top
left right
bottom
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
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 เงา สเงา
ระยะหางของเงากบกรอบในแนวตง
ระยะหางของเงากบกรอบในแนวนอน
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
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>
การจดโครงสรางของเวบ• การวางโครงสรางของเวบเกดจากการใชแทก<div> หรอ Semantic Markup ในการจดวาง รวมกบการใชค าสง CSSไมควรใช <table> ในการจดโครงสรางเวบ
43
การจดโครงสรางของเวบดวย <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>
Semantic Element• HTML5 มแทกทใชในการก ากบต าแหนงของหนาเวบ ทมชอทม
ความหมายมากขน <article>, <section>, <aside>, <hgroup>, <header>, <footer>, <nav>, <time>, <mark>, <figure>,<figcaption>
• แทกเหลานไมมผลตอการแสดงผลลพธ แตชวยใหการก ากบมความหมายมากขน และยงชวยให Search Engine เขาใจ
• ศกษาเพมเตม https://www.w3.org/TR/html5/sections.html45
การจดโครงสรางของเวบดวยแทก 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>
จดกงกลางขอความ• ใชแทกทเปน black element และก าหนด text-align เปน center
47
CSS
.textcenter {text-align: center;
}
HTML
<div class="textcenter">The lines in this paragraph are all centered</div>
จดกงกลาง 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>
จดกงกลางรปภาพ• ก าหนดใหภาพแสดงผลแบบ 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;
การจดกงกลางในแนวตง• ก าหนดสวนสงของ 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;
การจดกงกลางทงแนวตงและแนวนอน• ก าหนดสวนสงของ 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>
การจดกงกลางทถกยกเลกใน HTML5• attribute align ถกยกเลกแลวใน HTML5 เชน
<h6 align="center"> ... </h6>
• แทก center ถกยกเลกแลวใน HTML5 เชน<center>Hello</center>
52
การวางต าแหนงขอความและรปภาพ
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>
การจดวาง ElementElement ในเวบเพจสามารถจดวางไดหลายแบบ ดงน• Fixed• Relative• Absolute• Overlapping
54
การจดวางแบบ 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
การจดวางแบบ 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
ตวอยาง
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 องศา จากจดปจจบน
การจดวางแบบ 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
การจดวางแบบ 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) วางไวดานหลง
ตวอยาง
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 เพอใหใชรปแบบนเมอมเมาสมาวาง
Font• การก าหนด Font ใน CSS สามารถก าหนดชอฟอนตส ารองไวไดหลายชอ
• เมอ Browser หาฟอนตบนเครองผใชไมเจอ จะคนหาฟอนตทก าหนดไวในล าดบถดไป
61
body {
font-family: Verdana, Geneva, Arial, sans-serif;
}
คณสมบต 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,คาการกระจายของเงา
สเงา
Web Font• Web Font คอ ฟอนตทเกบไฟลไวบนเวบตของตนเอง เมอตองการใชฟอนตจะโหลดมาพรอมกบหนาเวบเพจ
• Web Font แกปญหาการใชฟอนตทมความแตกตางกนไปในแตละเครอง ท าใหไมตองกงวลวาเครองใดจะไมมฟอนตตดตงอย
• Web Font ชวยใหสามารถใชฟอนตทแปลกใหมได โดยไมตองแปลงขอความใหเปนรปภาพ
63
ชนดของ Web Font• TTF, OTF – ใชไดกบทก Browser ยกเวนบน IE และ IOS
• EOT – ใชบน IE อยางเดยว
• WOFF – ใชไดทก Browser (ก าลงจะเปนมาตรฐาน)
• SVG – ใชบน IOS เทานน64
การใช 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 ได
แหลง 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
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;}
Awesome Fonts• Awesome Fonts คอ ฟอนตทอยในรปแบบของ vector icons ใชส าหรบ
นกพฒนาทตองการแสดงไอคอนบนหนาเวบ ซงมความคมชดสง• การอางองใหก าหนดไฟล CSS จากเวบ https://fontawesome.com/start
68
Copy ค าสงในการโหลดAwesome Fonts ไปวางไวในแทก <head>
Awesome Fonts• เลอกไอคอนทตองการใชจาก https://fontawesome.com/icons?d=gallery
69
Awesome Fonts
70
Copy ค าสงทอางองถงคลาสของไอคอนไปวางไวในสวนของเวบทตองการ
Responsive Design• Responsive Design คอ วธการพฒนาเวบใหสามารถแสดงผลไดตามขนาด
ของอปกรณซงมอยหลากหลาย เชน เครอง PC, Tablet, Smart Phone• Responsive Design ใชแนวคดทวา เขยนครงเดยว ท างานไดทกอปกรณ
(write once, run everywhere)
71
แนวทางในการสรางเวบแบบ Responsive Design
• Mobile-first หมายถง ใชรปแบบโครงสรางเวบทมความเรยบงายมากทสด โดยออกแบบเรมตนทหนาจอมอถอ
• ใชคา CSS Property แบบ Relative (การอางองจากคาเรมตน)เชน ขนาด Font, ขนาดรปภาพ
• ตรวจสอบหนาจอดวย Media Query• ใช CSS Framework ทรองรบ เชน Bootstrap, Bulma
72
การก าหนด 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 นเสมอ เพอรองรบหนาจอทมความแตกตางกน
การใชขนาด 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%
การใชขนาดรปภาพ แบบ 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>
Media Query• Media Query คอ คอ การตรวจสอบรายละเอยดของอปกรณทผใช ใชใน
การชมเวบไซต เชน ขนาด, resolution, color capabilities เปนตน • ขอมลทไดจาก Media query จะชวยใหนกพฒนาก าหนดรปแบบ CSS ท
เหมาะกบการแสดงผลได
76
Media Query• การก าหนดรปแบบ CSS ใหกบหนาจอแตละขนาด ท าได 2วธ ไดแก– แยกไฟล CSS ส าหรบแตละหนาจอ– รวมไฟล CSS ส าหรบทกหนาจอในไฟลเดยว
77
การแยกไฟล 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">
การรวมไฟล 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>
การก าหนด 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 */}
การจด Layout แบบ Responsive Design
81
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
