CSS Cascading Style Sheets 2.pdf · CSS • CSS ย่อมาจา Cascading Style Sheets • เป็นภาษาที่ใชใ้น าร าหนดรูปแบบ

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 เช่น , 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

https://cssreference.io/http://devdocs.io/csshttps://developer.mozilla.org/en-US/docs/Web/CSS/Reference

การแทรกค าส่ัง CSS• Internal Style Sheet - ใส่ค าสัง่ CSS ในแท็ก ภายใตแ้ทก็ วธีิน้ีเหมาะ

กบัการจดัรูปแบบใหก้บัเวบ็หนา้เดียว• External Style Sheet - ใส่ค าสัง่ CSS ในไฟล์แยกต่างหาก แลว้อา้งถึงไฟลใ์นแทก็

ซ่ึงอยูภ่ายใตแ้ทก็ เหมาะกบัการจดัรูปแบบใหก้บัเวบ็หลายหนา้ท่ีใช่รูปแบบเดียวกนั

• Inline Style Sheet - ใส่ค าสัง่ CSS ในแท็กที่ต้องการโดยตรง เพื่อจดัรูปแบบเฉพาะแทก็นั้นๆ วธีิน้ีควรท าเม่ือมีความจ าเป็นเท่านั้น เพราะยากต่อการกลบัมาแกไ้ขในภายหลงั

หมายเหตุ หากมีช่ือ Selector ซ ้ ากนั Browser จะเลือกใชรู้ปแบบตามล าดบัดงัน้ี

Inline Internal External 9

Internal Style Sheet

Computer Science Department, KKU

ภาควชิาวทิยาการคอมพวิเตอร์ คณะวิทยาศาสตร์ มหาวิทยาลยัขอนแก่น จดัตั้งอยา่งเป็นทางการเม่ือวนัท่ี 23 มีนาคม 2537 ผลิตบณัฑิตระดบัปริญญาตรีมาแลว้ 21 รุ่น และปริญญาโทมาแลว้มากกวา่ 10 รุ่น

เป้าหมาย

ผลิตบณัฑิตท่ีมีคุณภาพ มีคุณธรรมจริยธรรม และมีความเช่ียวชาญเฉพาะดา้น ตรงกบัความตอ้งการของผูป้ระกอบการ

10

เพิ่ม CSS ในการก าหนดสี font ของแทก็

p {color: maroon;

}

ผลลพัธ์

External Style Sheet

11

p {

color: maroon;

}

Computer Science Department, KKU

ภาควชิาวทิยาการคอมพวิเตอร์ คณะวิทยาศาสตร์ มหาวิทยาลยัขอนแก่นจดัตั้งอยา่งเป็นทางการเม่ือวนัท่ี 23 มีนาคม 2537 ผลิตบณัฑิตระดบัปริญญาตรีมาแลว้ 21 รุ่น และปริญญาโทมาแลว้มากกวา่ 10 รุ่น

mystyle.css

p {color: maroon;

}

/* ไม่ตอ้งใส่แทก็ HTML ใดๆในน้ี */

หากอยูบ่น server เดียวกนัควรอา้งอิงโดยใช ้Relative URL

Inline Style Sheet

• ใช ้Attribute style แทรกในแทก็ แลว้ก าหนดคุณสมบติั CSS

12

Computer Science Department, KKU

ภาควชิาวทิยาการคอมพิวเตอร์ คณะวทิยาศาสตร์

เป้าหมาย

ผลิตบณัฑิตท่ีมีคุณภาพ มีคุณธรรมจริยธรรม

p {

background-color: red;

border: 1px solid gray;

}

1 Selector มีได้หลาย Property

13

ก าหนดใหแ้ทก็

มีสีพ้ืนเป็นสีแดง และ

มี 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 {border-top: 1px solid black;

}

เม่ือตอ้งการเพิ่มบางรูปแบบใหก้บั ซ่ึงถูกก าหนดรูปแบบไปแลว้สามารถท าไดโ้ดยการระบุ Selector h1 เพียงอยา่งเดียว

ผลลพัธ์

การสืบทอด property• เม่ือมีการก าหนดคุณสมบติั CSS ในแทก็ท่ีอยูร่ะดบัเหนือกวา่ แทก็ท่ีซอ้นอยูจ่ะไดรั้บคุณสมบติันั้นไปดว้ย

