การเขียนคำสั่ง Style Sheet (ต่อ)

Report
1
• เพื่อทราบหลักการทางานของ CSS: Cascading Style
Sheets
• เพื่อให้ ทราบประโยชน์ ของการใช้ ภาษา CSS
• เพื่อให้ ทราบการเขียนภาษา CSS
2
• บรรยายโดยผู้สอนและใช้ เอกสารประกอบการสอนของ
ผู้สอน
• สอนโดยใช้ ส่ือคอมพิวเตอร์ ผ่านเครื่ องฉาย
• อภิปรายในชั้นเรี ยนร่ วมกัน
่ เติมจากตาราและเอกสารทีเ่ กี่ยวข้ อง
• ให้ นิสิตค้ นคว้ าเพิม
• ทาแบบฝึ กหัดท้ ายบท
3
• ประเมินผลจากการตอบคาถามและอภิปรายในชั้นเรี ยน
• ทาแบบฝึ กหัดท้ ายบท
• ทารายงานส่ ง
4
• เป็ นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ และถูก
กาหนดมาตรฐานโดย W3C (World Wide Web Consortium)
เช่ น เดียวกับ HTML และ XHTML
• ใช้ สาหรั บตกแต่ งเอกสาร HTML/ XHTML ให้ มีหน้ าตา สีสัน
ตัวอักษร เส้ นขอบ พืน้ หลัง ระยะห่ าง ฯลฯ อย่ างที่เรา
ต้ องการ ด้ วยการกาหนดคุณสมบัตใิ ห้ กับ Element ต่ างๆ
ของ HTML เช่ น <body>, <p>, <h1> เป็ นต้ น
5
6
1. การใช้ CSS ในการจัดรูปแบบการแสดงผล จะช่ วยลดการใช้ ภาษา HTML
2. เมื่อ code ภายในเอกสาร HTML ลดลง ทาให้ ขนาดไฟล์ เล็กลง จึงดาวน์ โหลดได้ เร็ว
3. สามารถกาหนดรูปแบบการแสดงผลจากคาสั่ง style sheet ชุดเดียวกัน
4. สามารถควบคุมการแสดงผลให้ เหมือนกัน หรือใกล้ เคียงกัน ได้ ในหลาย Web Browser
5. สามารถกาหนดการแสดงผลในรู ปแบบที่เหมาะกับสื่อชนิดต่ างๆ เช่ น หน้ าจอ, บน
กระดาษเมื่อสั่งพิมพ์ , บนมือถือ หรือบน PDA โดยที่เป็ นเนือ้ หาเดียวกัน
6. ทาให้ เป็ นเว็บไซต์ ท่ มี ีมาตรฐาน ปั จจุบันการใช้ attribute ของ HTML ตกแต่ งเอกสารเว็บ
เพจ นัน้ ล้ าสมัยแล้ ว W3C แนะนาให้ เราใช้ CSS แทน
7
• คาสั่งของ CSS ประกอบด้ วย selector, property และ value
selector { property:value }
selector { property1:value1; property2:value2 }
• selector สามารถเป็ น HTML Tag ต่ างๆ เช่ น <body>, <p> หรื อเป็ น
Class name หรื อ ID ที่เราตัง้ ชื่อ
• property คือ คุณสมบัตใิ นการจัดรู ปแบบการแสดงผล เช่ น color
สาหรั บกาหนดสี, font-size สาหรั บกาหนดขนาดตัวอักษร
• value เป็ น ค่ า ที่เรากาหนดให้ กับ property ต่ างๆ เช่ น color:white,
font-size:14px
8
9
ตัวอย่ างคาสั่ง CSS
กาหนดให้ ข้อความที่อยู่ใน Tag <p> เป็ นสีดา และวางอยู่
กึ่งกลาง
/* selector ที่เป็ น HTML Tag */
p{
color:#000000;
text-align:center
}
10
• กาหนดให้ ข้อความที่ class name topic เป็ นสีแดง ชนิด
อักษรเป็ น Arial ตัวหนา และจัดวางอยู่ก่ งึ กลาง
/* selector ที่เป็ น Class name */
.topic{
color:red;
font-family:Arial;
font-weight:bold;
text-align:center
}
11
• กรณีท่ ี selector มีค่า property เหมือนกัน สามารถเขียน
รวมกันได้ โดยใช้ เครื่องหมาย "," คั่นระหว่ าง selector
• กาหนดให้ ข้อความใน Tag <h1>,<h2> และ <h3> เป็ นสี
แดง ชนิดตัวอักษรเป็ น sans-serif
h1, h2, h3 {
color:red;
font-family:sans-serif
}
12
การใช้ Comment
• ใน Style Sheet Comment จะใช้ เครื่ องหมาย "/*" เป็ นการ
เปิ ด และ "*/" เป็ นการปิ ด เช่ น
/* นี่คือ comment กาหนดสีตัวอักษรเป็ นสีดา ขนาด14px */
body {
color:#000000;
font-size:14px
}
13
• จาก syntax ของคาสั่ง CSS ค่ า value ของ property บางค่ า
จะต้ องมีการระบุหน่ วยด้ วย หน่ วยที่ใช้ งานใน CSS มี
อะไรบ้ าง
14
• หน่ วยแบบ Relative Length (กาหนดแบบอัตราส่ วน)
• px (pixels, สัมพันธ์ กับค่ าความละเอียดของหน้ าจอ) เช่ น 1px, 4px
• em (emphasize, ความสูงของตัวอักษร) เป็ นขนาดจานวนเท่ าของขนาด font
ที่กาหนดให้ body
ถ้ า font ที่ body กาหนดเป็ น 10px
h1{fon-size:1.5em} h1 จะมีขนาดเป็ น 1.5 เท่ า ของ 10px = 15px
h2{fon-size:1.4em} h2 จะมีขนาดเป็ น 1.4 เท่ า ของ 10px = 14px
และถ้ าเรากาหนดเป็ น 1em ก็จะมีขนาดเท่ ากับ 10px เหมือนเดิม
• ex (x-height, ความสูงของตัวอักษร "x") เช่ น 1.5ex, 2ex
• % (percent, สัมพันธ์ กับขนาดหน้ าจอ หรื อ container ที่บรรจุวัตถุนัน
้ ๆ อยู่)
เช่ น 50%, 130%
15
• หน่ วยแบบ Absolute Length (กาหนดตายตัว)
• in (inches; 1in=2.54cm =72pt =6pc) เช่ น 2in, 1.5in
• cm (centimeters; 1cm=10mm) เช่ น 2cm, 1.11cm
• mm (millimeters) เช่ น 50mm, 0.8mm
• pt (points; 1pt=1/72in, 10pt มีขนาดพอๆกับ 12px) เป็ นหน่ วยที่
ใช้ ในงานสิ่งพิมพ์ เช่ น 12pt, 20pt
• pc (picas; 1pc=12pt) เช่ น 1pc, 2pc
16
• 1. กาหนดโดยใช้ ช่ อ
ื สีแต่ การระบุช่ ือสีแบบนีใ้ ช้ สีได้ จานวนจากัด
ได้ แก่ aqua, black, blue, fuchsia (แดงอมม่ วง), gray, green, lime,
maroon (นา้ ตาลแดง), navy, olive, purple, red, silver, teal (เขียวขน
เป็ ด), white, และ yellow
• 2. กาหนดเป็ นค่ าสีแบบ RGB
#rrggbb เช่ น #eecc00, #42e15e
#rgb เช่ น #ec0 หมายถึง #eecc00
rgb(x,x,x) โดยที่ x คือจานวนเต็มตัง้ แต่ 0-255 เช่ น rgb(0,204,0)
rgb(y%,y%,y%) โดยที่ ี ่ y คือเปอร์ เซ็นต์ ตงั ้ แต่ 0%-100% เช่ น rgb(0%,80%,0%)
17
• เราสามารถใช้ CSS ได้ 3 แบบคือ
1. Inline Styles
2. Internal Style Sheet
3. External Style Sheet
18
1. Inline Styles
วิธีการนีค้ วรใช้ ในกรณีท่ ตี ้ องการกาหนด style ให้ กับ
element ของ HTML เพียงอันเดียวเป็ นการเฉพาะ โดยการ
แทรกคาสั่ง style sheet ใน HTML Tag อยู่ในคาสั่ง
style="" ดังนี ้
<Tag style="property:value;">
19
• ตัวอย่ าง ex-css1.html
<html>
<body>
<h1 style="color:red; font-family:Arial">การเขียน CSS </h1>
<p style="color:green; font-family:Arial; fontweight:bold">ต้ องเรี ยนรู้โครงสร้ างก่อน</p>
</body>
</html>
หมายเหตุ การเขียน style=”" ฝั งลงใน HTML Tag เพราะมัน
ทาให้ อ่านยาก และนาไปใช้ ต่อไม่ได้
20
• 2. Internal Style Sheet
วิธีการนีค้ วรใช้ ในกรณีท่ มี ีเพียง HTML ไฟล์ เดียวที่ใช้ style
นี ้ เมื่อประกาศคาสั่ง Style Sheet เพื่อกาหนดคุณสมบัติ
ให้ กับ HTML Tag ใดๆ แล้ ว จะมีผลกับเอกสาร HTML ทัง้
หน้ า นิยมใส่ ส่วนของคาสั่ง Style Sheet ไว้ ระหว่ าง
<head>...</head>
21
• คาสั่งที่ใช้ เริ่ มต้ น และจบ STYLE SHEET มีโครงสร้ างดังนี ้
<style type="text/css">
<!-selector {property1: value1; property2: value2}
....
-->
</style>
22
• ตัวอย่ าง ex-css2.html
<html>
<body>
<head>
<style type="text/css">
<!-h1{color:red; font-family:Arial }
p{color:blue; font-family:Arial; font-weight:bold }
-->
</style>
</head>
<body>
<h1>สาขาทางด้านคอมพิวเตอร์</h1>
<p>สาขาวิทยาการคอมพิวเตอร์</p>
<p>สาขาเทคดนโลยีสารสนเทศ</p>
<p>สาขาวิศวคอมพิวเตอร์</p>
</body>
</html>
23
• 3. External Style Sheet
วิธีการนีเ้ หมาะกับกรณีท่ ีมีเพียง 1 style แล้ วต้ องการนาไปใช้ กับเอกสาร
HTML หลายๆ ไฟล์ โดยนาเอาคาสั่ง Style Sheet ที่อยู่ใน <style
type="text/css"> ... </style> มาบันทึกเป็ นไฟล์ ใหม่ นามสกุล .css
• แล้ วเรี ยกใช้ Style Sheet ในเอกสาร HTML ทุกไฟล์ ท่ ีต้องการใช้ งาน Style
Sheet ชุดนี ้ ไว้ ในส่ วน <head>...</head> โดยใช้ คาสั่ง
<link rel="stylesheet" type="text/css" href="URL ไฟล์ .css">
หรื อ
<style type="text/css">
@import url( URL ไฟล์ .css );
</style>
24
• ตัวอย่ าง
ไฟล์ mystyle.css
ไฟล์ ex-css3.html
h1{ color:red; font-family:Arial }
p{ color:blue; font-family:Arial; font-weight:bold }
<html>
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
<body>
<h1>การเขียนเว็บเพจ</h1>
<p>ต้ องตังใจศึ
้ กษาอย่างดี</p>
</body>
</html>
หมายเหตุ การใช้ CSS โดยเรี ยกใช้ จากภายนอก จะทาให้ ไฟล์เวบเพจมีขนาดเล็กและการแก้ ไขคาสัง่
style sheet เพียงที่เดียวจะมีผลกับเอกสารทุกหน้ าได้
25
• ลาดับการประมวลผลใน CSS (Cascading Order)
1. กรณีท่ มี ีการกาหนด style ด้ วยชื่อ selector เดียวกันทัง้ แบบ 3
แบบ Style sheet ที่จะถูกใช้ คือแบบไหน ลาดับความสาคัญ เรี ยง
จากมากไปหาน้ อย
-Inline style (inside an HTML element),
-Internal style sheet (inside the <head> tag)
-External style sheet ตามลาดับ
* จากลาดับความสาคัญดังกล่ าว Style ที่จะถูกใช้ คือแบบ Inline
style
26
• 2. กรณีท่ ม
ี ีการเขียน style ซา้ selector เดิม อันที่อยู่ด้านล่ าง จะถูก
ทาเป็ นลาดับสุดท้ าย
ตัวอย่ าง mystyle.css
p{ color:blue }
p{ color:green }
หรื อ
จะได้ ตวั อักษรใน Tag <p> เป็ นสีเขียว
Ex-css4.html
หากต้ องการใช้ อนั ไหนให้ กาหนด !important ไว้
p{color:blue!important}
p{color:green}
จะได้ ตวั อักษรใน Tag <p> เป็ นน ้าเงิน
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<p>ทดสอบ1</p>
<p>ทดสอบ2</p>
</body>
</html>
27
• การใช้ Selector จะมีอยู่ 3 แบบคือ
1. Selector ที่เป็ น HTML Tag
2. Selector ที่เป็ น Class attribute
3. Selector ที่เป็ น ID attribute
28
• 1.Selector ที่เป็ น HTML Tag
• เป็ นการกาหนด style ให้ กับ HTML Tag เช่ น แท็ก<h1>
และ <p> หมายความว่ าการใช้ <h1> ทุกอันในหน้ าเว็บเพจ
นีจ้ ะเป็ นไปตามที่กาหนด
29
• Ex-css5.html
<html>
<body>
<head>
<style type="text/css">
<!-h1{color:red; font-family:Arial }
p{color:green; font-family:Arial }
--> </style>
</head>
<body>
<h1>ทดสอบ1</h1>
<p>ทดสอบ2</p>
<h1>ทดสอบ3</h1>
</body>
</html>
30
• 2.Selector ที่เป็ น Class attribute
• เป็ นการกาหนดคุณสมบัตแ
ิ บบเฉพาะเจาะจง ให้ กับ HTML
element ผ่ าน class attribute โดยเราสามารถตัง้ ชื่อ class
• Class ใช้ เมื่อต้ องการใช้ แสดงผลรู ปแบบนัน
้ ซา้ หลายๆ ครั ง้ หรือ
ต้ องการใช้ กับ element หลายๆ อัน การประกาศใช้ เครื่องหมาย "."
นาหน้ าชื่อ class
31
• ตัวอย่ าง Ex-css6.html
<html>
<head>
<style type="text/css">
<!-.topic {color:red;
font-family:Arial;
font-weight:bold;
text-align:center
}
.content {color:blue;
font-family:Arial;
}
-->
</style>
</head>
<!-- การเรียกใช้งาน -->
<body>
<p>ทดสอบ1</p>
<div class="topic">ทดสอบ2</div>
<p class="topic">ทดสอบ3</p>
<p class="content">ทดสอบ4</p>
</body>
</html>
32
• จากตัวอย่ างสังเกตได้ ว่า class topic ถูกเรี ยกใช้ หลายครั ง้ ใน <p>
และ ถูกใช้ ในหลาย element ได้ คือ <p> และ <div>
• แต่ ถ้าต้ องการกาหนดให้ class topic ใช้ งานเฉพาะกับ <p>
เท่ านัน้ ทาได้ โดยใส่ "p." นาหน้ าชื่อ class
• จะมีผลทาให้ ข้อความใน <div class="topic">บทความ</div> ไม่
สามารถแสดงผลตามรู ปแบบที่กาหนดใน class topic ได้
p.topic{color:red; font-family:Arial; font-weight:bold; textalign:center }
33
• กรณีท่ ต
ี ้ องการให้ แสดงผลตามรูปแบบที่กาหนดใน 2 class
ก็สามารถทาได้
ตัวอย่าง Ex-css7.html
<html>
<head>
<style type="text/css">
p.center {text-align:center}
p.bold{ font-weight:bold}
</style>
</head>
<body>
<p class="center bold">ข้อความในพารา
กราฟนี้จะจัดวางกึง่ กลาง และเป็ นตัวหนา</p>
</body>
</html>
34
• 3.Selector ที่เป็ น ID attribute
เป็ นการประกาศคาสั่ง Style Sheet เพื่อกาหนดคุณสมบัติ
แบบเฉพาะเจาะจง ให้ กับ HTML element ผ่ าน ID attribute
เหมือนกับ Class แต่ ต่างกันที่ ID จะใช้ กับ element ที่มี
เพียงอันเดียวในเอกสาร HTML การประกาศใช้ # หน้ า ID
35
• ตัวอย่ าง Ex-css8.html
<html>
<head>
<style type="text/css">
p {text-align: center}
#chapter {color:red; font-weight:bold}
/*หรือเขียนเป็ น p#chapter ก็ได้*/
</style>
</head>
<body>
<p id="chapter">Chapter ข้อความในนี้จดั วาง
กึง่ กลาง และเป็ นสีแดง ตัวหนา</p>
<p>เนื้อหา1 ข้อความในนี้จดั วางกึง่ กลาง</p>
<p>เนื้อหา2 ข้อความในนี้จดั วางกึง่ กลาง</p>
</body>
</html>
36
• Contextual selectors
• การประกาศ selector ซ้ อนกัน โดยเคาะ spacebar ทาให้
สามารถสืบทอดคุณสมบัตเิ ดิม และเพิ่มคุณสมบัตทิ ่ ี
แตกต่ างได้
37
• ตัวอย่ าง Ex-css9.html
ข้ อความใน <h1> จะเป็ นสีน ้าเงิน แต่ถ้ามีการ
กาหนดว่าเป็ นตัวเอียงแล้ ว ข้ อความใน <h1>
จะเป็ นสีแดง หรื อระบุว่าขีดเส้ นใต้ แล้ วจะได้ เป็ นสี
เขียว โดยที่รูปแบบพื ้นหลังของ <h1> ยังคง
อยู่
<html>
<head>
<style type="text/css">
h1 { color: blue; backgroundcolor:#FFFFCC }
h1 em { color: red }
h1 u { color:green}
</style>
</head>
<body>
<h1>ทดสอบ1</h1>
<h1><em>ทดสอบ2</em></h1>
<h1><u>ทดสอบ3</u></h1>
</body>
</html>
38
• ใน HTML จะใช้ tag <font> แต่ ในเอกสาร HTML/XHTML
แบบ strict จะถือว่ า tag <font> เป็ น tag ที่ล้าสมัยแล้ ว
• การใช้ CSS กาหนดลักษณะให้ ตวั อักษร มีรูปแบบ font
ผ่ าน Property ต่ างๆ ให้ กับ HTML element ได้ เช่ น
<p>,<div>,<span>,<h1> และอื่นๆ
39
Property
Description
Values
font-family
ใช้ กาหนดชนิด font ที่ต้องการจะให้ แสดงผล โดยที่ เช่น Arial, Helvetica, sans-serif
font นันจะต้
้ องมีอยู่ในเครื่ องของผู้ใช้ งานด้ วย
font-size
ใช้ กาหนดขนาดของตัวอักษร ที่จะให้ แสดงผล /td> xx-small , x-small , small, medium, large, xlarge, xx-large , smaller , larger , 18px ,70% ,
150%
font-style
ใช้ กาหนดรูปแบบของตัวอักษรในลักษณะต่างๆ
font-variant
ใช้ แปลงตัวอักษรที่เป็ นตัวพิมพ์เล็กให้ เป็ นพิมพ์ให่่ Normal, SMALL-CAPS
โดยที่ขนาดตัวอักษรยังคงเท่าตัวพิมพ์เล็ก
font-weight
ใช้ กาหนดความหนาของตัวอักษร
Normal,bold,bolder,lighter,100,200,300,400,5
00,600
color
ใช้ กาหนดสีให้ ตวั อักษร
Red, #000099
font
เราสามารถกาหนด property ให้ กบั font ได้ ในคาสัง่ font-style, font-variant,font-weight,font40
ประกาศเดียว
size,font-family
Normal, italic, oblique เอียง 45 องศา
• ตัวอย่ าง Ex-css10.html
<p style="font-family:AngsanaUPC; font-size:16pt; color:green">
ทดสอบ
</p>
41
• การกาหนดรู ปแบบให้ ข้อความ เช่ น ความสูงของบรรทัด,
ตาแหน่ งการจัดวางข้ อความ, การขีดเส้ นใต้ , การกาหนด
ตัวพิมพ์ เล็กพิมพ์ ใหญ่ และอื่นๆ ผ่ าน Property ต่ างๆ ดังนี ้
42
Property
Description
Values
color
ใช้ กาหนดสี
สี
Red, #000099
direction
ใช้ กาหนดทิศทางของ text (IE6)
ltr
rtl
ซ้ ายไปขวา, ขวาไปซ้ าย
line-height
ใช้ กาหนดความสูงของบรรทัด ซึง่ จะนับ normal
รวมขอบด้ านบนและล่างของตัวอักษรด้ วย number (pt)
%
Normal,
ความสูง 15pt
ความสูง 150%
letter-spacing
ใช้ กาหนดระยะห่าง ระหว่างตัวอักษรแต่ละ normal
ตัว
number (cm)
normal
-0.02cm
0.2cm
43
Property
text-align
Description
ใช้ กาหนดรูปแบบการจัดคา
Values
left
center
right
justify
left
center
right
justify
text-decoration
ใช้ กาหนดเส้ นให้ กบั ตัวอักษร none
underline
ในลักษณะต่างๆ
overline
line-through
blink
none
ขีดเส้ นใต้
เส้ นเหนือตัวอักษร
เส้ นขีดทับตัวอักษร
ตัวอักษรกระพริบ *IE ใช้ ไม่ได้
text-indent
ใช้ กาหนดขนาดของย่อหน้ า number (in)
ในบรรทัดแรกของย่อหน้ านันๆ
้ %
-กาหนดขนาดของย่อหน้ า 0.3 นิ ้ว
-กาหนดขนาดของย่อหน้ า 5% (ถ้ า
กาหนด 50% จะได้ กึ่งกลางหน้ าจอ
44
พอดี )
Property
Description
Values
text-transform
ใช้ แปลงตัวอักษรให้ เป็ น
uppercase
ตัวพิมพ์เล็ก หรื อ พิมพ์ให่่ lowercase
capitalize
UPPERCASE แปลงเป็ น
พิมพ์ให่่
LOWERCASE แปลงเป็ น
พิมพ์เล็ก
capitalize แปลงพิมพให่่
เฉพาะตัวแรกของคา
white-space
ใช้ กาหนดให้ หรื อ ไม่ให้ มีการ normal
ขึ ้นบรรทัดใหม่
nowrap
ให้ มีการตัดคาขึ ้นบรรทัดใหม่
ตามปกติ
ไม่ให้ มีการตัดคาขึ ้นบรรทัด
ใหม่
word-spacing
ใช้ กาหนดกาหนดระยะห่าง normal
ระหว่างแต่ละคา (IE6)
number (em)
normal - Happy new year
1em - Happy new year
45
• ตัวอย่ าง Ex-css10.html
<p style="color:green; text-indent:1cm; textalign:justify;">
<span style="text-decoration:underline">ทดสอบ1</span>
ทดสอบ2
</p>
46
• กาหนดลักษณะพืน้ หลังของ Element ต่ างๆ เช่ น <body>,
<table>, <p>, <h1>, <h2>, <div> เป็ นต้ น
47
Property
Description
Values
fixed
scroll
fix อยู่กบั ที่
เลื่อนตาม Scroll Bar
color-rgb
color-hex
color-name
transparent
รหัสสี
backgroundattachment
backgroundcolor
ใช้ กาหนดว่าต้ องการให้ ภาพพื ้นหลังนั ้น
อยู่กบั ที่ หรื อว่าเลื่อนไปตาม Scroll Bar
ใช้ กาหนดทั ้งสี พื ้นหลังของเว็บเพจ หรื อ
ตาราง
backgroundimage
backgroundposition
ใช้ กาหนดรูปภาพ ให้ พื ้นหลังของเว็บเพจ url ของรูป
หรื อตาราง
ใช้ กาหนดตาแหน่งการจัดวางรูปภาพ top left
top center
พื ้นหลัง
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
ชื่อสี
เช่น url(images/bg.jpg)
48
Property
Description
Values
backgroundrepeat
กำหนดรู ปภำพพืน้ หลังว่ ำต้ องกำรให้ มีกำร repeat
repeat-x
เรี ยงต่ อรู ปภำพหรื อไม่
repeat-y
no-repeat
background
เรำสำมำรถกำหนด property ให้ กับ
background ได้ ในคำสั่งประกำศเดียว
ไม่ ให้ มีกำรวำงต่ อรู ปภำพ
วำงต่ อรู ปภำพแนวนอน
วำงต่ อรู ปภำพแนวตัง้
วำงต่ อรู ปภำพทัง้ แนวนอน
และตัง้
background-color
background-image
background-repeat
background-attachment
background-position
49
• ตัวอย่ าง
เป็ นรูปอยู่ด้านบน ขวา ไม่ repeat
<div style="background-attachment:scroll;
background-image:url(images/bg1.gif);
background-position:top right;
background-repeat:no-repeat">
<br /><br /><br /><br />
</div>
Background เป็ นพื ้นสีฟ้า
<div class="output_box"
style="background-color:#D7EBFF">
<br /><br />iamsanya.com<br /><br />
</div>
เป็ นรูป repeart ทังแนวนอน
้
และแนวตัง้
<div style="backgroundimage:url(images/bg2.gif); backgroundrepeat:repeat">
<br /><br />iamsanya.com<br /><br />
</div>
Background เป็ นรูป Fix
<textarea style="backgroundimage:url(images/bg1.gif); backgroundattachment:fixed; width:300px "
rows="3“>เป็ น Background แบบ Fix
รูปจะไม่เลือนไปตาม Scroll Bar
.
.
.
.
</textarea>
50
• กาหนดลักษณะเส้ นกรอบของ Element ต่ างๆ ได้ เช่ น <p>,
<div> เป็ นต้ น
51
Property
Description
Values
border-width
ใช้ กาหนดขนาดของกรอบของ thin
medium
วัตถุทงั ้ 4 ด้ าน
thick
length
เช่น 5px,
5pt
border-style
ใช้ การกาหนดลักษณะของ
กรอบของวัตถุทงั ้ 4 ด้ าน
dotted
dashed
solid
double
groove
ridge
inset
outset
หมายเหตุ ค่า Property อื่นๆ
ของ Border ให้ ดใู นหนังสือ
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
52
• ตัวอย่ าง
กาหนดขนาด border
<div style="border-top-width:5px; borderright-width:5px; border-bottom-width:5px;
border-left-width:5px;">
<br /> <br /> <br />
</div>
ลักษณะ border
<div style="border-style:dashed dotted
solid double; border-color:#FF6633">
<br /><br /><br /><br />
</div>
<div style="border-width:5px">
<br /><br /><br />
</div>
กาหนดสี border
<div style="border-style:solid; bordercolor:red blue green black">
<br /> <br /> <br />
</div>
53
กาหนด property ให้ กบั border ในคาสัง่ ประกาศเดียว
<div style="border-width:5px; borderstyle:double; border-color:#336699">
<br /> <br /> <br />
</div>
หรื อ
<div style="border:5px double
#336699">
<br /> <br /> <br />
</div>
54
Property
margin-top
Description
ใช้ กาหนดระยะห่างระหว่างขอบของวัตถุด้านบน กับวัตถุอื่นๆ
Values
auto
length
เช่น 5px,
5pt,5cm
margin-bottom ใช้ กาหนดระยะห่างระหว่างขอบของวัตถุด้านล่าง กับวัตถุอื่นๆ
margin-left
ใช้ กาหนดระยะห่างระหว่างขอบของวัตถุด้านซ้ าย กับวัตถุอื่นๆ
margin-right
ใช้ กาหนดระยะห่างระหว่างขอบของวัตถุด้านขวา กับวัตถุอื่นๆ
margin
ใช้ กาหนดระยะห่างระหว่างขอบของวัตถุที่ต้องการ ทั ้ง 4 ด้ าน กับ
วัตถุอื่น ๆ ในคาสัง่ เดียว
padding-top
ใช้ กาหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้ นบน กับ ข้ อความ
ที่อยู่ในกรอบ
หมายเหตุ ค่า Property อื่นๆ
ของ Margin, Padding ให้ ดใู นหนังสือ
55
• ตัวอย่ าง
ข้อความข้างนอกตรงนี้หา่ งจากขอบด้านนอกของ block 20x นี่คอ
ื margin ด้านบน
<div style="margin:20px; padding:20px; border:20px solid #3399CC">
block นี้มี Border สีน้าเงิน ขนาด 20px <br />
มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 20px<br />
และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความทีอ่ ยูข
่ า้ งนอก block 20px ทีนี้คงเข้าใจแล้วว่า margin
และpadding คือส่วนไหนกันแล้ว
</div>
ข้อความข้างนอกตรงนี้หา่ งจากขอบด้านนอกของ block 20x นี่คอ
ื margin ด้านล่าง
56
การใช้ งาน padding ที่แต่ละด้ านไม่เท่ากัน
ความข้างนอกตรงนี้หา่ งจากขอบด้านนอกของ block 20x นี่
คือ margin ด้านบน
<div style="margin:20px; padding:10px 20px 30px
40px; border:2px solid #009999">
block นี้มี Border สีเขียว ขนาด 2px <br />
มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน
block 10px 20px 30px 40px
ซึง่ เป็ น pading ของด้านบน ขวา ล่าง ซ้าย ตามลาดับ
และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความ
ทีอ
่ ยูข
่ า้ งนอก block 20px ทัง้ 4 ด้าน
</div>
ข้อความข้างนอกตรงนี้หา่ งจากขอบด้านนอกของ block
20x นี่คอ
ื margin ด้านล่าง
57
Property
list-style-type
Description
ใช้ กาหนดลักษณะที่ใช้ นาหน้ าแต่ละ
รายการย่อย
หมายเหตุ ค่า Property อื่นๆ
ให้ ดใู นหนังสือ
Values
none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic

disc
o
circle
§
square
decimal

decimal-leading-zero
i.
lower-roman
I.
upper-roman
a.
lower-alpha
upper-alpha
•
lower-greek
•
lower-latin
58
• ตัวอย่ าง
เขียนเว็บเพจ
<ul style="list-style-type:square">
<li>HTML</li>
<li>CSS</li>
<li>XHTML</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
เขียนเว็บเพจ
<ul>
<li style="list-style-type:circle">HTML</li>
<li style="list-style-type:disc">CSS</li>
<li style="list-styletype:square">XHTML</li>
<li style="list-styletype:decimal">JavaScript</li>
<li style="list-style-type:upperroman">SQL</li>
</ul>
59
• ตัวอย่ าง
<ul style="list-styleimage:url(images/list.gif)">
<li>HTML</li>
<li>CSS</li>
<li>XHTML</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
60
• ต้ องใช้ กับเว็บเบราเซอร์ ร่ ุ นใหม่ ๆ เช่ น IE6 เป็ นต้ นไป
*บาง property เมื่อทดสอบแล้ วไม่ เห็นผล
61
Property
Description
Values
table-layout
ใช้ กาหนดความกว้ างของตารางและคอลัมน์
automatic
fixed
Default
กว้ างตามที่กาหนดเท่านัน้
caption-side
ใช้ กาหนดตาแหน่งของชื่อตาราง
top
bottom
left
right
Default
empty-cells
ใช้ กาหนดว่าจะแสดง/ไม่แสดง เส้ นขอบ เมื่อ cell นัน้ hide
ไม่มีข้อความ (empty)
show
border-spacing ใช้ กาหนดระยะระหว่างตาราง และขอบ แนวนอน และ length length
แนวตัง้
border-collapse ใช้ กาหนดลักษณะเส้ นขอบ
separate
collapse
Default
เช่น 2px 5px
Default แยกเป็ น 2 เส้ น
เป็ นเส้ นเดียว
62
<html>
<head>
<style type="text/css">
table.one{
table-layout:automatic;
width:100%;
border:1px solid #666666
}
• ตัวอย่ าง
table.two{
table-layout:fixed;
empty-cells:show;
border-collapse:collapse;
width:100%;
border:1px solid #666666
}
td {
border:1px solid #666666
}
</style>
</head>
<!—ต่อ-- >
<body>
<table class="one">
<caption>ตารางแสดงตัวเลข</caption>
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%"></td>
</tr>
</table>
<br />
<table class="two">
<caption>ตารางแสดงตัวเลข</caption>
<tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%"></td>
</tr>
</table>
</body>
63
</html>
ตารางแสดงตัวเลข
1000000000000000000000000000 10000000
ตารางแสดงตัวเลข
1000000000000000000000000000 10000000
สังเกต ตารางที่สอง จะ fix ความกว้ างของช่องตารางไว้ ทาให้ แสดงข้ อความไม่พอ นอกจากนี ้มีการกาหนด cell ว่างให้ แสดง
ด้ วย และให้ แสดงเส้ นขอบรวมเป็ นเส้ นเดียว
64
<html>
<head>
<style type="text/css">
table.three{
width:60%;
border:0;
}
table.three th { font-weight:bold;
border-bottom:1px solid #CCC;
border-top:1px solid #CCC;
background-color:#F2F9FF ;
color:#0000CC;
}
table.three td { padding:5px;
border-bottom:1px dotted #CCC;
}
</style>
</head>
<body>
<table class="three" cellspacing="0">
<tr>
<th>รหัสพนักงาน</th>
<th>ชื่อ</td>
<th>เงินเดือน</th>
</tr>
<tr>
<td>01</td>
<td>อานาจ</td>
<td align="right">30,000</td>
</tr>
<tr>
<td>02</td>
<td>สมชาย</td>
<td align="right">25,000</td>
</tr>
<tr>
<td>03</td>
<td>วีระ</td>
<td align="right">20,000</td>
</tr>
</table>
</body>
</html>
65
รหัสพนักงำน
ชื่อ
เงินเดือน
01
อานาจ
30,000
02
สมชาย
25,000
03
วีระ
20,000
66
• กาหนดการเชื่อมโยงไปยังที่ต่างๆ สามารถตกแต่ งการ
แสดงผลได้
67
Property
Purpose
a:link
กาหนด style ให้ กบั link ปกติที่ยงั ไม่เคยถูก click
a:visited
กาหนด style ให้ กบั link ที่เคยถูกคลิกแล้ ว
a:hover
กาหนด style ให้ กบั link เมื่อเลื่อนเมาส์ไปอยู่เหนือ link
a:active
กาหนด style ให้ กบั link ขณะถูกคลิก
68
• ตัวอย่ าง
<html>
<head>
<style type="text/css">
.linkbox a:link {color: #FF0000} /* unvisited link สีแดง*/
.linkbox a:visited {color: #00FF00} /* visited link สีเขียว*/
.linkbox a:hover {color: #FF00FF} /* mouse over link สีชมพู */
.linkbox a:active {color: #0000FF} /* selected link สีน ้าเงิน*/
</style>
</head>
<body>
<div class="linkbox">
<a href="css_chapter01.html">Chapter1</a>
<a href="css_chapter02.html">Chapter2</a>
<a href="css_chapter03.html">Chapter3</a>
<a href="css_chapter04.html">Chapter4</a>
<a href="css_chapter05.html">Chapter5</a>
</div>
<body>
69
</html>
ตัวอย่ ำง
<html>
<head>
<style type="text/css">
.linkpage a { font:12px Arial, Helvetica, sans-serif;
background: #F8FBFC;
color: #56ADDC;
text-decoration: none;
padding: 2px 4px;
border: 1px solid #1BA0CD;
}
.linkpage a:hover { background-color:#C0F5FA;
border-color: #608BD2;
color:#0076AE
}
.linkpage span { font: 12px Arial, Helvetica, sansserif;
color:#333333;
padding: 2px 4px;
}
</style>
</head>
<!..ต่อ..>
<body>
<div class="linkpage" style="margin:auto;
padding:10px">
<span>Page :</span>
<a href="css_chapter01.html">&laquo;
First</a>
<a href="css_chapter02.html">&lsaquo;
Prev</a>
<a href="css_chapter01.html">1</a>
<a href="css_chapter02.html">2</a>
<a href="css_chapter03.html">3</a>
<a href="css_chapter04.html">Next
&rsaquo;</a>
<a href="css_chapter05.html">Last
&raquo;</a>
</div>
<body>
</html>
70
กำรแสดงผลวัตถุว่ำจะแสดงอย่ ำงไร ที่ไหน
Property
Description
float
ใช้ กาหนดการจัดวางรูปภาพ หรื อวัตถุที่
ต้ องการ ว่าจะให้ อยู่ทางด้ านใดของ
ข้ อความที่มีอยู่
display
ใช้ กาหนดรูปแบบการแสดงของวัตถุ
Values
left
right
none
หมายเหตุ ค่า Property อื่นๆ
ให้ ดใู นหนังสือ
71
Property
Description
Values
auto
%
length
top
ใช้ กาหนดระยะของวัตถุ ว่าให้ อยูเ่ หนือ หรื อ ล่าง ขอบด้ านบน
bottom
ใช้ กาหนดระยะของวัตถุ ว่าให้ อยูเ่ หนือ หรื อ ล่าง ขอบด้ านล่าง
auto
%
length
left
ใช้ กาหนดระยะของวัตถุ ว่าให้ อยูข่ วา หรื อ ซ้ าย ของขอบด้ านซ้ าย
auto
%
length
right
ใช้ กาหนดระยะของวัตถุ ว่าให้ อยูข่ วา หรื อ ซ้ าย ของขอบด้ านซ้ าย
auto
%
length
ใช้ กาหนดรูปแบบการจัดวางวัตถุในลักษณะต่างๆ
static
ทัง้ relative absolute และ fixed กาหนดตาแหน่งด้ วยการใช้ property left, top, right, และ bottom relative
absolute
หมายเหตุ ค่า Property อื่นๆ
fixed
ให้ ดใู นหนังสือ
position
Default
72
นี่เป็ นข้อความจัดวางตามปกติ<br />
<font style="position:relative; left:-50px">เลือ
่ นไปทางซ้าย 50px</font><br />
<font style="position:relative; right:50px;">เลือ
่ นไปทางซ้าย 50px</font><br>
<font style="position:relative; left:50px;">เลือ
่ นไปทางขวา 50px</font><br>
<font style="position:relative; right:-50px;">เลือ
่ นไปทางขวา 50px</font><br>
<font style="position:relative; left:50px; color:blue">เลือ
่ นไปทางขวา 50px </font>
<font style="position:relative; left:20px; color:red">เลือ
่ นไปทางขวา 20px</font>
้ บน 5px</font>
<font style="position:relative; top:-5px; color:green">เลือ
่ นไปขึน
นี่เป็ นข้อความจัดวางตามปกติ<br />
<font style="position:fixed; bottom:20px;left:200px; color:blue; backgroundcolor:#D5FFFF">จัดให้หา่ งจากขอบซ้าย 200px (ข้อความนี้จดั แบบ Fixed)</font>
<font style="position:fixed; bottom:20px; right:200px; color:red; backgroundcolor:#FFE1F0">จัดให้หา่ งจากขอบขวา 200px (ข้อความนี้จดั แบบ Fixed)</font>
73
• สามารถตกแต่ งภาพด้ วย border และใช้ filter ให้ ภาพดู
โปร่ งใส (Transparent)
• สาหรั บ browser IE จะใช้ property filter:alpha(opacity=0100) ส่ วน Firefox จะใช้ property opacity:0.0-1.0
ตัวเลขยิ่งน้ อย ยิ่งดูโปร่ งใส
74
<html>
<body>
ภาพปกติ<br />
<img src=“images/logo.jpg" /><br />
ภาพโปร่งใส 50%<br />
<img src="images/logo.jpg" style="filter:alpha(opacity=50);
opacity:.50" />
<body>
</html>
<html>
<body>
<img
src=“images/logo.jpg"style="opacity:0.5;filter:alpha(opacity=50)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50"
/>
</body>
</html>
75
• เรื่ องของ CSS ที่เกี่ยวกับ Form มี 2 ส่ วน
• ส่ วนแรก คือ การตกแต่ ง Form Elements ด้ วย style sheet
และส่ วนที่สอง คือ การทา Form โดยไม่ ใช้ Table หรือ
เรียกว่ า Tableless Form
• Form Elements
สามารถตกแต่ ง ส่ วนประกอบของ Form ได้ แก่ input box,
textarea, button เป็ นต้ น ให้ มีสีสันที่สวยงามได้
76
ตัวอย่ ำง Textbox
<html>
<head>
<style type="text/css">
.textbox_gray {
color:#55555;
background-color:#FFFFFF;
border:1px solid #999999;
}
.textbox_yellow {
text-align:center;
color:#55555;
background-color:#FAFCD1;
border:1px solid #999999;
}
.textbox_image{
color:#55555;
background-image: url(images/bg1.jpg);
border: 1px solid #999999;
}
<!-ต่อ->
.textbox_imgside {
font-family: Tahoma, "ms sans Serif";
font-size:12px;
color:#0033CC;
background-image: url(images/bgPic.jpg);
background-repeat:no-repeat;
background-position:left;
border: 1px solid #3366CC;
padding-left:16px;
}
</style>
</head>
<body><Form> ป้ อนชือ
่
<input type="text" size="30" value=“0" />
<br><br> ป้ อนชือ
่
<input type="text" size="30"
class="textbox_gray" value=“1" />
<br><br>
77
<!-ต่อ>
ป้ อนชือ
่
<input type="text" size="30" class="textbox_yellow"
value=“2" />
<br><br> ป้ อนชือ
่
<input type="text" size="30" class="textbox_image"
value=“3" />
<br><br> ป้ อนชือ
่
<input type="text" size="30"
class="textbox_imgside" value=“4" />
<Form>
</body>
</html>
78
ตัวอย่ ำง Textarea
<html>
<head>
<style type="text/css">
.textarea1 {
scrollbar-arrow-color:#000;
scrollbar-face-color:#face00;
scrollbar-highlight-color:#fff;
scrollbar-3dlight-color:#000;
scrollbar-track-color:#fff;
scrollbar-shadow-color:#face00;
scrollbar-darkshadow-color:#000;
border:1px solid #000;
font-size:12px
}
.textarea2 {
scrollbar-arrow-color:#000;
scrollbar-face-color:#fff;
scrollbar-highlight-color:#fff;
<!-ต่อ->
scrollbar-3dlight-color:#000;
scrollbar-track-color:#fff;
scrollbar-shadow-color:#fff;
scrollbar-darkshadow-color:#000;
color:#000;
border:1px solid #000000;
font-size:12px
}
.textarea3 {
scrollbar-arrow-color:#add8e6;
scrollbar-face-color:#fff;
scrollbar-highlight-color:#fff;
scrollbar-3dlight-color:#add8e6;
scrollbar-track-color:#fff;
scrollbar-shadow-color:#fff;
scrollbar-darkshadow-color:#add8e6;
color:#197bff;
border:1px solid #add8e6;
font-size:12px
}
79
<!-ต่อ->
.textarea4 {
scrollbar-arrow-color:#ffb090;
scrollbar-face-color:#fff;
scrollbar-highlight-color:#fff;
scrollbar-3dlight-color:#ffb090;
scrollbar-track-color:#fff;
scrollbar-shadow-color:#fff;
scrollbar-darkshadow-color:#ffb090;
color:#ff4a19;
border:1px solid #ffb090;
font-size:12px
}
</style>
</head>
<body><Form>
<textarea rows="4" cols="20"
class="textarea1">
ข้อความ1
.
.
.
.
</textarea>
<textarea rows="4" cols="20"
class="textarea2">
<!-ต่อ->
ข้อความ2
.
.
.
.
</textarea>
<br />
<textarea rows="4" cols="20"
class="textarea3">
ข้อความ3
.
.
.
.
</textarea>
<textarea rows="4" cols="20"
class="textarea4">
ข้อความ4
.
.
.
.
</textarea></Form>
</body>
</html>
80
ตัวอย่ ำง Button
<html>
<head>
<style type="text/css">
.button_gray {
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color:#333333;
background-color: #FFCCFF;
border: 1px solid #000000;
padding: 1px 0;
}
.button_image {
font-family:Arial, Helvetica, sans-serif;
color:#333333;
background: url(images/bg1.jpg) repeat-x;
border: 1px solid #000000;
padding: 1px 0;
}
</style>
<!-ต่อ->
</head>
<body>
<input type="button" value="Submit"
class="button_gray">
<input type="button" value="Submit"
class="button_image">
</body>
</html>
81
• การกาหนด style ให้ กับ Scroll bar ใช้ งานได้ เฉพาะ IE5.5+
ไม่ สามารถใช้ ได้ กับ Firefox
Property
Value
scrollbar-face-color
color
สีแถบที่เลื่อน
scrollbar-highlight-color
color
สีขอบด้ านบน และด้ านซ้ าย ด้ านใน
scrollbar-shadow-color
color
สีขอบด้ านล่าง และด้ านขวา ด้ านใน
scrollbar-3dlight-color
color
สีขอบด้ านบน และด้ านซ้ าย ด้ านนอก
scrollbar-darkshadow-color color
สีขอบด้ านล่าง และด้ านขวา ด้ านนอก
scrollbar-arrow-color
color
สีลกู ศร
scrollbar-track-color
color
สีพื ้นด้ านล่าง
82
ตัวอย่ ำง
<html>
<head>
<style type="text/css">
html {
/*ทีเ่ ลือ
่ น*/
scrollbar-face-color: #DAE8F7;
/*สีขอบด้านบน และด้านซ้าย ด้านใน*/
scrollbar-highlight-color: #ffffff;
/*สีขอบด้านล่าง และด้านขวา ด้านใน*/
scrollbar-shadow-color: #ffffff;
/*สีขอบด้านบน และด้านซ้าย ด้านนอก*/
scrollbar-3dlight-color: #5F9FE0;
/*สีขอบด้านล่าง และด้านขวา ด้านนอก*/
scrollbar-darkshadow-color: #5F9FE0;
/*ลูกศร*/
scrollbar-arrow-color: #5F9FE0;
/*พื้นด้านล่าง*/
scrollbar-track-color: #ffffff;
}
</style>
<head>
<body>
1. HTML<br>
2. CSS<br>
3. JavaScript<br>
3. PHP<br>
3. XML<br>
</body>
<html>
83
• หากใช้ browser Firefox ลักษณะของ Cursor ที่เห็นจะไม่
เหมือนกับของ IE (ลองเอาเมาส์ เลื่อนที่ค่า value ต่ างๆดู)
Property
Value
cursor
หมายเหตุ ค่า Property อื่นๆ
ให้ ดใู นหนังสือ
Cursor
IE
FF
default
4+
2+
crosshair
4+
2+
hand
4+
pointer
4+
2+
move
4+
2+
84
• ตัวอย่ าง
<a href="" style="cursor:help">Help</a><br />
<a href=""
style="cursor:url(images/cur001.cur)">My
cursor (สาหรับ IE) </a><br />
<a href=""
style="cursor:url('images/cur001.cur'),auto">My
cursor (สาหรับ Firefox, IE ก็ยงั ใช้ได้)</a>
85
• ในการกาหนดการแสดงผลหน้ าตาเว็บเพจ บนสื่อประเภท
ต่ างๆ เราสามารถกาหนด style ให้ แตกต่ างกันได้ เช่ น ตอน
ที่เราเห็นบนหน้ าจอ (screen) กับตอนที่ส่ ังพิมพ์ ออก
กระดาษ (print) ให้ แสดงผลไม่ เหมือนกัน
86
•
•
•
•
•
•
•
•
•
•
•
ประเภทของสื่อ
all - ใช้ ในอุปกรณ์ ทุกชนิด
aural - แสดงผลออกทางระบบช่ วยอ่ านออกเสียง
braille - แสดงผลออกทางเครื่ องช่ วยอ่ านสาหรั บคนตาบอด
embossed - แสดงผลออกทางเครื่ องพิมพ์ สาหรั บคนตาบอด
handheld - แสดงผลออกทางจอภาพของเครื่ องคอมพิวเตอร์ ชนิดพกพา (handheld) ซึ่งมีขนาดเล็ก ไม่
สามารถแสดงสีได้ (monochrome) และมีประสิทธิภาพในการรั บส่ งข้ อมูลต่า
print - แสดงผลออกทางเครื่ องพิมพ์
projection - แสดงผลออกทางจอภาพที่มีความต่ างสี(contrast) และความสว่ าง(brightness) ต่า เช่ น จอภาพ
LCD, การแสดงผลผ่ านเครื่ อง projector
screen - แสดงผลออกทางจอภาพของเครื่ องคอมพิวเตอร์
tty - แสดงผลออกทางเทอร์ มินัลชนิดตัวอักษรเท่ านัน้ เช่ น โปรแกรม Lynx, เครื่ องโทรพิมพ์
tv - แสดงผลออกทางจอภาพของเครื่ องโทรทัศน์
87
• หากมีมากกว่ า 1 media ให้ ใช้ comma คั่น
• ให้ ตอนที่เราเห็นเว็บเพจบนหน้ าจอ ตัวอักษรมีขนาด 12px
แต่ ตอนที่เราสั่งพิมพ์ ให้ มีขนาด 50px และมีเส้ นขีดคร่ าตรง
กลาง โดยทัง้ ตอนที่เห็นบนหน้ าจอและเมื่อสั่งพิมพ์ ให้ เป็ น
ตัวหน้ าทัง้ คู่ เขียน style sheet กาหนดได้ ดังนี ้
88
• ตัวอย่ าง
<html>
<head>
<style>
@media screen
{
p.special {font-family:Verdana,sansserif; font-size:12px}
}
@media print
{
p.special {font-family:Arial, Helvetica;
font-size:50px;
text-decoration:line-through}
}
@media screen,print
{
p.special {font-weight:bold}
}
</style>
</head>
<body>
<p class="special">iamsanya.com</p>
</body>
</html>
89
• ปั จจุบันเว็บไซต์ ต่างๆ เปลี่ยนจากการใช้ Table จัดวาง
Layout ให้ หน้ าเว็บเพจ มาเป็ นแบบ Tableless โดยใช้ <div>
และใช้ CSS ในการจัดตาแหน่ ง ขนาด และสี ให้ กับ tag
<div> แทน เพราะมีข้อดีกว่ าการใช้ Table
90
<table style="width:100%">
<tr>
<td colspan="2" style="backgroundcolor:#09f; color:#fff">
<h1>Web builder Tutorials</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#93C9FF;
width:20%;text-align:top; ">
<b>Main Menu</b><br>
HTML<br>
CSS<br>
PHP <br>
XML<br>
JavaScript
</td>
<!-ต่อ->
<td style="height:200px; text-align:top;">
แนะนาการสร้ างเว็บไซต์ ตังแต่
้ พื ้นฐาน สอนเขียนเว็บเพจด้ วย
HTML, จัดตกแต่งรูปแบบการแสดงผลด้ วย CSS และก้ าวสู่การ
สร้ างเว็บไซต์ด้วย PHP สุดท้ ายเพิม่ ลูกเล่นให้ เว็บไซต์ของเราด้ วย
JavaScript
</td>
</tr>
<tr>
<td colspan="2" style="backgroundcolor:#09f; text-align:center; color:#fff">
Copyright © 2011
</td>
</tr>
</table>
91
• แบ่ งเป็ น 4 แบบ คือ
• 1. Fixed Layout จะกาหนดขนาดความกว้ าง และตาแหน่ งของส่ วน
ต่ างๆ เป็ น pixel
• 2. Liquid Layout จะกาหนดขนาดความกว้ างของส่ วนต่ างๆ เป็ น
เปอร์ เซ็นต์
• 3. Elastic Layout จะกาหนดขนาดของส่ วนต่ าง ๆ เป็ น em ทาให้ ส่วน
ต่ างๆ ย่ อหรื อขยาย
• 4. Hybrid Layout เป็ นการใช้ แบบต่ างๆ มาผสมกัน เช่ น Sidebar
ด้ านข้ าง ทัง้ 2 ด้ านเป็ น Elastic Layout ส่ วนเนือ้ หาเป็ น Liquid Layout
เป็ นต้ น
92
• Test.css
body {
font: 100% Verdana, Arial, Helvetica,
sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
/* ส่วน Page Header */
.thrColFixHdr #header {
background: #DDDDDD;
padding: 0 10px 0 20px;
}
/*ต่อ*/
/* ส่วน Page Body ทีบ
่ รรจุเนื้อหา */
.thrColFixHdr #container {
width: 780px;
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in
conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the textalign: center on the body element. */
}
/* ส่วน คอลัมน์ดา้ นซ้าย */
.thrColFixHdr #sidebar1 {
float: left;
width: 150px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
93
}
• Test.css (ต่ อ)
/*ต่อ*/
/* ส่วน คอลัมน์ดา้ นขวา */
.thrColFixHdr #sidebar2 {
float: right;
width: 160px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
/* ส่วนเนื้อหา อยูร่ ะหว่าง sidebar */
.thrColFixHdr #mainContent {
margin: 0 200px;
padding: 0 10px;
}
/* ส่วน Page Footer */
.thrColFixHdr #footer {
padding: 0 10px 0 20px;
background:#DDDDDD;
}
.clearfloat {
clear:both;
}
94
• ตัวอย่ าง เรี ยกใช้ CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href=“test.css" rel="stylesheet" type="text/css">
</head>
<body class="thrColFixHdr">
<div id="sidebar2">
<h3>Sidebar2 Content</h3>
95
<!-ต่อ->
<p>The background color on this div will only show for the length of the
content. If you'd like a dividing line instead, place a border on the right side of the
#mainContent div if it will always contain more content. </p>
<!-- end #sidebar2 --></div>
<div id="mainContent">
<h1> การจัด Layout </h1>
<p>ในหน้าเว็บเพจหนึ่งประกอบไปด้วยส่วนหัวเว็บ (Page Header), ส่วนเนื้อหา และการ
เชือ
่ มโยง (Page Body), และส่วนท้าย (Page Footer) จัดสรรพื้นทีข
่ องหน้าเว็บเพจเพือ
่ แสดง
ส่วนประกอบเหล่านี้ ทาได้หลายรูปแบบ เช่น แบ่งแบบอิสระ แบ่งแบบ 2 คอลัมน์ และ 3
คอลัมน์ </p>
<p> ในการลงมือเขียนเว็บเพจ ปัจจุบน
ั นิยมใช้ Div ในการจัด Layout มี 3 รูปแบบดังนี้</p>
<h2>1. Fixed Layout </h2>
96
<!-ต่อ->
<div id="container">
<div id="header">
<h1>Header</h1>
<!-- end #header --></div>
<div id="sidebar1">
<h3>Sidebar1 Content</h3>
<p>The background color on this div will only show for the length of
the content. If you'd like a dividing line instead, place a border on the
left side of the #mainContent div if it will always contain more content.
</p>
<!-- end #sidebar1 --></div>
97
<!-ต่อ->
<p>จะกาหนดขนาดความกว้าง และตาแหน่ งของส่วนต่างๆ เป็ น pixel ทาให้กาหนดขนาด และ
ตาแหน่ งของส่วนต่างๆ ได้ตามต้องการ ไม่ผด
ิ เพี้ยนไปตามขนาดหน้าจอ และเมือ
่ ย่อขยาย
หน้าต่างเว็บเบราเซอร์ (IE, Firefox) แล้ว ตาแหน่ งของส่วนต่างๆในหน้าเว็บจะยังคงเดิม </p>
<h2>2. Liquid Layout</h2>
<p>จะกาหนดขนาดความกว้างของส่วนต่างๆ เป็ นเปอร์เซ็นต์ เมือ
่ เราย่อหรือขยายขนาดของ
เว็บเบราเซอร์ ขนาดของส่วนต่างๆ จะย่อขยายตาม</p>
<h2>3. Elastic Layout</h2>
<p>จะกาหนดขนาดของส่วนต่าง ๆ เป็ น em ทาให้สว่ นต่างๆ ย่อหรือขยาย ตามการกาหนดค่า
Text size ของเบราเซอร์ เมือ
่ เพิม
่ หรือลดขนาดของตัวอักษรแล้ว ยังสามารถคงรูปแบบการจัดวาง
ส่วนต่างๆ ไว้ได้อย่างดี</p>
<!-- end #mainContent --></div>
<br class="clearfloat" />
<div id="footer">
<p>Footer<br/><br /></p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
98
</html>
• Pseudo-classes
• เป็ น selector กลุ่มที่น่าสนใจที่จัดรู ปแบบการแสดงผลโดย
ขึน้ กับสถานะ หรือเงื่อนไข เช่ น link เมื่อถูกคลิกจะเปลี่ยนสี
เป็ นต้ น
• selector:pseudo-class {property: value}
selector.css-class:pseudo-class {property: value}
99
Pseudo-class
Purpose
:link
กาหนด style ให้ กบั link ปกติที่ยงั ไม่เคยถูก click
:visited
กาหนด style ให้ กบั link ที่เคยถูกคลิกแล้ ว
:hover
กาหนด style ให้ กบั link เมื่อเลื่อนเมาส์ไปอยูเ่ หนือ link
:active
กาหนด style ให้ กบั link ขณะถูกคลิก
:focus
กาหนด style ให้ กบั element ขณะถูก focus
:first-child
กาหนด style ให้ กบั element ที่เป็ น first child ของ
element อื่นๆ
:lang
Allows the author to specify a language to use
in a specified element
100
• Anchor Pseudo-classes
• link ที่มีสถานะ active, visited, unvisited, หรื อเมื่อนาเมาส์
วางบน link เราสามารถกาหนดรูปแบบให้ แตกต่ างกันได้
a:link {color: #FF0000} /* unvisited link สีแดง*/
a:visited {color: #00FF00} /* visited link สีเขียว*/
a:hover {color: #FF00FF} /* mouse over link สีชมพู */
a:active {color: #0000FF} /* selected link สีน ้าเงิน*/
<a href="css_test1.html">Chapter1</a>
<a href="css_test2.html">Chapter2</a>
101
• เป็ น selector กลุ่มที่น่าสนใจที่จัดรู ปแบบการแสดงผลโดย
ขึน้ กับสถานะ หรือเงื่อนไข เช่ น เฉพาะอักษรตัวแรกใน <p>
เท่ านัน้ ที่เป็ นตัวอักษรสีแดงตัวใหญ่ เป็ นต้ น
• selector:pseudo-element {property: value}
selector.class:pseudo-element {property: value}
102
Pseudo-element
Purpose
:first-letter
กาหนด style ให้ตวั อักษรตัวแรกของข้อความ
:first-line
กาหนด style ให้กบั ข้อความบรรทัดแรก
:before
Inserts some content before the content of
an element
:after
Inserts some content after the content of an
element
103
• The :first-letter Pseudo-element การกาหนดรู ปแบบให้ กับตัวอักษรตัวแรก
ของ element
• Multiple Pseudo-elements สามารถนาทัง้ 2 แบบมาเขียนผสมกันได้
• CSS2 - The :before Pseudo-element สามารถกาหนดเพิ่ม content บางอย่ าง
ก่ อนแสดง content ของ element นัน้ ๆ *ใช้ ไม่ ได้ กับ web browser IE
• CSS2 - The :after Pseudo-element สามารถกาหนดเพิ่ม content บางอย่ าง
หลังจากแสดง content ของ element นัน้ ๆ *ใช้ ไม่ ได้ กับ web browser IE
104
The :first-letter Pseudo-element
<html>
<head>
<style type="text/css">
p:first-letter {color:#ff0000;font-size:xxlarge}
</style>
</head>
<body>
<p>iamsanya.com</p>
</body>
</html>
Multiple Pseudo-elements
<html>
<head>
<style type="text/css">
p:first-letter {color:#ff0000;font-size:xxlarge}
p:first-line {color:#0000ff}</style>
</head>
<body>
<p>Heath<br>iamsanya.com</p>
</body>
</html>
105
CSS2 - The :before Pseudo-element
CSS2 - The :after Pseudo-element
<html>
<head>
<style type="text/css">
h1:before
{
content: url(images/icons1.gif)
}
</style>
<html>
<head>
<style type="text/css">
h1:after
{
content: url(images/icons1.gif)
}
</style>
</head>
</head>
<body>
<h1>This is a header</h1>
</body>
</html>
<body>
<h1>This is a header</h1>
</body>
</html>
106
• CSS (Cascading Style Sheets) คือ ชุดคาสั่งที่ใช้ สาหรั บการ
กาหนดการแสดงผลข้ อมูลหน้ าเว็บพจ สามารถใช้ CSS ได้ 3 แบบ
คือ Inline Styles Internal, Style Sheet และ External Style Sheet
• Selectors นีใ้ น CSS มีการเขียนได้ หลากหลายรู ปแบบ ได้ แก่ TAG
Selectors, Class Selectors และ ID Selectors
• โดยในปั จจุบน
ั เว็บไซต์ ส่วนใหญ่ จะนิยมใช้ งาน CSS กันเพิ่มมาก
ขึน้ ทัง้ นีเ้ นื่องจาก CSS มีความสามารถในการตบแต่ งการแสดงผล
ข้ อมูลหน้ าเว็บเพจที่เหนือกว่ า HTML โดยปรกติอยู่มาก
107

similar documents