1 / 70

บทที่ 6 CSS Cascading Style Sheet

บทที่ 6 CSS Cascading Style Sheet . เกริ่น ย้อนกล่าวถึง HTML. การแสดงผลรายการแบบลำดับตัวเลข(orderer Lists). ใช้แสดงรายการที่เรียงลำดับ หรือจัดลำดับความสำคัญของหัวข้อ ใช้ตัวเลข หรือ ตัวอักษรเรียง ในการเรียงก็ได้ มีรูปแบบดังนี้

sydnee
Download Presentation

บทที่ 6 CSS Cascading Style Sheet

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. บทที่ 6 CSS Cascading Style Sheet

  2. เกริ่นย้อนกล่าวถึง HTML Web Technology & Basic Web

  3. การแสดงผลรายการแบบลำดับตัวเลข(orderer Lists) • ใช้แสดงรายการที่เรียงลำดับ หรือจัดลำดับความสำคัญของหัวข้อ • ใช้ตัวเลข หรือ ตัวอักษรเรียง ในการเรียงก็ได้ มีรูปแบบดังนี้ • TYPE เป็นการกำหนดว่าจะแสดงรายการโดยใช้ตัวเลข ตัวอักษร หรือตัวอักษรโรมันเป็นต้น <OL TYPE = number_type START = number..> <LI> Item number one <LI> Item number two <LI> Item number tree </OL>

  4. การแสดงผลแบบรายการ (LIST) • รูปแบบ <LIST TYPE> <ITEM> First Item in List <ITEM> Second Item in List <ITEM> Third Item in List </LIST TYPE>

  5. ตัวอย่าง <OL TYPE = a> <LI> Oranges </LI> <LI> Peaches </LI> <LI> Grapes </LI> </OL> ได้ผลลัพธ์คือ a. Oranges b. Peaches c. Grapes

  6. ตัวอย่าง <OL TYPE = I> <LI> Oranges </LI> <LI> Peaches </LI> <LI> Grapes </LI> </OL> ได้ผลลัพธ์คือ I. Oranges II. Peaches III. Grapes Web Technology for Education

  7. ตัวอย่าง <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

  8. การแสดงผลรายการแบบไม่มีลำดับ(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

  9. ตัวอย่าง 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

  10. Directory Lists • เป็นการแสดงผลข้อมูลเหมือนกับ <UL>,</UL> แต่จะถูกจำกัดด้วยตัวอักษรไม่เกิน 24 ตัว • มีรูปแบบดังนี้ <DIR> <LI> message </LI> <LI> massage </LI> <LI> message </LI> </DIR> Web Technology for Education

  11. Menu Lists • แสดงรายการต่างๆแบบไม่มีตัวเลข แต่มีหัวข้อเป็นสัญลักษณ์ (Bullet) แต่การแสดงผลข้อมูลจะกะทัดรัดกว่าการใช้ tag <UL> • มีรูปแบบดังนี้ <MENU> <LI> message <LI> massage <LI> message </MENU> Web Technology for Education

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

  13. การสร้างตาราง • Table ประกอบด้วยแถว (row) และคอลัมน์ (col) จุดตัดของแถว และคอลัมน์ เรียกว่า cell ซึ่งใช้บรรจุข้อมูล Column Row Web Technology for Education

  14. คำสั่งสร้างตาราง Web Technology for Education

  15. tag <TABLE> <TABLE> <TR> <TD>ข้อความ </TD> <TD>ข้อความ </TD> <TD>ข้อความ </TD> </TR> <TR> <TD>ข้อความ </TD> <TD>ข้อความ </TD> <TD>ข้อความ </TD> </TR> …….. </TABLE> Web Technology for Education

  16. การตีกรอบตาราง • คำสั่ง <TABLE>...</TABLE> เป็นการสร้างตารางที่ไม่มีเส้น • การกำหนดเส้นในตารางใช้ แอตทริบิวต์ BORDER กำหนดลงในคำสั่ง <TABLE> ดังนี้ • <TABLE BORDER= ความหนา> • ……. • </TABLE> Web Technology for Education

  17. ตัวอย่าง <HTML> <HEAD><TITLE> Table Demo </TITLE></HEAD> <BODY> <H1> ตาราง 2 x 2 พร้อมเส้นกรอบ </H1> <TABLE BORDER> <TR> <TD>เสรี</TD> <TD>ธวัชชัย</TD></TR> <TR> <TD>วิชัย</TD> <TD>ถมกนก</TD> </TR> </TABLE> </BODY> </HTML> Web Technology for Education

  18. การปรับขนาดความกว้างและความสูงของตารางการปรับขนาดความกว้างและความสูงของตาราง • เพิ่ม แอตทริบิวต์ WIDTH = x% ลงในคำสั่งเปิด ของ tag <TABLE> โดยที่ x แทนความกว้างของแถวของตารางที่จะแสดงบนจอภาพ • เพิ่ม แอตทริบิวต์ HEIGHT = x% ลงในคำสั่งเปิด ของ tag <TABLE> โดยที่ x แทนความสูงของแถวของตารางที่จะแสดงบนจอภาพ <TABLE WIDTH=x%> <TABLE HEIGHT=x%> Web Technology for Education

  19. การจัดตำแหน่งของข้อมูลใน cell • การจัดข้อมูลในเซลทำได้ 2 แบบคือ • แนวนอน ได้แก่ LEFT,RIGHT,CENTER • แนวตั้ง ได้แก่ TOP, BUTTON, MIDDLE • ใน tag <TR>เพิ่ม แอตทริบิวต์ • ALIGN= สำหรับแนวนอน • VALIGN= สำหรับแนวตั้ง • รูปแบบ <TR ALIGN = … VALIGN=…> <TD>…</TD> </TR> Web Technology for Education

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

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

  22. CELLPADDING • แอตทริบิวต์ CELLPADDING ใช้กำหนดพื้นที่การแสดงข้อมูล ภายในตาราง • ปกติจะกำหนดค่า cellpadding เป็น 0 ซึ่งพื้นที่ในการแสดงข้อมูลในตารางเท่ากับจำนวนตัวอักษรที่แสดงเท่านั้น • ถ้ากำหนดให้มีค่ามากจะมีพื้นที่เป็นที่ว่างมากขึ้น Web Technology for Education

  23. CELLSPACING • แอตทริบิวต์ CELLSPACING ใช้กำหนดขนาดเส้นตาราง • ปกติจะกำหนดค่า cellspacing เป็น 0 • ถ้ากำหนดให้มีค่ามากจะมีขนาดเส้นตารางมากขึ้น Web Technology for Education

  24. การใส่ภาพลงในตาราง • ให้บรรจุคำสั่งอ่านภาพ คือ ลงในคำสั่งของตาราง • กรณีที่ต้องการปรับขนาดของรูปภาพให้มีขนาดเหมาะสมกับตาราง ให้ใช้คำสั่ง WIDTH=x% และ HEIGHT=y% ลงในคำสั่ง <IMG> <IMG SRC = “ชื่อแฟ้มรูปภาพ”> Web Technology for Education

  25. การควบคุมการแสดงผลเว็บเพจด้วย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

  26. กฎการเขียน CSS • การเขียน CSS ประกอบด้วย 2 ส่วน คือ • Selector คือ ส่วนที่อยู่ก่อนเครื่องหมายปีกกา • Declarationคือ ส่วนที่อยู่ภายในเครื่องหมายปีกกา ประกอบด้วย Property และ Value selector { property: value; } Web Technology for Education

  27. กฎการเขียน CSS • ตัวอย่างเช่น Properties Value Selector body { background-color: blue; } • Selector เทียบได้กับ Tag ในภาษา HTML นั่นเอง Web Technology for Education

  28. กฎการเขียน 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

  29. กฎการเขียน CSS h1 { font-style: Italic; color: red; } h2 { font-style: Italic; color: red; } h1, h2 { font-style: Italic; color: red; } Web Technology for Education

  30. กฎการเขียน CSS CSS มีคุณสมบัติการถ่ายทอด (Inheritance) เช่น body {color: red; } h2 { font-style: Italic;} กำหนดที่ Selector bodyมีผลทำให้ตัวอักษรทุกตัวในหน้าเว็บเพจมีสีแดง รวมถึงตัวอักษรที่อยู่ระหว่างแท็ก<h2> และ </h2> ด้วย และแสดงเป็นตัวเอียง Web Technology for Education

  31. CSS มีคุณสมบัติการถ่ายทอด <body> <h1>หัวข้อที่ 1</h1> <font> รายละเอียด 1 <p> ย่อหน้าที่ 1</p> </font> <h2>หัวข้อที่ 2</h2> ข้อความทั่วไป </body> body h1 font h2 p Web Technology for Education

  32. แทรก CSS ส่วนต้นของเอกสาร HTML ....... <style type = "text/css"> body { color: "red"; } font { color: "green"; font-style: "Italic";} </style> </head> <body> <h1>หัวข้อที่ 1</h1> <font> รายละเอียด 1 ……………… body h1 font h2 p Web Technology for Education

  33. รูปแบบการใช้งาน CSS • การเรียกใช้ไฟล์ที่เก็บคำสั่ง CSS (External Style Sheet) • การแทรกคำสั่ง CSS ไว้ในคำสั่ง HTML (Internal Style) • การแทรกคำสั่ง CSS ไว้ในแท็กภาษา HTML (Inline Style) Web Technology for Education

  34. รูปแบบการใช้งาน CSS • การเรียกใช้ไฟล์ที่เก็บคำสั่ง CSS (External Style Sheet) รูปแบบ การใช้งานแบบนี้ต้องมีไฟล์แยกเก็บ CSS ต่างหาก และทำการเรียกใช้โดยใช้คำสั่งข้างต้น ที่ส่วนหัวของเอกสาร HTML <link rel="stylesheet" type="text/css" href="ชื่อไฟล์.css"> Web Technology for Education

  35. รูปแบบการใช้งาน 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

  36. ไฟล์ 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

  37. รูปแบบการใช้งาน CSS • การเรียกใช้ไฟล์ที่เก็บคำสั่ง CSS (External Style Sheet) • ข้อดี • ลดการทำงานในการปรับแต่งเอกสาร HTML กรณีที่ต้องใช้การแสดงผลที่เหมือนกันในหลายๆหน้า • แก้ไขเพียงจุดเดียว คือ ไฟล์.cssจึงทำให้ประหยัดเวลา Web Technology for Education

  38. รูปแบบการใช้งาน CSS • การแทรกคำสั่ง CSS ไว้ในคำสั่ง HTML (Internal Style) มักนิยมแทรก CSS ไว้ก่อนแท็ก</HEAD> รูปแบบ • <style type="text/css"> • selector {property: value;} • ……. • ……. • </style> Web Technology for Education

  39. ตัวอย่างที่ 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

  40. รูปแบบการใช้งาน CSS • การแทรกคำสั่ง CSS ไว้ในคำสั่ง HTML (Internal Style) (ต่อ) การใช้งานแบบนี้เหมาะสำหรับการควบคุมการแสดงผลหน้า เว็บเพจเฉพาะหน้านั้นๆ แต่ไม่เหมาะกับการควบคุมการแสดงผลหลายๆหน้าเพราะต้องเข้าไปกำหนด style sheets ในทุกๆหน้า และหากมีการแก้ไข ต้องเข้าไปแก้ไขในทุกๆหน้า เช่นกัน Web Technology for Education

  41. รูปแบบการใช้งาน CSS • การแทรกคำสั่ง CSS ไว้ในแท็กภาษา HTML (Inline Style) รูปแบบ tag คือ แท็กคำสั่งของภาษา HTML <tag style = "property: value;"> Web Technology for Education

  42. ตัวอย่างที่ 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

  43. การเขียน CSS เบื้องต้น • การกำหนดเกี่ยวกับพื้นหลัง • background-color • background-image เช่น background-image: url(ชื่อไฟล์รูป); • background-repeat • ค่าrepeat กำหนดให้แสดงซ้ำ • no-repeat กำหนดให้ไม่ต้องแสดงซ้ำ • repeat-x กำหนดให้แสดงซ้ำเฉพาะในแนวนอน • repeat-yกำหนดให้แสดงซ้ำเฉพาะในแนวตั้ง Web Technology for Education

  44. การเขียน CSS เบื้องต้น • การกำหนดเกี่ยวกับพื้นหลัง • background-position • ค่าx yกำหนดระยะห่างจากขอบซ้าย x พิกเซล (หรือ %) • และระยะห่างจากขอบบน y พิกเซล (หรือ %) • topแสดงภาพติดขอบด้านบนและอยู่ตรงกลางหน้าจอ • centerแสดงภาพอยู่กลางหน้าจอ • bottomแสดงภาพติดขอบด้านล่างและอยู่ตรงกลางหน้าจอ • leftแสดงภาพติดขอบด้านซ้ายและอยู่ตรงกลางหน้าจอ • rightแสดงภาพติดขอบด้านขวาและอยู่ตรงกลางหน้าจอ Web Technology for Education

  45. การเขียน CSS เบื้องต้น • การกำหนดเกี่ยวกับพื้นหลัง • background-attachment • ค่าscrollให้ภาพเลื่อนตามการ scroll • fixedไม่ให้ภาพเลื่อนตามการ scroll Web Technology for Education

  46. ตัวอย่างที่ 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

  47. ตัวอย่างที่ 4 การกำหนดภาพพื้นหลังให้กับหน้าเว็บเพจ 50 pixels 200 pixels Web Technology for Education

  48. การเขียน CSS เบื้องต้น • การกำหนดระยะขอบและระยะห่างจากขอบ Margin-- ระยะขอบ Padding-- ระยะห่างจากเส้น(Border) กำหนดได้หลาย Selectors เช่น หน้าเว็บ (body) เลเยอร์(div) หรือ blockquoteเป็นต้น Height Width Border Margin Padding Box Model Web Technology for Education

  49. การเขียน CSS เบื้องต้น • การกำหนดระยะขอบและระยะห่างจากขอบ • height ความสูง (ใช้กับเลเยอร์(div)) • weight ความกว้าง (ใช้กับเลเยอร์(div)) • margin-left ระยะขอบด้านซ้าย • margin-right ระยะขอบด้านขวา • margin-top ระยะขอบด้านบน • margin-bottom ระยะขอบด้านล่าง Web Technology for Education

  50. การเขียน CSS เบื้องต้น • การกำหนดระยะขอบและระยะห่างจากขอบ • padding-right ระยะห่างจากด้านขวา • padding-left ระยะห่างจากด้านซ้าย • padding-top ระยะห่างจากด้านบน • padding-bottom ระยะห่างจากด้านล่าง Web Technology for Education

More Related