16

body {font-family: sans-serif;

}

h1 {font-family: sans-serif;color: gray;

}

ไม่จ าเป็นตอ้งใส่ เพราะไดรั้บการสืบทอดจากแทก็ท่ีอยู ่level เหนือกวา่แลว้

ปัญหาการใช้ Selector โดยช่ือแท็ก

17

ถา้ตอ้งการก าหนดสี font ของแทก็

ตวัท่ี 2 ใหมี้ความแตกต่างกบัแทก็

ตวัแรกจะท าอยา่งไร ?

p {

color: maroon;

}

Computer Science Department, KKU

ภาควิชาวิทยาการคอมพิวเตอร์ คณะวิทยาศาสตร์

เป้าหมาย

ผลิตบณัฑิตท่ีมีคุณภาพ มีคุณธรรมจริยธรรม และมีความเช่ียวชาญเฉพาะ

Class Selector• การก าหนด selector เป็นช่ือ tag จะท าให ้tag เดียวกนัมีรูปแบบเหมือนกนัหมด ดงันั้นเราจะตั้งช่ือ Class ข้ึน เพื่อใช้ในการจ าแนกรูปแบบท่ีมีความแตกต่างกนั

18

p.greentea {color: green;

}

p.red {color: red;

}

คลาส red คลาส greentea

Class Selector

19

p {

color: maroon;

}

Computer Science Department, KKU

ภาควิชาวิทยาการคอมพิวเตอร์ คณะวิทยาศาสตร์

เป้าหมาย

ผลิตบณัฑิตท่ีมีคุณภาพ มีคุณธรรมจริยธรรม และมีความเช่ียวชาญเฉพาะ

p.red {color: red;

}

p.greentea {color: green;

}

ภาควิชาวิทยาการคอมพิวเตอร์ คณะวทิยาศาสตร์

ผลิตบณัฑิตท่ีมีคุณภาพ มีคุณธรรมจริยธรรม และมีความเช่ียวชาญเฉพาะ

ผลลพัธ์

p {

color: maroon;

}

Computer Science Department, KKU

ภาควิชาวิทยาการคอมพิวเตอร์ คณะวิทยาศาสตร์

เป้าหมาย

ผลิตบณัฑิตท่ีมีคุณภาพ มีคุณธรรมจริยธรรม และมีความเช่ียวชาญเฉพาะ

p.greentea {color: green;

}

class ทีไ่ม่ผูกกบัแท็ก

20

Computer Science Department, KKU

เป้าหมาย

p.red {color: red;

}

.greentea {color: green;

}

ภาควิชาวทิยาการคอมพิวเตอร์ คณะวิทยาศาสตร์

ผลิตบณัฑิตท่ีมีคุณภาพ มีคุณธรรมจริยธรรม และมีความเช่ียวชาญเฉพาะ

ผลลพัธ์

การใช้รูปแบบจากคลาส 2 คลาสขึน้ไป

21

.red {color: red;

}

.line {border-bottom: 1px solid black;

}

Computer Science Department, KKU

ผลลพัธ์

คัน่ช่ือคลาสท่ีน ามาใชด้ว้ยช่องวา่ง

ID Selector• id ใชส้ าหรับก าหนดรูปแบบท่ีปรับใชก้บั 1 Element เท่านั้น (single/unique element)

22

#para1 { text-align:center; color:red; }#para2 { text-align:right; }

This is a paragraph 1.This is a paragraph 2.

ผลลพัธ์

Pseudo Selectors• Element บางตวัสามารถใส่

รูปแบบพิเศษได ้เช่น แทก็ มี 4 สถานะ ไดแ้ก่ link, visited, hover, และ active การก าหนดรูปแบบให้แตกต่างกนัไปในแต่ละสถานะน้ีเรียกวา่ Pseudo Selectors

23

a:link {color:green; text-decoration:none;}a:hover {color:red;background-color:yellow;}a:active {color:blue;}a:visited {color:pink;}

Pantip

a:link a:hover

a:active a:visitedผลลพัธ์

Attribute Selectors• Attribute Selectors คือ การเลือกใส่รูปแบบใหก้บั Element ท่ีมีค่า attribute ตามท่ีก าหนด

24

input[type="password"] {

background-color:red;}

Username:
Password:

