Your SlideShare is downloading. ×
รายงาน กลุ่ม คอม ฟ้า
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

รายงาน กลุ่ม คอม ฟ้า

561
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
561
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. รายงาน เรื่อง CSS Table Design จัดทำาโดยน.ส. พิทยารัตน์ แก้วดับภัย เลขที่ ١٤ ชั้นมัธยมศึกษาปีที่ 4 เสนอ อ. ฐิติพร ไหวดี โรงเรียนทองสวัสดิ์วิทยาคารสำานักงานเขตพื้นที่ประศึกษา เขต 2
  • 2. คำานำา รายงานเล่ม นี้จัดทำา ขึ้นเพื่ อเป็น สื่อการเรียนการสอนให้แก่ พี่ๆ น้อง ๆ ทุกคนมีความรู้ในเรื่องเกี่ยวกั บ การสอนวิ ธี ใ ช่ CSS Table Design มี เ นื้ อ หาบอกเล่ า ถึ ง วิ ธี ก ารใช่ ง านหรื อ การเตี ย มตั ว ก่ อ นเริ่ ม เรี ย นCSS สุดท้ายนี้รายงานเล่มนี้หวังว่าคงจะเป็นประโยชน์กั บ เพื่ อ นๆ พี่ ๆ น้ อ งๆ ไม่ ม ากก็ น้ อ ยหากผิ ด พลาดประการใดต้องขออภัยมา ณ ที่นี้ด้วย
  • 3. สารบัญเรือง ่หน้าIntroductionSyntaxUnitColorInsert stylusesSelector: HTML tag, class, idContextual selectorsFontTextBackgroundBorderMargin, paddingLinkTableClassificationPositioning
  • 4. ImageFormScroll barMousecursorMedia typesLayout (Table)Layout (DIV)Pseudo-classesPseudo-elementบรรณานุกรมhttp://www.enjoyday.net/webtutorial/css/css_chapter02.htmlCSS คืออะไร
  • 5. CSS ย่อมาจาก Cascading Style Sheets เป็นภาษาทีมี ่รูปแบบการเขียน Syntax ที่เฉพาะ และถูกกำาหนดมาตรฐานโดยW3C (World Wide Web Consortium) เช่นเดียวกับ HTML และXHTML ใช้สำาหรับตกแต่งเอกสาร HTML/ XHTML ให้มีหน้าตาสีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการด้วยการกำาหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML เช่น<body>, <p>, <h1> เป็นต้นประโยชน์ของ CSS1. การใช้ CSS ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำาให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำาให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำาได้งายและรวดเร็ว ่2. เมื่อ Code ภายในเอกสาร HTML ลดลง ทำาให้ขนาดไฟล์เล็กลงจึงดาวน์โหลดได้เร็ว3. สามารถกำาหนดรูปแบบการแสดงผลจากคำาสั่ง Style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำาให้เวลาแก้ไขหรือปรับปรุงทำาได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML tagต่างๆ ทั่วทั้งเอกสาร4. สามารถควบคุมการแสดงผลให้เหมือนกัน หรือใกล้เคียงกัน ได้ในหลาย Web Browser5. สามารถกำาหนดการแสดงผลในรูปแบบที่เหมาะกับสื่อชนิดต่างๆไม่วาจะเป็นการแสดงผลบนหน้าจอ, บนกระดาษเมื่อสั่งพิมพ์, บน ่มือถือ หรือบน PDA โดยที่เป็นเนื้อหาเดียวกัน6. ทำาให้เป็นเว็บไซต์ที่มมาตรฐาน ปัจจุบันการใช้ Attribute ของ ีHTML ตกแต่งเอกสารเว็บเพจ นั้นล้าสมัยแล้ว W3C แนะนำาให้เราใช้ CSS แทน ดังนั้นหากเราใช้ CSS กับเอกสาร HTML ของเรา ก็จะทำาให้เข้ากับเว็บเบราเซอร์ในอนาคตได้ดี ตัวอย่างกรณีที่จัดรูปแบบการแสดงผลด้วยภาษา HTML<Html><body>
  • 6. <h1><font color="red" face="Arial">วิธีดูแลรักษาสุขภาพ</font></h1><p><font color="black" face="Arial"><b>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำาลังกาย และพักผ่อนให้เพียงพอ</b></font></p><h1><font color="red" face="Arial">วิธีกินผลไม้ที่ถูกต้อง</font></h1><p><font color="black" face="Arial"><b>ให้กินผลไม้แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ เพื่อให้ร่างกายจัดเตรียมการย่อยได้งาย ไม่สับสน นอกจากนี้ยังไม่ควรกิน ่ผลไม้ทันทีหลังอาหารถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20นาที</b></font></p></body></html>ตัวอย่างเมื่อเปลี่ยนมาใช้คำาสัง Style sheet จัดรูปแบบการแสดง ่ผลแทนการใช้ code ภาษา HTML ทำาให้ code ภายในเอกสารอ่านเข้าใจง่าย และแก้ไขได้ง่ายขึ้น ^^<Html><head><style type="text/css">h1 {color: red; font-family: Arial ;}p {color: black; font-family: Arial; font-weight: bold }</style></head><body><h1>วิธีดูแลรักษาสุขภาพ</h1><p>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำาลังกาย และพักผ่อนให้เพียงพอ</p><h1>วิธีกินผลไม้ที่ถูกต้อง</h1><p>ให้กินผลไม้แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียว
  • 7. ทั้งมื้อ เพือให้ร่างกายจัดเตรียมการย่อยได้ง่าย ไม่สับสน นอกจาก ่นี้ยังไม่ควรกินผลไม้ทันทีหลังอาหารถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</p> </body></html>โครงสร้างคำาสั่ง คำาสั่งของ 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ตัวอย่างคำาสัง CSS ่กำาหนดให้ข้อความที่อยู่ใน Tag <p> เป็นสีดำา และวางอยู่กึ่งกลาง/* selector ที่เป็น HTML Tag */p {color:#000000;text-align: center}กำาหนดให้ข้อความที่ Class name topic เป็นสีแดง ชนิดอักษรเป็นArial ตัวหนา และจัดวางอยู่กึ่งกลาง /* selector ที่เป็น Classname */.topic {color: red; font-family: Arial; font-weight: bold;text-align: center}กรณีที่ Selector มีคา property เหมือนกัน สามารถเขียนรวมกัน ่ได้ โดยใช้เครื่องหมาย "," คั่นระหว่าง selectorกำาหนดให้ข้อความใน Tag <h1>, <h2> และ <h3> เป็นสีแดง ชนิดตัวอักษรเป็นsans-serif H1, h2, h3 {color: red; font-family: sans-serif}สำาหรับเรื่อง Property และ value จะได้ศึกษาอย่างละเอียดในหัวข้อต่อๆ ไป
  • 8. Comment ใน Style Sheet Comment จะใช้เครื่องหมาย "/*"เป็นการเปิด และ "*/" เป็นการปิด เช่น /* นี่คือ commentกำาหนดสีตวอักษรเป็นสีดำา ขนาด14PX */ body {color: ั#000000; font-size: 14px} หน่วยที่ใช้วัดค่าต่างๆ ใน StyleSheetจาก Syntax ของคำาสั่ง CSS ค่า value ของ property บางค่าจะต้องมีการระบุหน่วยด้วย หน่วยทีใช้งานใน CSS มีอะไรบ้าง มาดู ่กันค่ะ หน่วยแบบ 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% หน่วยแบบ 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สี (Color)
  • 9. การกำาหนดสีให้ตัวอักษร พื้นหลัง เส้นขอบ หรือส่วนอื่นๆ ของวัตถุสามารถกำาหนดได้หลายแบบ1. กำาหนดโดยใช้ชื่อสี แต่การระบุชื่อสีแบบนี้ใช้สีได้จำานวนจำากัดได้แก่ aqua, black, blue, fuchsia (แดงอมม่วง), gray, green,lime, maroon (นำ้าตาลแดง), navy, olive, purple, red, silver,teal (เขียวขนเป็ด), white, และ yellow2. กำาหนดเป็นค่าสีแบบ 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%) รหัสค่าสี รหัสค่าสีชื่อสี ฐาน16 RGB การแสดงผลสี ฐาน16 แบบย่อ #0000Black #000 rgb(0,0,0) 00 #FF00Red #F00 rgb(0,0,0) 00 #00FFGreen #F00 rgb(0,255,0) 00 #0000Blue #00F rgb(0,0,255) FF #FFFF0Yellow #FF0 rgb(255,255,0) 0 #00FFAqua #FF0 rgb(0,255,255) FF #FF00Fuchsia #FF0 rgb(255,0,255) FF #C0C0 rgb(192,192,19Silver C0 2)White #FFFFF #FFF rgb(255,255,25
  • 10. F 5)วิธีใช้งาน Style Sheet 1. Inline Styles วิธีการนี้ควรใช้ในกรณีที่ต้องการกำาหนด style ให้กับ element ของ HTML เพียงอันเดียวเป็นการ เฉพาะ โดยการแทรกคำาสั่ง style sheet ใน HTML Tag อยู่ ในคำาสั่ง style="" ดังนี้ <Tag style="property: value ;">Example<Html><body><h1 style="color: red; font-family: Arial">วิธีดูแลรักษาสุขภาพ</h1><p style="color: black; font-family: Arial; font-weight:bold">รับประทานอาหารที่มีประโยชน์ หมั่นออกกำาลังกาย และพักผ่อนให้เพียงพอ</p></body></html>เราควรหลีกเลี่ยงการเขียน style=”" ฝังลงใน HTML Tag เพราะมันทำาให้อ่านยาก และนำาไปใช้ต่อไม่ได้ และเป็นการยากที่จะแก้ไข2. Internal Style Sheetวิธีการนี้ควรใช้ในกรณีที่มีเพียง HTML ไฟล์เดียวที่ใช้ style นี้ เมื่อประกาศคำาสั่ง Style Sheet เพื่อกำาหนดคุณสมบัติ ให้กับ HTMLTag ใดๆ แล้ว จะมีผลกับเอกสาร HTML ทั้งหน้า นิยมใส่ส่วนของคำาสั่ง Style Sheet ไว้ระหว่าง <head>...</head> สำาหรับ WebBrowser รุ่นเก่าที่ไม่สนับสนุนคำาสั่ง Style Sheet หรือ DisableStyle Sheet ไว้นั้น ให้ใส่ Comment ของ ภาษา HTML ไว้ด้วยเพื่อให้เว็บเบราเซอร์นั้นทราบว่าไม่ใช่คำาสั่งภาษา HTMLคำาสั่งที่ใช้เริ่มต้น และจบ Style Sheet มีโครงสร้างดังนี้
  • 11. <style type="text/css"><!--selector {property1: value1; property2: value2}....--></style>Example<Html><Body><Head><style type="text/css"><! -- h1 {color: red; font-family:Arial}P {color: black; font-family: Arial; font-weight: bold} --></style></head><body><h1>วิธีดูแลรักษาสุขภาพ</h1><p>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำาลังกาย และพักผ่อนให้เพียงพอ</p><h1>วิธีกินผลไม้ที่ถูกต้อง</h1><p>ให้กินผลไม้แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ เพือให้ร่างกายจัดเตรียมการย่อยได้ง่าย ไม่สับสน นอกจาก ่นี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</p></body></html>3. External Style Sheetวิธีการนี้เหมาะกับกรณีที่มีเพียง 1 style แล้วต้องการนำาไปใช้กับเอกสาร HTML หลายๆ ไฟล์ โดยนำาเอาคำาสั่ง Style Sheet ที่อยู่ใน <style type="text/css"> ... </style> มาบันทึกเป็นไฟล์ใหม่ นามสกุล .css จากนั้นจึงทำาการผนวกไฟล์ของ Style Sheetนี้ลงไปในเอกสาร HTML ทุกไฟล์ที่ต้องการใช้งาน Style Sheetชุดนี้ ไว้ในส่วน <head>...</head>โดยใช้คำาสั่ง <link rel="style sheet" type="text/css"href="URL ไฟล์.css">
  • 12. ตัวอย่างนี้จะสร้าง Style Sheet เก็บไว้ในไฟล์หนึ่ง แล้วให้ไฟล์เอกสาร HTML หลายๆ หน้ามาเรียกใช้Exampleในไฟล์ Mystyle.css ให้เขียน code ดังนี้h1 {color: red; font-family: Arial}p {color: black; font-family: Arial; font-weight: bold}ในไฟล์ HTML ex_css_chapter05_3.html เรียกใช้ stylesheet จากภายนอก<Html><Head><link rel="style sheet" type="text/css"href="mystyle.css"></head><Body> <h1>วิธีดูแลรักษาสุขภาพ</h1> <p>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำาลังกาย และพักผ่อนให้เพียงพอ</p></body></html>ในไฟล์ HTML ex_css_chapter05_4.html เรียกใช้ stylesheet จากภายนอก<Html><Head><link rel="style sheet" type="text/css"href="mystyle.css"></head><Body> <h1>วิธีกินผลไม้ที่ถูกต้อง</h1> <p>ให้กินผลไม้แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ เพื่อให้ร่างกายจัดเตรียมการย่อยได้งาย ไม่สบสน ่ ั
  • 13. นอกจากนี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</p></body></html>การที่เราใช้งาน CSS โดยเรียกใช้จากภายนอก จะทำาให้ไฟล์เวบเพจของเรามีขนาดเล็ก และการแก้ไขคำาสั่ง style sheet เพียงที่เดียว จะมีผลกับเอกสารทุกหน้าได้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 2. กรณีที่มีการเขียน style ซำ้า selector เดิม อันที่อยู่ดานล่าง จะ ้ ถูกทำาเป็นลำาดับสุดท้าย ตัวอย่าง ไฟล์ mystyle.css p{ color: black } p{ color: blue } เมื่อเราเรียกใช้ <p> ใน HTML เช่น <p>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำาลังกาย และ พักผ่อนให้เพียงพอ</p> จะได้ตวอักษรใน Tag <p> เป็นสีนำ้าเงิน แต่หากเรากำาหนด! ั Important ไว้ใน value เช่น p {color: black! important} p {color: blue} เมื่อเขียนแบบนี้ ใน Tag <p> จะได้ตวอักษรั สีดำาการเขียนคำาสั่ง Style Sheet Selector ที่เป็น HTML TagExample<html>
  • 14. <body><head><style type="text/css"><!-- h1{color:red; font-family:Arial } p{color:black; font-family:Arial }--></style></head><body><h1>วิธีดูแลรักษาสุขภาพ</h1><p>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำาลังกาย และพักผ่อนให้เพียงพอ</p><h1>วิธีกินผลไม้ที่ถูกต้อง</h1><p>ให้กินผลไม้แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ เพือให้ร่างกายจัดเตรียมการย่อยได้ง่าย ไม่สับสน นอกจาก ่นี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</p></body></html>ตัวอย่างนีเห็นกันมาหลายรอบแล้วนะคะ เป็นการกำาหนด style ให้ ้กับ HTML Tag <h1> และ <p> หมายความว่าข้อความภายใน<h1> ทุกอันในหน้าเว็บเพจนี้ให้เป็นสีแดง และข้อความใน <p>ทุกอันให้เป็นสีดำา มาดู selector แบบอื่นๆ กันบ้าง Selector ที่เป็นClass attribute เป็นการประกาศคำาสั่ง Style Sheet เพื่อกำาหนดคุณสมบัตแบบเฉพาะเจาะจง ให้กับ HTML element ผ่าน class ิattribute โดยเราสามารถตั้งชื่อ class ได้เอง class ใช้เมื่อต้องการใช้แสดงผลรูปแบบนั้นซำ้าหลายๆ ครั้ง หรือต้องการใช้กับelement หลายๆ อัน การประกาศใช้่้ เครื่องหมาย "." นำาหน้าชือ ่classExample<html><head><style type="text/css">
  • 15. <!--.topic {color:red; font-family:Arial; font-weight:bold;text-align:center } .content {color:black; font-family:Arial; } --></style></head><!-- การเรียกใช้งาน --><body> <div class="topic">บทความ</div> <p class="topic">วิธีดูแลรักษาสุขภาพ</p> <p class="content">รับประทานอาหารที่มีประโยชน์ หมั่นออกกำาลังกาย และพักผ่อนให้เพียงพอ</p> <p class="topic">วิธีกินผลไม้ที่ถูกต้อง</p><p class="content">ให้กินผลไม้แค่ทีละอย่าง เช่น จะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ เพื่อให้ร่างกายจัดเตรียมการย่อยได้ง่าย ไม่สบสน นอกจากนี้ยังไม่ควรกินผลไม้ ัทันทีหลังอาหาร ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20นาที</p><p>หันมาใส่ใจสุขภาพกันเถอะค่ะ</p></body></html>จากตัวอย่างสังเกตได้วา class topic ถูกเรียกใช้หลายครั้งใน ่<p> และ ถูกใช้่้ ในหลาย element ได้ คือ <p> และ <div> แต่ถ้าต้องการกำาหนดให้ class topic ใช้งานเฉพาะกับ <p> เท่านั้นทำาได้โดยใส่ "p." นำาหน้าชื่อ class จะมีผลทำาให้ข้อความใน <divclass="topic">บทความ</div> ไม่สามารถแสดงผลตามรูปแบบที่กำาหนดใน class topic ได้ p.topic{color:red; font-family:Arial; font-weight:bold; text-align:center } กรณีที่ต้องการให้แสดงผลตามรูปแบบที่กำาหนดใน 2 class ก็สามารถทำาได้Example<html><head><style type="text/css">
  • 16. p.center {text-align:center} p.bold{ font-weight:bold}</style></head><body> <p class="center bold">ข้อความในพารากราฟนี้จะจัดวางกึ่งกลาง และเป็นตัวหนา</p></body></html>Selector ที่เป็น ID attributeเป็นการประกาศคำาสั่ง Style Sheet เพื่อกำาหนดคุณสมบัติแบบเฉพาะเจาะจง ให้กับ HTML element ผ่าน ID attribute เหมือนกับ Class แต่ตางกันที่ ID จะใช้กับ element ที่มีเพียงอันเดียวใน ่เอกสาร HTML การประกาศใช้ # นำาหน้า IDExample<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>เนื้อหา ข้อความในนี้จัดวางกึ่งกลาง</p> <p>เนื้อหา ข้อความในนี้จัดวางกึ่งกลาง</p></body></html>
  • 17. อาจจะยังไม่เข้าใจตอนนี้ ไว้เห็นตัวอย่างมากๆ เข้า จะค่อยๆ เข้าใจเองค่ะ แล้วจะรู้ได้อย่างไรว่าค่า property และ value เช่น text-align: center, font-weight:bold มีอะไรบ้าง อันนี้ศึกษาได้จากChapter ต่อๆ ไป Contextual selectors การประกาศ selectorซ้อนกัน โดยเคาะ spacebar ทำาให้สามารถสืบทอดคุณสมบัติเดิมและเพิ่มคุณสมบัติที่แตกต่างได้ ดูตวอย่างเพื่อให้เข้าใจมากขึ้นค่ะ ัExample<html><head><style type="text/css">h1 { color: blue; background-color:#FFFFCC }h1 em { color: red }h1 u { color:green}</style></head><body> <h1>วิธีรักษาสุขภาพ</h1><h1>วิธีลดนำ้าหนัก</h1><h1><em>วิธีรักษาสุขภาพ</em></h1><h1><u>วิธีรักษาสุขภาพ</u></h1></body></html>Outputข้อความใน <h1> จะเป็นสีนำ้าเงิน แต่ถ้ามีการกำาหนดว่าเป็นตัวเอียงแล้ว ข้อความใน <h1> จะเป็นสีแดง หรือระบุวาขีดเส้นใต้แล้ว ่จะได้เป็นสีเขียว โดยที่รูปแบบพื้นหลังของ <h1> ยังคงอยู่
  • 18. วิธีรักษาสุขภาพ วิธีลดนำ้าหนัก วิธีรักษาสุขภาพ วิธีรักษาสุขภาพอีกตัวอย่างหนึ่ง เพื่อแสดงให้เห็นประโยชน์ของการใช้Contextual selectorsExample<html><head><style type="text/css">/*ให้ img ทัวไป ขอบสีเทา หนา2*/ ่img {border:solid;border-width:2px;border-color:#999999;}/*ให้ class borderimage มีขอบสีแดง หนา5 แต่ไม่ได้กำาหนดHTML tag เฉพาะ*/.borderimage {border:solid;border-width:5px;border-color:red;}/*ให้ เฉพาะ tag <img> class imgspecial_box มีขอบสีแดงหนา5*/#imgspecial_box img {border:solid; border-width:5px;border-color:red;}</style></head><body><img src="../images/star_icons.gif" /><img src="../images/star_icons.gif" /><img src="../images/star_icons.gif" /><br><br>แบบนี้ไม่ดี ต้องมาระบุ Class borderimage ให้แต่ละรูป<br /><img src="../images/star_icons.gif"
  • 19. class="borderimage" /><img src="../images/star_icons.gif"class="borderimage" /><img src="../images/star_icons.gif"class="borderimage" /><br><br>แบบนี้ดี img ที่อยู่ในส่วน div class imgspecial_box จะเป็นขอบแดง หนา5 ให้ทั้งหมด ไม่ต้องมากำาหนดทีละรูป<div id="imgspecial_box"><img src="../images/star_icons.gif" /><img src="../images/star_icons.gif" /><img src="../images/star_icons.gif" /></div></body></html>Outputแบบนี้ไม่ดี ต้องมาระบุ class border image ให้แต่ละรูปแบบนี้ดี img ที่อยู่ในส่วน div class imgspecial_box จะเป็นขอบแดง หนา5 ให้ทั้งหมด ไม่ต้องมากำาหนดทีละรูป มาดูอีกตัวอย่างที่ไม่ดี คล้ายกับตัวอย่างข้างบน เป็นตัวอย่างทีใช้ CSS ่มากเกินไปExample<html><head><title>ex_css_chapter07_3</title><style type="text/css">a.boldlink { color: blue; font-weight: bold; }</style></head>
  • 20. <body><ahref="http://www.enjoyday.net/webtutorial/html/index.html" class="bold link">HTML</a><br /><ahref="http://www.enjoyday.net/webtutorial/css/index.html" class="bold link">CSS</a><br<a href="http://www.enjoyday.net/webtutorial/xhtml/index.html" class="bold link">XHTML</a><br /><ahref="http://www.enjoyday.net/webtutorial/javascript/index.html" class="bold link">JavaScript</a></body></html>แก้ไขใหม่เขียนแบบ Contextual selector’s จะดีกว่าค่ะ<html><head><title>ex_css_chapter07_3</title><style type="text/css">#boldlink_box a { color: blue; font-weight: bold; }</style></head><Body><div id="boldlink_box"><ahref="http://www.enjoyday.net/webtutorial/html/index.html">HTML</a><br /><ahref="http://www.enjoyday.net/webtutorial/css/index.html">CSS</a><br />
  • 21. <a href="http://www.enjoyday.net/webtutorial/xhtml/index.html">XHTML</a><br /><ahref="http://www.enjoyday.net/webtutorial/javascript/index.html">JavaScript</a> </div></body></html>Output HTML CSS XHTML JavaScriptFont คือ การกำาหนดลักษณะให้ตวอักษร ใน HTML เราจะใช้ tag ั<font face="ชนิดตัวอักษร" size="number"color="สี">ข้อความ</font> น่าจะพอจำากันได้อยู่ แต่ในเอกสารHTML/XHTML แบบ strict จะถือว่า tag <font> เป็น tag ที่ล้าสมัยแล้ว ไม่สามารถนำามาใช้งานได้ ให้เราใช้ CSS แทนค่ะ เราก็สามารถใช้ CSS กำาหนดลักษณะให้ตวอักษรได้ โดยกำาหนดรูปแบบ ัfont ผ่าน Property ต่างๆ ให้กับ HTML element เช่น<p>,<div>,<span>,<h1> และอื่นๆProperty Description Valuesfont-family ใช้กำาหนดชนิด font ที่ต้องการจะ เช่น Arial, ให้แสดงผล โดยที่ font นั้นจะต้อง Helvetica, มีอยู่ในเครื่องของผู้ใช้งานด้วย sans-seriffont-size ใช้กำาหนดขนาดของตัวอักษร ที่จะ xx-small ให้แสดงผล /td> x-small small medium large x-large xx-large smaller larger 18px
  • 22. 70% 150%font-style ใช้กำาหนดรูปแบบของตัวอักษรใน normal ลักษณะต่างๆ italic oblique เอียง 45 องศาfont-variant ใช้แปลงตัวอักษรที่เป็นตัวพิมพ์เล็ก normal ให้เป็นพิมพ์ใหญ่ Small-Caps โดยที่ขนาดตัวอักษรยังคงเท่าตัว พิมพ์เล็กfont-weight ใช้กำาหนดความหนาของตัวอักษร normal bold bolder lighter 100 200 300 400 500 600color ใช้กำาหนดสีให้ตัวอักษร red #000099font เราสามารถกำาหนด property ให้ font-style กับ font ได้ในคำาสั่งประกาศเดียว font- variant font- weight font-size font-familyExample<p style="font-family: AngsanaUPC; font-size:16pt;color: green">CSS ย่อมาจาก Cascading Style Sheet เป็นภาษาทีมีรูปแบบ ่การเขียน Syntax ที่เฉพาะ และถูกกำาหนดมาตรฐานโดย W3C
  • 23. (World Wide Web Consortium) เช่นเดียวกับ HTML และ XHTML ใช้สำาหรับตกแต่งเอกสาร HTML/ XHTM ให้มีหน้าตา สีสันตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างทีเราต้องการ ด้วย ่การกำาหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML </p>OutputCSS ย่อมาจาก Cascading Style Sheet เป็นภาษาทีมีรูป ่แบบการเขียน Syntax ที่เฉพาะ และถูกกำาหนดมาตรฐานโดยW3C (World Wide Web Consortium) เช่นเดียวกับ HTML และXHTML ใช้สำาหรับตกแต่งเอกสาร HTML/ XHTM ให้มีหน้าตาสีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการด้วยการกำาหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTMLExample<p style="font-weight: bold">Love me Love mydog</p><p style="font-family: sans-serif, Arial; font-size:16px;font-style: normal; font-variant: small-caps; font-weight:bold; color:#FF0033">Love me Love my dog</p><! -- เขียนอย่างย่อได้เป็น --><p style="font: normal small-caps bold 16px sans-serif,Arial; color:#FF0033">Love me Love my dog</p>OutputLove me Love my dogLove me Love my dogLove me Love my dogFormเรื่องของ CSS ที่เกี่ยวกับ Form มี 2 ส่วนที่อยากจะพูดถึงค่ะ ส่วนแรก คือ การตกแต่ง Form Elements ด้วย style sheet และส่วนที่สอง คือ การทำา Form โดยไม่ใช้ Table หรือเรียกว่า Table lessForm Form Elements เราสามารถตกแต่ง ส่วนประกอบของ
  • 24. Form ได้แก่ input box, text area, button เป็นต้น ให้มสีสันที่ ีสวยงามได้ ไปดูตวอย่างกันค่ะ ัExample - Text box<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/bg.png);border: 1px solid #999999;}.textbox_imgside {font-family: Tahoma, "ms sansSerif";font-size:12px;color:#0033CC;background-image: url(../images/mail. if);background-repeat:no-repeat;background-position:left;border: 1pxsolid #3366CC;padding-left:16px;}</style></head><body><input type="text" size="30" value="enjoyday.net" /><br><br><input type="text" size="30" class="textbox gray"value="enjoyday.net" /><br><br><input type="text" size="30" class="textbox yellow"value="enjoyday.net" /><br><br>
  • 25. <input type="text" size="30" class="textbox image"value="enjoyday.net" /><br><br><input type="text" size="30" class="textbox_imgside"value="admin@enjoyday.net" /></body></html>Outputการตกแต่ง Scroll bar ด้วย CSS จะพูดถึงในบทที่ 20Example - Text area<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:1pxsolid #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
  • 26. solid #add8e6;font-size:12px}.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><text area rows="4" cols="20" class="textarea1">ข้อความของคุณค่ะ....</text area><text area rows="4" cols="20" class="textarea2">ข้อความของคุณค่ะ....</text area><br /><text area rows="4" cols="20" class="textarea3">ข้อความของคุณค่ะ...
  • 27. .</text area><text area rows="4" cols="20" class="textarea4">ข้อความของคุณค่ะ....</textarea></body></html>OutputExample - Textarea<html><head><style type="text/css">.textarea_a {width:300px; scrollbar-arrow-color:#000;scrollbar-face-color:#fff;scrollbar-highlight-color:#fff;scrollbar-3dlight-color:#fff;scrollbar-track-color:#fff;scrollbar-shadow-color:#fff;scrollbar-darkshadow-color:#fff;color:#000;border:1px solid #000;font-size:12px}width:300px; .textarea_b {width:300px; scrollbar-arrow-color:#000;scrollbar-face-color:#fff;scrollbar-highlight-color:#fff;scrollbar-3dlight-color:#fff;scrollbar-track-color:#fff;scrollbar-shadow-color:#fff;scrollbar-darkshadow-color:#fff;color:#000;border-width:0;font-size:12px}.textarea_c {scrollbar-arrow-color:#ff6699;scrollbar-face-color:#fff;scrollbar-highlight-
  • 28. color:#fff;scrollbar-3dlight-color:#fff;scrollbar-track-color:#fff;scrollbar-shadow-color:#fff;scrollbar-darkshadow-color:#fff;color:#ff6699;border-width:0;font-size:12px}</head><body><div style="border:1px solid #000;background:#add8e6; padding:5px; width:310px"><textarea rows="4" class="textarea_a">ข้อความของคุณค่ะ....</text area></div><br /><div style="border:1px solid#000;background:#fff;padding:4px; width:320px"><div style="border:1px solid #000;margin-bottom:4px"><div style="border-width:1px;border-style:solid;border-color:#fff #98cee0 #98cee0#fff;background:#add8e6;color:#000;text-align:center;font-size:12px;padding:4px">หัวข้อ</div></div><text area rows="5" class="textarea_b">ข้อความของคุณค่ะ....
  • 29. </text area></div><br /><div style="border:1px solid #ff6699; width:320px"><div style="border-width:1px;border-style:solid;border-color:#fff #ffbbbb #ffbbbb#fff;background:#ffcccc;padding:4px"><div style="border-width:1px;border-style:solid;border-color:#ffbbbb #fff #fff #ffbbbb"><div style="border:1px solid#ff6699;background:#fff;padding:2px"><textarea rows="5" class="textarea_c">ข้อความของคุณค่ะ....</text area></div></div></div></div></body></html>Outputหัวข้อExample - Button<html>
  • 30. <head> <style type="text/css">.button_gray {font-family:Arial, Helvetica, sans-serif;font-weight:bold;color:#333333;background-color:#F7F7F7;border: 1px solid#000000;padding: 1px 0;}.button_image {font-family:Arial, Helvetica, sans-serif;color:#333333;background:url(images/button_bg.gif) repeat-x;border: 1px solid#000000;padding: 1px 0;} </style></head><body> <input type="button" value="Submit" class="buttongray"> <input type="button" value="Submit" class="buttonimage"></body></html> Outputรูปที่ใช้ทำาปุ่มTable less Formเราสามารถกำาหนด Form เป็น 2 column โดยไม่ต้องใช้ Table ได้โดยกำาหนดความกว้างของ column แรกโดยใช้ tag <label>และ colunm ที่สอง จะเป็นพวก text box ทีวางต่อจาก column ่แรก credit to :http://www.dynamicdrive.com/style/csslibrary/item/css-tableless-form/ลองนำา code ไปปรับปรุงเปลี่ยนแปลงต่อได้ค่ะExample
  • 31. <html><head><style type="text/css">.cssform p{width: 300px;clear: left;margin: 0;padding:5px 0 8px 0;padding-left: 155px; /*width of left columncontaining the label elements*/border-top: 1px dashedgray;height: 1%;}.cssform label{font-weight: bold;float: left;margin-left:-155px; /*width of left column*/width: 150px; /*width of labels. Should be smaller thanleft column (155px) to create some right margin*/}.cssform input[type="text"]{ /*width of text boxes. IE6does not understand this attribute*/width: 180px;}.cssform textarea{width: 250px;height: 150px;}/*.threepxfix class below:Targets IE6- ONLY. Adds 3 pixel indent for multi-lineform contents.to account for 3 pixel bug:http://www.positioniseverything.net/explorer/threepxtest.html*/ html .threepxfix{margin-left: 3px;}</style></head><body><form id="myform" class="cssform" action=""><p><label for="user">Name</label><input type="text" id="user" value="" /></p>
  • 32. <p><label for="email address">Email Address:</label><input type="text" id="email address" value="" /></p><p><label for="comments">Feedback:</label><text area id="comments" rows="5"cols="25"></textarea></p><p><label for="comments">Sex:</label>Male: <input type="radio" name="sex" /> Female:<input type="radio" name="sex" /><br /></p><p><label for="comments">Hobbies:</label><input type="checkbox" name="hobby" /> Tennis<br /><input type="checkbox" name="hobby"class="threepxfix" /> Reading <br /><input type="checkbox" name="hobby"class="threepxfix" /> Basketball <br /></p><p><label for="terms">Agree to Terms?</label><input type="checkbox" id="terms" class="boxes" /></p><div style="margin-left: 150px;"><input type="submit" value="Submit" /> <inputtype="reset" value="reset" />
  • 33. </div></form></body></html>OutputNameEmail Address:Feedback:Sex: Male: Female:Hobbies: TennisReadingBasketballAgree to Terms?อีกตัวอย่าง สวยๆ ค่ะCredit to : http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.htmlExample<html><head><style type="text/css">body{font-family:"Lucida Grande", "Lucida SansUnicode", Verdana, Arial, Helvetica, sans-serif;font-size:12px;}p, h1, form, button{border:0; margin:0; padding:0;}.spacer{clear:both; height:1px;}
  • 34. /* ----------- My Form ----------- */.myform{margin:0 auto;width:400px;padding:14px;}/* ----------- stylized ----------- */#stylized{border:solid 2px#b7ddf2;background:#ebf4fb;}#stylized h1 {font-size:14px;font-weight:bold;margin-bottom:8px;}#stylized p{font-size:11px;color:#666666;margin-bottom:20px;border-bottom:solid 1px #b7ddf2;padding-bottom:10px;}#stylized label{display:block;font-weight:bold;text-align:right;width:140px;float:left;}#stylized .small{color:#666666;display:block;font-size:11px;font-weight:normal;text-align:right;width:140px;}#stylized input{float:left;font-size:12px;padding:4px2px;border:solid 1px #aacfe4;width:200px;margin:2px 0 20px 10px;}#stylized button{clear:both;margin-left:150px;width:125px;height:31px;background:#666666 url(img/button.png) no-repeat;text-align:center;line-height:31px;color:#FFFFFF;font-size:11px;font-weight:bold;}</style></head><body><div id="stylized" class="myform"><form id="form" name="form" method="post"action="index.html"><h1>Sign-up form</h1><p>This is the basic look of my form without table</p>
  • 35. <label>Name<span class="small">Add your name</span></label><input type="text" name="name" id="name" /><Label>Email<span class="small">Add a valid address</span></label><input type="text" name="email" id="email" /><Label>Password<span class="small">Min. size 6 chars</span></label><input type="text" name="password" id="password" /><button type="submit">Sign-up</button><div class="spacer"></div></form></div></body></html>OutputSign-up formThis is the basic look of my form without tableName Add your name Email Add a valid addressPassword Min. size 6 chars Sign-upBackgroundเราสามารถกำาหนดลักษณะพื้นหลังของ Element ต่างๆ เช่น<body>, <table>, <p>, <h1>, <h2>, <div> เป็นต้นPropert Description Values
  • 36. ybackgr ใช้กำาหนดว่าต้องการ fixed fix อยู่กับที่ound- ให้ภาพพื้นหลังนั้นอยู่ scroll เลื่อนตาม Scrollattach กับที่ หรือว่าเลื่อนไป Barment ตาม Scroll Barbackgr ใช้กำาหนดทั้งสี พืน ้ color-rgb รหัสสีound- หลังของเว็บเพจ หรือ color-hexcolor ตาราง color- ชื่อสี name transpare ntbackgr ใช้กำาหนดรูปภาพ ให้ url ของรูป เช่นound- พื้นหลังของเว็บเพจ url(images/bg.image หรือตาราง jpg)backgr ใช้กำาหนดตำาแหน่ง top leftound- การจัดวางรูปภาพพื้น top centerpositio หลัง top rightn center left center center center right bottom left bottom center bottom right x% y% xpos yposbackgr กำาหนดรูปภาพพื้น repeat ไม่ให้มีการวางต่อound- หลังว่าต้องการให้มี repeat-x รูปภาพrepeat การเรียงต่อรูปภาพ repeat-y วางต่อรูปภาพ หรือไม่ no-repeat แนวนอน วางต่อรูปภาพ แนวตั้ง
  • 37. วางต่อรูปภาพทั้ง แนวนอนและตั้งbackgr เราสามารถกำาหนด backgrounound property ให้กับ d-color background ได้ใน backgroun คำาสั่งประกาศเดียว d-image backgroun d-repeat backgroun d- attachmen t backgroun d-positionExampleBackground เป็นรูปอยู่ดานบน ขวา ไม่ repeat ้<div style="background-attachment: scroll; background-image: url (../images/bg1.gif); background-position: topright; background-repeat: no-repeat"><br /><br /><br /><br /></div>OutputExampleBackground เป็นรูปอยู่ตรงกลาง ไม่ repeat<div style="background-attachment:scroll; background-image:url(../images/bg2.gif); background-position:center; background-repeat:no-repeat"><br /><br /><br /><br /></div>OutputExample Background เป็นรูปอยู่ตรงกลาง repeart แนวนอน<div style="background-attachment:scroll; background-image:url(../images/bg2.gif); background-
  • 38. position:center; background-repeat:repeat-x"><br /><br />Enjoyday.net<br /><br /></div>OutputEnjoyday.netExample Background เป็นรูปอยู่ตรงกลาง repeart แนวตั้ง<div style="background-attachment: scroll; background-image:url(../images/bg2.gif); background-position:center; background-repeat:repeat-y"><br /><br />Enjoyday.net<br /><br /></div>OutputEnjoyday.netExample Background เป็นรูป repeat ทั้งแนวนอน และแนวตั้ง<div style="background-image:url(../images/bg2.gif);background-repeat: repeat"><br /><br />Enjoyday.net<br /><br /></div>OutputEnjoyday.netExample Background เป็นพื้นสีฟ้า<div class="output_box" style="background-color:#D7EBFF"><br /><br />Enjoyday.net<br /><br /></div>OutputEnjoyday.netExampleBackground เป็นรูป Fix
  • 39. <textarea style="background-image:url(../images/bg1.gif); background-attachment:fixed; width:300px " rows="3">สวัสดีคะ ่นี่เป็น Background แบบ Fixรูปจะไม่เลือนไปตาม Scroll Bar ค่ะ....</textarea>OutputExampleBackground เป็นรูปไม่ Fix เลื่อนตาม Scroll Bar<textarea style="background-image:url(../images/bg1.gif); background-attachment:scroll; width:300px" rows="3">สวัสดีค่ะนี่เป็น Background แบบไม่ Fixรูปจะเลือนไปตาม Scroll Bar ค่ะ....</textarea>OutputBorderเราสามารถกำาหนดลักษณะเส้นกรอบของ Element ต่างๆ ได้ เช่น<p>, <div> เป็นต้นProperty Description Valuesborder-width ใช้กำาหนดขนาดของ thin เช่น กรอบของวัตถุทั้ง 4 medium 5px, ด้าน thick 5pt
  • 40. lengthborder-style ใช้การกำาหนด none dotted ลักษณะของกรอบ hidden ของวัตถุทั้ง 4 ด้าน dotted dashed dashed solid solid double groove double ridge inset groove outset ridge inset outsetborder-color ใช้การกำาหนดสีกรอบ color ของวัตถุทั้ง 4 ด้าน *ต้องกำาหนด style ก่อนborder สามารถกำาหนด border- property ให้กับ width border ได้ในคำาสั่ง border-style ประกาศเดียว border-colorborder-top- ่่ ใช้กำาหนดwidth คุณสมบัติให้กับborder-top- กรอบด้านบนstyleborder-top-colorborder-topborder- ใช้กำาหนดคุณสมบัติbottom- ให้กับกรอบด้านล่างwidthborder-bottom-style
  • 41. border-bottom-colorborder-bottomborder-left- ใช้กำาหนดคุณสมบัติwidth ให้กับกรอบด้านซ้ายborder-left-styleborder-left-colorborder-leftborder-right- ใช้กำาหนดคุณสมบัติwidth ให้กับกรอบด้านขวาbordr-right-styleborder-right-colorborder-righteExample กำาหนดขนาด border<div style="border-top-width:5px; border-right-width:5px; border-bottom-width:5px; border-left-width:5px;"><br /> <br /> <br /></div>หรือ<div style="border-width:5px"><br /><br /><br /></div>Outputกำาหนดขนาดให้เส้นกรอบทั้ง 4 ด้านมีค่า 5pxExample กำาหนดขนาด border
  • 42. <div class="output_box" style="border-width:1px10px"><br /><br /><br /></div>Outputกำาหนดขนาดให้เส้นกรอบ บน ล่าง เป็น 1px, และขนาดเส้นกรอบซ้าย ขวา เป็น 10pxExampleกำาหนดขนาด border<div class="output_box" style="border-width:1px 10px20px"><br /><br /><br /></div>Outputกำาหนดขนาดให้เส้นกรอบ บน เป็น 1px, ขนาดเส้นกรอบ ซ้าย ขวาเป็น 10px และขนาดเส้นกรอบ ล่าง เป็น 20pxExampleกำาหนดขนาด border<div class="output_box" style="border-top-width:1px;border-right-width:10px; border-bottom-width:20px;border-left-width:30px;"><br /> <br /> <br /> หรือ </div> <divclass="output_box" style="border-width:1px 10px 20px30px"><br /><br /><br /></div>Outputกำาหนดขนาดให้เส้นกรอบ 1px 10px 20px 30px เป็นขนาดของเส้นกรอบ บน ขวา ล่าง ซ้าย ตามลำาดับExampleลักษณะ border
  • 43. <div style="border-style:dashed dotted solid double;border-color:#FF6633"><br /><br /><br /><br /></div>Outputกำาหนดลักษณะให้เส้นกรอบในคำาสั่งเดียว dashed dotted soliddouble เป็นลักษณะของเส้นกรอบ บน ขวา ล่าง ซ้าย ตามลำาดับExampleกำาหนดสี border<div style="border-style:solid; border-color:red bluegreen black"><br /> <br /> <br /></div>Outputกำาหนดสีให้เส้นกรอบในคำาสั่งเดียว red blue green black เป็นสีของเส้นกรอบ บน ขวา ล่าง ซ้าย ตามลำาดับExampleกำาหนด property ให้กับ border ในคำาสั่งประกาศเดียว<div style="border-width:5px; border-style:double;border-color:#336699"><br /> <br /> <br /></div>หรือ<div style="border:5px double #336699"><br /> <br /> <br /></div>Outputกำาหนด Property ให้กับ border ได้ในคำาสั่งประกาศเดียวMargin, Padding ValueProperty Description smargin- ใช้กำาหนดระยะห่างระหว่างขอบของ auto เช่น
  • 44. top วัตถุดานบน กับวัตถุอื่นๆ ้ lengt 5px, h 5pt,5 cmmargin- ใช้กำาหนดระยะห่างระหว่างขอบของbottom วัตถุดานล่าง กับวัตถุอื่นๆ ้margin- ใช้กำาหนดระยะห่างระหว่างขอบของleft วัตถุดานซ้าย กับวัตถุอื่นๆ ้margin- ใช้กำาหนดระยะห่างระหว่างขอบของright วัตถุดานขวา กับวัตถุอื่นๆ ้margin ใช้กำาหนดระยะห่างระหว่างขอบของ วัตถุที่ต้องการ ทั้ง 4 ด้าน กับวัตถุอื่น ๆ ในคำาสั่งเดียวpadding ใช้กำาหนดระยะห่างระหว่างขอบของ-top วัตถุดานในเส้นบน กับ ข้อความที่อยู่ ้ ในกรอบpadding ใช้กำาหนดระยะห่างระหว่างขอบของ-bottom วัตถุดานในเส้นล่าง กับ ข้อความที่อยู่ ้ ในกรอบpadding ใช้กำาหนดระยะห่างระหว่างขอบของ-left วัตถุดานในเส้นซ้าย กับ ข้อความที่อยู่ ้ ในกรอบpadding ใช้กำาหนดระยะห่างระหว่างขอบของ-right วัตถุดานในเส้นขวา กับ ข้อความที่อยู่ ้ ในกรอบpadding ใช้กำาหนดระยะห่างระหว่างขอบของ วัตถุดานใน กับ ข้อความที่อยู่ในกรอบ ้ (ไม่เกี่ยวข้องกับวัตถุด้านนอก)
  • 45. Exampleถ้าไม่ได้ใช้่้ งาน margin และ padding ข้อความข้างนอกด้านบน<div style="border:20px solid #3399CC">block นี้มีBorder สีนำ้าเงิน ขนาด 20pxไม่ใช้งาน Margin และ Padding ลองมาดูกันว่าได้ผลเป็นอย่างไร</div>ข้อความข้างนอกด้านล่างOutputข้อความข้างนอกด้านบน block นี้มี Border สีนำ้าเงิน ขนาด 20pxไม่ใช้งาน Margin และ Padding ลองมาดูกันว่าได้ผลเป็นอย่างไรข้อความข้างนอกด้านล่าง ลองมาดูต่อว่า... ถ้านำา margin และpadding มาใช้งานล่ะExample การใช้งาน margin และ paddingข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือmargin ด้านบน<div style="margin:20px; padding:20px; border:20pxsolid #3399CC">block นี้มี Border สีนำ้าเงิน ขนาด 20px <br />มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block20px<br />และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทีนี้คงเข้าใจแล้วว่า margin และpaddingคือส่วนไหนกันแล้ว</div>ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือmargin ด้านล่างOutput
  • 46. ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือmargin ด้านบน block นี้มี Border สีนำ้าเงิน ขนาด 20px มีPadding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block20pxและมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทีนี้คงเข้าใจแล้วว่า margin และpaddingคือส่วนไหนกันแล้ว ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านล่าง ถ้ายังงงๆ ว่าตรงไหนคือmargin และ padding อยู่ ให้ดูที่รูปนี้ค่ะExampleการใช้งาน margin ที่แต่ละด้านไม่เท่ากัน<div style="margin:20px; padding:10px 20px 30px40px; border:2px solid #009999">block นี้มี Border สีส้ม ขนาด 2px <br />มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block10px 20px 30px 40px ซึงเป็น pading ของด้านบน ขวา ล่าง ่ซ้าย ตามลำาดับ และมี Margin ระยะห่างระหว่างขอบด้านนอก กับข้อความที่อยู่ข้างนอก block 20px ทั้ง 4 ด้าน</div>
  • 47. ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือmargin ด้านล่างOutputความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 10x นี่คือmargin ด้านบนblock นี้มี Border สีส้ม ขนาด 2px มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 20px ทั้ง 4 ด้าน และมี Marginระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ขางนอก block ้10px 20px 30px 40px ซึงเป็น margin ของด้านบน ขวา ล่าง ่ซ้าย ตามลำาดับ ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของblock 30x นี่คือ margin ด้านล่างExampleการใช้งาน padding ทีแต่ละด้านไม่เท่ากัน ่ความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือmargin ด้านบน<div style="margin:20px; padding:10px 20px 30px40px; border:2px solid #009999">block นี้มี Border สีเขียว ขนาด 2px <br />มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 10px 20px 30px40px ซึ่งเป็น pading ของด้านบน ขวา ล่าง ซ้าย ตามลำาดับและมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทั้ง 4 ด้าน</div>ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block20x นี่คือ margin ด้านล่างOutputความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือmargin ด้านบน block นี้มี Border สีเขียว ขนาด 2px มี Padding
  • 48. ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 10px 20px30px 40px ซึ่งเป็น pading ของด้านบน ขวา ล่าง ซ้าย ตามลำาดับและมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทั้ง 4 ด้าน ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านล่างExample อื่นๆh1 {margin: 10px}Happy New Year margin ทั้ง4 ด้านเป็น 10pxh1 {margin: 10px 2%}Happy New YearMargin ด้านบนและล่าง 10px, ด้านขวาและซ้าย เป็น 2% ของความกว้างเอกสารh1 {margin: 10px 2% -10px}Happy New YearMargin ด้านบน 10px, ด้านขวาและซ้าย 2% ของความกว้างเอกสาร, ด้านล่าง เป็น -10pxh1 {margin: 10px 2% -10px auto}Happy New YearMargin ด้านบน 10px, ด้านขวา 2% ของความกว้างเอกสาร, ด้านล่าง เป็น -10px และด้านซ้ายกำาหนดตาม BrowserExampleการใช้งานผสม Chapter 8-12<html><head>
  • 49. <style type="text/css">.miscode {font: normal small-caps bold 16px Arial,Helvetica, sans-serif; color:#FF0033;text-align:center; text-decoration:underline; word-spacing:0.5em; background-color:#FBEFFC; border:2pxdotted #FF6699; margin:20px; padding:20px</style></head><body>Hello all,<div class="mixcode">Happy New Year 2009</div>Hope you enjoy your stay here.</body></html>OutputHello all,Happy New Year 2009Hope you enjoy your stay here.ListProperty Description Valueslist-style- ใช้กำาหนด none •disctype ลักษณะที่ใช้นำา disc •circle หน้าแต่ละรายการ circle ย่อย square •square decimal •decimal decimal- •decimal- leading- leading-zero zero
  • 50. lower- •lower- roman roman upper- •upper- roman roman lower- alpha •lower-alpha upper- •upper-alpha alpha •lower-greek lower- greek •lower-latin lower- •upper-latin latin •hebrew upper- •armenian latin hebrew •georgian armenian •georgian georgian •cjk- cjk- ideographic ideograph •hiragana ic hiragana •hiragana- katakana iroha hiragana- •katakana- iroha iroha katakana- irohalist-style- ใช้การกำาหนด inside จัดให้ตรงแนวกับposition ลักษณะการปัด outside สัญลักษณ์ ขึนบรรทัดใหม่ ้ จัดให้ตรงแนวกับ ของข้อความ ข้อความแถวแรก กรณีที่มีความยาว เกิน 1 บรรทัด * ถ้าไม่กำาหนดจะ เป็นแบบ outsidelist-style- ใช้การกำาหนด url ของรูปภาพ
  • 51. image รูปภาพเพื่อนำามา เป็นสัญลักษณ์ รายการย่อยlist-style สามารถกำาหนด list-style- property ให้กับ type list ได้ในคำาสั่ง list-style- ประกาศเดียว position list-style- imageExampleEnjoyday.net - Web builder Tutorial<ul style="list-style-type: square"><li>HTML</li><li>CSS</li><li>XHTML</li><li>JavaScript</li><li>SQL</li></ul>OutputEnjoyday.net - Web builder Tutorial •HTML •CSS •XHTML •JavaScript •SQLExampleEnjoyday.net - Web builder Tutorial<ul><li style="list-style-type: circle">HTML</li><li style="list-style-type:disc">CSS</li>
  • 52. <li style="list-style-type: square">XHTML</li><li style="list-style-type: decimal">JavaScript</li><li style="list-style-type:upper-roman">SQL</li></ul>OutputEnjoyday.net - Web builder Tutorial •HTML •CSS •XHTML •JavaScript •SQLExampleEnjoyday.net - Web builder Tutorial<ul style="list-style-image:url(images/list. if)"><li>HTML</li><li>CSS</li><li>XHTML</li><li>JavaScript</li><li>SQL</li></ul>OutputEnjoyday.net - Web builder Tutorial •HTML •CSS •XHTML •JavaScript •SQLExample
  • 53. ประโยชน์ของ CSS<ul style="list-style-type: circle; list-style-position:outside"><li>การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำาให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำาให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำาได้งายและรวดเร็ว</li> <li>เมื่อ code ภายใน ่เอกสาร HTML ลดลง ทำาให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว</li> <li>สามารถกำาหนดรูปแบบการแสดงผลจากคำาสั่งstyle sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำาให้เวลาแก้ไขหรือปรับปรุงทำาได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML Tag ต่างๆ ทั่วทั้งเอกสาร</li> </ul>Outputประโยชน์ของ CSS •การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำาให้ code ภายใน เอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำาให้เข้าใจง่ายขึ้น การ แก้ไขเอกสารทำาได้งายและรวดเร็ว ่ •เมื่อ code ภายในเอกสาร HTML ลดลง ทำาให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว •สามารถกำาหนดรูปแบบการแสดงผลจากคำาสั่ง style sheet ชุด เดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำาให้ เวลาแก้ไขหรือปรับปรุงทำาได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML Tag ต่างๆ ทั่วทั้งเอกสารExample กำาหนด property ให้กับ list ได้ในคำาสั่งประกาศเดียวประโยชน์ของ CSS<ul style="list-style:decimal inside"><li>การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำาให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำาให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำาได้งายและรวดเร็ว</li> ่
  • 54. <li>เมื่อ code ภายในเอกสาร HTML ลดลง ทำาให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว</li><li>สามารถกำาหนดรูปแบบการแสดงผลจากคำาสั่ง style sheetชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ทำาให้เวลาแก้ไขหรือปรับปรุงทำาได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTMLTag ต่างๆ ทั่วทั้งเอกสาร</li></ul>Outputประโยชน์ของ CSS •การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำาให้ code ภายใน เอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำาให้เข้าใจง่ายขึ้น การ แก้ไขเอกสารทำาได้งายและรวดเร็ว ่ •เมื่อ code ภายในเอกสาร HTML ลดลง ทำาให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว •สามารถกำาหนดรูปแบบการแสดงผลจากคำาสั่ง style sheet ชุด เดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำาให้ เวลาแก้ไขหรือปรับปรุงทำาได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML Tag ต่างๆ ทั่วทั้งเอกสารTableต้องใช้กับเว็บเบราเซอร์รุ่นใหม่ๆ เช่น IE6 เป็นต้นไป*บาง property เมื่อทดสอบแล้วไม่เห็นผลProperty Description Valuestable- ใช้กำาหนดความ automatic Defaultlayout กว้างของตาราง fixed กว้างตามที่่ ำ และคอลัมน์ กำาหนดเท่านัน้caption- ใช้กำาหนด top Defaultside ตำาแหน่งของชื่อ bottom ตาราง left rightempty- ใช้กำาหนดว่าจะ hide Default
  • 55. cells แสดง/ไม่แสดง show เส้นขอบ เมื่อ cell นั้นไม่มีข้อความ (empty)border- ใช้กำาหนดระยะ length เช่น 2px 5pxspacing ระหว่างตาราง length และขอบ แนวนอน และแนวตั้งborder- ใช้กำาหนด separate Default แยกเป็นcollapse ลักษณะเส้นขอบ collapse 2 เส้น เป็นเส้นเดียวExample<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><tdwidth="20%">1000000000000000000000000000</td><td width="40%">10000000</td><td width="40%"></td>
  • 56. </tr></table><br /><table class="two"><caption>ตารางแสดงตัวเลข</caption><tr><tdwidth="20%">1000000000000000000000000000</td><td width="40%">10000000</td><td width="40%"></td></tr></table></body></html>Outputตารางแสดงตัวเลข10000000000000 1000000000000000000000ตารางแสดงตัวเลข10000000000000 1000000000000000000000สังเกต ตารางที่สอง จะ fix ความกว้างของช่องตารางไว้ ทำาให้แสดงข้อความไม่พอ นอกจากนี้มีการกำาหนด cell ว่างให้แสดงด้วยและให้แสดงเส้นขอบรวมเป็นเส้นเดียวExampleลองจัดรูปแบบอื่นๆ ให้กับตาราง โดยใช้ CSS บทที่ผ่านๆมา ดูคะ ่<html><head><style type="text/css">
  • 57. table.three{width:60%;border:0; }table.three th { font-weight:bold; border-bottom:1pxsolid #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>
  • 58. </body></html>Outputรหัสพนักงาน ชื่อ เงินเดือน01 อำานาจ 30,00002 สมชาย 25,00003 วีระ 20,000LinkProperty Purposea:link กำาหนด style ให้กับ link ปกติที่ยังไม่เคยถูก clicka:visited กำาหนด style ให้กับ link ที่เคยถูกคลิกแล้วa:hover กำาหนด style ให้กับ link เมื่อเลื่อนเมาส์ไปอยู่ เหนือ linka:active กำาหนด style ให้กับ link ขณะถูกคลิกExample<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 overlink สีชมพู */ .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>
  • 59. <a href="css_chapter04.html">Chapter4</a><a href="css_chapter05.html">Chapter5</a></div><body></html>OutputChapter1 Chapter2 Chapter3 Chapter4 Chapter5Example<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: 1pxsolid #1BA0CD; }.linkpage a:hover { background-color:#C0F5FA;border-color: #608BD2; color:#0076AE }.linkpage span { font: 12px Arial, Helvetica, sans-serif;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_chapter14.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_chapter16.html">Next &rsaquo;</a><a href="css_chapter25.html">Last &raquo;</a>
  • 60. </div><body></html>Classificationการแสดงผลวัตถุว่าจะแสดงอย่างไร ที่ไหนProperty Description ValuesFloat ใช้กำาหนดการจัดวาง left รูปภาพ หรือวัตถุที่ right ต้องการ ว่าจะให้อยู่ทาง none ด้านใดของข้อความที่มี อยู่display ใช้กำาหนดรูปแบบการ แสดงของวัตถุ
  • 61. value descriptionnone ไม่แสดงวัตถุนั้นblock แสดงเป็น block โดยขึ้นบรรทัด ใหม่ก่อนinline เป็นค่า Default โดย element จะ่ี ่ ่ แสดงแบบ inline ไม่มีการ ขึนบรรทัดใหม่ ้list-item แสดงเป็นลิสต์รายการrun-in The element will be displayed as block-level or inline element depending on contextcompact The element will be displayed as block-level or inline element depending on contextmarkertable The element will be displayed as a block table (like <table>), with a line break before and after the tableinline-table The element will be displayed as an inline table (like <table>), with no line break before or after the tabletable-row- The element will be displayedgroup as a group of one or more rows (like <tbody>)table- The element will be displayed
  • 62. Clear ใช้ยกเลิกการจัดวางวัตถุ left กับข้อความ right both nonevisibility กำาหนดให้มีการแสดง visible หรือซ่อน วัตถุและ hidden ข้อความที่ต้องการ collapseExample float<html><head><style type="text/css">.img1{float:right;width:120px;margin:0 0 15px20px;padding:15px;border:1px solid black;text-align:center;}</style></head><body><div class="img1"><img src="../images/tea.jpg" /><br />Green Tea</div><p> มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่าชาเขียวบ้างชาวจีนรู้เรื่องประโยชน์ทางยาของชาเขียวมาตั้งแต่ครั้งโบราณโดยใช้ชาเขียวในการรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า ในหนังสือเรื่อง ไขความลับธรรมชาติสู่สุขภาพที่ดีกว่า นาดีนเทย์เลอร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว </p> <p>ปัจจุบัน การวิจยทาง ัวิทยาศาสตร์ทั้งในโลกตะวันตกและตะวันออกพบว่า การดื่มชาเขียวมีผลอย่างชัดเจนต่อสุขภาพ เช่น ในปี 1994 วารสารของสถาบันมะเร็งแห่งชาติ ตีพิมพ์ผลการศึกษาที่แสดงว่า การดื่ม ชา
  • 63. เขียวช่วยลดอัตราการเสี่ยงของโรคมะเร็งหลอดอาหาร ในหมู่ชาวจีนทั้งหญิงชาย ได้ถึง เกือบ 60% เมื่อไม่นานมานี้ นักวิจัยจากมหาวิทยาลัยปูร์ดู สรุปว่า สารประกอบในชาเขียว ช่วยยับยั้งอัตราการเติบโตของเซลมะเร็งได้ นอกจากนั้น ยังมีการวิจัยทีแสดงว่า การ ่ดื่มชาเขียวช่วยลดระดับคลอเรสเตอรอลโดยรวมได้ และยังช่วยปรับอัตรา HDL ให้เป็น LDL</p></body><html>Green Tea มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่า ชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยาของ ชาเขียวมาตั้งแต่ครั้งโบราณ โดยใช้ชาเขียวใน การรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึม เศร้า ในหนังสือเรื่อง ไขความลับธรรมชาติสู่ สุขภาพที่ดีกว่า นาดีน เทย์เลอร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว ปัจจุบัน การวิจัยทางวิทยาศาสตร์ทั้งในโลกตะวันตกและตะวันออกพบว่า การดื่มชาเขียวมีผลอย่างชัดเจนต่อสุขภาพ เช่น ในปี1994 วารสารของสถาบันมะเร็งแห่งชาติ ตีพิมพ์ผลการศึกษาที่แสดงว่า การดื่ม ชาเขียวช่วยลดอัตราการเสี่ยงของโรคมะเร็งหลอดอาหาร ในหมู่ชาวจีนทั้งหญิงชาย ได้ถึง เกือบ 60% เมื่อไม่นานมานี้ นักวิจยจากมหาวิทยาลัยปูร์ดู สรุปว่า สารประกอบในชา ัเขียว ช่วยยับยั้งอัตราการเติบโตของเซลมะเร็งได้ นอกจากนั้น ยังมีการวิจัยทีแสดงว่า การดื่มชาเขียวช่วยลดระดับคลอเรสเตอรอล ่โดยรวมได้ และยังช่วยปรับอัตรา HDL ให้เป็น LDL
  • 64. Example display:inline ทำาให้ <p> ไม่มีการตัดบรรทัดใหม่(<p> ปกติจะตัดบรรทัดใหม่)<h4>กรณีไม่มีการจัดรูปแบบ</h4><p>มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่าชาเขียวบ้างชาวจีนรู้เรื่องประโยชน์ทางยาของชาเขียวมาตั้งแต่ครั้งโบราณโดยใช้ชาเขียวในการรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า </p> <p>ในหนังสือเรื่อง ไขความลับธรรมชาติสสุขภาพที่ ู่ดีกว่า นาดีน เทย์เลอร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว </p><br /><h4>กรณีกำาหนดให้ display แบบ inline</h4><p style="display:inline">มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่าชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยาของชาเขียวมาตั้งแต่ครั้งโบราณ โดยใช้ชาเขียวในการรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า </p><p style="display: inline">ในหนังสือเรื่อง ไขความลับธรรมชาติสู่สุขภาพที่ดีกว่า นาดีน เทย์เลอร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว</p>Output กรณีไม่มีการจัดรูปแบบมีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่าชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยาของชาเขียวมาตั้งแต่ครั้งโบราณ โดยใช้ชาเขียวในการรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า ในหนังสือเรื่อง ไขความลับธรรมชาติสู่สขภาพที่ดีกว่า นาดีน เทย์เลอ ุร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว กรณีกำาหนดให้ display แบบ inline มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่าชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยาของชาเขียวมาตั้งแต่ครั้งโบราณ โดยใช้ชา
  • 65. เขียวในการรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า ในหนังสือเรื่อง ไขความลับธรรมชาติสู่สขภาพที่ดีกว่า นาดีน เทย์เลอ ุร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้วExample display:block (<span> ปกติจะไม่บรรทัดใหม่)<h4>กรณีไม่มีการจัดรูปแบบ</h4><span>มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่าชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยาของชาเขียวมาตั้งแต่ครั้งโบราณ โดยใช้ชาเขียวในการรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า </span> <span>ในหนังสือเรื่อง ไขความลับธรรมชาติสู่สุขภาพที่ดีกว่า นาดีน เทย์เลอร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว</span><br /><h4>กรณีกำาหนดให้ display แบบblock</h4><span style="display:block">มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่าชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยาของชาเขียวมาตั้งแต่ครั้งโบราณ โดยใช้ชาเขียวในการรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า </span><span style="display:block">ในหนังสือเรื่อง ไขความลับธรรมชาติสู่สุขภาพที่ดีกว่า นาดีน เทย์เลอร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว</span>Output กรณีไม่มีการจัดรูปแบบมีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่าชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยาของชาเขียวมาตั้งแต่ครั้งโบราณ โดยใช้ชาเขียวในการรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า ในหนังสือเรื่อง ไขความลับธรรมชาติสู่สขภาพที่ดีกว่า นาดีน เทย์เลอ ุ
  • 66. ร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว กรณีกำาหนดให้ display แบบ block มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่าชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยาของชาเขียวมาตั้งแต่ครั้งโบราณ โดยใช้ชาเขียวในการรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า ในหนังสือเรื่อง ไขความลับธรรมชาติสู่สขภาพที่ดีกว่า นาดีน เทย์เลอ ุร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้วExample<font style="display:list-item">Jack</font><font style="display:list-item">Kate</font>OutputJack KateExampleclear:left<p><h4>กรณีไม่มีการจัดรูปแบบ</h4><img src="../images/tea. jpg">มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่าชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยาของชาเขียวมาตั้งแต่ครั้งโบราณ โดยใช้ชาเขียวในการรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า ในหนังสือเรื่อง ไขความลับธรรมชาติสู่สขภาพที่ดีกว่า นาดีน เทย์เลอ ุร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว</p><p><h4>จัดให้รูปชิดซ้าย</h4><img src="../images/tea.jpg" style="float:left">มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่าชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยาของชาเขียวมาตั้งแต่ครั้งโบราณ โดยใช้
  • 67. ชาเขียวในการรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า ในหนังสือเรื่อง ไขความลับธรรมชาติสู่สขภาพที่ดีกว่า นาดีน เทย์เลอ ุร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว</p> <p><h4>จัดให้รูปชิดซ้าย และให้ข้อความท่อนหลังขึ้นต้นใหม่ ใต้รูป (clear:left)</h4><img src="../images/tea.jpg" style="float:left">มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่าชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยาของชาเขียวมาตั้งแต่ครั้งโบราณ โดยใช้ชาเขียวในการรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า <p style="clear:left">ในหนังสือเรื่อง ไขความลับธรรมชาติสสุขภาพที่ดี ู่กว่า นาดีน เทย์เลอร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว</p></p>Output กรณีไม่มีการจัดรูปแบบมีอาหารหรือเครื่องดื่มอะไรที่จะ ดีต่อสุขภาพเท่าชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ ทางยาของชาเขียวมาตั้งแต่ครั้งโบราณ โดยใช้ชา เขียวในการรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึม เศร้า ในหนังสือเรื่อง ไขความลับธรรมชาติสู่สุขภาพที่ดี กว่า นาดีน เทย์เลอร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว จัดให้รูปชิดซ้ายมีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อ สุขภาพเท่าชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยา ของชาเขียวมาตังแต่ครั้งโบราณ โดยใช้ชาเขียวในการ ้ รักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า ใน หนังสือเรื่อง ไขความลับธรรมชาติสู่สุขภาพที่ดีกว่า นาดีน เทย์เลอร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว
  • 68. จัดให้รูปชิดซ้าย และให้ข้อความท่อนหลังขึ้นต้นใหม่ ใต้ รูป (clear:left)มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อ สุขภาพเท่าชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยา ของชาเขียวมาตั้งแต่ครั้งโบราณ โดยใช้ชาเขียวในการ รักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า ในหนังสือเรื่อง ไขความลับธรรมชาติสู่สขภาพที่ดีกว่า นาดีน เทย์เลอ ุร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว Exampleclear:right <p><h4>จัดให้รูปชิดขวา</h4><img src="../images/tea2.jpg" style="float:right">มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่าชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยาของชาเขียวมาตั้งแต่ครั้งโบราณ โดยใช้ชาเขียวในการรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า ในหนังสือเรื่อง ไขความลับธรรมชาติสู่สขภาพที่ดีกว่า นาดีน เทย์เลอ ุร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว</p><p><h4>จัดให้รูปชิดขวา และให้ข้อความท่อนหลังขึ้นต้นใหม่ ใต้รูป (clear:right)</h4><imgsrc="../images/tea2.jpg" style="float:right">มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่าชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยาของชาเขียวมาตั้งแต่ครั้งโบราณ โดยใช้ชาเขียวในการรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า <p style="clear:right">ในหนังสือเรื่อง ไขความลับธรรมชาติสสุขภาพที่ดี ู่กว่า นาดีน เทย์เลอร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว</p></p> Output จัดให้รูปชิดขวา มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่าชา เขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยาของชาเขียว
  • 69. มาตั้งแต่ครั้งโบราณ โดยใช้ชาเขียวในการรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า ในหนังสือเรื่อง ไขความลับธรรมชาติสู่สุขภาพที่ดีกว่า นาดีน เทย์เลอร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว จัดให้รูปชิดขวา และให้ข้อความท่อนหลังขึ้นต้น ใหม่ ใต้รูป (clear:right) มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่า ชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยาของ ชาเขียวมาตั้งแต่ครั้งโบราณ โดยใช้ชาเขียวใน การรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า ในหนังสือเรื่อง ไขความลับธรรมชาติสู่สุขภาพที่ดีกว่า นาดีนเทย์เลอร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้วExampleclear:both<p><h4>จัดให้มีรูปชิดขวาและซ้าย</h4><img src="../images/tea.jpg" style="float:left"><img src="../images/tea2.jpg" style="float:right">มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่าชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยาของชาเขียวมาตั้งแต่ครั้งโบราณ โดยใช้ชาเขียวในการรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า ในหนังสือเรื่อง ไขความลับธรรมชาติสู่สขภาพที่ดีกว่า นาดีน เทย์เลอ ุร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว</p> <p><h4>จัดให้มีรูปชิดขวาและซ้ายและให้ขอความท่อนหลังขึ้นต้นใหม่ ใต้รูป</h4> (clear:left ได้ ้แค่รูปด้านซ้าย)<br /><img src="../images/tea.jpg" style="float:left"><img src="../images/tea2.jpg" style="float:right">
  • 70. มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่าชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยาของชาเขียวมาตั้งแต่ครั้งโบราณ โดยใช้ชาเขียวในการรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า<p style="clear:left">ในหนังสือเรื่อง ไขความลับธรรมชาติสู่สุขภาพที่ดีกว่า นาดีน เทย์เลอร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว</p></p><p><h4>จัดให้มีรูปชิดขวาและซ้าย และให้ข้อความท่อนหลังขึ้นต้นใหม่ ใต้รูปทั้งสองด้าน (clear:both)</h4> (ต้องclear:right เพราะรูปด้านขวาสูงกว่ารูปด้านซ้าย หรือclear:boht)<br /><br /><img src="../images/tea.jpg"style="float:left"><img src="../images/tea2.jpg" style="float:right">มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่าชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยาของชาเขียวมาตั้งแต่ครั้งโบราณ โดยใช้ชาเขียวในการรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า <p style="clear:both">ในหนังสือเรื่อง ไขความลับธรรมชาติสู่สุขภาพที่ดีกว่า นาดีน เทย์เลอร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว</p></p>Outputจัดให้มีรูปชิดขวาและซ้าย มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่าชา เขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยาของชาเขียว มาตั้งแต่ครั้งโบราณ โดยใช้ชาเขียวในการรักษา ตังแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า ในหนังสือ ้ เรื่อง ไขความลับธรรมชาติสสุขภาพที่ดีกว่า นาดีน ู่ เทย์เลอร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว
  • 71. จัดให้มีรูปชิดขวาและซ้าย และให้ข้อความท่อนหลังขึ้นต้นใหม่ ใต้รูป(clear:left ได้แค่รูปด้านซ้าย)มี อาหารหรือเครื่องดื่มอะไรที่จะดีต่อ สุขภาพเท่าชาเขียวบ้าง ชาวจีนรู้เรื่อง ประโยชน์ทางยาของชาเขียวมาตั้งแต่ ครั้งโบราณ โดยใช้ชาเขียวในการ รักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า ในหนังสือเรื่อง ไขความลับธรรมชาติสู่สุขภาพที่ดีกว่า นาดีน เทย์เลอร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว จัดให้มีรูปชิดขวาและซ้าย และให้ข้อความท่อน หลังขึ้นต้นใหม่ ใต้รูปทั้งสองด้าน (clear:both) (ต้อง clear:right เพราะรูปด้านขวาสูงกว่ารูป ด้านซ้าย หรือ clear:boht)มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่าชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยของชาเขียวมาตั้งแต่ครั้งโบราณ โดยใช้ชาเขียวในการรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า ในหนังสือเรื่อง ไขความลับธรรมชาติสู่สขภาพที่ดีกว่า นาดีน เทย์เลอร์ กล่าวว่า มีการใช้ชา ุเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้วExamplevisibility<h2 style="visibility:visible">Enjoyday.net</h2><h2 style="visibility:hidden">Enjoyday.net</h2>Output สังเกตุ enjoyday.net บรรทัดที่ 2 จะมองไม่เห็นPositioningการจัดวางตำาแหน่งวัตถุ
  • 72. Property Description Valuestop ใช้กำาหนดระยะของวัตถุ auto ว่าให้อยู่เหนือ หรือ ล่าง % ขอบด้านบน lengthbottom ใช้กำาหนดระยะของวัตถุ auto ว่าให้อยู่เหนือ หรือ ล่าง % ขอบด้านล่าง lengthleft ใช้กำาหนดระยะของวัตถุ auto ว่าให้อยู่ขวา หรือ ซ้าย % ของขอบด้านซ้าย lengthright ใช้กำาหนดระยะของวัตถุ auto ว่าให้อยู่ขวา หรือ ซ้าย % ของขอบด้านซ้าย lengthposition ใช้กำาหนดรูปแบบการจัด static Default วางวัตถุในลักษณะต่างๆ relative absolute ทั้ง relative absolute fixed และ fixed กำาหนด ตำาแหน่งด้วยการใช้ property left, top, right, และ bottom
  • 73. valu Description e stati การจัดวางตามปกติที่เป็น default c relat การจัดวางให้อยู่เหนือ หรือซ้อนบนวัตถุ ive อื่นๆในเว็บเพจ โดยวัตถุที่ถูกกำาหนดขึ้นมา ก่อนจะอยู่ด้านล่าง และวัตถุที่กำาหนดทีหลัง จะอยู่ด้านบน และจะกำาหนดตำาแหน่งโดย นับจากจุดที่วัตถุนนๆอยู่ ั้ abs การจัดวางให้อยู่เหนือ หรือซ้อนบนวัตถุ olut อื่นๆในเว็บเพจ โดยวัตถุที่ถูกกำาหนดขึ้นมา e ก่อนจะอยู่ด้านล่าง และวัตถุที่กำาหนดทีหลัง จะอยู่ด้านบน และ่่ จะกำาหนดตำาแหน่งจาก ขอบของ container ที่บรรจุ วัตถุนั้นๆ fixe การจัดวางที่กำาหนดตำาแหน่งจากขอบของ d Window นันๆ ้ * ต้องกำาหนดตำาแหน่งทั้งในแนวตั้ง และ แนวนอน * ถึงแม้เมื่อเลื่อน scroll bar วัตถุจะยังอยู่ ในตำาแหน่งที่กำาหนด (IE7)clip ใช้กำาหนดการตัดส่วน auto Default ต่างๆของวัตถุที่ไม่ shape ต้องการออกไป rect (top, right, bottom, left)overflow ใช้กำาหนดว่าถ้าข้อมูล visible Default เกินขอบเขตที่กำาหนดไว้ hidden ไม่แสดง จะให้มีการจัดการ scroll มี scroll อย่างไร auto bar เลื่อนดู ได้ จะมี scroll bar เลื่อนดู ได้vertical- ใช้กำาหนดการจัดวางalign แนวตั้ง
  • 74. value Description baseline Default. The element is placed on the baseline of the parent element sub ตัวห้อย super ตัวยก top The top of the element is aligned with the top of the tallest element on the line text-top The top of the element is aligned with the top of the parent elements font middle The element is placed in the middle of the parent element bottom The bottom of the element is aligned with the lowest element on the line text- The bottom of the element is bottom aligned with the bottom of the parent elements font length % Aligns the element in a % value of the "line-height" property. Negative values are allowedz-index ใช้กำาหนดลำาดับของ auto Default วัตถุ Default z-index number คือ 0 ถ้าต้องการให้อยู่ด้าน ล่างกว่า กำาหนดเป็น -1 ถ้าต้องการให้อยู่ด้านบน กว่า กำาหนดเป็น 1Exampleposition:relative นี่เป็นข้อความจัดวางตามปกติ<br /><font style="position:relative; left:-50px">เลื่อนไปทาง
  • 75. ซ้าย 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><font style="position:relative; top:-5px; color:green">เลื่อนไปขึ้นบน 5px</font>Outputนี่เป็นข้อความจัดวางตามปกติเลื่อนไปทางซ้าย 50pxเลื่อนไปทางซ้าย 50pxเลื่อนไปทางขวา 50pxเลื่อนไปทางขวา 50pxเลื่อนไปทางขวา 50px เลื่อนไปทางขวา 20px เลื่อนไปขึ้นบน 5pxExampleposition:absoluteนี่เป็นข้อความจัดวางตามปกติ<br /><font style="position:absolute;left:200px;color:blue;background-color:#D5FFFF">จัดให้หางจากขอบ ่ซ้าย 200px (ข้อความนี้จัดแบบ Absolute)</font><font style="position: absolute; right:200px;color:red;background-color:#FFE1F0">จัดให้ห่างจากขอบขวา 200px(ข้อความนี้จัดแบบ Absolute)</font>Outputนี่เป็นข้อความจัดวางตามปกติจัดให้ห่างจากขอบซ้าย 200px (ข้อความนี้จัดแบบ Absolute) จัด
  • 76. ให้หางจากขอบขวา 200px (ข้อความนี้จัดแบบ Absolute) ่Exampleposition:fixedนี่เป็นข้อความจัดวางตามปกติ<br /><font style="position:fixed; bottom:20px;left:200px;color:blue; background-color:#D5FFFF">จัดให้ห่างจากขอบซ้าย 200px (ข้อความนี้จัดแบบ Fixed)</font><font style="position:fixed; bottom:20px; right:200px;color:red; background-color:#FFE1F0">จัดให้หางจากขอบ ่ขวา 200px (ข้อความนี้จัดแบบ Fixed)</font>Outputนี่เป็นข้อความจัดวางตามปกติจัดให้ห่างจากขอบซ้าย 200px (ข้อความนี้จัดแบบ Fixed) จัดให้ห่างจากขอบขวา 200px (ข้อความนี้จัดแบบ Fixed)Exampleclip<img src="../images/tea.jpg" /><img src="../images/tea.jpg" style="position: absolute;clip:rect(0px 80px 80px 0px)" />Output Exampleใส่ scrollbar ให้ <div> ด้วย overflow <div style="width:200px; height:80px; background-color:#C1E0 F F;">บทเรียน online<br /> 1. HTML<br />2. CSS<br />3. XHTML<br />4. JavaScript<br />5. SQL</div><br /><br /><div style="width:200px; height:80px; background-color:#C1E0FF; overflow:scroll">บทเรียน online<br />
  • 77. 1. HTML<br />2. CSS<br />3. XHTML<br />4. JavaScript<br />5. SQL</div><br /><br /><div style="width:200px; height:180px; background-color:#C1E0FF; overflow:scroll">บทเรียน online<br />1. HTML<br />2. CSS<br />3. XHTML<br />4. JavaScript<br />5. SQL</div><br /><br /><div style="width:200px; height:80px; background-color:#C1E0FF; overflow:hidden">บทเรียน online<br />1. HTML<br />2. CSS<br />3. XHTML<br />4. JavaScript<br />5. SQL</div>Outputบทเรียน online1. HTML2. CSS3. XHTML
  • 78. 4. JavaScript5. SQLบทเรียน online1. HTML2. CSS3. XHTML4. JavaScript5. SQLบทเรียน online1. HTML2. CSS3. XHTML4. JavaScript5. SQLบทเรียน online1. HTML2. CSS3. XHTML4. JavaScript5. SQLExamplevertical-alignดื่มชาเขียว<img src="../images/tea.jpg" />เพื่อสุขภาพ(Default = baseline)ดื่มชาเขียว<img src="../images/tea.jpg" style="vertical-align:baseline" />เพื่อสุขภาพ (baseline)ดื่มชาเขียว<img src="../images/tea.jpg" style="vertical-align:text-top" />เพื่อสุขภาพ (text-top)ดื่มชาเขียว<img src="../images/tea.jpg" style="vertical-align:text-bottom" />เพื่อสุขภาพ (text-bottom)ดื่มชาเขียว<img src="../images/tea.jpg" style="vertical-align:top" />เพื่อสุขภาพ (top)ดื่มชาเขียว<img src="../images/tea.jpg" style="vertical-
  • 79. align:middle" />เพื่อสุขภาพ (middle)ดื่มชาเขียว<img src="../images/tea.jpg" style="vertical-align:bottom" />เพื่อสุขภาพ (bottom)H<span style="vertical-align:sub">2</span>O 4<span style="vertical-align:super">2</span> = 16 ดืมชาเขียวเพื่อสุขภาพ (Default = baseline) ่ ดืมชาเขียวเพื่อสุขภาพ (baseline) ่ ดืมชาเขียวเพื่อสุขภาพ (text-top) ่ ดืมชาเขียวเพื่อสุขภาพ (text-bottom) ่ ดื่มชาเขียวเพื่อสุขภาพ (top)ดื่มชา เขียวเพื่อสุขภาพ (middle)ดื่มชา เขียวเพื่อสุขภาพ (bottom)H2O42 = 16 Example <html> <head> </head> <h2 style="color:#00FFFF">ดืมชาเขียวเพื่อ ่สุขภาพ</h2><img src="../images/tea2.jpg"style="position:absolute;left:0px;top:0px;z-index:-1" /><body></body> </html> Output
  • 80. Imageเราสามารถตกแต่งภาพด้วย border และใช้ filter ให้ภาพดูโปร่งใส (Transparent)สำาหรับ browser IE จะใช้ propetyfilter:alpha(opacity=0-100) ส่วน Firefox จะใช้ propertyopacity:0.0-1.0 ตัวเลขยิ่งน้อย ยิ่งดูโปร่งใสExample<html><body>ภาพปกติ<br /><img src="../images/lotus.jpg" /><br />ภาพโปร่งใส 50%<br /><img src="../images/lotus.jpg"style="filter:alpha(opacity=50); opacity:.50" /><body></html>Outputภาพปกติ
  • 81. ภาพโปร่งใส 50%เพิ่มลูกเล่นด้วย javascript (IE ใช้this.filters.alpha.opacity=100 ส่วน Firefox ใช้this.style.opacity=1)Example<html><body><imgsrc="../images/lotus.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>Outputลองเอา mouse เลื่อนบนภาพข้างล่างนี้ดูค่ะ
  • 82. Example<div style="margin:auto"><divstyle="width:300px;height:240px;background:url(../images/lotus_big.jpg) repeat;border:1px solid white;"><div style="width:280px;height:220px;border:10pxsolid white;filter:alpha (opacity=50);-moz-opacity:.50;opacity:.50;-khtml-opacity: 0.5;"></div></div></div>Output Opacity Border เราสามารถที่จะนำา style ไปสร้างเป็นclass เพื่อจะได้เรียกใช้งานซำ้าได้อย่างง่ายดาย เช่น class ที่จัดรูปให้่่ มีกรอบสีเทา และจัดชิดซ้าย เพื่อให้เราสามารถที่จะใส่ข้อความบรรยายด้านข้างได้Example<html><head><style type="text/css">.imgstyle {float:left; border:solid 1px #CCCCCC;padding:5px; margin-right:10px; }</style></head><body><div style="margin:5px"><imgsrc="../images/jusmine.jpg" class="imgstyle"
  • 83. /><em>มะลิ</em> เป็นไม้ดอกสีขาวที่มีกลิ่นหอม สามารถนำามาใช้ประโยชน์ได้หลายอย่าง เช่น เก็บดอกมาร้อยเป็นพวงมาลัยทำาเป็นดอกไม้แห้ง หรือนำามาสกัดทำานำ้ามันหอมระเหย</div><div style="clear:both;"></div><div style="margin:5px"><imgsrc="../images/rose.jpg" class="imgstyle"/><em>กุหลาบ</em> นับว่าเป็นไม้ดอกที่มีความงามยากที่ไม้ดอกอื่นจะเทียบเท่า จนได้รับชื่อว่าเป็น "ราชินีแห่งดอกไม้"(Queen of flower) กุหลาบมีมานานประมาณ 30 ล้านปีมาแล้ว</div><div style="clear:both;"></div></body><html>Output มะลิ เป็นไม้ดอกสีขาวที่มีกลิ่นหอม สามารถนำามาใช้ ประโยชน์ได้หลายอย่าง เช่น เก็บดอกมาร้อยเป็นพวง มาลัย ทำาเป็นดอกไม้แห้ง หรือนำามาสกัดทำานำ้ามันหอม ระเหย กุหลาบ นับว่าเป็นไม้ดอกที่มีความงามยากที่ไม้ดอกอื่นจะเทียบเท่า จนได้รับชื่อว่าเป็น "ราชินีแห่งดอกไม้"(Queen of flower) กุหลาบมีมานานประมาณ 30 ล้านปีมาแล้วLearn more in mandarindesign Blog Trashed byMandarinFormเรื่องของ CSS ที่เกี่ยวกับ Form มี 2 ส่วนที่อยากจะพูดถึงค่ะ ส่วนแรก คือ การตกแต่ง Form Elements ด้วย style sheet และส่วน
  • 84. ที่สอง คือ การทำา Form โดยไม่ใช้ Table หรือเรียกว่า TablelessForm Form Elementsเราสามารถตกแต่ง ส่วนประกอบของForm ได้แก่ inputbox, textarea, button เป็นต้น ให้มีสีสันที่สวยงามได้ ไปดูตวอย่างกันค่ะ ัExample - Text box<html><head><style type="text/css">.textbox_gray {color:#55555background-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/bg.png);border: 1px solid #999999;}.textbox_imgside {font-family: Tahoma, "ms sansSerif";font-size:12px;color:#0033CC;background-image: url(../images/mail.gif);background-repeat:no-repeat;background-position:left;border: 1pxsolid #3366CC;padding-left:16px;}</style></head><body><input type="text" size="30" value="enjoyday.net" /><br><br><input type="text" size="30" class="textbox_gray"value="enjoyday.net" /><br><br>
  • 85. <input type="text" size="30" class="textbox_yellow"value="enjoyday.net" /><br><br><input type="text" size="30" class="textbox_image"value="enjoyday.net" /><br><br><input type="text" size="30" class="textbox_imgside"value="admin@enjoyday.net" /></body></html>Outputการตกแต่ง Scroll bar ด้วย CSS จะพูดถึงในบทที่ 20Example - 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
  • 86. 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:1pxsolid #add8e6;font-size:12px}.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><textarea rows="4" cols="20" class="textarea1">ข้อความของคุณค่ะ....</textarea><textarea rows="4" cols="20" class="textarea2">ข้อความของคุณค่ะ..
  • 87. ..</textarea><br /><textarea rows="4" cols="20" class="textarea3">ข้อความของคุณค่ะ....</textarea><textarea rows="4" cols="20" class="textarea4">ข้อความของคุณค่ะ....</textarea></body></html> OutputExample - Textarea<html><head><style type="text/css">.textarea_a {width:300px; scrollbar-arrow-color:#000;scrollbar-face-color:#fff;scrollbar-highlight-
  • 88. color:#fff;scrollbar-3dlight-color:#fff;scrollbar-track-color:#fff;scrollbar-shadow-color:#fff;scrollbar-darkshadow-color:#fff;color:#000;border:1px solid#000;font-size:12px}.textarea_b {width:300px; scrollbar-arrow-color:#000;scrollbar-face-color:#fff;scrollbar-highlight-color:#fff;scrollbar-3dlight-color:#fff;scrollbar-track-color:#fff;scrollbar-shadow-color:#fff;scrollbar-darkshadow-color:#fff;color:#000;border-width:0;font-size:12px}.textarea_c {width:300px;scrollbar-arrow-color:#ff6699;scrollbar-face-color:#fff;scrollbar-highlight-color:#fff;scrollbar-3dlight-color:#fff;scrollbar-track-color:#fff;scrollbar-shadow-color:#fff;scrollbar-darkshadow-color:#fff;color:#ff6699;border-width:0;font-size:12px}</head><body><div style="border:1px solid #000;background:#add8e6; padding:5px; width:310px"><textarea rows="4" class="textarea_a">ข้อความของคุณค่ะ....</textarea></div>
  • 89. <br /><div style="border:1px solid#000;background:#fff;padding:4px; width:320px"><div style="border:1px solid #000;margin-bottom:4px"><div style="border-width:1px;border-style:solid;border-color:#fff #98cee0 #98cee0#fff;background:#add8e6;color:#000;text-align:center;font-size:12px;padding:4px">หัวข้อ</div></div><textarea rows="5" class="textarea_b">ข้อความของคุณค่ะ....</textarea></div><br /><div style="border:1px solid #ff6699; width:320px"><div style="border-width:1px;border-style:solid;border-color:#fff #ffbbbb #ffbbbb#fff;background:#ffcccc;padding:4px"><div style="border-width:1px;border-style:solid;border-color:#ffbbbb #fff #fff #ffbbbb"><div style="border:1px solid#ff6699;background:#fff;padding:2px"><textarea rows="5" class="textarea_c">ข้อความของคุณค่ะ...
  • 90. .</textarea></div></div></div></div></body></html>Outputหัวข้อExample - Button<html><head> <style type="text/css">.button_gray {font-family:Arial, Helvetica, sans-serif;font-weight:bold;color:#333333;background-color:#F7F7F7;border: 1px solid#000000;padding: 1px 0;}.button_image {font-family:Arial, Helvetica, sans-serif;color:#333333;background:url(images/button_bg.gif) 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">
  • 91. </body></html> Outputรูปที่ใช้ทำาปุ่มTableless Formเราสามารถกำาหนด Form เป็น 2 column โดยไม่ต้องใช้ Table ได้โดยกำาหนดความกว้างของ column แรกโดยใช้ tag <label>และ colunm ที่สอง จะเป็นพวก text box ทีวางต่อจาก column ่แรก credit to :http://www.dynamicdrive.com/style/csslibrary/item/css-tableless-form/ลองนำา code ไปปรับปรุงเปลี่ยนแปลงต่อได้ค่ะExample<html><head><style type="text/css">.cssform p{width: 300px;clear: left;margin: 0;padding:5px 0 8px 0;padding-left: 155px; /*width of left columncontaining the label elements*/border-top: 1px dashedgray;height: 1%;}.cssform label{font-weight: bold;float: left;margin-left:-155px; /*width of left column*/width: 150px; /*width of labels. Should be smaller thanleft column (155px) to create some right margin*/}.cssform input[type="text"]{ /*width of text boxes. IE6does not understand this attribute*/width: 180px;}.cssform textarea{width: 250px;height: 150px;}/*.threepxfix class below:Targets IE6- ONLY. Adds 3pixel indent for multi-line form contents.
  • 92. to account for 3 pixel bug:http://www.positioniseverything.net/explorer/threepxtest.html*/* html .threepxfix{margin-left: 3px;}</style></head><body><form id="myform" class="cssform" action=""><p><label for="user">Name</label><input type="text" id="user" value="" /></p><p><label for="emailaddress">Email Address:</label><input type="text" id="emailaddress" value="" /></p><p><label for="comments">Feedback:</label><textarea id="comments" rows="5"cols="25"></textarea></p><p><label for="comments">Sex:</label>Male: <input type="radio" name="sex" /> Female:<input type="radio" name="sex" /><br /></p><p><label for="comments">Hobbies:</label><input type="checkbox" name="hobby" /> Tennis<br /><input type="checkbox" name="hobby"
  • 93. class="threepxfix" /> Reading <br /><input type="checkbox" name="hobby"class="threepxfix" /> Basketball <br /></p><p><label for="terms">Agree to Terms?</label><input type="checkbox" id="terms" class="boxes" /></p><div style="margin-left: 150px;"><input type="submit" value="Submit" /> <inputtype="reset" value="reset" /></div></form></body></html>OutputNameEmail Address:Feedback:Sex: Male: Female:Hobbies: TennisReadingBasketballAgree to Terms?
  • 94. อีกตัวอย่าง สวยๆ ค่ะCredit to : http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.htmlExample<html><head><style type="text/css">body{font-family:"Lucida Grande", "Lucida SansUnicode", Verdana, Arial, Helvetica, sans-serif;font-size:12px;}p, h1, form, button{border:0; margin:0;padding:0;}.spacer{clear:both; height:1px;}/* ----------- My Form ----------- */.myform{margin:0 auto;width:400px;padding:14px;}/* ----------- stylized ----------- */#stylized{border:solid 2px#b7ddf2;background:#ebf4fb;}#stylized h1 {font-size:14px;font-weight:bold;margin-bottom:8px;}#stylized p{font-size:11px;color:#666666;margin-bottom:20px;border-bottom:solid 1px #b7ddf2;padding-bottom:10px;}#stylized label{display:block;font-weight:bold;text-align:right;width:140px;float:left;}#stylized .small{color:#666666;display:block;font-size:11px;font-weight:normal;text-align:right;width:140px;}#stylized input{float:left;font-size:12px;padding:4px2px;border:solid 1px #aacfe4;width:200px;margin:2px 020px 10px;}
  • 95. #stylized button{clear:both;margin-left:150px;width:125px;height:31pxbackground:#666666 url(img/button.png) no-repeat;text-align:center;line-height:31px;color:#FFFFFF;font-size:11px;font-weight:bold;}</style></head><body><div id="stylized" class="myform"><form id="form" name="form" method="post"action="index.html"><h1>Sign-up form</h1><p>This is the basic look of my form withouttable</p><label>Name<span class="small">Add your name</span></label><input type="text" name="name" id="name" /><label>Email<span class="small">Add a valid address</span></label><input type="text" name="email" id="email" /><label>Password<span class="small">Min. size 6 chars</span></label><input type="text" name="password" id="password" /><button type="submit">Sign-up</button><div class="spacer"></div></form></div>
  • 96. </body></html>OutputSign-up formThis is the basic look of my form without tableName Add your name Email Add a valid addressPassword Min. size 6 chars Sign-upMedia Types ในการกำาหนดการแสดงผลหน้าตาเว็บเพจ บนสื่อประเภทต่างๆ เราสามารถกำาหนด style ให้แตกต่างกันได้ เช่นตอนที่เราเห็นบนหน้าจอ (screen) กับตอนที่สั่งพิมพ์ออกกระดาษ(print) ให้แสดงผลไม่เหมือนกัน แล้วประเภทของสื่อมีอะไรบ้าง...Media Type • all - ใช้ในอุปกรณ์ทุกชนิด • aural - แสดงผลออกทางระบบช่วยอ่านออกเสียง •braille - แสดงผลออกทางเครื่องช่วยอ่านสำาหรับคนตาบอด •embossed - แสดงผลออกทางเครื่องพิมพ์สำาหรับคนตาบอด •handheld - แสดงผลออกทางจอภาพของเครื่องคอมพิวเตอร์ ชนิดพกพา (handheld) ซึงมีขนาดเล็ก ไม่สามารถแสดงสีได้ ่ (monochrome) และมีประสิทธิภาพในการรับส่งข้อมูลตำ่า •print - แสดงผลออกทางเครื่องพิมพ์ •projection - แสดงผลออกทางจอภาพที่มความต่าง ี สี(contrast) และความสว่าง(brightness) ตำ่า เช่น จอภาพ LCD, การแสดงผลผ่านเครื่อง projector •screen - แสดงผลออกทางจอภาพของเครื่องคอมพิวเตอร์ •tty - แสดงผลออกทางเทอร์มินัลชนิดตัวอักษรเท่านั้น เช่น โปรแกรม Lynx, เครื่องโทรพิมพ์
  • 97. •tv - แสดงผลออกทางจอภาพของเครื่องโทรทัศน์หากมีมากกว่า 1 media ให้ใช้ comma คั่น มาดูตวอย่างการใช้ ังานกันค่ะ ให้ตอนที่เราเห็นเว็บเพจบนหน้าจอ ตัวอักษรมีขนาด12px แต่ตอนที่เราสั่งพิมพ์ให้มีขนาด 50px และมีเส้นขีดคร่าตรงกลาง โดยทั้งตอนที่เห็นบนหน้าจอและเมื่อสั่งพิมพ์ให้เป็นตัวหนา่่ทั้งคู่ เขียน style sheet กำาหนดได้ดังนี้Example<html><head> <style> @media screen { p.special {font-family:Verdana,sans-serif; 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">Enjoyday.net</p></body></html>Outputลองเลือกเมนู File > Print Preview ... ดูวา่Enjoyday.net ด้านล่างนี้จะเปลี่ยนไปอย่างไรEnjoyday.netอีกตัวอย่างหนึ่งใช้สำาหรับตอนสั่งพิมพ์ค่ะ อาจจะมีบางส่วนของเว็บเพจ เช่น banner และโฆษณาต่างๆ ที่เราไม่ต้องการให้พิมพ์ออกมา เพื่อประหยัดหมึกพิมพ์ เราก็สามารถกำาหนดได้Example<html><head><style type="text/css">
  • 98. @media print{.noprint {visibility:hidden;}}</style></head><body><p>ข้อความตรงนี้พิมพ์ออกมาตามปกติ</p><p class="noprint">ข้อความตรงนี้ไม่ต้องพิมพ์ออกมา</p></body></html>เราสามารถ Copy คำาสั่ง style sheet แล้วบันทึกเป็นไฟล์ .cssจากนั้นจึงเรียกใช้จากภายนอกก็่ำ ได้ (External StyleSheet)file print.css.noprint {visibility:hidden;}file testnoprint.html<html><head><link rel="stylesheet" type="text/css"href="css/print.css" media="print" /></head><body><p>ข้อความตรงนี้พิมพ์ออกมาตามปกติ</p><p class="noprint">ข้อความตรงนี้ไม่ต้องพิมพ์ออกมา</p></body></html>Outputลองเลือกเมนู File > Print Preview ... ดูวา ข้อความข่าง ่ล่างนี้หายไปหรือไม่ข้อความตรงนี้พิมพ์ออกมาตามปกติข้อความตรงนี้ไม่ต้องพิมพ์ออกมาScroll barการกำาหนด style ให้กับ Scroll bar ใช้งานได้เฉพาะ IE5.5+ ไม่สามารถใช้ได้กับ FirefoxProperty Valu
  • 99. e coloscrollbar-face-color สีแถบที่เลื่อน rscrollbar-highlight- colo สีขอบด้านบน และด้านซ้าย ด้านcolor r ในscrollbar-shadow- colo สีขอบด้านล่าง และด้านขวา ด้านcolor r ในscrollbar-3dlight- colo สีขอบด้านบน และด้านซ้าย ด้านcolor r นอกscrollbar- colo สีขอบด้านล่าง และด้านขวา ด้านdarkshadow-color r นอกscrollbar-arrow- colo สีลูกศรcolor r coloscrollbar-track-color สีพื้นด้านล่าง rExample<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>
  • 100. <head><body>1. HTNL<br />2. CSS<br />3. XHTML<br />4. JavaScript<br />5. SQL</body><html>Outputดูผลที่ Scroll bar ด้านขวาของหน้าต่าง IE window หน้านี้ จะเป็นสีนำ้าเงินอ่อนส่วนไหนเป็นตรงไหน มาดูกันชัดๆ อีกที ที่ตัวอย่างนี้Example<html><head><style type="text/css">.divbar { width:200px; height:100px; overflow:scroll;/*ที่เลื่อน*/scrollbar-face-color:green;/*สีขอบด้านบน และด้านซ้าย ด้านใน*/scrollbar-highlight-color:white;/*สีขอบด้านล่าง และด้านขวา ด้านใน*/scrollbar-shadow-color:white;/*สีขอบด้านบน และด้านซ้าย ด้านนอก*/scrollbar-3dlight-color:red;/*สีขอบด้านล่าง และด้านขวา ด้านนอก*/scrollbar-darkshadow-color:black;/*ลูกศร*/scrollbar-arrow-color:yellow;/*พื้นด้านล่าง*/scrollbar-track-color:gray;}
  • 101. </style><head><body><div class="divbar">1. HTNL<br />2. CSS<br />3. XHTML<br />4. JavaScript<br />5. SQL<br /><br /><br /></div></body><html>Output 1.HTNL 2. CSS 3. XHTML 4. JavaScript 5. SQL Output scrollbar-face-color:#ff9999; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FFFFFF; scrollbar-3dlight-color:#ff6666; scrollbar-darkshadow-color:#ff6666; scrollbar-arrow-color:#ffffff; scrollbar-track-color:#ffcccc;OutputScrollbar-face-color: #6586B1;scrollbar-highlight-color: #E8EFF2;scrollbar-shadow-color: #E8EFF2;
  • 102. scrollbar-3dlight-color: #6586B1;scrollbar-darkshadow-color: #6586B1;scrollbar-track-color: #6586B1;scrollbar-arrow-color: #E8EFF2;Example<html><head><style type="text/css">.bar3 { width:200px; height:100px; background-color:#FCF1D8;scrollbar-face-color: #FBB917;scrollbar-highlight-color: #FFFFFF;scrollbar-shadow-color:#F88017; scrollbar-3dlight-color: #FDD017;scrollbar-darkshadow-color: #F87217;scrollbar-arrow-color:#FFFFFF;scrollbar-track-color: #FDD017;}</style><head><body><textarea class="bar3">1. HTNL2. CSS3. XHTML4. JavaScript5. SQL1. HTNL2. CSS3. XHTML4. JavaScript5. SQL</textarea></body><html>
  • 103. OutputMouse cursorการกำาหนด Style ให้กับ Mouse cursor หากคุณใช้ browserFirefox ลักษณะของ Cursor ที่เห็นจะไม่เหมือนกับของ IE (ลองเอาเมาส์เลื่อนที่ค่า value ต่างๆ ดูค่ะ)Property Value Cursor IE FFCursor Default 4+ 2+ Crosshair 4+ 2+ Hand 4+ Pointer 4+ 2+ Move 4+ 2+ Text 4+ 2+ Wait 4+ 2+ help 4+ 2+ n-resize 4+ 2+ ne-resize 4+ 2+ e-resize 4+ 2+ se-resize 4+ 2+ s-resize 4+ 2+ sw-resize 4+ 2+ w-resize 4+ 2+ nw-resize 4+ 2+ progress 6+ 2+ not-allowed 6+ 2+
  • 104. no-drop 6+ 2+ vertical-text 6+ 2+ all-scroll 6+ 2+ col-resize 6+ 2+ row-resize 6+ 2+ url(yourcursor.cur) 6+ 2+Example<a href="" style="cursor:help">Help</a><br /><a href="" style="cursor:url(images/cur002.cur)">Mykitty cursor (สำาหรับ IE) </a><br /><a href=""style="cursor:url(images/cur002.cur),auto">My kittycursor (สำาหรับ Firefox, IE ก็ยังใช้ได้)</a>Outputลองเอาเมาส์เลื่อนที่ข้อความด้านล่างดูคะ ่HelpMy kitty cursor (สำาหรับ IE)My kitty cursor (สำาหรับ Firefox, IE ก็ยังใช้ได้)Layoutในหน้าเว็บเพจหนึ่งประกอบไปด้วยส่วนหัวเว็บ (Page Header),ส่วนเนื้อหา และการเชื่อมโยง (Page Body), และส่วนท้าย (PageFooter) การจัดสรรพื้นที่ของหน้าเว็บเพจเพื่อแสดงส่วนประกอบเหล่านี้ ทำาได้หลายรูปแบบ เช่น แบ่งแบบอิสระ แบ่งแบบ 2 คอลัมน์และ 3 คอลัมน์ ตามที่ได้พูดถึงในเรื่องการออกแบบเว็บไซต์ (ถ้า
  • 105. จำาไม่ได้คลิกที่นี่เพื่ออ่าน) ในการลงมือเขียนเว็บเพจจริง การจัดรูปหน้าเว็บ (Layout) สามารถใช้ Table หรือ ใช้ Div ในการจัดวางส่วนประกอบของหน้าเว็บแต่การใช้ <table> ในการวางLayout หน้าเว็บเพจ ออกจะผิดวัตถุประสงค์ในการใช้งานของ<table> อยูบ้าง เนืองจากที่จริง <table> นั้นใช้ในการแสดง ่ ่ข้อมูลในรูปตาราง ปัจจุบันเว็บไซต์ต่างๆ เปลี่ยนจากการใช้ Tableจัดวาง Layout ให้หน้าเ่็ ว็บเพจ มาเป็นแบบ Tableless โดยใช้<div> และใช้ CSS ในการจัดตำาแหน่ง ขนาด และสี ให้กับ tag<div> แทน เพราะมีขอดีกว่าการใช้ Table การใช้ Table จะต้อง ้รอให้โหลดข้อมูลภายใน Table ทั้งหมดก่อน แล้วจึงแสดงผลข้อมูลทั้งหมดออกมาในคราวเดียว ทำาให้ตองรอนาน ไม่เหมือนกับ ้การใช้ Div ที่เมื่อโหลดเสร็จส่วนไหนก่อน ก็แสดงผลส่วนนั้นออกมาเลย การใช้ Div ยัง ทำาให้สามารถเปลียนแปลง CSS ได้ง่ายกว่า ่และไม่เยิ่นเย้อเหมือน Tableนอกจากนี้ยังเพิ่มความสามารถในการเข้าถึงข้อมูลให้กับคนพิการทางสายตา ซึ่งจะอาศัยโปรแกรมScreen Readers อ่านเนื้อหาในเว็บให้ฟัง การใช้ Table ซ้อนTable อาจทำาให้ Screen Readers อ่านข้อความผิดพลาดได้ แต่หากใช้ CSS เป็นตัวกำาหนดรูปแบบ และ กำาหนดเนื้อหาตัวหนังสือใน HTML เมื่อถอดตัว CSS ออกจาก HTML เอกสารก็จะแสดงผลไม่ต่างกับ Microsoft Word ที่อานง่ายขึ้น และถูกต้องยิ่งขึ้น ่Exampleการจัด Layout Page ด้วย Table แบบแบ่งเป็น 2คอลัมน์<table style="width:100%"><tr><td colspan="2" style="background-color:#09f;color:#fff"><h1>Web builder Tutorials</h1></td></tr><tr valign="top">
  • 106. <td style="background-color:#93C9FF; width:20%;text-align:top; "><b>Main Menu</b><br />HTML<br />CSS<br />XHTML<br />JavaScript</td><td style="height:200px; text-align:top;">แนะนำาการสร้างเว็บไซต์ ตั้งแต่พื้นฐาน สอนเขียนเว็บเพจด้วยHTML, จัดตกแต่งรูปแบบการแสดงผลด้วย CSS และก้าวสู่การสร้างเว็บไซต์แบบมาตรฐานด้วย XHTML สุดท้ายเพิ่มลูกเล่นให้เว็บไซต์ของเราด้วย JavaScript</td></tr><tr><td colspan="2" style="background-color:#09f; text-align:center; color:#fff">Copyright © 2009 enjoyday.net</td></tr></table>Output
  • 107. Web builder TutorialsMain Menu แนะนำาการสร้างเว็บไซต์ ตั้งแต่พื้นฐาน สอนเขียนHTML เว็บเพจด้วย HTML, จัดตกแต่งรูปแบบการแสดงผลCSS ด้วย CSS และก้าวสู่การสร้างเว็บไซต์แบบมาตรฐานXHTML ด้วย XHTML สุดท้ายเพิ่มลูกเล่นให้เว็บไซต์ของเราJavaScript ด้วย JavaScriptCopyright © 2009 enjoyday.netExampleการจัด Layout Page ด้วย Table แบบแบ่งเป็น 3คอลัมน์<table style="width:100%"><tr><td colspan="3" style="background-color:#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 />XHTML<br />JavaScript </td><td style="height:200px; text-align:top;">แนะนำาการสร้างเว็บไซต์ ตังแต่พื้นฐาน สอนเขียนเว็บเพจด้วย HTML, จัดตกแต่งรูป ้
  • 108. แบบการแสดงผลด้วย CSS และก้าวสู่การสร้างเว็บไซต์แบบมาตรฐานด้วย XHTML สุดท้ายเพิ่มลูกเล่นให้เว็บไซต์ของเราด้วยJavaScript</td><td style="background-color:#ffc; width:20%;text-align:top; "><b>Advertisment</b></td></tr><tr><td colspan="3" style="background-color:#09f; text-align:center; color:#fff">Copyright © 2009 enjoyday.net</td></tr></table>OutputWeb builder TutorialsMain Menu แนะนำาการสร้างเว็บไซต์ ตั้งแต่พื้นฐาน AdvertismHTML สอนเขียนเว็บเพจด้วย HTML, จัด entCSS ตกแต่งรูปแบบการแสดงผลด้วย CSSXHTML และก้าวสู่การสร้างเว็บไซต์แบบJavaScript มาตรฐานด้วย XHTML สุดท้ายเพิ่มลูก เล่นให้เว็บไซต์ของเราด้วย JavaScriptCopyright © 2009 enjoyday.netการจัด Layout ด้วย CSS (Div)
  • 109. แบ่งเป็น 4 แบบ คือ1. Fixed Layoutจะกำา หนดขนาดความกว้าง และตำา แหน่งของส่วนต่างๆ เป็น pixelทำาให้กำาหนดขนาด และตำาแหน่งของส่วนต่างๆ ได้ตามต้องการ ไม่ผิ ด เพี้ยนไปตามขนาดหน้ า จอ และเมื่อย่ อขยายหน้า ต่า งเว็บ เบราเซอร์ (IE, Firefox) แล้ว ตำา แหน่ งของส่ว นต่า งๆในหน้ า เว็บจะยั งคงเดิม ถ้าเราย่อขนาดเบราเซอร์ลงจะเกิดเป็น scrollbar เพื่อเลื่อนดูเนื้อหาที่มองไม่เห็น แต่มีข้อเสียคือไม่สามารถใช้พื้นที่หน้าจอได้อย่างเต็มที่เนื่องจากผู้ใช้แต่ละคนมีการกำา หนดความละเอียดของหน้ า จแตกต่ า งกั น ไป เช่ น 800x600, 1024x780 (มี ผู้ ใ ช้ ม ากที่ สุ ด ), 1280x800, 1280x960, 1280x1024 pixelเว็ บ ส่ ว นใหญ่จะออกแบบเพื่อรองรับความละเอียดหน้าจอที่ 800x600 เป็นหลักโดยกำา หนดความกว้ า งของเนื้ อ หาอยู่ ที่ 780 pixel และจะจั ด วางเนื้ อ หาอยู่ กึ่ ง กลางหน้ า จอ ทำา ให้ ผู้ ใ ช้ งานที่ ค วามละเอี ย ดหน้ า จอ800x600 จะเห็ น หน้ า เว็ บ เพจเต็ ม พอดี ส่ ว นผู้ ที่ ใ ช้ ค วามละเอี ย ดหน้าจอ 1024x780 จะเห็นเนื้อหาอยู่กึ่งกลางหน้าจอพื้นที่ด้านข้างที่เหลือจะเป็นพื้นหลังที่เป็นสีหรือรูปภาพแต่ถ้าเราออกแบบให้ผู้ที่ใช้ความละเอียดหน้าจอ 1024x780มองเห็นหน้าเว็บเต็มพอดี เมื่อผู้ ที่ ใ ช้ ค วามละเอี ย ดหน้ า จอ 800x600 ดู ห น้ า เว็ บ หน้ า เว็ บ จะเกิ นหน้าจอ เกิดเป็น scrollbar แนวนอน ต้องเลื่อนไปทางขวาจึงจะมองเนื้อหาทั้งหมดได้ แต่ปัจจุบัน (2009) ส่วนใหญ่มากกว่า 60% แล้วผู้ใช้จะใช้ความละเอียดหน้าจอที่ 1024x7802. LiquidLayoutจะกำา หนดขนาดความกว้ า งของส่ ว นต่ า งๆ เป็ นเปอร์เซ็นต์ เมื่อเราย่อหรือขยายขนาดของเว็บเบราเซอร์ ขนาดของส่ว นต่างๆ จะย่อขยายตามข้อดี คือ ทำา ให้ได้ใช้พื้นที่ใ นหน้า จอได้อย่างมuประสิทธิภาพ และทำา ให้แสดงผลบนอุปกรณ์อื่นๆ เช่น มือถือ ได้ดีข้อเสีย คือ การจัดวางองค์ประกอบต่างๆ นั้นทำาได้ค่อนข้างยาก เพราะขนาดไม่แน่นอน3. ElasticLayoutจะกำา หนดขนาดของส่ ว นต่ า ง ๆ เป็ น em ทำา ให้ส่ ว นต่า งๆ ย่ อ หรื อ ขยาย ตามการกำา หนดค่ า Text size ของเบราเซอร์ข้อดี คือ เมื่อเพิ่มหรือลดขนาดของตัวอักษรแล้ว ยังสามารถ
  • 110. คงรูปแบบการจัดวางส่วนต่างๆ ไว้ได้อย่างดีข้อเสีย คือ การจัดทำายุ่งยาก4. HybridLayout เป็นการใช้แบบต่างๆ มาผสมกัน เช่น Sidebarด้ า นข้ า ง ทั้ ง 2 ด้ า นเป็ น Elastic Layout ส่ ว นเนื้ อ หาเป็ น LiquidLayout เป็นต้นเมื่อเข้าใจเรื่องการจัดวาง Layout แบบต่างๆ แล้วที นี้ ม าดู ก ารเขี ย น code กั น ต่ อ ค่ ะ วิ ธี กา รไม่ ย ากแค่ เ พี ย งใช้โปรแกรม Dreamweaver เท่านั้น เวลาที่เรา New เอกสารใหม่ขึ้นมา จะมี ใ ห้ เ ราเลื อ กว่ า อยากจะได้ Layout แบบไหน จะแบ่ ง กี่คอลัมน์ ต้องการส่วน Header และ Footer หรือไม่ และเลือกได้ว่าจะให้ ส่ ว น style sheet ฝั ง อยู่ ใ นหน้ า เอกสารนั้ น เลย (Add toHead) หรือว่าแยกเป็นอีกไฟล์ต่า งหาก (Create New File) หรือจะให้ ใ ส่ style sheet รวมไปในไฟล์ style sheet ที่ เ รามี อ ยู่ แ ล้ ว(Link to Existing File) ก็ได้ค่ะ ExampleFixed Layout thrColFixHdr.cssBody {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; }
  • 111. /* ส่วน Page Body ที่บรรจุเนื้อหา */.thrColFixHdr #container { width: 780px; background:#FFFFFF;margin: 0 auto; /* the auto margins (inconjunction with a width) center the page */border: 1pxsolid #000000;text-align: left; /* this overrides the text-align: center on the body element. *} /* ส่วน คอลัมน์ดานซ้าย */ ้.thrColFixHdr #sidebar1 {float: leftwidth: 150background: #EBEBEB; padding: 15px 10px 15px20px; }/* ส่วน คอลัมน์ด้านขวา */.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}fixedlayout.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//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="thrColFixHdr.css" rel="stylesheet"
  • 112. type="text/css"></head><body class="thrColFixHdr"><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 forthe length of the content. If youd like a dividing lineinstead, place a border on the left side of the#mainContent div if it will always contain more content.</p><!-- end #sidebar1 --></div><div id="sidebar2"><h3>Sidebar2 Content</h3><p>The background color on this div will only show forthe length of the content. If youd like a dividing lineinstead, 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>ในหน้าเว็บเพจหนึ่งประกอบไปด้วยส่วนหัวเว็บ (PageHeader), ส่วนเนื้อหา และการเชื่อมโยง (Page Body), และส่วนท้าย (Page Footer) จัดสรรพื้นที่ของหน้าเว็บเพจเพื่อแสดงส่วนประกอบเหล่านี้ ทำาได้หลายรูปแบบ เช่น แบ่งแบบอิสระ แบ่งแบบ 2คอลัมน์ และ 3 คอลัมน์ </p>
  • 113. <p> ในการลงมือเขียนเว็บเพจ ปัจจุบันนิยมใช้ Div ในการจัดLayout มี 3 รูปแบบดังนี้</p> <h2>1. Fixed Layout </h2> <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></html> แบบ Fixed Layout นี้ สังเกตได้วา เวลาย่อขยายหน้าต่าง ่เบราเซอร์จะไม่มีผลต่อการจัดวางส่วนประกอบต่างๆ แต่จะเกิดเป็นscroll bar แทน ส่วนการจัด Layout แบบอื่นๆ ลองดูจากไฟล์เหล่านี้ หรือลองเล่นดูในโปรแกรม Dreamweaver ได้Pseudo-classes
  • 114. เป็น selector กลุ่มที่น่าสนใจที่จัดรูปแบบการแสดงผลโดยขึ้นกับสถานะ หรือเงื่อนไข เช่น link เมื่อถูกคลิกจะเปลี่ยนสี เป็นต้นselector:pseudo-class {property: value}selector.css-class:pseudo-class {property: value}Pseudo-class Purpose กำาหนด style ให้กับ link ปกติที่ยังไม่:link เคยถูก click กำาหนด style ให้กับ link ที่เคยถูก:visited คลิกแล้ว กำาหนด style ให้กับ link เมื่อเลื่อน:hover เมาส์ไปอยู่เหนือ link กำาหนด style ให้กับ link ขณะถูก:active คลิก กำาหนด style ให้กับ element ขณะ:focus ถูก focus กำาหนด style ให้กับ element ที่เป็น:first-child first child ของ element อื่นๆ Allows the author to specify a:lang language to use in a specified elementAnchor Pseudo-classes link ที่มสถานะ active, visited, ีunvisited, หรือเมื่อนำาเมาส์วางบน link เราสามารถกำาหนดรูปแบบให้แตกต่างกันได้Examplea: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_chapter24.html">Chapter24</a><a href="css_chapter25.html">Chapter25</a>Output
  • 115. Chapter24 Chapter25 หรือ จะเขียน Pseudo-classes กับ CSSClasses ก็ได้ถ้าต้องการระบุให้เฉพาะบาง link เท่านั้นที่แสดงผลต่างจะ link อื่นเขียนได้ดังนี้a.special:hover {color: #FF0000; background-color:#CCFF99}/* mouse over link สีแดง พื้นเขียว */<a class="special"href="css_chapter22.html">Chapter22</a><a class="special"href="css_chapter23.html">Chapter23</a><a href="css_chapter24.html">Chapter24</a><a href="css_chapter25.html">Chapter25</a>OutputChapter22 Chapter23 Chapter24 Chapter25 CSS2 - The:first-child Pseudo-class จะจัดรูปแบบการแสดงผลให้กับelement ที่พบอันแรกเท่านั้น สำาหรับ web browser IE จะ่้ ต้องประกาศ <!DOCTYPE> ด้วยExample<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><style type="text/css">p:first-child{color:blue}</style></head>
  • 116. <body><p> วันนี้อากาศแจ่มใส </p><p> วันนี้อากาศแจ่มใส </p><p><b>Note:</b> For :first-child to work in IE aDOCTYPE must be declared.</p></body></html>Output เฉพาะข้อความใน <p> อันแรกเท่านั้นที่เป็นสีนำ้าเงินวันนี้อากาศแจ่มใสวันนี้อากาศแจ่มใส< br /> Match the first <i> element in all<p> elementsตัวอย่างนี้ซบซ้อนขึ้น โดยจัดรูปแบบการแสดงผลให้ selector ั<i> ที่พบอันแรก ใน <p> elements ทุกๆ อันExample<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><style type="text/css">p > i:first-child{color:blue}</style></head><body><p>วันนี้อากาศ <i>แจ่มใส</i> วันนี้อากาศ<i>แจ่มใส</i></p><p>วันนี้อากาศ <i>แจ่มใส</i> วันนี้อากาศ<i>แจ่มใส</i></p>
  • 117. <p><b>Note:</b> For :first-child to work in IE aDOCTYPE must be declared.</p></body></html>Output <i>แจ่มใส</i> ที่พบตัวแรกใน <p> ทุกอัน จะ่ี ่ ่ เป็นสีนำ้าเงินวันนี้อากาศแจ่มใส วันนี้อากาศแจ่มใสวันนี้อากาศแจ่มใส วันนี้อากาศแจ่มใสMatch all <i> elements in all first child <p> elementsตัวอย่างนี้สลับกับข้างบน โดยจัดรูปแบบการแสดงผลให้ selector<i> ทุกอัน ที่พบใน <p> elements อันแรกExample<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><style type="text/css">p:first-child i{color:blue}</style></head><body><p>วันนี้อากาศ <i>แจ่มใส</i> วันนี้อากาศ<i>แจ่มใส</i></p><p>วันนี้อากาศ <i>แจ่มใส</i> วันนี้อากาศ<i>แจ่มใส</i></p><p><b>Note:</b> For :first-child to work in IE aDOCTYPE must be declared.</p></body></html>
  • 118. Output <i>แจ่มใส</i> ทุกอัน ที่พบใน <p> อันแรก จะเป็นสีนำ้าเงินวันนี้อากาศแจ่มใส วันนี้อากาศแจ่มใสวันนี้อากาศแจ่มใส วันนี้อากาศแจ่มใสCSS2 - The :lang Pseudo-classเราสามารถกำาหนด special rules สำาหรับภาษาต่างๆ ได้ แต่Pseudo-class *ใช้ไม่ได้กับ web browser IEExample<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><style type="text/css">q:lang(no){quotes: "~" "~"}</style></head><body><p>Some text <q lang="no">A quote in aparagraph</q>Some text.</p></body></html>OutputSome text ~A quote in a paragraph~ Some text.Pseudo-elementเป็น selector กลุ่มที่น่าสนใจที่จัดรูปแบบการแสดงผลโดยขึ้นกับสถานะ หรือเงื่อนไข เช่น เฉพาะอักษรตัวแรกใน <p> เท่านั้นที่เป็นตัวอักษรสีแดงตัวใหญ่ เป็นต้น
  • 119. selector:pseudo-element {property: value}selector.class:pseudo-element {property: value}Pseudo-element Purpose กำาหนด style ให้ตัวอักษรตัวแรกของ:first-letter ข้อความ กำาหนด style ให้กับข้อความบรรทัด:first-line แรก Inserts some content before the:before content of an element Inserts some content after the:after content of an elementThe :first-letter Pseudo-elementการกำาหนดรูปแบบให้กับตัวอักษรตัวแรกของ elementExample<html><head><style type="text/css">p:first-letter {color:#ff0000;font-size:xx-large}</style></head><body><p>Enjoyday.net</p></body></html>Output
  • 120. Enjoyday.net หรือ จะเขียน Pseudo-element กับ CSSClasses ก็ได้ถ้าต้องการระบุให้เฉพาะบาง paragraph เท่านั้นที่แสดงผล เขียนได้ดังนี้p.article:first-letter {color:#ff0000}<p class="article">Enjoyday.net</p><p>Enjoyday.net</p>OutputEnjoyday.netEnjoyday.netThe :first-line Pseudo-elementการกำาหนดรูปแบบให้กับตัวอักษรบรรทัดแรกของ elementExample<Html><head><style type="text/css">p:first-line {color:#0000ff}</style></head><body><p>Heath<br>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำาลังกาย และพักผ่อนให้เพียงพอ</p></body></html>OutputHealthรับประทานอาหารที่มีประโยชน์ หมั่นออกกำาลังกาย และพักผ่อนให้เพียงพอ
  • 121. Multiple Pseudo-elements เราสามารถนำาทั้ง 2 แบบมาเขียนผสมกันได้Example<html><head><style type="text/css">p:first-letter {color:#ff0000;font-size:xx-large}p:first-line {color:#0000ff}</style></head><body><p>Heath<br>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำาลังกาย และพักผ่อนให้เพียงพอ</p></body></html>OutputHealthรับประทานอาหารที่มีประโยชน์ หมั่นออกกำาลังกาย และพักผ่อนให้เพียงพอCSS2 - The :before Pseudo-element สามารถกำาหนดเพิ่มcontent บางอย่าง ก่อนแสดง content ของ element นั้นๆ *ใช้ไม่ได้กับ web browser IEExample<html><head>
  • 122. <style type="text/css">h1:before{content: url(../images/star_icons.gif)}</style></head><body><h1>This is a header</h1></body></html>Output This is a headerCSS2 - The :after Pseudo-element สามารถกำาหนดเพิ่มcontent บางอย่าง หลังจากแสดง content ของ element นั้นๆ*ใช้ไม่ได้กับ web browser IEExample<html><head><style type="text/css">h1:after{content: url(../images/star_icons.gif)}</style></head><body><h1>This is a header</h1></body></html>Output
  • 123. This is a header

×