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

Download Report

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

1
่
• เพือทราบหลั
กการทางานของ
Cascading Style Sheets
CSS:
่ ทราบประโยชน์ของการใช้ภาษา
• เพือให้
CSS
่ ทราบการเขียนภาษา CSS
• เพือให้
2
• บรรยายโดยผู ส
้ อนและใช้เอกสาร
ประกอบการสอนของผู ส
้ อน
่
• สอนโดยใช้สอคอมพิ
ื่
วเตอร ์ผ่านเครืองฉาย
• อภิปรายในชนเรี
ั ้ ยนร่วมกัน
่ มจากตาราและ
• ให้นิสต
ิ ค้นคว้าเพิมเติ
่ ยวข้
่
เอกสารทีเกี
อง
• ทาแบบฝึ กหัดท้ายบท
3
• ประเมินผลจากการตอบคาถามและ
อภิปรายในชนเรี
ั ้ ยน
• ทาแบบฝึ กหัดท้ายบท
• ทารายงานส่ง
4
่ รูปแบบการเขียน Syntax ที่
• เป็ นภาษาทีมี
เฉพาะ และถู กกาหนดมาตรฐานโดย W3C
(World Wide Web Consortium) เช่น
เดียวกับ HTML และ XHTML
• ใช้สาหร ับตกแต่งเอกสาร HTML/
XHTML ให้มห
ี น้าตา สีสน
ั ตัวอ ักษร เส้น
่
้
ง ระยะห่าง ฯลฯ อย่างทีเรา
ขอบ พืนหลั
ต้องการ ด้วยการกาหนดคุณสมบัตใิ ห้ก5 บ
ั
6
1. การใช้ CSS ในการจัดรู ปแบบการแสดงผล จะช่วยลดการใช้
ภาษา HTML
่ code ภายในเอกสาร HTML ลดลง ทาให้ขนาดไฟล ์เล็ก
2. เมือ
ลง จึงดาวน์โหลดได้เร็ว
3. สามารถกาหนดรู ปแบบการแสดงผลจากคาสัง่ style sheet
ชุดเดียวกัน
4. สามารถควบคุมการแสดงผลให้เหมือนกน
ั หรือใกล้เคียงกัน ได้
ในหลาย Web Browser
่
่
5. สามารถกาหนดการแสดงผลในรู ปแบบทีเหมาะกั
บสือชนิ
ด
่ งพิ
่ มพ ์, บนมือถือ หรือบน
ต่างๆ เช่น หน้าจอ, บนกระดาษเมือสั
่ นเนื อหาเดี
้
PDA โดยทีเป็
ยวก ัน
่ มาตรฐาน ปั จจุบน
6. ทาให้เป็ นเว็บไซต ์ทีมี
ั การใช้ attribute 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
สาหร ับกาหนดขนาดตัวอ ักษร
8
่
• value เป็ น ค่า ทีเรากาหนดให้กบ
ั property
9
ตัวอย่างคาสัง่ CSS
่ ่ใน Tag <p> เป็ นสี
กาหนดให้ขอ
้ ความทีอยู
ดา และวางอยู ่กงกลาง
ึ่
่ น HTML Tag */
/* selector ทีเป็
p{
color:#000000;
text-align:center
}
10
• กาหนดให้ขอ
้ ความที่ class name topic
เป็ นสีแดง ชนิ ดอักษรเป็ น Arial ตัวหนา
และจัดวางอยู ่กงกลาง
ึ่
่ น Class name */
/* selector ทีเป็
.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, ความสู งของตัวอักษร) เป็ นขนาด
่ าหนดให้ body
จานวนเท่าของขนาด font ทีก
ถ้า 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
เหมือนเดิม
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 มีขนาดพอๆ
16
่ ในงานสิงพิ
่ มพ ์เช่น
กับ 12px) เป็ นหน่ วยทีใช้
้ สี
• 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 เช่น
17
rgb(0,204,0)
• เราสามารถใช้ 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
คาสัง่ Style Sheet ทีอยู
type="text/css"> ... </style> มาบันทึกเป็ นไฟล ์
ใหม่ นามสกุล .css
• แล้วเรียกใช้ Style Sheet ในเอกสาร HTML ทุกไฟล ์
<link
rel="stylesheet"
่ องการใช้
ทีต้
งาน Style Sheet ชุดนี ้ ไว้ ในส่วน
type="text/css"
href="URL
<style type="text/css">
<head>...</head>
โดยใช้คาสัง่ ไฟล ์.css">
หรือ
@import url( URL
ไฟล ์.css );
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 โดยเรียกใชจากภายนอก
จะทาให ้ไฟล์เวบเพจมีขนาดเล็กและการแก ้ไขคา
25
style sheet เพียงทีเ่ ดียวจะมีผลกับเอกสารทุกหน ้าได ้
• ลาดับการประมวลผลใน CSS (Cascading
Order)
่ selector
1. กรณี ทมี
ี่ การกาหนด style ด้วยชือ
้
่
เดียวกันทังแบบ
3 แบบ Style sheet ทีจะถู
กใช้
คือแบบไหน ลาดับความสาคัญ เรียงจากมากไป
หาน้อย
-Inline style (inside an HTML element),
-Internal style sheet (inside the <head>
tag)
-External style sheet ตามลาด ับ
26
่
* จากลาดับความสาคัญดังกล่าว Style ทีจะถู ก
• 2. กรณี ทมี
ี่ การเขียน style ซา้ selector เดิม
่ ่ดา้ นล่าง จะถูกทาเป็ นลาดับสุดท้าย
อ ันทีอยู
ตัวอย่าง mystyle.c
p{
sscolor:blue }
หรือ
p{ color:green }
หากต ้องการใช ้อันไหนให ้กาหนด !important ไว ้
จะได ้ตัวอักษรใน Tag <p> เป็ น
สเี ขียว
<html>
จะได ้ตัวอักษรใน Tag <p> เป็ นน้ า
เงิน
Ex-css4.html
p{color:blue!important}
p{color:green}
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<p>ทดสอบ1</p>
<p>ทดสอบ2</p>
</body>
</html>
27
• การใช้ Selector จะมีอยู ่ 3 แบบคือ
่ น HTML Tag
1. Selector ทีเป็
่ น Class attribute
2. Selector ทีเป็
่ น ID attribute
3. Selector ทีเป็
28
่ น HTML Tag
• 1.Selector ทีเป็
• เป็ นการกาหนด 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
่ น Class attribute
• 2.Selector ทีเป็
• เป็ นการกาหนดคุณสมบัตแ
ิ บบเฉพาะเจาะจง
ให้ก ับ HTML element ผ่าน class
้ั อ
่ class
attribute โดยเราสามารถตงชื
่ องการใช้แสดงผลรู ปแบบนันซ
้ า้
• Class ใช้เมือต้
หลายๆ ครง้ั หรือต้องการใช้ก ับ element
่
หลายๆ อ ัน การประกาศใช้เครืองหมาย
"."
่ class
นาหน้าชือ
31
<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>
• ตัวอย่าง Ex-css6.html
32
• จากตัวอย่างสังเกตได้วา
่ class topic ถู ก
้ั
เรียกใช้หลายครงใน
<p> และ ถู กใช้ในหลาย
element ได้ คือ <p> และ <div>
• แต่ถา
้ ต้องการกาหนดให้ class topic ใช้งาน
้ ทาได้โดยใส่ "p."
เฉพาะกับ <p> เท่านัน
่ class
นาหน้าชือ
• จะมีผลทาให้ขอ
้ ความใน <div
class="topic">บทความ</div> ไม่สามารถ
่ าหนดใน class topic
แสดงผลตามรู ปแบบทีก
33
ได้
• กรณี ทต้
ี่ องการให้แสดงผลตามรู ปแบบที่
กาหนดใน 2 class<html>
ก็สามารถทาได้
ตัวอย่าง Ex-css7.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
่ น ID attribute
• 3.Selector ทีเป็
่
เป็ นการประกาศคาสัง่ Style Sheet เพือ
กาหนดคุณสมบัตแ
ิ บบเฉพาะเจาะจง
ให้กบ
ั HTML element ผ่าน ID
attribute เหมือนกับ Class แต่ตา
่ งกันที่
่ เพียงอ ันเดียวใน
ID จะใช้กบ
ั element ทีมี
เอกสาร HTML การประกาศใช้ # หน้า ID
35
<html>
• ตัวอย่าง Ex-css8.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
<html>
• ตัวอย่าง Ex-css9.html
<head>
ี ้ าเงิน
ข ้อความใน <h1> จะเป็ นสน
แต่ถ ้ามีการกาหนดว่าเป็ นตัวเอียง
แล ้ว ข ้อความใน <h1> จะเป็ นส ี
้
แดง หรือระบุวา่ ขีดเสนใต
้แล ้วจะ
ได ้เป็ นสเี ขียว โดยทีร่ ป
ู แบบพืน
้
หลังของ <h1> ยังคงอยู่
<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
่ Arial, Helvetica, sansใชก้ าหนดชนิด font ทีต
่ ้องการจะ เชน
ให ้แสดงผล โดยที่ font นั น
้ จะต ้อง serif
้
มีอยูใ่ นเครือ
่ งของผู ้ใชงานด
้วย
font-size
ใชก้ าหนดขนาดของตัวอักษร ทีจ
่ ะ xx-small , x-small , small,
ให ้แสดงผล /td>
medium, large, x-large, xxlarge , smaller , larger , 18px
,70% , 150%
font-style
ใชก้ าหนดรูปแบบของตัวอักษรใน Normal, italic, oblique เอียง 45
ลักษณะต่างๆ
องศา
font-variant
้
ใชแปลงตั
วอักษรทีเ่ ป็ นตัวพิมพ์เล็ก Normal, SMALL-CAPS
ให ้เป็ นพิมพ์ใหญ่
โดยทีข
่ นาดตัวอักษรยังคงเท่า
ตัวพิมพ์เล็ก
font-weight
40
ใชก้ าหนดความหนาของตัวอักษร Normal,bold,bolder,lighter,10
• ตัวอย่าง Ex-css10.html
<p style="font-family:AngsanaUPC; font-size:16pt; color:green">
ทดสอบ
</p>
41
• การกาหนดรู ปแบบให้ขอ
้ ความ เช่น ความ
สู งของบรรทัด, ตาแหน่ งการจัดวาง
ข้อความ, การขีดเส้นใต้, การกาหนด
่ ผ่าน
ตัวพิมพ ์เล็กพิมพ ์ใหญ่ และอืนๆ
Property ต่างๆ ดังนี ้
42
Propert
y
color
Description
ใชก้ าหนดส ี
direction ใชก้ าหนดทิศทางของ text
(IE6)
Values
สี
Red, #000099
ltr
rtl
้
้
ซายไปขวา,
ขวาไปซาย
normal
number (pt)
%
Normal,
ความสูง 15pt
ความสูง 150%
lineheight
ใชก้ าหนดความสูงของ
บรรทัด ซงึ่ จะนั บรวมขอบ
ด ้านบนและล่างของ
ตัวอักษรด ้วย
letterspacing
ใชก้ าหนดระยะห่าง ระหว่าง 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 นิว้
-กาหนดขนาดของย่44
อ
Descriptio
Property
n
Values
text-transform
้
ใชแปลงตั
วอักษร uppercase
ให ้เป็ นตัวพิมพ์เล็ก lowercase
หรือ พิมพ์ใหญ่
capitalize
UPPERCASE
แปลงเป็ นพิมพ์ใหญ่
LOWERCASE
แปลงเป็ นพิมพ์เล็ก
capitalize แปลง
พิมพใหญ่เฉพาะตัว
แรกของคา
white-space
ใชก้ าหนดให ้ หรือ normal
ไม่ให ้มีการขึน
้
nowrap
บรรทัดใหม่
ให ้มีการตัดคาขึน
้
บรรทัดใหม่
ตามปกติ
ไม่ให ้มีการตัดคา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
ใชก้ าหนดว่าต ้องการให ้
ภาพพืน
้ หลังนัน
้ อยูก
่ บ
ั ที่
หรือว่าเลือ
่ นไปตาม Scroll
Bar
backgrou ใชก้ าหนดทัง้ ส ี พืน
้ หลัง
nd-color ของเว็บเพจ หรือ ตาราง
fixed
scroll
fix อยูก
่ บ
ั ที่
เลือ
่ นตาม Scroll Bar
color-rgb
color-hex
color-name
transparent
รหัสส ี
backgrou ใชก้ าหนดรูปภาพ ให ้พืน
้
nd-image หลังของเว็บเพจ หรือ
ตาราง
backgrou ใชก้ าหนดตาแหน่งการจัด
ndวางรูปภาพพืน
้ หลัง
position
url ของรูป
่
เชน
url(images/bg.jpg)
backgrou
ndattachme
nt
top left
top center
top right
center left
center center
center right
bottom left
bottom center
ื่ ส ี
ชอ
48
Propert
y
Description
้
backgroun กาหนดรู ปภาพพืนหลั
งว่า
d-repeat ต้องการให้มก
ี ารเรียงต่อ
รู ปภาพหรือไม่
backgroun เราสามารถกาหนด
d
property ให้ก ับ
background ได้ในคาสัง่
ประกาศเดียว
Values
repeat
repeat-x
repeat-y
no-repeat
background-color
backgroundimage
background-
ไม่ให้มก
ี ารวางต่อ
รู ปภาพ
วางต่อรู ปภาพ
แนวนอน
วางต่อรู ปภาพ
แนวตัง้
วางต่อรู ปภาพทัง้
แนวนอนและตัง้
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
กรอบของวัตถุทงั ้ 4 medium
ด ้าน
thick
length
border-style
หมายเหตุ ค่า Property อืน
่ ๆ
ื
ของ Border ให ้ดูในหนั งสอ
้
ใชการก
าหนด
ลักษณะของกรอบ
ของวัตถุทงั ้ 4 ด ้าน
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
่
เชน
5px,
5pt
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
Description
margin-top ใชก้ าหนดระยะห่างระหว่างขอบของวัตถุ
ด ้านบน กับวัตถุอน
ื่ ๆ
marginbottom
Value
s
่
auto เชน
length 5px,
5pt,5c
m
ใชก้ าหนดระยะห่างระหว่างขอบของวัตถุ
ด ้านล่าง กับวัตถุอน
ื่ ๆ
margin-left ใชก้ าหนดระยะห่างระหว่างขอบของวัตถุ
้ กับวัตถุอน
ด ้านซาย
ื่ ๆ
marginright
ค่า ต
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
decimalleading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian

disc
o
circle
§
square
decimal

decimal-leadingzero
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
tablelayout
ใชก้ าหนดความกว ้างของตารางและ automatic Default
คอลัมน์
fixed
กว ้างตามทีก
่ าหนดเท่านั น
้
captionside
ื่ ตาราง
ใชก้ าหนดตาแหน่งของชอ
emptycells
ใชก้ าหนดว่าจะแสดง/ไม่แสดง เสน้ hide
ขอบ เมือ
่ cell นั น
้ ไม่มข
ี ้อความ
show
(empty)
Default
borderspacing
ใชก้ าหนดระยะระหว่างตาราง และ
ขอบ แนวนอน และแนวตัง้
length
length
่ 2px 5px
เชน
bordercollapse
้
ใชก้ าหนดลักษณะเสนขอบ
separate
collapse
Default แยกเป็ น 2 เสน้
62
้ ยว
เป็ นเสนเดี
top
bottom
left
right
Default
<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%">10000000000000000000000
00000</td>
<td width="40%">10000000</td>
<td width="40%"></td>
</tr>
</table>
<br />
<table class="two">
<caption>ตารางแสดงตัวเลข</caption>
<tr>
<td
width="20%">10000000000000000000000
00000</td>
<td width="40%">10000000</td>
63
<td width="40%"></td>
</tr>
ตารางแสดงตัวเลข
100000000000000000
10000000
0000000000
ตารางแสดงตัวเลข
100000000000000000
10000000
0000000000
่ งตารางไว ้ ทาให ้แสดงข ้อความไม่พอ
สังเกต ตารางทีส
่ อง จะ 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
float
Description
Values
ใชก้ าหนดการจัดวางรูปภาพ left
หรือวัตถุทต
ี่ ้องการ ว่าจะให ้ right
อยูท
่ างด ้านใดของข ้อความที่ none
มีอยู่
ใชก้ าหนดรูปแบบการแสดง
หมายเหตุ ค่า Propertyของวั
อืน
่ ๆ ตถุ
ื
ให ้ดูในหนังสอ
display
71
Property
Description
Values
top
ใชก้ าหนดระยะของวัตถุ ว่าให ้อยูเ่ หนือ หรือ ล่าง ขอบด ้านบน
auto
%
length
bottom
ใชก้ าหนดระยะของวัตถุ ว่าให ้อยูเ่ หนือ หรือ ล่าง ขอบด ้านล่าง
auto
%
length
left
้ ของขอบด ้านซาย
้
ใชก้ าหนดระยะของวัตถุ ว่าให ้อยูข
่ วา หรือ ซาย
auto
%
length
right
้ ของขอบด ้านซาย
้
ใชก้ าหนดระยะของวัตถุ ว่าให ้อยูข
่ วา หรือ ซาย
auto
%
length
position ใชก้ าหนดรูปแบบการจัดวางวัตถุในลักษณะต่างๆ
ทัง้ relative absolute และ fixed กาหนดตาแหน่งด ้วยการใช ้
property left, top, right, และ bottom
หมายเหตุ ค่า Property อืน
่ ๆ
ื
ให ้ดูในหนังสอ
static
Default
relative
absolute
72
fixed
นี่เป็ นข้อความจัดวางตามปกติ<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=0-100) ส่วน
Firefox จะใช้ property opacity:0.01.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
76 น
ได้แก่ input box, textarea, button เป็
ตัวอย่าง 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+ ไม่สามารถใช้ได้กบ
ั
Property
Value
Firefox
ี ถบทีเ่ ลือ
scrollbar-face-color
color
สแ
่ น
scrollbar-highlight-color
color
ี อบด ้านบน และด ้านซาย
้ ด ้าน
สข
ใน
scrollbar-shadow-color
color
ี อบด ้านล่าง และด ้านขวา ด ้าน
สข
ใน
scrollbar-3dlight-color
color
ี อบด ้านบน และด ้านซาย
้ ด ้าน
สข
นอก
scrollbar-darkshadow-color color
ี อบด ้านล่าง และด ้านขวา ด ้าน
สข
นอก
82
scrollbar-arrow-color
color
ี ก
สล
ู ศร
ตัวอย่าง
<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 ลักษณะของ
่ นจะไม่เหมือนกับของ IE (ลอง
Cursor ทีเห็
่
่ า value ต่างๆดู )
เอาเมาส
์เลื
อนที
ค่
Property
Value
Cursor
IE
FF
cursor
default
4+
2+
crosshair
4+
2+
hand
4+
pointer
4+
2+
move
4+
2+
หมายเหตุ ค่า Property อืน
่ ๆ
ื
ให ้ดูในหนังสอ
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 - แสดงผลออกทางจอภาพของเครืองคอมพิ
วเตอร ์ชนิ ดพกพา
่ ขนาดเล็ก ไม่สามารถแสดงสีได้ (monochrome) และมี
(handheld) ซึงมี
่
ประสิทธิภาพในการร ับส่งข้อมู ลตา
่
print - แสดงผลออกทางเครืองพิ
มพ ์
่ ความต่างสี(contrast) และความ
projection - แสดงผลออกทางจอภาพทีมี
่ เช่น จอภาพ LCD, การแสดงผลผ่านเครือง
่
สว่าง(brightness) ตา
projector
่
screen - แสดงผลออกทางจอภาพของเครืองคอมพิ
วเตอร ์
้ เช่น โปรแกรม Lynx,
tty - แสดงผลออกทางเทอร ์มินล
ั ชนิ ดตัวอ ักษรเท่านัน
่
เครืองโทรพิ
มพ ์
่
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>
91
</table>
• แบ่งเป็ น 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}
99
selector.css-class:pseudo-class
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
่ สถานะ active, visited,
• link ทีมี
่ าเมาส ์วางบน link
unvisited, หรือเมือน
เราสามารถกาหนดรู ปแบบให้แตกต่างกัน
ี ดง*/
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}
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
กาหนดเพิม
้ *ใช้ไม่ได้ก ับ web browser IE
ของ element นันๆ
• CSS2 - The :after Pseudo-element สามารถ
่ content บางอย่าง หลังจากแสดง
กาหนดเพิม
้ *ใช้ไม่ได้ก ับ web 104
content ของ element นันๆ
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
• โดยในปั จจุบน
ั เว็บไซต ์ส่วนใหญ่จะนิ ยมใช้งาน
่
้ ทังนี
้ เนื
้ ่องจาก CSS107 มี
CSS กันเพิมมากขึ
น