ผลลพัธ์

สรุป Selector

25

Selectors CSS code HTML code

Tag h1, h2 { color: red; } ……

Tag รว่มกบั Class p.large { font-size: 2em;}

...

Class .large { font-size: 16pt; }

...

หรอื... หรอื...

id #para1 { text-align:center; }

…

หรอื… หรอื…

Pseudo a:link { text-decoration:none; } …

Attribute input[type="password"] {background-color:red;

}

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;}

https://developer.mozilla.org/en/docs/Web/CSS/color_value

คุณสมบัต ิTransparency• การท าสีแบบโปร่งแสงจะใช้

วธีิก าหนดค่าสีดว้ย rgba(red, green, blue, ค่า alpha)

• การท าใหภ้าพมีความโปร่งแสงจะใชคุ้ณสมบติั

opacity: ค่า alpha

28

h1 {background-color: rgba(34, 234, 0, 0.3);border: 1px #336699 solid;

}img:hover {

opacity: 0.5;}

Computer Science Department, KKU

ค่า 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

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

.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;}

This box combines two background images, which are positioned in its top-left and bottom-right.

ภาพแรก ใหแ้สดงดา้นบนซา้ย แสดงคร้ังเดียว

ภาพท่ีสอง ใหแ้สดงดา้นล่างขวา แสดงคร้ังเดียว

ตัวอย่าง

35

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;

}

This box combines two background images, which are positioned in its top-left and bottom-right.

ชนิดของ HTML Element• Block Element คือ Element ท่ีจองพ้ืนท่ีบนหนา้เวบ็ในแนวนอนทั้งหมดของ browser เช่น ,

, , , ซ่ึง browser จะแสดงผลในบรรทัดใหม่เสมอ

• Inline Element คือ Element ท่ีจองพ้ืนท่ีบนหนา้เวบ็ตามขนาดของเน้ือหาภายในแทก็ หรือตามขนาดจริง เช่น , , , , การแสดงผลจะแสดงในแนวนอนเรียงตามล าดบั โดยไม่ขึน้บรรทัดใหม่ จนกว่าพืน้ที่แนวนอนจะเต็ม

36

และ • แทก็ (เป็น Block) และแทก็ (เป็น Inline) มกัใชใ้น

การก ากบั (Markup) หรือครอบส่วนต่างๆของหนา้เวบ็ เพื่อน า class หรือ id มาจดัรูปแบบในส่วนท่ีก ากบั

37

.greentea { color: green; }

I love KKU Jub Jub

I love KKU Jub Jub

ผลลพัธ์

โครงสร้างของ 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

.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;

}

W3C announced on... Forum (IDPF)W3C announced... Forum (IDPF)W3C announced... Forum (IDPF)

ค่าความ 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

item 1item 2item 3

https://css-tricks.com/snippets/css/a-guide-to-flexbox

การจัดโครงสร้างของเวบ็• การวางโครงสร้างของเวบ็เกิดจากการใชแ้ทก็ หรือ Semantic Markup ในการจดัวาง ร่วมกบัการใชค้ าสัง่ CSSไม่ควรใช้ ในการจดัโครงสร้างเวบ็

43

การจัดโครงสร้างของเวบ็ด้วย

44

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;

}

My Web Site

Menu
Add
Edit
Delete

Content...

Developed by...Mr.Yeah

Semantic Element• HTML5 มีแทก็ท่ีใชใ้นการก ากบัต าแหน่งของหนา้เวบ็ ท่ีมีช่ือท่ีมี

ความหมายมากข้ึน , , , , , , , , , ,

• แทก็เหล่าน้ีไม่มีผลต่อการแสดงผลลพัธ์ แต่ช่วยใหก้ารก ากบัมีความหมายมากข้ึน และยงัช่วยให ้Search Engine เขา้ใจ

• ศึกษาเพ่ิมเติม https://www.w3.org/TR/html5/sections.html45

https://www.w3.org/TR/html5/sections.html

การจัดโครงสร้างของเวบ็ด้วยแท็ก Semantic

46

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;

}

My Web Site

Menu
Add
Edit
Delete

Content...

Developed by...Mr.Yeah

จัดกึง่กลางข้อความ• ใชแ้ทก็ท่ีเป็น black element และก าหนด text-align เป็น center

47

CSS

.textcenter {text-align: center;

}

