ตัวอย่างที่ 6 - wathinee . reru . ac . th
Download
Report
Transcript ตัวอย่างที่ 6 - wathinee . reru . ac . th
บทที่ 6
CSS
Cascading Style Sheet
1
เกริ่น ย้ อนกล่ าวถึง HTML
Web Technology & Basic Web
2
การแสดงผลรายการแบบลาดับตัวเลข(orderer Lists)
้ สดงรายการทีเ่ รียงลาด ับ หรือจ ัดลาด ับความสาค ัญของห ัวข้อ
• ใชแ
้ ัวเลข หรือ ต ัวอ ักษรเรียง ในการเรียงก็ได้ มีรป
• ใชต
ู แบบด ังนี้
<OL TYPE = number_type START = number..>
<LI> Item number one
<LI> Item number two
<LI> Item number tree
</OL>
้ ัวเลข ต ัวอ ักษร หรือ
• TYPE เป็นการกาหนดว่าจะแสดงรายการโดยใชต
ต ัวอ ักษรโรม ันเป็นต้น
3
การแสดงผลแบบรายการ (LIST)
• รูปแบบ
<LIST TYPE>
<ITEM> First Item in List
<ITEM> Second Item in List
<ITEM> Third Item in List
</LIST TYPE>
4
ตัวอย่ าง
<OL TYPE = a>
<LI> Oranges </LI>
<LI> Peaches </LI>
<LI> Grapes </LI>
</OL>
ได้ผลล ัพธ์คอ
ื
a. Oranges
b. Peaches
c. Grapes
5
ตัวอย่ าง
<OL TYPE = I>
<LI> Oranges </LI>
<LI> Peaches </LI>
<LI> Grapes </LI>
</OL>
ได้ผลล ัพธ์คอ
ื
I. Oranges
II. Peaches
III. Grapes
Web Technology for Education
6
ตัวอย่ าง
<OL START = 3>
<LI> Oranges </LI>
<LI> Peaches </LI>
<LI VALUE = 7> Grapes
</LI>
<LI>Apples </LI>
</OL>
ได้ผลล ัพธ์คอ
ื
3. Oranges
4. Peaches
7. Grapes
8. Apples
Web Technology for Education
7
การแสดงผลรายการแบบไม่ มีลาดับ(Unordered List)
้ สดงรายการห ัวข้อย่อยโดยไม่มห
• ใชแ
ี น่วยน ับนาหน้า แต่จะเป็น bullet
• กาหนดรูปแบบได้ โดยระบุหล ังคาสง่ ั TYPE ต่อจาก <UL> เป็น disc(
วงกลมทึบ), circle, square
• รูปแบบ
<UL TYPE = bullet_type>
<LI> First Item
<LI> Second Item
<LI> Third Item
</UL>
Web Technology for Education
8
ตัวอย่ าง
These are name of CS Staff
<UL>
<LI>Seree Chinodom </LI>
<LI>Tawatchai Iempairoj </LI>
<LI>Jira Jaturanon </LI>
<LI>Surangkana Thumlikhit </LI>
<LI>Others </LI>
</UL>
Web Technology for Education
9
Directory Lists
• เป็นการแสดงผลข้อมูลเหมือนก ับ <UL>,</UL> แต่จะถูกจาก ัดด้วย
ต ัวอ ักษรไม่เกิน 24 ต ัว
• มีรป
ู แบบด ังนี้
<DIR>
<LI> message </LI>
<LI> massage </LI>
<LI> message </LI>
</DIR>
Web Technology for Education
10
Menu Lists
ั
• แสดงรายการต่างๆแบบไม่มต
ี ัวเลข แต่มห
ี ัวข้อเป็นสญล
ักษณ์
(Bullet) แต่การแสดงผลข้อมูลจะกะท ัดร ัดกว่าการใช ้ tag <UL>
• มีรป
ู แบบด ังนี้
<MENU>
<LI> message
<LI> massage
<LI> message
</MENU>
Web Technology for Education
11
NESTED LISTS
<UL>
<LI> few New England states:
<UL>
<LI> Vermont </LI>
<LI> New Hampshire </LI>
</UL>
<LI> One Midwestern state:
<UL>
<LI> Michigan </LI>
</UL>
</UL>
Web Technology for Education
12
การสร้ างตาราง
• Table ประกอบด้วยแถว (row) และคอล ัมน์ (col) จุดต ัดของแถว
้ รรจุขอ
และคอล ัมน์ เรียกว่า cell ซงึ่ ใชบ
้ มูล
Column
Cell
Web Technology for Education
Row
13
คาสั่ งสร้ างตาราง
<TABLE>...</TABLE>
้ ม
สำหรับใชเริ
่ ต ้นกำรสร ้ำง และจบกำร
้
สร ้ำงตำรำง โดยจะไม่ม ี เสนแบ่
ง cell
้ ม
<TABLE BORDER=n>…</TABLE> สำหรับใชเริ
่ ต ้นกำรสร ้ำงและจบกำร
้
สร ้ำงตำรำง โดยจะมี เสนแบ่
ง Cell
แสดงให ้เห็น
<TR>...</TR>
ใชก้ ำหนดแถวของตำรำง
<TD>...</TD>
กำหนดสว่ นของข ้อมูลลง cell
<TH>...</TH>
ใชก้ ำหนดหัวตำรำง
<CAPTION
ALIGN=TOP|BOTTOM>
้ ยนข ้อควำมอธิบำยตำรำง โดย
ใชเขี
เขียนให ้อยูด
่ ้ำนบนหรือด ้ำนล่ำงของ
ตำรำงก็ได ้ ถ ้ำไม่กำหนดจะเป็ นกำร
กำหนดให ้คำอธิบำยอยูด
่ ้ำนบนของ
ตำรำง
Web Technology for Education
14
tag <TABLE>
<TABLE>
<TR> <TD>ข้อความ </TD>
<TD>ข้อความ </TD>
<TD>ข้อความ </TD> </TR>
<TR> <TD>ข้อความ </TD>
<TD>ข้อความ </TD>
<TD>ข้อความ </TD>
</TR>
……..
</TABLE>
Web Technology for Education
15
การตีกรอบตาราง
้
• คาสง่ ั <TABLE>...</TABLE> เป็นการสร้างตารางทีไ่ ม่มเี สน
้ ในตารางใช ้ แอตทริบวิ ต์ BORDER กาหนดลงในคาสง่ ั
• การกาหนดเสน
<TABLE> ด ังนี้
<TABLE BORDER= ความหนา>
…….
</TABLE>
Web Technology for Education
16
ตัวอย่าง
<HTML>
<HEAD><TITLE> Table Demo </TITLE></HEAD>
<BODY>
้ กรอบ </H1>
<H1> ตาราง 2 x 2 พร้อมเสน
<TABLE BORDER>
<TR> <TD>เสรี</TD>
ั
<TD>ธว ัชชย</TD></TR>
ั
<TR> <TD>วิชย</TD>
<TD>ถมกนก</TD> </TR>
</TABLE>
</BODY>
</HTML>
Web Technology for Education
17
การปรับขนาดความกว้ างและความสู งของตาราง
• เพิม
่ แอตทริบวิ ต์ WIDTH = x% ลงในคาสง่ ั เปิ ด ของ tag <TABLE>
โดยที่ x แทนความกว้างของแถวของตารางทีจ
่ ะแสดงบนจอภาพ
<TABLE WIDTH=x%>
• เพิม
่ แอตทริบวิ ต์ HEIGHT = x% ลงในคาสง่ ั เปิ ด ของ tag
<TABLE> โดยที่ x แทนความสูงของแถวของตารางทีจ
่ ะแสดงบน
จอภาพ
<TABLE HEIGHT=x%>
Web Technology for Education
18
การจัดตาแหน่ งของข้ อมูลใน cell
• การจ ัดข้อมูลในเซลทาได้ 2 แบบคือ
• แนวนอน ได้แก่ LEFT,RIGHT,CENTER
• แนวตงั้ ได้แก่ TOP, BUTTON, MIDDLE
• ใน tag <TR>เพิม
่ แอตทริบวิ ต์
• ALIGN= สาหร ับแนวนอน
• VALIGN= สาหร ับแนวตงั้
• รูปแบบ
<TR ALIGN = … VALIGN=…>
<TD>…</TD>
</TR>
Web Technology for Education
19
ROWSPAN
•
้ าหนดความสูงเป็นจานวนเท่าของแถว
แอตทริบวิ ต์ ROWSPAN ใชก
้ ับ tag <TD>
ปกติ ใชก
• ต ัวอย่าง
<TABLE BORDER>
<TR>
<TD>Item1</TD>
<TD ROWSPAN=2>Item2</TD>
<TD>Item3</TD> </TR>
<TR>
<TD>Item4</TD>
<TD >Item5</TD> </TR>
</TABLE>
Web Technology for Education
20
COLSPAN
้ ร ับขนาดของความกว้างคอล ัมน์ในตาราง
แอตทริบวิ ต์ COLSPAN ใชป
ให้มข
ี นาดเป็นจานวนเท่าของของขนาดความกว้างปกติ ใน tag
<TD>
• ต ัวอย่าง
•
<TABLE BORDER>
<TR> <TD>Item1</TD>
<TD COLSPAN=2>Item2</TD> </TR>
<TR> <TD>Item3</TD>
<TD>Item4</TD>
<TD >Item5</TD> </TR>
</TABLE>
Web Technology for Education
21
CELLPADDING
้ าหนดพืน
้ ทีก
แอตทริบวิ ต์ CELLPADDING ใชก
่ ารแสดงข้อมูล ภายใน
ตาราง
้ ทีใ่ นการแสดงข้อมูลใน
• ปกติจะกาหนดค่า cellpadding เป็น 0 ซงึ่ พืน
ตารางเท่าก ับจานวนต ัวอ ักษรทีแ
่ สดงเท่านน
ั้
้
• ถ้ากาหนดให้มค
ี า่ มากจะมีพน
ื้ ทีเ่ ป็นทีว่ า่ งมากขึน
•
Web Technology for Education
22
CELLSPACING
้ าหนดขนาดเสน
้ ตาราง
• แอตทริบวิ ต์ CELLSPACING ใชก
• ปกติจะกาหนดค่า cellspacing เป็น 0
้ ตารางมากขึน
้
• ถ้ากาหนดให้มค
ี า่ มากจะมีขนาดเสน
Web Technology for Education
23
การใส่ ภาพลงในตาราง
• ให้บรรจุคาสง่ ั อ่านภาพ คือ
ื่ แฟ้มรูปภาพ”>
<IMG SRC = “ชอ
ลงในคาสง่ ั ของตาราง
• กรณีทต
ี่ อ
้ งการปร ับขนาดของรูปภาพให้มข
ี นาดเหมาะสมก ับตาราง ให้
้ าสง่ ั WIDTH=x% และ HEIGHT=y% ลงในคาสง่ ั <IMG>
ใชค
Web Technology for Education
24
การควบคุมการแสดงผล
เว็บเพจด้วย CSS (Cascading Style Sheets)
CSS ย่อมาจากคาว่า Cascading Style Sheets หรื อเรี ยกว่า Style
Sheets
CSS ถูกแนะนาและสนับสนุนโดย Microsoft internet explorer 3.0 และ
Netscape 4.0 เป็ นต้ นมา
วัตถุประสงค์ของการใช้ CSS เพื่อกาหนดการแสดงผลของสิง่ ต่างๆบน
เว็บเพจ เช่น ลักษณะตัวอักษร ขนาด สี พื ้นหลัง เป็ นต้ น
CSS สามารถสร้ างโดยใช้ โปรแกรม Text Editor ได้ เช่น NotePad และ
EditPlus เป็ นต้ น และสามารถทางานร่วมกับภาษา HTML เพื่อ
จัดการกับส่วนแสดงผลได้ ตลอดทังเอกสาร
้
HTML
Web Technology for Education
25
กฎการเขียน CSS
• การเขียน CSS ประกอบด้ วย 2 ส่วน คือ
– Selector คือ ส่วนที่อยูก่ ่อนเครื่ องหมายปี กกา
– Declaration คือ ส่วนที่อยูภ่ ายในเครื่ องหมายปี กกา
ประกอบด้ วย Property และ Value
selector { property: value; }
Web Technology for Education
26
กฎการเขียน CSS
• ตัวอย่างเช่น
Properties
Selector
Value
body { background-color: blue; }
Selector เทียบได้กบั Tag ในภาษา HTML นัน่ เอง
Web Technology for Education
27
กฎการเขียน CSS
body { background-color: blue; }
body {margin-left: "15%"; }
body {margin-right: "15%";}
body { background-color: blue;
margin-left: "15%";
margin-right: "15%“; }
Web Technology for Education
28
กฎการเขียน CSS
h1 { font-style: Italic; color: red; }
h2 { font-style: Italic; color: red; }
h1, h2 { font-style: Italic; color: red; }
Web Technology for Education
29
กฎการเขียน CSS
CSS มีคุณสมบัติการถ่ายทอด (Inheritance) เช่น
body {color: red; }
h2 { font-style: Italic;}
กาหนดที่ Selector body มีผลทาให้
ตัวอักษรทุกตัวในหน้ าเว็บเพจมีสแี ดง
รวมถึงตัวอักษรที่อยูร่ ะหว่างแท็ก <h2>
และ </h2> ด้ วย และแสดงเป็ นตัวเอียง
Web Technology for Education
30
CSS มีคุณสมบัติการถ่ายทอด
<body>
<h1>หัวข ้อที่ 1</h1>
<font> รำยละเอียด 1
<p> ย่อหน ้ำที่ 1</p>
</font>
<h2>หัวข ้อที่ 2</h2>
ข ้อควำมทั่วไป
</body>
Web Technology for Education
body
h1
font
h2
p
31
แทรก CSS ส่ วนต้นของเอกสาร HTML
.......
<style type = "text/css">
body { color: "red"; }
font { color: "green"; font-style: "Italic";}
body
</style>
h1
</head>
font
h2
<body>
<h1>หัวข ้อที่ 1</h1>
<font> รำยละเอียด 1
p
Web Technology for Education
32
รูปแบบการใช้ งาน CSS
1. การเรียกใช้ ไฟล์ ท่ เี ก็บคาสั่ง CSS (External Style Sheet)
2. การแทรกคาสั่ง CSS ไว้ ในคาสั่ง HTML (Internal Style)
3. การแทรกคาสั่ง CSS ไว้ ในแท็กภาษา HTML (Inline
Style)
Web Technology for Education
33
รูปแบบการใช้ งาน CSS
1. การเรียกใช้ ไฟล์ ท่ เี ก็บคาสั่ง CSS (External Style Sheet)
รูปแบบ
ื่ ไฟล์.css">
<link rel = "stylesheet" type="text/css" href = "ชอ
การใช้ งานแบบนี ้ต้ องมีไฟล์แยกเก็บ CSS ต่างหาก และทาการ
เรี ยกใช้ โดยใช้ คาสัง่ ข้ างต้ น ที่สว่ นหัวของเอกสาร HTML
Web Technology for Education
34
รูปแบบการใช้ งาน CSS
ตัวอย่ างที่ 1
1. สร้ างไฟล์ display.css (ส่วนควบคุมการแสดงผล)
2. สร้ างไฟล์ HTML (ส่วนเนื ้อหา)
ไฟล์ display.css
body {background-color: "#FFFFCC";}
font {font-style: Italic; font-size: 16pt; color: red;}
h1 {color: green; }
Web Technology for Education
35
ไฟล์ display.css
ตัวอย่ างที่ 1
body {background-color: "#FFFFCC";}
font {font-style: Italic; font-size: 16pt; color: red;}
h1 {color: green; }
ไฟล์ ex.html
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<link rel = "stylesheet" type="text/css" href = "display.css">
</HEAD>
<BODY>
<FONT>ข ้อควำมปกติ</FONT>
<H1>หัวข ้อที่ 1</H1>
<H2>หัวข ้อที่ 2</H2>
<H3>หัวข ้อที่ 3</H3>
</BODY>
</HTML>
Web Technology for Education
36
รูปแบบการใช้ งาน CSS
1. การเรียกใช้ ไฟล์ ท่ เี ก็บคาสั่ง CSS (External Style Sheet)
ข้ อดี
ลดการทางานในการปรับแต่งเอกสาร HTML กรณีที่ต้องใช้
การแสดงผลที่เหมือนกันในหลายๆหน้ า
แก้ ไขเพียงจุดเดียว คือ ไฟล์.css จึงทาให้ ประหยัดเวลา
Web Technology for Education
37
รูปแบบการใช้ งาน CSS
2. การแทรกคาสั่ง CSS ไว้ ในคาสั่ง HTML (Internal Style)
มักนิยมแทรก CSS ไว้ ก่อนแท็ก </HEAD>
รูปแบบ
<style type="text/css">
selector {property: value;}
…….
…….
</style>
Web Technology for Education
38
ตัวอย่ างที่ 2 จากตัวอย่างที่ 1 นาคาสัง่ ของ CSS ในไฟล์ display.css
แทรกลงไปในไฟล์ HTML ก่อนคาสัง่ </HEAD>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
body {background-color: "#FFFFCC";}
font {font-style: Italic; font-size: 16pt; color: red;}
h1 {color: green; }
</style>
</HEAD>
<BODY>
<FONT>ข ้อควำมปกติ</FONT>
……
Web Technology for Education
39
รูปแบบการใช้ งาน CSS
2. การแทรกคาสั่ง CSS ไว้ ในคาสั่ง HTML (Internal Style)
(ต่ อ)
การใช้ งานแบบนี ้เหมาะสาหรับการควบคุมการแสดงผลหน้ า
เว็บเพจเฉพาะหน้ านันๆ
้
แต่ไม่เหมาะกับการควบคุมการแสดงผล
หลายๆหน้ าเพราะต้ องเข้ าไปกาหนด style sheets ในทุกๆหน้ า และ
หากมีการแก้ ไข ต้ องเข้ าไปแก้ ไขในทุกๆหน้ า เช่นกัน
Web Technology for Education
40
รูปแบบการใช้ งาน CSS
3. การแทรกคาสั่ง CSS ไว้ ในแท็กภาษา HTML (Inline
Style)
รูปแบบ
<tag style = "property: value;">
tag คือ แท็กคาสัง่ ของภาษา HTML
Web Technology for Education
41
ตัวอย่ างที่ 3 การแทรกคาสัง่ CSS เป็ น Attribute หนึ่ง ในเอกสาร HTML
<HTML><HEAD><TITLE> New Document </TITLE>
</HEAD>
<BODY style = "background-color: #FFFFCC;">
<FONT style = "font-style: Italic; font-size: 16pt; color: red;">
ข ้อควำมปกติ</FONT>
<H1 style = "color: green;">หัวข ้อที่ 1</H1>
<H2>หัวข ้อที่ 2</H2>
<H3>หัวข ้อที่ 3</H3>
</BODY>
</HTML>
Web Technology for Education
42
การเขียน CSS เบือ้ งต้ น
• การกาหนดเกี่ยวกับพืน้ หลัง
• background-color
• background-image เช่น background-image: url(ชื่อไฟล์รูป);
• background-repeat
ค่า repeat
กาหนดให้ แสดงซ ้า
no-repeat กาหนดให้ ไม่ต้องแสดงซ ้า
repeat-x
กาหนดให้ แสดงซ ้าเฉพาะในแนวนอน
repeat-y
กาหนดให้ แสดงซ ้าเฉพาะในแนวตัง้
Web Technology for Education
43
การเขียน CSS เบือ้ งต้ น
• การกาหนดเกี่ยวกับพืน้ หลัง
• background-position
ค่า x y
กาหนดระยะห่างจากขอบซ้ าย x พิกเซล (หรื อ %)
และระยะห่างจากขอบบน y พิกเซล (หรื อ %)
top
แสดงภาพติดขอบด้ านบนและอยูต่ รงกลางหน้ าจอ
center
แสดงภาพอยูก่ ลางหน้ าจอ
bottom แสดงภาพติดขอบด้ านล่างและอยูต่ รงกลางหน้ าจอ
left
แสดงภาพติดขอบด้ านซ้ ายและอยูต่ รงกลางหน้ าจอ
right แสดงภาพติดขอบด้ านขวาและอยูต่ รงกลางหน้ าจอ
Web Technology for Education
44
การเขียน CSS เบือ้ งต้ น
การกาหนดเกี่ยวกับพืน้ หลัง
• background-attachment
ค่า scroll
ให้ ภาพเลื่อนตามการ scroll
fixed ไม่ให้ ภาพเลื่อนตามการ scroll
Web Technology for Education
45
ตัวอย่ างที่ 4 การกาหนดภาพพื้นหลังให้กบั หน้าเว็บเพจ
<style type = ”text/css”>
body {
background-image: url("../images/view.jpg");
background-repeat: "no-repeat";
background-position: "200 50";
background-attachment: "fixed";
}
</style>
Web Technology for Education
46
ตัวอย่ างที่ 4 การกาหนดภาพพื้นหลังให้กบั หน้าเว็บเพจ
50 pixels
200 pixels
Web Technology for Education
47
การเขียน CSS เบือ้ งต้ น
• การกาหนดระยะขอบและระยะห่ างจากขอบ
Margin-- ระยะขอบ
Padding -- ระยะห่างจากเส้น
(Border)
Height
Width
Margin
Border
Padding
กาหนดได้หลาย Selectors
เช่น หน้าเว็บ (body) เลเยอร์
(div) หรื อ blockquote
เป็ นต้น
Box Model
Web Technology for Education
48
การเขียน CSS เบือ้ งต้ น
• การกาหนดระยะขอบและระยะห่ างจากขอบ
•
•
•
•
•
•
height
ความสูง (ใช้ กบั เลเยอร์ (div))
weight
ความกว้ าง (ใช้ กบั เลเยอร์ (div))
margin-left
ระยะขอบด้ านซ้ าย
margin-right
ระยะขอบด้ านขวา
margin-top
ระยะขอบด้ านบน
margin-bottom ระยะขอบด้ านล่าง
Web Technology for Education
49
การเขียน CSS เบือ้ งต้ น
• การกาหนดระยะขอบและระยะห่ างจากขอบ
•
•
•
•
padding-right ระยะห่างจากด้ านขวา
padding-left
ระยะห่างจากด้ านซ้ าย
padding-top
ระยะห่างจากด้ านบน
padding-bottom ระยะห่างจากด้ านล่าง
Web Technology for Education
50
ตัวอย่ างที่ 5 การกาหนดภาพพื้นหลังให้กบั หน้าเว็บเพจ
<style type = ”text/css”>
body {margin-left: “10%”; margin-right: “10%”; }
div { height: "5%"; width: "80%";
margin-right: "50"; margin-left: "50";
padding-right: "25"; padding-left: "25";
padding-top: "25"; padding-bottom: "25";
}
</style>
Web Technology for Education
51
<style type = ”text/css”>
body {margin-left: “10%”; margin-right: “10%”; }
div { height: "5%"; width: "80%";
margin-right: "50"; margin-left: "50";
padding-right: "25"; padding-left: "25";
padding-top: "25"; padding-bottom: "25"; }
</style>
ตัวอย่ างที่ 5
Web Technology for Education
52
การเขียน CSS เบือ้ งต้ น
• การจัดการเส้ นขอบ (Border)
• border-width ความกว้ างของเส้ นขอบ
(thin, medium, thick, ระบุเป็ นตัวเลข)
• border-style แบบของเส้ นขอบ
(dashed, dotted, double, groove, inset, outset, solid, none)
• border-color สีของเส้ นขอบ โดยระบุชื่อสีเป็ นภาษาอังกฤษ หรื อรหัสสี
(เลขฐานสิบหก) เช่น red, yellow, #FF3366 เป็ นต้ น
Web Technology for Education
53
การเขียน CSS เบือ้ งต้ น
• การควบคุมตัวอักษร (Font)
•
•
•
•
•
font-family ชนิดของตัวอักษร เช่น Verdana, sans-serif, Tahoma,
font-style รูปแบบของตัวอักษร เช่น italic, normal
font-weight น ้าหนักของตัวอักษร เช่น bold, normal, lighter, bolder
font-size ขนาดของตัวอักษร เช่น 12pt, 120%
color
สีของตัวอักษร
Web Technology for Education
54
การเขียน CSS เบือ้ งต้ น
การจัดการเกี่ยวกับ Text
•
•
•
•
letter-spacing ระยะห่างระหว่างอักขระหรื อแต่ละตัวอักษร
line-height
ความสูงของบรรทัด
text-align
การจัดวางในแนวนอน (left, right, center)
text-decoration การตกแต่ง เช่น blink, line-through, none, overline,
underline
• text-indent
ระยะห่างจากขอบของบรรทัดแรก (First line indentation)
• text-transform
การเปลี่ยนรูปแบบ ค่าที่กาหนดได้ ได้ แก่
capitalize
เปลี่ยนอักษรตัวแรกของคาให้ เป็ นตัวพิมพ์ใหญ่
lowercase
เปลี่ยนอักษรทุกตัวให้ เป็ นตัวพิมพ์เล็ก
uppercase
เปลี่ยนอักษรทุกตัวให้ เป็ นตัวพิมพ์ใหญ่
Web Technology for Education
55
การเขียน CSS เบือ้ งต้ น
การจัดการเกี่ยวกับ Text
• vertical-align
• word-spacing
การจัดวางในแนวตัง้ (top, middle, bottom)
ระยะห่างระหว่างคา (เมื่อปรากฏช่องว่าง)
Web Technology for Education
56
การเขียน CSS เบือ้ งต้ น
• การจัดการเกี่ยวกับหัวข้ อย่ อย (List)
• list-style-type กาหนดรูปแบบของสัญลักษณ์หรื อลาดับเลข
disc
รูปวงกลมทึบ
circle
รูปวงกลมโปร่ง
square
รูปสี่เหลี่ยมทึบ
decimal
เลขอารบิค (1,2,3,…)
lower-roman เลขโรมัน ตัวพิมพ์เล็ก (i, ii, iii,….)
upper-roman เลขโรมัน ตัวพิมพ์ใหญ่ (I, II, III,…)
lower-alpha
อักษรภาษาอังกฤษตัวพิมพ์เล็ก (a,b,c,…)
upper-alpha
อักษรภาษาอังกฤษตัวพิมพ์ใหญ่ (A,B,C,…)
none
ไม่ต้องแสดงสัญลักษณ์หรื อหมายเลขหัวข้ อย่อย
Web Technology for Education
57
การเขียน CSS เบือ้ งต้ น
• การจัดการเกี่ยวกับหัวข้ อย่ อย (List)
• list-style-position
• list-style-image
กาหนดตาแหน่งของสัญลักษณ์หรื อลาดับเลข
หัวข้ อย่อย (inside, outside)
กาหนดรูปภาพที่ต้องการใช้ เป็ นสัญลักษณ์
หัวข้ อย่อย เช่น
li { list-style-image: url(“icon1.jpg”); }
Web Technology for Education
58
การเขียน CSS เบือ้ งต้ น
• การควบคุมการแสดงข้ อความเชื่อมโยง (Hypertext links)
a:link { color: “ชื่อสีหรื อรหัสสี”; }
a:visited { color: “ชื่อสีหรื อรหัสสี”; }
a:active { color: “ชื่อสีหรื อรหัสสี”; }
a:hover { color: “ชื่อสีหรื อรหัสสี”; }
เรี ยก :link, :visited, :active, และ :hover ว่า Pseudo-selectors เพื่อแยก
ความแตกต่างจาก Selectors ที่แสดงบน HTML
Web Technology for Education
59
การเขียน CSS เบือ้ งต้ น
• การควบคุมการแสดงข้ อความเชื่อมโยง (Hypertext links)
การกาหนดเกี่ยวกับเส้ นของข้ อความเชื่อมโยง ใช้ Declaration ดังนี ้
ไม่ต้องขีดเส้ นใต้ ข้อความเชื่อมโยง
text-decoration: “none”;
text-decoration: “underline”; ให้ ขีดเส้ นใต้ ข้อความเชื่อมโยง
text-decoration: “overline”;
ให้ ขีดเส้ นด้ านบนของข้ อความเชื่อมโยง
text-decoration: “underline overline”; ให้ ขีดเส้ นทังด้
้ านล่าง
และด้ านบนของข้ อความเชื่อมโยง
background: “ชื่อสีหรื อรหัสสี”;
Web Technology for Education
60
การเขียน CSS เบือ้ งต้ น
การสร้ าง Class
.ชื่อclass { selector: value; …….. }
การเรี ยกใช้ Class สามารถเรี ยกใช้ โดยการแทรกเป็ น Attribute ใน
แท็ก HTML
Web Technology for Education
61
ตัวอย่ างที่ 6 การสร้าง Class และการเรี ยกใช้
…
<style type = ”text/css”>
.m1 { font-size: "14pt"; color: "green"; }
.m2 { background-color: “yellow”; }
</style>
</head>
<body>
<h2 class = “m1”>XML คืออะไร</h2>
้ ้ำงเว็บได ้คือ าำาำ HTML
กำรเขียนเว็บไซต์ในปั จจุบน
ั นี้ โดยปกติแล ้วสงิ่ ทีจ
่ ะใชสร
ทีเ่ รำรู ้จักกันดีเท่ำนัน
้ แต่วำ่ วันนีโ้ ลกได ้มีกำรพัฒนำเทคโนโลยีใหม่ทใี่ ชส้ ำหรับกำร
เขียนเว็บ นั่นคือ XML ซงึ่ เป็ นสงิ่ ทีห
่ ลำยผลิตาัณฑ์ให ้กำรสนับสนุน <br />
<i class = “m1”>(http://www.thaixml.com/essentials/xml1.htm)</i>
<br /><br /> <CENTER><font class ="m2">
QQQQQQQQQQQQQQQ</font></CENTER>
</BODY>
…
Web Technology for Education
62
การเพิม่ Navigation Bar
ตัวอย่ างที่ 7 การสร้ างเมนูด้านข้ างของหน้ าเว็บเพจ ด้ วย CSS
…<body>
<ul>
<li> Home</li>
<li>My town</li>
<li>Links</li>
<li>Sitemap</li>
</ul>
<!-- Main content -->
<h2>XML คืออะไร</h2>
้
เนือ
่ งจำกทุกวันนีโ้ ลกของเรำมีกำรนำเทคโนโลยีสำรสนเทศเข ้ำมำใชในช
วี ต
ิ ประจำวันมำกขึน
้ และได ้
ั คือ เทคโนโลยีบนอินเทอร์เน็ ต ไม่วำ่ จะเป็ นกำรเข ้ำไป
เข ้ำมำเป็ นสว่ นหนึง่ ของกำรทำงำนทีเ่ ห็นได ้ชด
์ เี่ รียกว่ำ E-mail ซงึ่ กำลังเป็ นมำตรฐำนของ
เยีย
่ มชมเว็บไซต์ตำ่ งๆ หรือกำรสง่ จดหมำยอิเล็คโทรนิกสท
ื่ สำรสำหรับอนำคต ทำให ้ต ้องมีกำรคิดเพือ
กำรติดต่อสอ
่ พัฒนำให ้มีควำมก ้ำวหน ้ำมำกขึน
้ กำรเขียน
้ ้ำงเว็บได ้คือ าำาำ HTML ทีเ่ รำรู ้จักกันดีเท่ำนัน
เว็บไซต์ในปั จจุบันนี้ โดยปกติแล ้วสงิ่ ทีจ
่ ะใชสร
้ แต่วำ่
วันนีโ้ ลกได ้มีกำรพัฒนำเทคโนโลยีใหม่ทใี่ ชส้ ำหรับกำรเขียนเว็บ นั่นคือ XML ซงึ่ เป็ นสงิ่ ทีห
่ ลำย
ผลิตาัณฑ์ให ้กำรสนับสนุน <br /> <i>(http://www.thaixml.com/essentials/xml1.htm)</i>
Web Technology for Education
63
</body> …
ทาการย้ ายลิสต์รายการ (เมนู) ลงมาอยู่ด้านซ้ ายและย้ ายข้ อความที่เหลือทังหมดมา
้
ทางด้ านขวา CSS Property ที่ใช้ คือ 'padding-left' (สาหรับย้ ายข้ อความในส่วน body) และ
'position' 'left' และ 'top' (เพื่อย้ ายเมนู)
Web Technology for Education
64
ตัวอย่ างที่ 7 การสร้ างเมนูด้านข้ างของหน้ าเว็บเพจ ด้ วย CSS
Web Technology for Education
65
<style type = "text/css">
body { font-size: "14pt"; padding-left: "12em"; }
h2 {color: green; }
ul.navibar { /* กำหนด Class ชอื่ navibar เพือ
่ ควบคุมกำรแสดงผลของ element ul */
list-style-type: none;
padding: 0;
margin: 0;
position: absolute; /*ประกำศว่ำ element ul ถูกวำงไว ้แยกออกจำกข ้อควำม
ทีม
่ ำก่อนหรือหลังาำยในเอกสำร */
top: 2em;
left: 1em;
width: 9em;
}
Web Technology for Education
66
ื่ navibar */
ul.navibar li{
/* กำหนดกำรแสดงผลของ element li ใน Class ชอ
text-decoration: none;
background-color: "#FFCC99";
margin: 0.5em 0em;
padding: 0.3em;
border-left: 1em solid black ;border-right: 1em solid black ;
text-align: center;
}
ul.navibar li a{text-decoration: none;} /* กำหนดกำรแสดงผลของ Hypertext link */
a:hover{ color: "#FF3300"; background-color:"#FFFF33";
display: block; padding: 0em 0em; }
a:visited{color:"#660000";}
</style>
Web Technology for Education
67
การเรียกใช้ งาน
</head>
<body>
<ul class = “navibar”>
<li><a href = "index.html">Home</a></li>
<li><a href = "town.html">My town</a></li>
<li><a href = “links.html">Links</a></li>
<li><a href = “sitemap.html">Sitemap</a></li>
</ul>
………………..
Web Technology for Education
68
ตัวอย่ างที่ 8 การสร้ างเมนูด้านบนเป็ นแนวนอน ด้ วย CSS
Web Technology for Education
69
จากตัวอย่ างที่ 7 นาส่ วนของ CSS มาแก้ ไขดังนี ้
<style type = "text/css">
body { font-size: "14pt"; padding-left: "1em"; }
h2 {color: green; }
ul.navibar { /* กำหนด Class ชอื่ navibar เพือ
่ ควบคุมกำรแสดงผลของ element ul */
list-style-type: none;
width: 100%;
/* กำหนดควำมกว ้ำงของเมนู */
margin: 0.5; padding: 0.5; }
ul.navibar li { display: inline; } /* กำหนดให ้แสดงเมนูในแนวนอน */
ul.navibar li a{ text-decoration: none; text-decoration: none;
background-color: "#FFCC99";
padding: 2px 15px;
border-left: 1em solid black; border-right: 1em solid black; }
a:hover { color: "#FF3300"; background-color:"#FFFF33"; }
a:visited {color:"#660000"; }
</style>
Web Technology for Education
70