Embed Size (px)
Citation preview
Theerayut Thongkrau
CSSCascading Style Sheets
Chapter 2
CSS• CSS ยอมาจาก Cascading Style Sheets• เปนภาษาทใชในการก าหนดรปแบบการแสดงผลของ
HTML Element• เกดขนพรอมกบ HTML 4.0 เพอแกปญหาการแสดงผล• สามารถแทรกค าสง CSS ในโคด HTML หรอแยกสวนออกเปนไฟล .css ได
2
CSS กบ HTML• HTML ใชก าหนดโครงสรางและก ากบสวนประกอบของหนาเวบ
• แทก หรอ attribute ของ HTML ทใชในการจดรปแบบสวนใหญถกยกเลกแลวใน HTML version 5 เชน <center>, align
• CSS ใชก าหนดรปแบบการแสดงผลของหนาเวบ ในแตละสวนของเอกสาร
3
4
bedroom {ผามาน: สเทา;พน: ยาง ลายไม;
}
bathroom {พน: กระเบอง สเขยว;ผนง: สขาว;
}
CSS กบ HTMLHTML = การวางโครงสรางของบานCSS = การตกแตงบาน
CSS Syntax• ไวยากรณของ CSS ประกอบดวย 2 สวน ไดแก Selector และ
รายการ Property
– Selector คอ ชออลเมนต, ชอคลาส หรอรหส (id) ทตองการจดรปแบบ– Property คอ ชอคณสมบตทตองการจดรปแบบ– Value คอ คาทตองการก าหนดรปแบบใหกบ Property อาจมไดหลายคา แตละคาคนดวย
ชองวาง และปดทายดวย ;– เครองหมาย { } ใชก าหนดขอบเขตของ Selector 5
h1 { color: blue; font-size: 12px;}
propertyvalue
Selector
ตวอยางค าสงใน CSS
p {
color: maroon;
}
6
Selector
ชอ Property คา Property
ก าหนดขอความในแทก <p> เปนสน าตาลแดง
การแทรกค าสง CSS• Internal Style Sheet - ใสค าสง CSS ในแทก <head> ภายใตแทก <style> วธนเหมาะ
กบการจดรปแบบใหกบเวบหนาเดยว• External Style Sheet - ใสค าสง CSS ในไฟลแยกตางหาก แลวอางถงไฟลในแทก
<link> ซงอยภายใตแทก <head> เหมาะกบการจดรปแบบใหกบเวบหลายหนาทใชรปแบบเดยวกน
• Inline Style Sheet - ใสค าสง CSS ในแทกทตองการโดยตรง เพอจดรปแบบเฉพาะแทกนนๆ วธนควรท าเมอมความจ าเปนเทานน เพราะยากตอการกลบมาแกไขในภายหลง
หมายเหต หากมชอ Selector ซ ากน Browser จะเลอกใชรปแบบตามล าดบดงน
Inline Internal External 7
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>
8
เพม CSS ในการก าหนดส font ของแทก <p>
<style>
p {color: maroon;
}
</style>
ผลลพธ
External Style Sheet
9
<!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 ใดๆในน */
อางองโดยใช Relative URL
Inline Style Sheet
• ใช Attribute style แทรกในแทก แลวก าหนดคณสมบต CSS
10
<!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>
CSS Comment• การอธบายสวนตางๆของโคด CSS จะชวยใหการแกไขโคดงายขนในภายหลง Comment ทเขยนขน Browser จะไมสนใจ
/*This is a comment*/
p {
text-align: center;
/*This is another comment*/
color: black;
font-family: arial;
}
11
ตวอยาง Property
12
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
ตวอยาง Property
13
Property
Font font-familyfont-sizefont-weightfont-stylefont-varianttext-decoration
ขนาด widthheight
Layout positionleft, rightfloat, clear
Graphics background-imagebackground-repeatbackground-position
คมอ CSS• เราสามารถเลอกคณสมบตตางๆมาปรบใชกบเวบเพจโดยดจาก CSS Properties Reference
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
14
กจกรรม
15
<html><head>
<style>/* เพมค าสง CSS ทน */
</style></head><body>
<h1>CSS Tutorials</h1><p>Free web tutorials at
<a href="http://www.aa.cc">AA.cc</a>
</p></body></html>
• จดรปแบบแทก <body> โดยก าหนดคณสมบตดงน– เปลยน “สพนหลง” จากเดม “สขาว ” มาเปน “สด า”– เปลยน “สตวอกษร” เปน “สสม”– ก าหนด “ขนาดตวอกษร” ใหเปน “24px”– ก าหนด “การจดต าแหนงตวอกษร” จากเดม “ชดซาย” มาเปน “กงกลาง”
• จดรปแบบแทก <h1> โดยก าหนดคณสมบตดงน– เปลยน “สตวอกษร” จากเดม “สสม” มาเปน “สเหลอง”
• จดรปแบบแทก <a> โดยก าหนดคณสมบตดงน– เปลยน “สตวอกษร” จากเดม “สน าเงน” มาเปน “สเขยว”– เปลยน “น าหนกตวอกษร” จากเดม “ตวปกต” มาเปน “ตวหนา”
p {
background-color: red;
border: 1px solid gray;
}
1 Selector มไดหลาย Property
16
ก าหนดใหแทก <p> มสพนเปนสแดง และ
ม 2 property
มกรอบขนาด 1 พกเซล แบบทบ สเทา
คาของ property สามารถมไดหลายคา โดยคนแตละคาดวยชองวาง
Selector ทมรปแบบเหมอนกน
17
h1 {font-family: sans-serif;color: gray;
}
h2 {font-family: sans-serif;color: gray;
}
h1, h2 {font-family: sans-serif;color: gray;
}
รปแบบเหมอนกน สามารถก าหนดชอแทกไวดวยกนได โดยคนดวย comma
ก าหนดรปแบบเพมเตมให Selector เดม
18
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 ในแทกทอยระดบเหนอกวา แทกทซอนอยจะไดรบคณสมบตนนไปดวย
19
body {font-family: sans-serif;
}
h1 {font-family: sans-serif;color: gray;
}
ไมจ าเปนตองใส เพราะไดรบการสบทอดจากแทกทอย level เหนอกวาแลว
ปญหาการใช Selector โดยชอแทก
20
ถาตองการก าหนดส 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 ขน เพอใชในการจ าแนกรปแบบทมความแตกตางกน
21
p.greentea {color: green;
}
p.red {color: red;
}
คลาส red คลาส greentea
Class Selector
22
<!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 ทไมผกกบแทก
23
<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 คลาสขนไป
24
<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)
25
<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
26
<!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 ตามทก าหนด
27
<!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
28
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ชอหนวย ค าอธบาย
% เปอรเซนต
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
การก าหนดสใน CSS• แบบค าทมความหมายส เชน silver, maroon, yellow
ดสอนท https://developer.mozilla.org/en/docs/Web/CSS/color_value
• แบบเลขฐาน 16#ff0000
• แบบเลขฐาน 10rgb(255,255,0)
• แบบก าหนด % ความเขมของสrgb(80%,80%,100%)
31
R G B
R G B
ตวอยางp {
font-family: Arial, sans-serif;
color: rgb(255,255,0);
font-size: 2ex;
font-weight: bold;}
ชนดของ HTML Element• Block Element คอ Element ทใชก าหนดขอบเขตพนทบนหนาเวบแบบ Block เชน <h1>, <p>, <ul>, <table>, <div> มบรรทดวางทงกอนและหลงแทก
• Inline Element คอ Element ทใชก าหนดขอบเขตของขอความในบรรทดเดยวกน เชน <b>, <td>, <a>, <img>, <span> ไมมบรรทดวางกอนและหลงแทก
32
โครงสรางของ Block Element
Block Element ประกอบดวยสวนตางๆดงน• Margin คอ ชองวางทอยรอบกรอบ (border) สวนนอก ซง Margin จะไมมสพน แตจะ
เปนสโปรงใส (Transparent)• Border คอ เสนกรอบทลอมรอบสวนทเปน Padding และเนอหา • Padding คอ ชองวางทอยลอมรอบเนอหา
33
width
height
paddingbordermargin
top
left right
bottom
Property ส าหรบ Block Element
34
<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 เงา สเงา
ระยะหางของเงากบกรอบในแนวตง
ระยะหางของเงากบกรอบในแนวนอน
กจกรรม
35
<!DOCTYPE html><html><body>อำย - แจมจนทร โปรเจค (สงโต น ำโชค)<iframe width="560" height="315" src="http://www.youtube.com/embed/SjEQrlpshSw" ></iframe>
</body></html>
แทก <div> และ <span>• ใชแทก <div> หรอ <span> ในการแบงขอบเขตของการแสดงผล
ตามรปแบบ CSS ทก าหนด เชน class หรอ id กรณทไมตองการใหขนกบการแสดงผลของแทกอนๆ
36
<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>
ผลลพธ
กจกรรม• จากเอกสาร HTML ดานลางนสรางคลาสเพอใชในการจดรปแบบ
37
<!DOCTYPE html>
<html>
<body>
<h2>Cascading Style Sheets</h2>
<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation
semantics (the look and formatting) of a document written in a markup language. Its most common
application is to style web pages written in HTML, but the language can also be applied to any kind of
XML document, including plain XML, SVG and XUL.</p>
</body>
</html>
การจดวาง ElementElement ในเวบเพจสามารถจดวางไดหลายแบบ ดงน• Fixed• Relative• Absolute• Overlapping• Float
38
การจดวางแบบ Fixed• แบบ Fixed คอ การก าหนดต าแหนงบน Browser โดยท Browser
จะไมมการเคลอนท Element นนเมอมการเลอนหนา
39
<!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
40
<!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
การจดวางแบบ Absolute• แบบ Absolute คอ การก าหนดต าแหนงโดยนบจากจดเรมตนคอดานบนและดานขางของ Browser
41
<!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 อยดานบน คาลบจะท าใหอยดานลาง
42
<!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) วางไวดานหลง
กจกรรม• จากเอกสาร HTML ดานลางนจงก าหนดรปแบบใหตรงตามตวอยาง
43
<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body><img src="http://202.28.94.20/_temp/note.jpg" width="30%"><div>ฉนรกเธอ<br>I love you</div></body></html>
การจดวางแบบ Float• เปนการบงคบให Element ลอยเหนอวตถอน โดยทไมท าใหบงขอมลทอยสวนหลง
44
<!DOCTYPE html><html><head><style>
img {float: right;
}</style></head><body><p>In the paragraph below, we have added an image with style <b>float:right</b>.The result is that the image will float to the right in the paragraph.</p><p><img src="http://202.28.94.20/_temp/Dog.png"> This is some text. This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is sometext. This is some text. This is some text. This is some text. This issome text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is sometext. This is some text. This is some text. This is some text. This issome text. This is some text. This is some text. This is some text.This is some text. This is some text.</p></body></html>
การจดวางแบบ Clear• เปนการก าหนดใหอนญาตใหม Element ทมรปแบบ Float อยหรอไม เชน clear:left คอ หามม Element ลอยอยดานซาย
45
<!DOCTYPE html><html><head><style>
img {float: left;
}p.clear {
clear: both;}
</style></head><body><img src="http://202.28.94.20/_temp/Dog.png"><p>This is some text. This is some text. This is some text. This issome text. This is some text. This is some text.</p><p class="clear">This is also some text. This is also some text.This is also some text. This is also some text. This is also sometext. This is also some text.</p></body></html> Paragraph นไมยอมใหมภาพ
มาแทรกทงซายและขวา
Display Property• ใชในการควบคม Layout ของแตละ Element • ทก Element ถกก าหนด display property ตามชนดอยแลว
– Block Element ถกก าหนด display: block;– Inline Element ถกก าหนด display: inline;
• สามารถก าหนดให Element ทเปน Block ใหเปน inline ได• คาของ display property มหลายคา เชน none ไมแสดง
element หรอซอน46
display: flex; • display property ทมคาเปน flex ใชครอบ Block Element ทตองการใหปรบ width
หรอ height ได เพราะความกวางของ Block Element จะใชพนทในแนวนอนทงหมดเสมอ สวนความสงจะขนกบเนอหา
ศกษา Flex Layout เพมเตมทน https://css-tricks.com/snippets/css/a-guide-to-flexbox 47
ใช 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>
การจดกงกลาง• จดกงกลางขอความ• จดกงกลาง Block Element• จดกงกลางรปภาพ• จดกงกลางในแนวตง• จดกงกลางทงแนวตงและแนวนอน
48
จดกงกลางขอความ• ใช property ชอ text-align ก าหนดคาเปน center
49
CSS
.textcenter {text-align: center;
}
HTML
<div class="textcenter">The lines in this paragraph are all centered</div>
จดกงกลาง Block Element• ก าหนดพนทวางดานซายและขวามขนาดเทากนดวยการใช auto กบ
property margin-left และ margin-light
50
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; และจงก าหนด auto กบ property margin-left และ margin-light
51
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;
52
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;
53
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>
54
การจดโครงสรางของเวบ• การวางโครงสรางของเวบเกดจากการใชแทก <div> หรอ
Semantic Markup ในการจดวาง รวมกบการใชค าสง CSS
55
การจดโครงสรางของเวบดวย <div>
56
<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• HTML 5 มแทกทใชในการก ากบต าแหนงของหนาเวบ ทมชอทม
ความหมายมากขน <article>, <section>, <aside>, <hgroup>, <header>, <footer>, <nav>, <time>, <mark>, <figure>,<figcaption>
• แทกเหลานไมมผลตอการแสดงผลลพธ เปนเพยงบอกสวนประกอบของเวบเพจ และให Search Engine เขาใจเทานน
• ศกษาเพมเตม https://www.w3.org/TR/html5/sections.html57
การจดโครงสรางของเวบดวยแทก Semantic
58
<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>
กจกรรม• จงสรางเวบไซตทมรปแบบดงน
59
หนาแรกเกยวกบบรษทสนคาบรการตดตอ
Logoอะไรกได
Font• การก าหนด Font ใน CSS สามารถก าหนดชอฟอนตส ารองไวไดหลายชอ
• เมอ Browser หาฟอนตบนเครองผใชไมเจอ จะคนหาฟอนตทก าหนดไวในตวถดไป
60
body {
font-family: Verdana, Geneva, Arial, sans-serif;
}
คณสมบต text-shadow
61
<!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 ชวยใหสามารถใชฟอนตทแปลกใหมได โดยไมตองแปลงขอความใหเปนรปภาพ
62
ชนดของ Web Font• TTF – ใชไดกบทก Browser ยกเวนบน IE และ IOS
• EOT – ใชบน IE อยางเดยว
• WOFF – ใชไดทก Browser (ก าลงจะเปนมาตรฐาน)
• SVG – ใชบน IOS เทานน63
ขนตอนการใช Web Font• เลอก Web Font จาก www.fontsquirrel.com/fontface
• ลงทะเบยน Web Font ใน CSS ดวยค าสง @font-face
• ก าหนดชอฟอนตทลงทะเบยนไวใน font-family
64
ไฟล Web Font ทได
65
การลงทะเบยน Web Font ใน CSS
66
บรรทดท 1: ค าสงลงทะเบยน Web Fontบรรทดท 2: ก าหนดชอ Web Font ทจะใชในการอางองบรรทดท 3: ก าหนดไฟลชนด EOT ส าหรบ IE โดย url() คอ ฟงกชนสงให Browser โหลดไฟล
ตามต าแหนงทระบบรรทดท 4: local() คอ ฟงกชนก าหนดวาถามชอ Font นแลวในเครองผใชใหใชในเครองแทนบรรทดท 5-7: ก าหนดไฟล Font โดยก าหนด WOFF เปนอนดบแรก เพราะมคณภาพดสด
รองลงมาคอ TTF หรอ OTF และสดทาย คอ SVG
1 @font-face {2 font-family: 'ChantelliAntiquaRegular';3 src: url('Chantelli_Antiqua-webfont.eot');4 src: local('Chantelli Antiqua'),5 url('Chantelli_Antiqua-webfont.woff') format('woff'),6 url('Chantelli_Antiqua-webfont.ttf') format('truetype'),7 url('Chantelli_Antiqua-webfont.svg') format('svg');8 }
ค าสงนน ามาจากไฟล stylesheet.css
น าไปแทรกค าสงนในแทก<style> หรอ ไฟล .css
ก าหนดชอฟอนตทลงทะเบยนไวใน font-family
67
body {
font-family: Verdana, Geneva, Arial , sans-serif;
}
'ChantelliAntiquaRegular'
Google Web Fonts• Google Web Fonts คอ Web Font ท Google สรางขนเพอใหบรการแกผสรางเวบฟร
โดยไมตองโหลดมาไวท Server ของตนเอง แตสามารถอางองไดเลย
68
เลอก Web Font ทตองการ
ขนตอนการใช Google Web Font1. เลอก Web Font ทตองการจาก
http://www.google.com/fonts
2. เพม Link ไปยง CSS ของ Google Web Font<link href="https://fonts.googleapis.com/css?family=Pattaya" rel="stylesheet">
3. ก าหนดชอฟอนตไวใน body {
font-family: 'Pattaya', sans-serif;}
การสราง Web Font จาก Web Font Generator• ฟอนตทใชในการตดตงทวไปทไมใช Web
Font สามารถน ามาแปลงเปน Web Font ได โดยเลอกฟอนตจากเวบตางๆ เชน http://www.f0nt.com/
• หลงจากนนสราง Web Font ดวย Web FontGenerator ท
http://www.fontsquirrel.com/tools/webfont-generator
• ฟอนตบางฟอนตจะไมสามารถสราง Web Font ได
69
เพมไฟลฟอนตชนด .ttf หรอ .otf
เลอก Expert
เลอก No Subsetting
การใชไอคอน Font Awesome• download ไฟลจาก http://fontawesome.io/• จะไดไฟล font-awesome-4.7.0.zip• ให Extract ไวใน Folder เดยวกบเวบไซต• น าไปใชโดยแทรกแทก link ไวภายใตแทก <head> ดงน<link rel="stylesheet" href="font-awesome-XXX/css/font-awesome.min.css">
70
ใสเลข Version ตามชอโฟลเดอรท Extract
การใชไอคอน Font Awesome• เลอกไอคอนทตองการใชจาก http://fontawesome.io/icons/
71
การใชไอคอน Font Awesome• ใชแทกทเปน inline element และระบชอคลาสของ icon นน
<i class="fa fa-camera-retro"></i>
หรอ
<span class="fa fa-camera-retro"></span>
72
ระบชอ icon ทตองการแสดงบนหนาเวบ
ก าหนดชอคลาสแรกเปน fa ทกครง
ขนาดของไอคอน
73
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
ระบชอคลาสทขนาดตางๆ
ศกษาเพมเตม• สามารถใสกรอบ และท าใหไอคอนเคลอนไหวได ดไดท
http://fontawesome.io/examples/
74
คณสมบตพนหลง (Background)• background-color สพนหลง เชน
p { background-color:#e0ffff; }
• background-image ระบภาพพนหลง เชนbackground-image:url('img_tree.png');
• background-size ก าหนดขนาดภาพพนหลง (กวางและสง) เชนbackground-size: 80px 60px;
• background-attachment ก าหนดใหยดภาพพนหลง ไมใหเลอนตามbackground-attachment:fixed;
• background-repeat ก าหนดการแสดงซ าในแนวตงและแนวนอน • background-position ก าหนดต าแหนงภาพพนหลง
75
คณสมบต background-position• left top• left center• left bottom• right top• right center• right bottom• center top• center center• center bottom
76
คณสมบต background-repeat• repeat – วางพนหลงใหเตม (คา default)• repeat-x – วางพนหลงเฉพาะในแนวนอน• repeat-y – วางพนหลงเฉพาะในแนวตง• no-repeat – วางพนหลงเพยงครงเดยว• inherit – ใชพนหลงเชนเดยวกบ Element ทอยเหนอกวา
77
body {
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position: left bottom;
}
ตวอยาง
78
<!DOCTYPE html><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>
ภาพแรก ใหแสดงดานบนซาย แสดงครงเดยว
ภาพทสอง ใหแสดงดานลางขวา แสดงครงเดยว
ตวอยาง
79
<!DOCTYPE html><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>
คณสมบต Transparency• การท าสแบบโปรงแสงจะใช
วธก าหนดคาสดวย rgba(red, green, blue, คา alpha)
• การท าใหภาพมความโปรงแสงจะใชคณสมบต
opacity: คา alpha
80
<!doctype html><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="http://202.28.94.20/_temp/lemon-tile.jpg"><h1>Computer Science Department, KKU</h1><img src="http://202.28.94.20/_temp/Dog.png"></body></html>
คา alpha มคาในชวง 0-10 - โปรงใส1 - สทบ
การหมนภาพ
81
<!DOCTYPE html><html><head><style>img {
position: relative;top: 100px;left: 100px;transform: rotate(10deg);
}</style></head><body>
<img src="http://202.28.94.20/_temp/r1.jpg"></body></html>
ก าหนดใหหมน 10 องศา
การขยายภาพ
82
<!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="http://202.28.94.20/_temp/r1.jpg" height="100"><img src="http://202.28.94.20/_temp/r2.jpg" height="100"><img src="http://202.28.94.20/_temp/r3.jpg" height="100">
</body></html>
ใหภาพอยเหนอภาพปจจบนระบใหขยายภาพแนวตงและนอน 2 เทา
ก าหนด Pseudo Selector เพอใหใชรปแบบนเมอมเมาสมาวาง
Responsive Design• Responsive Design คอ วธการพฒนาเวบใหสามารถแสดงผลไดตามขนาด
ของอปกรณซงมอยหลากหลาย เชน เครอง PC, Tablet, Smart Phone• Responsive Design ใชแนวคดทวา เขยนครงเดยว ท างานไดทกอปกรณ
(write once, run everywhere)
83
แนวทางในการสรางเวบแบบ Responsive Design
• Mobile-first ใชรปแบบโครงสรางเวบทมความเรยบงายมากทสด โดยออกแบบเรมตนทหนาจอมอถอ
• ใชคา CSS Property แบบ Relative (การอางองจากคาเรมตน)• ตรวจสอบหนาจอดวย Media Query• ใช CSS Framework ทรองรบ เชน Bootstrap, Bulma
84
ก าหนดแทก <meta>
85
ก าหนดใหปรบพนทการแสดงผลหนาเวบ (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
86
<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• ภาพทแสดงบนเวบทมขนาดหนาจอแตกตางกนควรมการปรบ
ขนาดภาพโดยก าหนดคณสมบต CSS ดงน– ก าหนดคณสมบต width ดวยคาซงเปนเปอรเซนต เชน
หมายถง แสดงภาพทความกวางเตมจอ แมวาไฟลภาพจรงจะมขนาดใหญหรอเลกกวาหนาจอ
– ก าหนดคณสมบต max-width ดวยคาซงเปนเปอรเซนต เชน
หมายถง แสดงภาพทความกวางเตมจอ แตความกวางสงสดไมเกนความกวางของไฟลภาพจรง
• ควรใช max-width เพอปองกนภาพขยายเกนขนาดของภาพจรง87
ตวอยาง
88
Media Query• Media Query คอ คอ การตรวจสอบรายละเอยดของอปกรณทผใช ใชใน
การชมเวบไซต เชน ขนาด, resolution, color capabilities เปนตน • ขอมลทไดจาก Media query จะชวยใหนกพฒนาก าหนดรปแบบ CSS ท
เหมาะกบการแสดงผลได
89
Media Query• การก าหนดรปแบบ CSS ใหกบหนาจอแตละขนาด ท าได 2วธ ไดแก– แยกไฟล CSS ส าหรบแตละหนาจอ– รวมไฟล CSS ส าหรบทกหนาจอในไฟลเดยว
90
การแยกไฟล CSS ส าหรบแตละหนาจอ
• บรรทดท 1 คอ การก าหนด CSS ใหกบอปกรณทมความกวางสงสด 480 pixel หรอนอยกวานน
• บรรทดท 2 คอ การก าหนด CSS ใหกบอปกรณทมความกวางต าสด 481 pixel หรอมากกวานน
91
1
2
การรวมไฟล CSS ส าหรบทกหนาจอในไฟลเดยว
92
การก าหนด Media Query แบบชวง
93
/* ก าหนดรปแบบของหนาจอปกต */
@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 */}
ชวงความกวางของหนาจอ
94
หลกการจด Layout แบบ Responsive Design
95
96
<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