HTML

The lines in this paragraph are all centered

จัดกึง่กลาง 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

This rather narrow block of text is ...example.

จดักึง่กลางรูปภาพ• ก าหนดใหภ้าพแสดงผลแบบ Block Element (ปกติภาพเป็นแบบ Inline Element) ดว้ย

display: block; และก าหนด margin-left และ margin-light เป็น auto

49

CSS.center-img {

display: block;margin-left: auto;margin-right: auto;

}

HTML

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

This paragraph is vertically centered.

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

This paragraph is vertically centered.

การจัดกึง่กลางทีถู่กยกเลกิใน HTML5• attribute align ถูกยกเลิกแลว้ใน HTML5 เช่น

...

• แทก็ center ถูกยกเลิกแลว้ใน HTML5 เช่นHello

52

การวางต าแหน่งข้อความและรูปภาพ

53

#img1 {vertical-align: top;

}#img2 {

vertical-align: middle;}#img3 {

vertical-align: baseline;}

ภำพนี ้ ใช ้vertical-align: top

ภำพนี ้ ใช ้vertical-align: middle

ภำพนี ้ ใช ้vertical-align: baseline

การจัดวาง ElementElement ในเวบ็เพจสามารถจดัวางไดห้ลายแบบ ดงัน้ี• Fixed• Relative• Absolute• Overlapping

54

การจัดวางแบบ Fixed• แบบ Fixed คือ การก าหนดต าแหน่งบน Browser โดยท่ี Browser

จะไม่มีการเคล่ือนท่ี Element นั้นเม่ือมีการเล่ือนหนา้

55

p.pos_fixed {position:fixed;top:30px;right:5px;

}

Some more text

Note: IE7 and IE8 supports the fixed value only if a !DOCTYPE is specified.

ก าหนดต าแหน่งท่ีจะน าไปวาง

30pixel

5pixel

การจัดวางแบบ Relative

56

h2.pos_left {position: relative;left: -20px;

}h2.pos_right {

position: relative;left: 20px;

}

This heading.This heading.

ถอยหลงัจากขอบทางซา้ย 20 pixel

เดินหนา้จากขอบทางซา้ย 20 pixel

• แบบ Relative คือ การก าหนดต าแหน่งบน Browser โดยเร่ิมจากจุดท่ี Element นั้นอยู ่เช่น บรรทดัท่ี 2 ของหนา้ ถา้ตอ้งการใหเ้คล่ือนไปทางซา้ย 20pixel กจ็ะใชค้ าสัง่ left: 20px

ตัวอย่าง

57

img {

position: relative;top: 100px;left: 100px;transform: rotate(10deg);

}

ก าหนดใหห้มุน 10 องศา จากจุดปัจจุบนั

การจัดวางแบบ Absolute• แบบ Absolute คือ การก าหนดต าแหน่งโดยนบัจากจุดเร่ิมตน้คือดา้นบนและดา้นขา้งของ Browser

58

h2 {

position: absolute;left: 100px;top: 150px;

}

This is a heading with an absolute position

With absolute positioning, an element can be placed anywhere on a page.

150 pixel

100 pixel

การจัดวางแบบ Overlapping• แบบ Overlapping คือ การจดัล าดบัชั้นของ Element ในแนวแกน z โดย

ก าหนดเป็นค่าบวกหรือลบ ค่าบวกจะท าให ้Element อยูด่า้นบน ค่าลบจะท าใหอ้ยูด่า้นล่าง

59

img {

position: absolute;left: 0px;top: 0px;z-index: -1;

}

This is a heading

Because the image has a z-index of -1, it will be placed behind the text.

ก าหนดต าแหน่งภาพท่ี (0,0) วางไวด้า้นหลงั

ตัวอย่าง

60

img {

position: relative;top: 100px;left: 100px;

}

img: hover {transform: rotate(10deg) scale(2);z-index: 2;

}

ใหภ้าพอยูเ่หนือภาพปัจจุบนัระบุใหข้ยายภาพแนวตั้งและนอน 2 เท่า

ก าหนด Pseudo Selector เพื่อใหใ้ชรู้ปแบบน้ีเม่ือมีเมาส์มาวาง

Font• การก าหนด Font ใน CSS สามารถก าหนดช่ือฟอนตส์ ารองไวไ้ดห้ลายช่ือ

• เม่ือ Browser หาฟอนตบ์นเคร่ืองผูใ้ชไ้ม่เจอ จะคน้หาฟอนต์ท่ีก าหนดไวใ้นล าดบัถดัไป

61

body {

font-family: Verdana, Geneva, Arial, sans-serif;

}

คุณสมบัต ิtext-shadow

62

#shadow1 {

font-size: 30px;font-weight: bold;text-shadow: gray 10px 10px 7px;

}

Shadow Text

ระยะห่างของเงากบัขอ้ความในแนวนอน ระยะห่างของเงากบั

ขอ้ความในแนวตั้ง

ค่าความ 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

/* 1. โหลดไฟล ์font */@font-face {

font-family: "myFont"; /* ต ัง้ชือ่ font */src: url("THSarabunNew.ttf"); /* ระบชุือ่ไฟล ์font ทีจ่ะโหลด */

}

/* 2. น า font ทีโ่หลดแลว้มาใช ้โดยใชช้ือ่ตามทีต่ ัง้ไว ้*/body {

font-family: "myFont"; }

ทดสอบ

สามารถเกบ็ในโฟลเดอร์อ่ืน และอา้งถึงดว้ย 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

https://www.fontsquirrel.com/https://www.dafont.com/https://everythingfonts.com/fontshttps://www.f0nt.com/

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 จะมีแทก็ค าสัง่ส าหรับน าไปใชบ้นหนา้เวบ็ เช่น

4. เม่ือตอ้งการน าฟอนตม์าใชก้บั Selector ใด ใหใ้ส่ช่ือตามท่ี google ระบุ เช่นbody {

font-family: 'Kanit', sans-serif;}

https://fonts.google.com/

Awesome Fonts• Awesome Fonts คือ ฟอนตท่ี์อยูใ่นรูปแบบของ vector icons ใชส้ าหรับ

นกัพฒันาท่ีตอ้งการแสดงไอคอนบนหนา้เวบ็ ซ่ึงมีความคมชดัสูง• การอา้งอิงใหก้ าหนดไฟล ์CSS จากเวบ็ https://fontawesome.com/start

68

Copy ค าสัง่ในการโหลดAwesome Fonts ไปวางไวใ้นแทก็

https://fontawesome.com/start

Awesome Fonts• เลือกไอคอนท่ีตอ้งการใชจ้าก https://fontawesome.com/icons?d=gallery

69

https://fontawesome.com/icons?d=gallery

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 ด้วยแท็ก

73

ก าหนดใหป้รับพื้นท่ีการแสดงผลหนา้เวบ็ (viewport) ตามความกวา้งของอุปกรณ์ท่ีใชใ้นการเปิดหนา้เวบ็

คุณสมบัติ ค าอธิบาย

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

body { font-size: 100%; }.topic { font-size: 2em; }.content { font-size: 1em; }

หัวข้ออยู่ทีน่ี่เน้ือหา เน้ือหา เน้ือหา เน้ือหา เน้ือหา เน้ือหา

ก าหนดใหท้ั้งเวบ็ใชข้นาดฟอนตมี์ค่าเร่ิมตน้ท่ี 100%

หากตอ้งการใหฟ้อนตมี์ขนาดเพิ่มจากขนาดเร่ิมตน้ก่ีเท่า ใหใ้ชห้น่วย em แทน px เช่น2 em = 200%1 em = 100%

การใช้ขนาดรูปภาพ แบบ Relative• ใช ้max-width เพ่ือก าหนดใหแ้สดงภาพท่ีความกวา้งเตม็ขนาดจอ

แต่ความกวา้งสูงสุดไม่เกินความกวา้งของไฟลภ์าพจริง โดยระบุขนาดเป็นเปอร์เซ็นต์

75

img {max-width: 100%;

}

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

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

การรวมไฟล์ CSS ส าหรับทุกหน้าจอในไฟล์เดยีว

79

@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;

}}

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:

การก าหนด 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

.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; }

}

Menu1
Menu2
Menu3
In publishing, art, and communication, … as speech, writing or any of various arts".

advertising
advertising
advertising

ผลลพัธ์เม่ือขนาดหน้าจอไม่เกนิ 480 pixel

ผลลพัธ์เม่ือขนาดหน้าจอมากกว่า 480 pixel