รายงาน
- 1. รายงาน<br />เรื่อง CSS Table Design<br />จัดทำโดย<br />นาวสาว รำพรรณ วงค์ไชย เลขที่ 20<br />นางสาว ธารทิพย์ ศักดิ์แสน เลขที่ 11<br /> นางสาว บุษยา วงค์ศรี เลขที่ 12<br /> นางสาว พิมพา ผดุงกิจ เลขที่ 15<br /> นางสาว วาริวรรณ ชุ่มเชย เลขที่ 21<br />ชั้นมัธยมศึกษาปีที่ 4<br />เสนอ<br />อ. ฐิติพร ไหวดี<br />โรงเรียนทองสวัสดิ์วิทยาคาร<br />สำนักงานเขตพื้นที่ประศึกษา เขต 2<br /> คำนำ<br /> รายงานเล่มนี้จัดทำขึ้นเพื่อเป็นสื่อการเรียนการสอนให้แกน้องๆเพื่อพี่ๆทุกคน<br /> มีเนื้อหาในเรื่องนี้เกี่ยวกับการสอนวิธีใช่ CSS Table Design มีเนื้อหาบอกเล่าถึงวิธี<br /> การใช่งานหรือการเตรียมตัวก่อนเริ่มเรียน CSS ว่าจะต้องมีพื้นฐานในการใช้ HTML<br /> มาก่อนต้องขอขอบพระคุณ อ.ที่ปรึกษา อ.ฐิติพร ไหวดี เป็นอย่างสูง ที่ให้คำแนะนำ<br /> และคำติชมมาอย่างดี สุดท้ายนี้รายงานเล่มนี้หวังว่าคงจะเป็นประโยชน์กับเพื่อน <br /> พี่ๆ น้องๆ ไม่มากก็น้อยหากผิดพลาดประการใดต้องขออภัยมา ณ ที่นี้ด้วย<br /> จัดทำโดย<br /> นางสาว รำพรรณ วงค์ไชย เลขที่ 20<br /> นางสาว ธารทิพย์ ศักดิ์แสน เลขที่ 11<br /> นางสาว บุษยา วงค์ศรี เลขที่ 12<br /> นางสาว พิมพา ผดุงกิจ เลขที่ 15<br /> นางสาว วาริวรรณ ชุ่มเชย เลขที่ 21<br />สารบัญ<br />เรื่อง หน้า<br />Lntroduction <br />Syntax <br />Unit <br />Color <br />Lnsert a styleshee <br />Selector: HTML tag,class,id <br />Conlextual selectors <br />Font <br />Text <br />Background <br />Border <br />Margin,padding <br />Link <br />Table <br /> Classiflcation <br />Positioning <br />Lmage <br />Form <br />Scorll bar <br />Mouse cursor Media types <br />Layout(Table) <br />Layout(DIV) <br />Pseudo-classes <br />Pseudo-element <br />บรรณนุกรม <br />บรรณานุกรม<br />http://www.enjoyday.net/webtutorial/css/css_chapter02.html<br />CSS คืออะไร?<br />CSS ย่อมาจาก Cascading Style Sheets เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ และถูกกำหนดมาตรฐานโดย W3C (World Wide Web Consortium) เช่นเดียวกับ HTML และ XHTML ใช้สำหรับตกแต่งเอกสาร HTML/ XHTML ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการ ด้วยการกำหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML เช่น <body>, <p>, <h1> เป็นต้น<br />ประโยชน์ของ CSS<br />1. การใช้ 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 <br /><html><body><h1><font color=quot;
redquot;
face=quot;
Arialquot;
>วิธีดูแลรักษาสุขภาพ</font></h1> <p><font color=quot;
blackquot;
face=quot;
Arialquot;
><b>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</b></font></p><h1><font color=quot;
redquot;
face=quot;
Arialquot;
>วิธีกินผลไม้ที่ถูกต้อง</font></h1> <p><font color=quot;
blackquot;
face=quot;
Arialquot;
><b>ให้กินผลไม้แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ เพื่อให้ร่างกายจัดเตรียมการย่อยได้ง่าย ไม่สับสน นอกจากนี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</b></font></p></body></html><br />ตัวอย่างเมื่อเปลี่ยนมาใช้คำสั่ง style sheet จัดรูปแบบการแสดงผลแทนการใช้ code ภาษา HTML ทำให้ code ภายในเอกสารอ่านเข้าใจง่าย และแก้ไขได้ง่ายขึ้น ^^ <br /><html><head><style type=quot;
text/cssquot;
>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> <br />โครงสร้างคำสั่ง<br />คำสั่งของ CSS ประกอบด้วย selector, property และ value <br />selector { property:value } selector { property1:value1; property2:value2 }<br />- selector สามารถเป็น HTML Tag ต่างๆ เช่น <body>, <p> หรือเป็น Class name หรือ ID ที่เราตั้งชื่อให้ก็ได้- property คือ คุณสมบัติในการจัดรูปแบบการแสดงผล เช่น color สำหรับกำหนดสี, font-size สำหรับกำหนดขนาดตัวอักษร- value เป็น ค่า ที่เรากำหนดให้กับ property ต่างๆ เช่น color:white, font-size:14px<br />ตัวอย่างคำสั่ง CSS<br />กำหนดให้ข้อความที่อยู่ใน Tag <p> เป็นสีดำ และวางอยู่กึ่งกลาง<br />/* selector ที่เป็น HTML Tag */p {color:#000000;text-align:center} <br />กำหนดให้ข้อความที่ class name topic เป็นสีแดง ชนิดอักษรเป็น Arial ตัวหนา และจัดวางอยู่กึ่งกลาง<br />/* selector ที่เป็น Class name */.topic{color:red; font-family:Arial; font-weight:bold; text-align:center } <br />กรณีที่ selector มีค่า property เหมือนกัน สามารถเขียนรวมกันได้ โดยใช้เครื่องหมาย quot;
,quot;
คั่นระหว่าง selectorกำหนดให้ข้อความใน Tag <h1>,<h2> และ <h3> เป็นสีแดง ชนิดตัวอักษรเป็น sans-serif<br />h1, h2, h3 {color:red;font-family:sans-serif } <br />สำหรับเรื่อง property และ value จะได้ศึกษาอย่างละเอียดในหัวข้อต่อๆ ไป Comment <br />ใน Style Sheet Comment จะใช้เครื่องหมาย quot;
/*quot;
เป็นการเปิด และ quot;
*/quot;
เป็นการปิด เช่น <br />/* นี่คือ comment กำหนดสีตัวอักษรเป็นสีดำ ขนาด14px */body {color:#000000;font-size:14px} <br />หน่วยที่ใช้วัดค่าต่างๆ ใน Style Sheet<br />จาก syntax ของคำสั่ง CSS ค่า value ของ property บางค่าจะต้องมีการระบุหน่วยด้วย หน่วยที่ใช้งานใน CSS มีอะไรบ้าง มาดูกันค่ะหน่วยแบบ Relative Length (กำหนดแบบอัตราส่วน) <br />px (pixels, สัมพันธ์กับค่าความละเอียดของหน้าจอ) เช่น 1px, 4px<br />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 เหมือนเดิม <br />ex (x-height, ความสูงของตัวอักษร quot;
xquot;
) เช่น 1.5ex, 2ex<br />% (percent, สัมพันธ์กับขนาดหน้าจอ หรือ container ที่บรรจุวัตถุนั้นๆ อยู่) เช่น 50%, 130%<br />หน่วยแบบ Absolute Length (กำหนดตายตัว) <br />in (inches; 1in=2.54cm =72pt =6pc) เช่น 2in, 1.5in<br />cm (centimeters; 1cm=10mm) เช่น 2cm, 1.11cm<br />mm (millimeters) เช่น 50mm, 0.8mm <br />pt (points; 1pt=1/72in, 10pt มีขนาดพอๆกับ 12px) เป็นหน่วยที่ใช้ในงานสิ่งพิมพเช่น 12pt, 20pt <br />pc (picas; 1pc=12pt) เช่น 1pc, 2pc<br />สี (Color)<br />การกำหนดสีให้ตัวอักษร พื้นหลัง เส้นขอบ หรือส่วนอื่นๆ ของวัตถุ สามารถกำหนดได้หลายแบบ1. กำหนดโดยใช้ชื่อสี แต่การระบุชื่อสีแบบนี้ใช้สีได้จำนวนจำกัด ได้แก่ aqua, black, blue, fuchsia (แดงอมม่วง), gray, green, lime, maroon (น้ำตาลแดง), navy, olive, purple, red, silver, teal (เขียวขนเป็ด), white, และ yellow 2. กำหนดเป็นค่าสีแบบ RGB <br />#rrggbb เช่น #eecc00, #42e15e<br />#rgb เช่น #ec0 หมายถึง #eecc00 <br />rgb(x,x,x) โดยที่่ x คือจำนวนเต็มตั้งแต่ 0-255 เช่น rgb(0,204,0) <br />rgb(y%,y%,y%) โดยที่ี่ y คือเปอร์เซ็นต์ตั้งแต่ 0%-100% เช่น rgb(0%,80%,0%) <br />ชื่อสีรหัสค่าสีฐาน16รหัสค่าสีฐาน16 แบบย่อRGBการแสดงผลสีBlack#000000#000rgb(0,0,0) Red#FF0000#F00rgb(0,0,0) Green#00FF00#F00rgb(0,255,0) Blue#0000FF#00Frgb(0,0,255) Yellow#FFFF00#FF0rgb(255,255,0) Aqua#00FFFF#FF0rgb(0,255,255) Fuchsia#FF00FF#FF0rgb(255,0,255) Silver#C0C0C0 rgb(192,192,192) White#FFFFFF#FFFrgb(255,255,255) <br />วิธีใช้งาน Style Sheet<br />1. Inline Styles วิธีการนี้ควรใช้ในกรณีที่ต้องการกำหนด style ให้กับ element ของ HTML เีพียงอันเดียวเป็นการเฉพาะ โดยการแทรกคำสั่ง style sheet ใน HTML Tag อยู่ในคำสั่ง style=quot;
quot;
ดังนี้ <br /><Tag style=quot;
property:value;quot;
> <br />Example<br /><html><body><h1 style=quot;
color:red; font-family:Arialquot;
>วิธีดูแลรักษาสุขภาพ</h1><p style=quot;
color:black; font-family:Arial; font-weight:boldquot;
>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p> </body></html> <br />เราควรหลีกเลี่ยงการเขียน style=”quot;
ฝังลงใน HTML Tag เพราะมันทำให้อ่านยาก และนำไปใช้ต่อไม่ได้ และเป็นการยากที่จะแก้ไข2. Internal Style Sheet วิธีการนี้ควรใช้ในกรณีที่มีเพียง HTML ไฟล์เดียวที่ใช้ style นี้ เมื่อประกาศคำสั่ง Style Sheet เพื่อกำหนดคุณสมบัติ ให้กับ HTML Tag ใดๆ แล้ว จะมีผลกับเอกสาร HTML ทั้งหน้า นิยมใส่ส่วนของคำสั่ง Style Sheet ไว้ระหว่าง <head>...</head>สำหรับ Web Browser รุ่นเก่าที่ไม่สนับสนุนคำสั่ง Style Sheet หรือ Disable Style Sheet ไว้นั้น ให้ใส่ Comment ของ ภาษา HTML ไว้ด้วย เพื่อให้เว็บเบราเซอร์นั้นทราบว่าไม่ใช่คำสั่งภาษา HTML <br />คำสั่งที่ใช้เริ่มต้น และจบ Style Sheet มีโครงสร้างดังนี้ <br /><style type=quot;
text/cssquot;
><!--selector {property1: value1; property2: value2}....--></style> <br />Example<br /><html><br /><body><br /><head><br /><style type=quot;
text/cssquot;
><br /><!-- <br /> h1{color:red; font-family:Arial }<br /> p{color:black; font-family:Arial; font-weight:bold }<br />--> <br /></style><br /></head><br /><body> <br /><h1>วิธีดูแลรักษาสุขภาพ</h1><br /><p>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p><br /><h1>วิธีกินผลไม้ที่ถูกต้อง</h1><br /><p>ให้กินผลไม้แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ เพื่อให้ร่างกายจัดเตรียมการย่อยได้ง่าย <br />ไม่สับสน นอกจากนี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</p> <br /></body><br /></html><br />3. External Style Sheet วิธีการนี้เหมาะกับกรณีที่มีเพียง 1 style แล้วต้องการนำไปใช้กับเอกสาร HTML หลายๆ ไฟล์ โดยนำเอาคำสั่ง Style Sheet ที่อยู่ใน <style type=quot;
text/cssquot;
> ... </style> มาบันทึกเป็นไฟล์ใหม่ นามสกุล .css จากนั้นจึงทำการผนวกไฟล์ของ Style Sheet นี้ลงไปในเอกสาร HTML ทุกไฟล์ที่ต้องการใช้งาน Style Sheet ชุดนี้ ไว้ในส่วน <head>...</head> โดยใช้คำสั่ง <br /><link rel=quot;
stylesheetquot;
type=quot;
text/cssquot;
href=quot;
URL ไฟล์.cssquot;
><br />ตัวอย่างนี้จะสร้าง Style Sheet เก็บไว้ในไฟล์หนึ่ง แล้วให้ไฟล์เอกสาร HTML หลายๆ หน้ามาเรียกใช้<br />Example <br />ในไฟล์ mystyle.css ให้เขียน code ดังนี้ <br />h1{ color:red; font-family:Arial }p{ color:black; font-family:Arial; font-weight:bold }<br />ในไฟล์ HTML ex_css_chapter05_3.html เรียกใช้ style sheet จากภายนอก <br /><html><br /><head><br /><link rel=quot;
stylesheetquot;
type=quot;
text/cssquot;
href=quot;
mystyle.cssquot;
><br /></head><br /><body> <br /> <h1>วิธีดูแลรักษาสุขภาพ</h1><br /> <p>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p><br /></body><br /></html><br />ในไฟล์ HTML ex_css_chapter05_4.html เรียกใช้ style sheet จากภายนอก <br /><html><br /><head><br /><link rel=quot;
stylesheetquot;
type=quot;
text/cssquot;
href=quot;
mystyle.cssquot;
><br /></head><br /><body> <br /> <h1>วิธีกินผลไม้ที่ถูกต้อง</h1><br /> <p>ให้กินผลไม้แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ เพื่อให้ร่างกายจัดเตรียมการย่อยได้ง่าย <br />ไม่สับสน นอกจากนี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</p> <br /></body><br /></html> <br />การที่เราใช้งาน CSS โดยเรียกใช้จากภายนอก จะทำให้ไฟล์เวบเพจของเรามีขนาดเล็ก และการแก้ไขคำสั่ง style sheet เพียงที่เดียว จะมีผลกับเอกสารทุกหน้าได้ Cascading Order<br />1. กรณีที่มีการกำหนด style ด้วยชื่อ selector เดียวกันทั้งแบบ 3 แบบ Style sheet ที่จะถูกใช้คือแบบไหนลำดับความสำคัญ เรียงจากมากไปหาน้อยInline style (inside an HTML element), Internal style sheet (inside the <head> tag) และ External style sheet ตามลำดับจากลำดับความสำคัญดังกล่าว Style ที่จะถูกใช้คือแบบ Inline style2. กรณีที่มีการเขียน 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> จะได้ตัวอักษรสีดำ<br />การเขียนคำสั่ง Style Sheet<br />Selector ที่เป็น HTML TagExample <br /><html><br /><body><br /><head><br /><style type=quot;
text/cssquot;
><!-- <br /> h1{color:red; font-family:Arial }<br /> p{color:black; font-family:Arial }<br />--> </style><br /></head><br /><body> <br /><h1>วิธีดูแลรักษาสุขภาพ</h1><br /><p>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p><br /><h1>วิธีกินผลไม้ที่ถูกต้อง</h1><br /><p>ให้กินผลไม้แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ เพื่อให้ร่างกายจัดเตรียมการย่อยได้ง่าย <br />ไม่สับสน นอกจากนี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</p> <br /></body><br /></html><br />ตัวอย่างนี้เห็นกันมาหลายรอบแล้วนะคะ เป็นการกำหนด style ให้กับ HTML Tag <h1> และ <p> หมายความว่าข้อความภายใน <h1> ทุกอันในหน้าเว็บเพจนี้ให้เป็นสีแดง และข้อความใน <p> ทุกอันให้เป็นสีดำ <br />มาดู selector แบบอื่นๆ กันบ้างSelector ที่เป็น Class attribute เป็นการประกาศคำสั่ง Style Sheet เพื่อกำหนดคุณสมบัติแบบเฉพาะเจาะจง ให้กับ HTML element ผ่าน class attribute โดยเราสามารถตั้งชื่อ class ได้เอง class ใช้เมื่อต้องการใช้แสดงผลรูปแบบนั้นซ้ำหลายๆ ครั้ง หรือต้องการใช้กับ element หลายๆ อัน การประกาศใช้้เครื่องหมาย quot;
.quot;
นำหน้าชื่อ classExample <br /><html><br /><head><br /><style type=quot;
text/cssquot;
><br /><!--<br /> .topic {color:red; <br />font-family:Arial; <br />font-weight:bold; <br />text-align:center <br /> } <br /> .content {color:black; <br />font-family:Arial; <br /> } <br />--><br /></style><br /></head><br /><!-- การเรียกใช้งาน --> <br /><body> <br /> <div class=quot;
topicquot;
>บทความ</div><br /> <p class=quot;
topicquot;
>วิธีดูแลรักษาสุขภาพ</p><br /> <p class=quot;
contentquot;
>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p><br /> <p class=quot;
topicquot;
>วิธีกินผลไม้ที่ถูกต้อง</p><br /> <p class=quot;
contentquot;
>ให้กินผลไม้แค่ทีละอย่าง เช่น จะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ<br />เพื่อให้ร่างกายจัดเตรียมการย่อยได้ง่าย ไม่สับสน นอกจากนี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร <br />ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</p><br /> <p>หันมาใส่ใจสุขภาพกันเถอะค่ะ</p> <br /></body><br /></html> <br />จากตัวอย่างสังเกตได้ว่า class topic ถูกเรียกใช้หลายครั้งใน <p> และ ถูกใช้้ในหลาย element ได้ คือ <p> และ <div> แต่ถ้าต้องการกำหนดให้ class topic ใช้งานเฉพาะกับ <p> เท่านั้น ทำได้โดยใส่ quot;
p.quot;
นำหน้าชื่อ classจะมีผลทำให้ข้อความใน <div class=quot;
topicquot;
>บทความ</div> ไม่สามารถแสดงผลตามรูปแบบที่กำหนดใน class topic ได้ <br />p.topic{color:red; font-family:Arial; font-weight:bold; text-align:center } <br />กรณีที่ต้องการให้แสดงผลตามรูปแบบที่กำหนดใน 2 class ก็สามารถทำได้ <br />Example <br /><html><br /><head><br /><style type=quot;
text/cssquot;
><br /> p.center {text-align:center}<br /> p.bold{ font-weight:bold}<br /></style><br /></head><br /><body><br /> <p class=quot;
center boldquot;
>ข้อความในพารากราฟนี้จะจัดวางกึ่งกลาง และเป็นตัวหนา</p><br /></body><br /></html> <br />Selector ที่เป็น ID attributeเป็นการประกาศคำสั่ง Style Sheet เพื่อกำหนดคุณสมบัติแบบเฉพาะเจาะจง ให้กับ HTML element ผ่าน ID attribute เหมือนกับ Class แต่ต่างกันที่ ID จะใช้กับ element ที่มีเพียงอันเดียวในเอกสาร HTML การประกาศใช้ # นำหน้า ID <br />Example <br /><html><br /><head><br /><style type=quot;
text/cssquot;
><br /> p {text-align: center}<br /> #chapter {color:red; font-weight:bold}<br /> /*หรือเขียนเป็น p#chapter ก็ได้*/<br /></style><br /></head><br /><body><br /> <p id=quot;
chapterquot;
>Chapter ข้อความในนี้จัดวางกึ่งกลาง และเป็นสีแดง ตัวหนา</p><br /> <p>เนื้อหา ข้อความในนี้จัดวางกึ่งกลาง</p><br /> <p>เนื้อหา ข้อความในนี้จัดวางกึ่งกลาง</p><br /></body><br /></html> <br />อาจจะยังไม่เข้าใจตอนนี้ ไว้เห็นตัวอย่างมากๆ เข้า จะค่อยๆ เข้าใจเองค่ะ แล้วจะรู้ได้อย่างไรว่าค่า property และ value เช่น text-align: center, font-weight:bold มีอะไรบ้าง อันนี้ศึกษาได้จาก Chapter ต่อๆ ไป<br />Contextual selectors <br />การประกาศ selector ซ้อนกัน โดยเคาะ spacebar ทำให้สามารถสืบทอดคุณสมบัติเดิม และเพิ่มคุณสมบัติที่แตกต่างได้ ดูตัวอย่างเพื่อให้เข้าใจมากขึ้นค่ะExample <br /><html><head><style type=quot;
text/cssquot;
>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> <br />Output ข้อความใน <h1> จะเป็นสีน้ำเงิน แต่ถ้ามีการกำหนดว่าเป็นตัวเอียงแล้ว ข้อความใน <h1> จะเป็นสีแดง หรือระบุว่าขีดเส้นใต้แล้วจะได้เป็นสีเขียว โดยที่รูปแบบพื้นหลังของ <h1> ยังคงอยู่ <br />วิธีรักษาสุขภาพ<br />วิธีลดน้ำหนัก<br />วิธีรักษาสุขภาพ<br />วิธีรักษาสุขภาพ<br />อีกตัวอย่างหนึ่ง เพื่อแสดงให้เห็นประโยชน์ของการใช้ Contextual selectorsExample <br /><html><head><style type=quot;
text/cssquot;
>/*ให้ img ทั่วไป ขอบสีเทา หนา2*/img {border:solid;border-width:2px;border-color:#999999;}<br />/*ให้ 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><br /><body><br /><img src=quot;
../images/star_icons.gifquot;
/><img src=quot;
../images/star_icons.gifquot;
/><img src=quot;
../images/star_icons.gifquot;
/><br><br><br />แบบนี้ไม่ดี ต้องมาระบุ class borderimage ให้แต่ละรูป<br /><img src=quot;
../images/star_icons.gifquot;
class=quot;
borderimagequot;
/><img src=quot;
../images/star_icons.gifquot;
class=quot;
borderimagequot;
/><img src=quot;
../images/star_icons.gifquot;
class=quot;
borderimagequot;
/><br><br><br />แบบนี้ดี img ที่อยู่ในส่วน div class imgspecial_box จะเป็นขอบแดง หนา5 ให้ทั้งหมด ไม่ต้องมากำหนดทีละรูป<div id=quot;
imgspecial_boxquot;
><img src=quot;
../images/star_icons.gifquot;
/><img src=quot;
../images/star_icons.gifquot;
/><img src=quot;
../images/star_icons.gifquot;
/></div><br /></body></html><br />Output<br />แบบนี้ไม่ดี ต้องมาระบุ class borderimage ให้แต่ละรูปแบบนี้ดี img ที่อยู่ในส่วน div class imgspecial_box จะเป็นขอบแดง หนา5 ให้ทั้งหมด ไม่ต้องมากำหนดทีละรูป <br />มาดูอีกตัวอย่างที่ไม่ดี คล้ายกับตัวอย่างข้างบน เป็นตัวอย่างที่ใช้ CSS มากเกินไปExample <br /><html><head><title>ex_css_chapter07_3</title><style type=quot;
text/cssquot;
>a.boldlink { color:blue; font-weight:bold; }</style></head><br /><body><a href=quot;
http://www.enjoyday.net/webtutorial/html/index.htmlquot;
class=quot;
boldlinkquot;
>HTML</a><br /><a href=quot;
http://www.enjoyday.net/webtutorial/css/index.htmlquot;
class=quot;
boldlinkquot;
>CSS</a><br /><a href=quot;
http://www.enjoyday.net/webtutorial/xhtml/index.htmlquot;
class=quot;
boldlinkquot;
>XHTML</a><br /><a href=quot;
http://www.enjoyday.net/webtutorial/javascript/index.htmlquot;
class=quot;
boldlinkquot;
>JavaScript</a></body></html><br />แก้ไขใหม่เขียนแบบ Contextual selectors จะดีกว่าค่ะ<br /><html><head><title>ex_css_chapter07_3</title><style type=quot;
text/cssquot;
>#boldlink_box a { color:blue; font-weight:bold; } </style></head><br /><body><div id=quot;
boldlink_boxquot;
><a href=quot;
http://www.enjoyday.net/webtutorial/html/index.htmlquot;
>HTML</a><br /><a href=quot;
http://www.enjoyday.net/webtutorial/css/index.htmlquot;
>CSS</a><br /><a href=quot;
http://www.enjoyday.net/webtutorial/xhtml/index.htmlquot;
>XHTML</a><br /><a href=quot;
http://www.enjoyday.net/webtutorial/javascript/index.htmlquot;
>JavaScript</a> </div></body></html><br />Output<br />HTMLCSSXHTMLJavaScript <br />Font<br />การกำหนดลักษณะให้ตัวอักษร ใน HTML เราจะใช้ tag <font face=quot;
ชนิดตัวอักษรquot;
size=quot;
numberquot;
color=quot;
สีquot;
>ข้อความ</font> น่าจะพอจำกันได้อยู่ แต่ในเอกสาร HTML/XHTML แบบ strict จะถือว่า tag <font> เป็น tag ที่ล้าสมัยแล้ว ไม่สามารถนำมาใช้งานได้ ให้เราใช้ CSS แทนค่ะ<br />เรา็สามารถใช้ CSS กำหนดลักษณะให้ตัวอักษรได้ โดยกำหนดรูปแบบ font ผ่าน Property ต่างๆ ให้กับ HTML element เช่น <p>,<div>,<span>,<h1> และอื่นๆ<br />PropertyDescriptionValuesfont-familyใช้กำหนดชนิด font ที่ต้องการจะให้แสดงผล โดยที่ font นั้นจะต้องมีอยู่ในเครื่องของผู้ใช้งานด้วย เช่น Arial, Helvetica, sans-serif font-sizeใช้กำหนดขนาดของตัวอักษร ที่จะให้แสดงผล /td> xx-small x-smallsmallmediumlargex-largexx-large smaller larger 18px70% 150% font-styleใช้กำหนดรูปแบบของตัวอักษรในลักษณะต่างๆ normalitalicoblique เอียง 45 องศา font-variantใช้แปลงตัวอักษรที่เป็นตัวพิมพ์เล็กให้เป็นพิมพ์ใหญ่โดยที่ขนาดตัวอักษรยังคงเท่าตัวพิมพ์เล็ก normalSmall-Capsfont-weightใช้กำหนดความหนาของตัวอักษร normalboldbolderlighter100200300400500600colorใช้กำหนดสีให้ตัวอักษรred#000099 fontเราสามารถกำหนด property ให้กับ font ได้ในคำสั่งประกาศเดียวfont-stylefont-variantfont-weightfont-sizefont-family <br />Example <br /><p style=quot;
font-family:AngsanaUPC; font-size:16pt; color:greenquot;
>CSS ย่อมาจาก Cascading Style Sheet เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ และถูกกำหนดมาตรฐานโดย W3C (World Wide Web Consortium) เช่นเดียวกับ HTML และ XHTML ใช้สำหรับตกแต่งเอกสาร HTML/ XHTM ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการ ด้วยการกำหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML </p><br />Output<br />CSS ย่อมาจาก Cascading Style Sheet เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ และถูกกำหนดมาตรฐานโดย W3C (World Wide Web Consortium) เช่นเดียวกับ HTML และ XHTML ใช้สำหรับตกแต่งเอกสาร HTML/ XHTM ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการ ด้วยการกำหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML <br />Example <br /><p style=quot;
font-weight:boldquot;
>Love me Love my dog</p><br /><p style=quot;
font-family: sans-serif, Arial; font-size:16px; font-style:normal; font-variant:small-caps; font-weight:bold; color:#FF0033quot;
>Love me Love my dog</p><br /><!-- เขียนอย่างย่อได้เป็น --><p style=quot;
font: normal small-caps bold 16px sans-serif, Arial; color:#FF0033quot;
>Love me Love my dog</p> <br />Output<br />Love me Love my dog<br />Love me Love my dog<br />Love me Love my dog<br />Form<br />เรื่องของ CSS ที่เกี่ยวกับ Form มี 2 ส่วนที่อยากจะพูดถึงค่ะ ส่วนแรก คือ การตกแต่ง Form Elements ด้วย style sheet และส่วนที่สอง คือ การทำ Form โดยไม่ใช้ Table หรือเรียกว่า Tableless Form Form Elementsเราสามารถตกแต่ง ส่วนประกอบของ Form ได้แก่ inputbox, textarea, button เป็นต้น ให้มีสีสันที่สวยงามได้ ไปดูตัวอย่างกันค่ะ <br />Example - Text box <br /><html><head><style type=quot;
text/cssquot;
>.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, quot;
ms sans Serifquot;
;font-size:12px;color:#0033CC;background-image: url(../images/mail.gif);background-repeat:no-repeat;background-position:left;border: 1px solid #3366CC;padding-left:16px;}</style></head><body><input type=quot;
textquot;
size=quot;
30quot;
value=quot;
enjoyday.netquot;
/> <br><br><input type=quot;
textquot;
size=quot;
30quot;
class=quot;
textbox_grayquot;
value=quot;
enjoyday.netquot;
/><br><br><input type=quot;
textquot;
size=quot;
30quot;
class=quot;
textbox_yellowquot;
value=quot;
enjoyday.netquot;
/><br><br><input type=quot;
textquot;
size=quot;
30quot;
class=quot;
textbox_imagequot;
value=quot;
enjoyday.netquot;
/><br><br><input type=quot;
textquot;
size=quot;
30quot;
class=quot;
textbox_imgsidequot;
value=quot;
admin@enjoyday.netquot;
/> </body></html> <br />Output <br />การตกแต่ง Scroll bar ด้วย CSS จะพูดถึงในบทที่ 20Example - Textarea <br /><html><head><style type=quot;
text/cssquot;
>.textarea1 {scrollbar-arrow-color:#000;scrollbar-face-color:#face00;scrollbar-highlight-color:#fff;scrollbar-3dlight-color:#000;scrollbar-track-color:#fff;scrollbar-shadow-color:#face00;scrollbar-darkshadow-color:#000;border:1px solid #000;font-size:12px}.textarea2 {scrollbar-arrow-color:#000;scrollbar-face-color:#fff;scrollbar-highlight-color:#fff;scrollbar-3dlight-color:#000;scrollbar-track-color:#fff;scrollbar-shadow-color:#fff;scrollbar-darkshadow-color:#000;color:#000;border:1px solid #000000;font-size:12px} .textarea3 {scrollbar-arrow-color:#add8e6;scrollbar-face-color:#fff;scrollbar-highlight-color:#fff;scrollbar-3dlight-color:#add8e6;scrollbar-track-color:#fff;scrollbar-shadow-color:#fff;scrollbar-darkshadow-color:#add8e6;color:#197bff;border:1px solid #add8e6; font-size:12px} .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=quot;
4quot;
cols=quot;
20quot;
class=quot;
textarea1quot;
>ข้อความของคุณค่ะ....</textarea><br /><textarea rows=quot;
4quot;
cols=quot;
20quot;
class=quot;
textarea2quot;
>ข้อความของคุณค่ะ....</textarea><br /><br /><br /><textarea rows=quot;
4quot;
cols=quot;
20quot;
class=quot;
textarea3quot;
>ข้อความของคุณค่ะ....</textarea><br /><textarea rows=quot;
4quot;
cols=quot;
20quot;
class=quot;
textarea4quot;
>ข้อความของคุณค่ะ....</textarea><br /></body></html><br /> <br />Output <br />Example - Textarea <br /><html><head><style type=quot;
text/cssquot;
>.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}.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=quot;
border:1px solid #000; background:#add8e6; padding:5px; width:310pxquot;
><textarea rows=quot;
4quot;
class=quot;
textarea_aquot;
>ข้อความของคุณค่ะ....</textarea></div><br /><br /><br /><div style=quot;
border:1px solid #000;background:#fff;padding:4px; width:320pxquot;
><div style=quot;
border:1px solid #000;margin-bottom:4pxquot;
><div style=quot;
border-width:1px;border-style:solid;border-color:#fff #98cee0 #98cee0 #fff;background:#add8e6;color:#000;text-align:center;font-size:12px;padding:4pxquot;
>หัวข้อ</div></div><textarea rows=quot;
5quot;
class=quot;
textarea_bquot;
>ข้อความของคุณค่ะ....</textarea></div><br /><br /><br /><div style=quot;
border:1px solid #ff6699; width:320pxquot;
><div style=quot;
border-width:1px;border-style:solid;border-color:#fff #ffbbbb #ffbbbb #fff;background:#ffcccc;padding:4pxquot;
><div style=quot;
border-width:1px;border-style:solid;border-color:#ffbbbb #fff #fff #ffbbbbquot;
><div style=quot;
border:1px solid #ff6699;background:#fff;padding:2pxquot;
><textarea rows=quot;
5quot;
class=quot;
textarea_cquot;
>ข้อความของคุณค่ะ....</textarea></div></div></div></div><br /></body></html><br />Output <br />หัวข้อ<br />Example - Button <br /><html><br /><head> <style type=quot;
text/cssquot;
>.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><br /></head><body><br /> <input type=quot;
buttonquot;
value=quot;
Submitquot;
class=quot;
button_grayquot;
> <input type=quot;
buttonquot;
value=quot;
Submitquot;
class=quot;
button_imagequot;
></body></html><br /> <br />Output <br />รูปที่ใช้ทำปุ่ม <br />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 <br /><html><head><style type=quot;
text/cssquot;
><br />.cssform p{width: 300px;clear: left;margin: 0;padding: 5px 0 8px 0;padding-left: 155px; /*width of left column containing the label elements*/border-top: 1px dashed gray;height: 1%;}<br />.cssform label{font-weight: bold;float: left;margin-left: -155px; /*width of left column*/width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/}<br />.cssform input[type=quot;
textquot;
]{ /*width of text boxes. IE6 does not understand this attribute*/width: 180px;}<br />.cssform textarea{width: 250px;height: 150px;}<br />/*.threepxfix class below:Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html*/<br />* html .threepxfix{margin-left: 3px;}<br /></style></head><br /><body><form id=quot;
myformquot;
class=quot;
cssformquot;
action=quot;
quot;
><br /><p><label for=quot;
userquot;
>Name</label><input type=quot;
textquot;
id=quot;
userquot;
value=quot;
quot;
/></p><br /><p><label for=quot;
emailaddressquot;
>Email Address:</label><input type=quot;
textquot;
id=quot;
emailaddressquot;
value=quot;
quot;
/></p><br /><p><label for=quot;
commentsquot;
>Feedback:</label><textarea id=quot;
commentsquot;
rows=quot;
5quot;
cols=quot;
25quot;
></textarea></p><br /><p><label for=quot;
commentsquot;
>Sex:</label>Male: <input type=quot;
radioquot;
name=quot;
sexquot;
/> Female: <input type=quot;
radioquot;
name=quot;
sexquot;
/><br /></p><br /><p><label for=quot;
commentsquot;
>Hobbies:</label><input type=quot;
checkboxquot;
name=quot;
hobbyquot;
/> Tennis<br /><input type=quot;
checkboxquot;
name=quot;
hobbyquot;
class=quot;
threepxfixquot;
/> Reading <br /><input type=quot;
checkboxquot;
name=quot;
hobbyquot;
class=quot;
threepxfixquot;
/> Basketball <br /></p><br /><p><label for=quot;
termsquot;
>Agree to Terms?</label><input type=quot;
checkboxquot;
id=quot;
termsquot;
class=quot;
boxesquot;
/></p><br /><div style=quot;
margin-left: 150px;quot;
><input type=quot;
submitquot;
value=quot;
Submitquot;
/> <input type=quot;
resetquot;
value=quot;
resetquot;
/></div></form><br /></body></html><br />Output<br />ส่วนบนของฟอร์ม<br />Name <br />Email Address: <br />Feedback: <br />Sex: Male: Female: <br />Hobbies: TennisReading Basketball <br />Agree to Terms? <br />ส่วนล่างของฟอร์ม<br />อีกตัวอย่าง สวยๆ ค่ะ Credit to : http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.htmlExample <br /><html><head><style type=quot;
text/cssquot;
><br />body{font-family:quot;
Lucida Grandequot;
, quot;
Lucida Sans Unicodequot;
, 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;}<br />/* ----------- 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:4px 2px;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;}<br /></style></head><br /><body><div id=quot;
stylizedquot;
class=quot;
myformquot;
><form id=quot;
formquot;
name=quot;
formquot;
method=quot;
postquot;
action=quot;
index.htmlquot;
><h1>Sign-up form</h1><p>This is the basic look of my form without table</p><br /><label>Name<span class=quot;
smallquot;
>Add your name</span></label><input type=quot;
textquot;
name=quot;
namequot;
id=quot;
namequot;
/><br /><label>Email<span class=quot;
smallquot;
>Add a valid address</span></label><input type=quot;
textquot;
name=quot;
emailquot;
id=quot;
emailquot;
/><br /><label>Password<span class=quot;
smallquot;
>Min. size 6 chars</span></label><input type=quot;
textquot;
name=quot;
passwordquot;
id=quot;
passwordquot;
/><br /><button type=quot;
submitquot;
>Sign-up</button><div class=quot;
spacerquot;
></div><br /></form></div><br /></body></html><br />Output <br />ส่วนบนของฟอร์ม<br />Sign-up form<br />This is the basic look of my form without table<br />Name Add your name Email Add a valid address Password Min. size 6 chars Sign-up <br />ส่วนล่างของฟอร์ม<br />Background<br />เราสามารถกำหนดลักษณะพื้นหลังของ Element ต่างๆ เช่น <body>, <table>, <p>, <h1>, <h2>, <div> เป็นต้น <br />PropertyDescriptionValues background-attachmentใช้กำหนดว่าต้องการให้ภาพพื้นหลังนั้นอยู่กับที่ หรือว่าเลื่อนไปตาม Scroll Bar fixedscroll fix อยู่กับที่เลื่อนตาม Scroll Barbackground-colorใช้กำหนดทั้งสี พื้นหลังของเว็บเพจ หรือ ตาราง color-rgbcolor-hexcolor-nametransparentรหัสสีชื่อสีbackground-imageใช้กำหนดรูปภาพ ให้พื้นหลังของเว็บเพจ หรือตาราง url ของรูปเช่น url(images/bg.jpg)background-positionใช้กำหนดตำแหน่งการจัดวางรูปภาพพื้นหลังtop lefttop centertop rightcenter leftcenter centercenter rightbottom leftbottom centerbottom rightx% y%xpos ypos background-repeatกำหนดรูปภาพพื้นหลังว่าต้องการให้มีการเรียงต่อรูปภาพหรือไม่repeatrepeat-xrepeat-yno-repeat ไม่ให้มีการวางต่อรูปภาพ วางต่อรูปภาพแนวนอนวางต่อรูปภาพแนวตั้งวางต่อรูปภาพทั้งแนวนอนและตั้งbackgroundเราสามารถกำหนด property ให้กับ background ได้ในคำสั่งประกาศเดียวbackground-colorbackground-imagebackground-repeatbackground-attachmentbackground-position <br />ExampleBackground เป็นรูปอยู่ด้านบน ขวา ไม่ repeat <br /><div style=quot;
background-attachment:scroll; background-image:url(../images/bg1.gif); background-position:top right; background-repeat:no-repeatquot;
><br /><br /><br /><br /></div> <br />Output <br />ExampleBackground เป็นรูปอยู่ตรงกลาง ไม่ repeat <br /><div style=quot;
background-attachment:scroll; background-image:url(../images/bg2.gif); background-position:center; background-repeat:no-repeatquot;
><br /><br /><br /><br /></div> <br />Output <br />ExampleBackground เป็นรูปอยู่ตรงกลาง repeart แนวนอน <br /><div style=quot;
background-attachment:scroll; background-image:url(../images/bg2.gif); background-position:center; background-repeat:repeat-xquot;
><br /><br />Enjoyday.net<br /><br /></div> <br />Output <br />Enjoyday.net<br />ExampleBackground เป็นรูปอยู่ตรงกลาง repeart แนวตั้ง <br /><div style=quot;
background-attachment:scroll; background-image:url(../images/bg2.gif); background-position:center; background-repeat:repeat-yquot;
><br /><br />Enjoyday.net<br /><br /></div> <br />Output <br />Enjoyday.net<br />ExampleBackground เป็นรูป repeart ทั้งแนวนอน และแนวตั้ง <br /><div style=quot;
background-image:url(../images/bg2.gif); background-repeat:repeatquot;
><br /><br />Enjoyday.net<br /><br /></div> <br />Output <br />Enjoyday.net<br />ExampleBackground เป็นพื้นสีฟ้า <br /><div class=quot;
output_boxquot;
style=quot;
background-color:#D7EBFFquot;
><br /><br />Enjoyday.net<br /><br /></div> <br />Output <br />Enjoyday.net<br />ExampleBackground เป็นรูป Fix <br /><textarea style=quot;
background-image:url(../images/bg1.gif); background-attachment:fixed; width:300px quot;
rows=quot;
3quot;
>สวัสดีค่ะ นี่เป็น Background แบบ Fixรูปจะไม่เลือนไปตาม Scroll Bar ค่ะ.... </textarea><br />Output <br />ExampleBackground เป็นรูปไม่ Fix เลื่อนตาม Scroll Bar <br /><textarea style=quot;
background-image:url(../images/bg1.gif); background-attachment:scroll; width:300pxquot;
rows=quot;
3quot;
>สวัสดีค่ะ นี่เป็น Background แบบไม่ Fixรูปจะเลือนไปตาม Scroll Bar ค่ะ.... </textarea><br />Output <br />Border<br />เราสามารถกำหนดลักษณะเส้นกรอบของ Element ต่างๆ ได้ เช่น <p>, <div> เป็นต้น <br />PropertyDescriptionValues border-widthใช้กำหนดขนาดของกรอบของวัตถุทั้ง 4 ด้าน thinmediumthicklengthเช่น 5px, 5ptborder-styleใช้การกำหนดลักษณะของกรอบของวัตถุทั้ง 4 ด้าน nonehiddendotteddashedsoliddoublegrooveridgeinsetoutsetdotteddashedsoliddoublegrooveridgeinsetoutsetborder-colorใช้การกำหนดสีกรอบของวัตถุทั้ง 4 ด้าน *ต้องกำหนด style ก่อนcolor borderสามารถกำหนด property ให้กับ border ได้ในคำสั่งประกาศเดียวborder-widthborder-styleborder-color border-top-widthborder-top-styleborder-top-colorborder-top ่ใช้กำหนดคุณสมบัติให้กับกรอบด้านบน border-bottom-widthborder-bottom-styleborder-bottom-colorborder-bottom ใช้กำหนดคุณสมบัติให้กับกรอบด้านล่าง border-left-widthborder-left-styleborder-left-colorborder-leftใช้กำหนดคุณสมบัติให้กับกรอบด้านซ้าย border-right-widthbordr-right-styleborder-right-colorborder-righteใช้กำหนดคุณสมบัติให้กับกรอบด้านขวา <br />Exampleกำหนดขนาด border <br /><div style=quot;
border-top-width:5px; border-right-width:5px; border-bottom-width:5px; border-left-width:5px;quot;
><br /> <br /> <br /></div>หรือ<div style=quot;
border-width:5pxquot;
><br /><br /><br /></div> <br />Output <br />กำหนดขนาดให้เส้นกรอบทั้ง 4 ด้านมีค่า 5px Exampleกำหนดขนาด border <br /><div class=quot;
output_boxquot;
style=quot;
border-width:1px 10pxquot;
><br /><br /><br /></div> <br />Output <br />กำหนดขนาดให้เส้นกรอบ บน ล่าง เป็น 1px, และขนาดเส้นกรอบ ซ้าย ขวา เป็น 10px Exampleกำหนดขนาด border <br /><div class=quot;
output_boxquot;
style=quot;
border-width:1px 10px 20pxquot;
><br /><br /><br /></div> <br />Output <br />กำหนดขนาดให้เส้นกรอบ บน เป็น 1px, ขนาดเส้นกรอบ ซ้าย ขวา เป็น 10px และขนาดเส้นกรอบ ล่าง เป็น 20pxExampleกำหนดขนาด border <br /><div class=quot;
output_boxquot;
style=quot;
border-top-width:1px; border-right-width:10px; border-bottom-width:20px; border-left-width:30px;quot;
><br /> <br /> <br />หรือ</div> <div class=quot;
output_boxquot;
style=quot;
border-width:1px 10px 20px 30pxquot;
><br /><br /><br /></div> <br />Output <br />กำหนดขนาดให้เส้นกรอบ 1px 10px 20px 30px เป็นขนาดของเส้นกรอบ บน ขวา ล่าง ซ้าย ตามลำดับExampleลักษณะ border <br /><div style=quot;
border-style:dashed dotted solid double; border-color:#FF6633quot;
><br /><br /><br /><br /></div> <br />Output <br />กำหนดลักษณะให้เส้นกรอบในคำสั่งเดียว dashed dotted solid double เป็นลักษณะของเส้นกรอบ บน ขวา ล่าง ซ้าย ตามลำดับExampleกำหนดสี border <br /><div style=quot;
border-style:solid; border-color:red blue green blackquot;
><br /> <br /> <br /></div> <br />Output <br />กำหนดสีให้เส้นกรอบในคำสั่งเดียว red blue green black เป็นสีของเส้นกรอบ บน ขวา ล่าง ซ้าย ตามลำดับExampleกำหนด property ให้กับ border ในคำสั่งประกาศเดียว <br /><div style=quot;
border-width:5px; border-style:double; border-color:#336699quot;
><br /> <br /> <br /></div>หรือ<div style=quot;
border:5px double #336699quot;
><br /> <br /> <br /></div> <br />Output <br />กำหนด property ให้กับ border ได้ในคำสั่งประกาศเดียว<br />Margin, Padding<br />PropertyDescriptionValues margin-topใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านบน กับวัตถุอื่นๆautolengthเช่น 5px, 5pt,5cm margin-bottomใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านล่าง กับวัตถุอื่นๆ margin-leftใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านซ้าย กับวัตถุอื่นๆ margin-rightใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านขวา กับวัตถุอื่นๆ marginใช้กำหนดระยะห่างระหว่างขอบของวัตถุที่ต้องการ ทั้ง 4 ด้าน กับวัตถุอื่น ๆ ในคำสั่งเดียว padding-topใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นบน กับ ข้อความที่อยู่ในกรอบ padding-bottomใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นล่าง กับ ข้อความที่อยู่ในกรอบ padding-leftใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นซ้าย กับ ข้อความที่อยู่ในกรอบ padding-rightใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นขวา กับ ข้อความที่อยู่ในกรอบ paddingใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านใน กับ ข้อความที่อยู่ในกรอบ (ไม่เกี่ยวข้องกับวัตถุด้านนอก) <br />Exampleถ้าไม่ได้ใช้้งาน margin และ padding <br />ข้อความข้างนอกด้านบน<div style=quot;
border:20px solid #3399CCquot;
>block นี้มี Border สีน้ำเงิน ขนาด 20px ไม่ใช้งาน Margin และ Padding ลองมาดูกันว่าได้ผลเป็นอย่างไร</div>ข้อความข้างนอกด้านล่าง <br />Output <br />ข้อความข้างนอกด้านบน block นี้มี Border สีน้ำเงิน ขนาด 20px ไม่ใช้งาน Margin และ Padding ลองมาดูกันว่าได้ผลเป็นอย่างไร ข้อความข้างนอกด้านล่าง ลองมาดูต่อว่า... ถ้านำ margin และ padding มาใช้งานล่ะ Example การใช้งาน margin และ padding <br />ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านบน<div style=quot;
margin:20px; padding:20px; border:20px solid #3399CCquot;
>block นี้มี Border สีน้ำเงิน ขนาด 20px <br />มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 20px<br />และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทีนี้คงเข้าใจแล้วว่า margin และpadding คือส่วนไหนกันแล้ว</div>ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านล่าง <br />Output <br />ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านบน <br />block นี้มี Border สีน้ำเงิน ขนาด 20px มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 20pxและมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทีนี้คงเข้าใจแล้วว่า margin และpadding คือส่วนไหนกันแล้ว <br />ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านล่าง <br />ถ้ายังงงๆ ว่าตรงไหนคือ margin และ padding อยู่ ให้ดูที่รูปนี้ค่ะ Exampleการใช้งาน margin ที่แต่ละด้านไม่เท่ากัน <br /><div style=quot;
margin:20px; padding:10px 20px 30px 40px; border:2px solid #009999quot;
>block นี้มี Border สีส้ม ขนาด 2px <br />มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 10px 20px 30px 40px ซึ่งเป็น pading ของด้านบน ขวา ล่าง ซ้าย ตามลำดับ และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทั้ง 4 ด้าน</div>ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านล่าง <br />Output <br />ความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 10x นี่คือ margin ด้านบน <br />block นี้มี Border สีส้ม ขนาด 2px มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 20px ทั้ง 4 ด้าน และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 10px 20px 30px 40px ซึ่งเป็น margin ของด้านบน ขวา ล่าง ซ้าย ตามลำดับ ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 30x นี่คือ margin ด้านล่าง <br />Exampleการใช้งาน padding ที่แต่ละด้านไม่เท่ากัน <br />ความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านบน<div style=quot;
margin:20px; padding:10px 20px 30px 40px; border:2px solid #009999quot;
>block นี้มี Border สีเขียว ขนาด 2px <br />มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 10px 20px 30px 40px ซึ่งเป็น pading ของด้านบน ขวา ล่าง ซ้าย ตามลำดับ และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทั้ง 4 ด้าน</div>ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านล่าง <br />Output <br />ความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านบน <br />block นี้มี Border สีเขียว ขนาด 2px มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 10px 20px 30px 40px ซึ่งเป็น pading ของด้านบน ขวา ล่าง ซ้าย ตามลำดับ และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทั้ง 4 ด้าน <br />ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านล่าง <br />Example อื่นๆ<br />h1 {margin: 10px}<br />Happy New Year<br />margin ทั้ง4 ด้านเป็น 10px <br />h1 {margin: 10px 2%}<br />Happy New Year<br />margin ด้านบนและล่าง 10px, ด้านขวาและซ้าย เป็น 2% ของความกว้างเอกสาร <br />h1 {margin: 10px 2% -10px}<br />Happy New Year<br />margin ด้านบน 10px, ด้านขวาและซ้าย 2% ของความกว้างเอกสาร, ด้านล่าง เป็น -10px <br />h1 {margin: 10px 2% -10px auto}<br />Happy New Year<br />margin ด้านบน 10px, ด้านขวา 2% ของความกว้างเอกสาร, ด้านล่าง เป็น -10px และด้านซ้ายกำหนดตาม Browser <br />Exampleการใช้งานผสม Chapter 8-12 <br /><html><head><style type=quot;
text/cssquot;
>.mixcode {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:2px dotted #FF6699; margin:20px; padding:20px</style></head><body>Hello all,<div class=quot;
mixcodequot;
>Happy New Year 2009</div>Hope you enjoy your stay here.</body></html> <br />Output <br />Hello all, <br />Happy New Year 2009<br />Hope you enjoy your stay here. <br />List<br />PropertyDescriptionValues list-style-typeใช้กำหนดลักษณะที่ใช้นำหน้าแต่ละรายการย่อย nonedisccirclesquaredecimaldecimal-leading-zerolower-romanupper-romanlower-alphaupper-alphalower-greeklower-latinupper-latinhebrewarmeniangeorgiancjk-ideographichiraganakatakanahiragana-irohakatakana-iroha disccirclesquaredecimaldecimal-leading-zerolower-romanupper-romanlower-alphaupper-alphalower-greeklower-latinupper-latinhebrewarmeniangeorgiangeorgiancjk-ideographichiraganahiragana-irohakatakana-irohalist-style-positionใช้การกำหนดลักษณะการปัดขึ้นบรรทัดใหม่ของข้อความ กรณีที่มีความยาวเกิน 1 บรรทัด * ถ้าไม่กำหนดจะเป็นแบบ outsideinsideoutsideจัดให้ตรงแนวกับสัญลักษณ์จัดให้ตรงแนวกับข้อความแถวแรกlist-style-imageใช้การกำหนดรูปภาพเพื่อนำมาเป็นสัญลักษณ์รายการย่อยurlของรูปภาพ list-styleสามารถกำหนด property ให้กับ list ได้ในคำสั่งประกาศเดียวlist-style-typelist-style-positionlist-style-image <br />Example <br />Enjoyday.net - Web builder Tutorial<ul style=quot;
list-style-type:squarequot;
><li>HTML</li><li>CSS</li><li>XHTML</li><li>JavaScript</li><li>SQL</li></ul><br />Output <br />Enjoyday.net - Web builder Tutorial <br />HTML<br />CSS<br />XHTML<br />JavaScript<br />SQL<br />Example <br />Enjoyday.net - Web builder Tutorial<ul><li style=quot;
list-style-type:circlequot;
>HTML</li><li style=quot;
list-style-type:discquot;
>CSS</li><li style=quot;
list-style-type:squarequot;
>XHTML</li><li style=quot;
list-style-type:decimalquot;
>JavaScript</li><li style=quot;
list-style-type:upper-romanquot;
>SQL</li></ul><br />Output <br />Enjoyday.net - Web builder Tutorial <br />HTML<br />CSS<br />XHTML<br />JavaScript<br />SQL<br />Example <br />Enjoyday.net - Web builder Tutorial<ul style=quot;
list-style-image:url(images/list.gif)quot;
><li>HTML</li><li>CSS</li><li>XHTML</li><li>JavaScript</li><li>SQL</li></ul><br />Output <br />Enjoyday.net - Web builder Tutorial <br />HTML<br />CSS<br />XHTML<br />JavaScript<br />SQL<br />Example <br />ประโยชน์ของ CSS<ul style=quot;
list-style-type:circle; list-style-position:insidequot;
><li>การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำได้ง่ายและรวดเร็ว</li><li>เมื่อ code ภายในเอกสาร HTML ลดลง ทำให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว</li><li>สามารถกำหนดรูปแบบการแสดงผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำให้เวลาแก้ไขหรือปรับปรุงทำได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML Tag ต่างๆ ทั่วทั้งเอกสาร</li></ul><br />Output <br />ประโยชน์ของ CSS <br />การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำได้ง่ายและรวดเร็ว<br />เมื่อ code ภายในเอกสาร HTML ลดลง ทำให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว<br />สามารถกำหนดรูปแบบการแสดงผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำให้เวลาแก้ไขหรือปรับปรุงทำได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML Tag ต่างๆ ทั่วทั้งเอกสาร<br />Example <br />ประโยชน์ของ CSS<ul style=quot;
list-style-type:circle; list-style-position:outsidequot;
><li>การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำได้ง่ายและรวดเร็ว</li><li>เมื่อ code ภายในเอกสาร HTML ลดลง ทำให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว</li><li>สามารถกำหนดรูปแบบการแสดงผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำให้เวลาแก้ไขหรือปรับปรุงทำได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML Tag ต่างๆ ทั่วทั้งเอกสาร</li></ul><br />Output <br />ประโยชน์ของ CSS <br />การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำได้ง่ายและรวดเร็ว<br />เมื่อ code ภายในเอกสาร HTML ลดลง ทำให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว<br />สามารถกำหนดรูปแบบการแสดงผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำให้เวลาแก้ไขหรือปรับปรุงทำได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML Tag ต่างๆ ทั่วทั้งเอกสาร<br />Example กำหนด property ให้กับ list ได้ในคำสั่งประกาศเดียว <br />ประโยชน์ของ CSS<ul style=quot;
list-style:decimal insidequot;
><li>การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำได้ง่ายและรวดเร็ว</li><li>เมื่อ code ภายในเอกสาร HTML ลดลง ทำให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว</li><li>สามารถกำหนดรูปแบบการแสดงผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำให้เวลาแก้ไขหรือปรับปรุงทำได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML Tag ต่างๆ ทั่วทั้งเอกสาร</li></ul> <br />Output <br />ประโยชน์ของ CSS <br />การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำได้ง่ายและรวดเร็ว<br />เมื่อ code ภายในเอกสาร HTML ลดลง ทำให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว<br />สามารถกำหนดรูปแบบการแสดงผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำให้เวลาแก้ไขหรือปรับปรุงทำได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML Tag ต่างๆ ทั่วทั้งเอกสาร<br />Table <br />ต้องใช้กับเว็บเบราเซอร์รุ่นใหม่ๆ เช่น IE6 เป็นต้นไป*บาง property เมื่อทดสอบแล้วไม่เห็นผล <br />PropertyDescriptionValues table-layoutใช้กำหนดความกว้างของตารางและคอลัมน์automaticfixedDefaultกว้างตามที่ำกำหนดเท่านั้นcaption-sideใช้กำหนดตำแหน่งของชื่อตารางtopbottomleftrightDefaultempty-cellsใช้กำหนดว่าจะแสดง/ไม่แสดง เส้นขอบ เมื่อ cell นั้นไม่มีข้อความ (empty)hideshowDefaultborder-spacingใช้กำหนดระยะระหว่างตาราง และขอบ แนวนอน และแนวตั้งlength lengthเช่น 2px 5pxborder-collapseใช้กำหนดลักษณะเส้นขอบseparatecollapseDefault แยกเป็น 2 เส้นเป็นเส้นเดียว<br />Example <br /><html><head><style type=quot;
text/cssquot;
>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><br /><table class=quot;
onequot;
><caption>ตารางแสดงตัวเลข</caption><tr><td width=quot;
20%quot;
>1000000000000000000000000000</td><td width=quot;
40%quot;
>10000000</td><td width=quot;
40%quot;
></td></tr></table><br /><table class=quot;
twoquot;
><caption>ตารางแสดงตัวเลข</caption> <tr><td width=quot;
20%quot;
>1000000000000000000000000000</td><td width=quot;
40%quot;
>10000000</td><td width=quot;
40%quot;
></td></tr></table><br /></body></html> <br />Output <br />ตารางแสดงตัวเลข100000000000000000000000000010000000<br />ตารางแสดงตัวเลข100000000000000000000000000010000000<br />สังเกต ตารางที่สอง จะ fix ความกว้างของช่องตารางไว้ ทำให้แสดงข้อความไม่พอ นอกจากนี้มีการกำหนด cell ว่างให้แสดงด้วย และให้แสดงเส้นขอบรวมเป็นเส้นเดียวExampleลองจัดรูปแบบอื่นๆ ให้กับตาราง โดยใช้ CSS บทที่ผ่านๆ มา ดูค่ะ <br /><html><head><style type=quot;
text/cssquot;
>table.three{width:60%;border:0; } table.three th { font-weight:bold; border-bottom:1px solid #CCC; border-top:1px solid #CCC; background-color:#F2F9FF ;color:#0000CC;}table.three td { padding:5px; border-bottom:1px dotted #CCC; }<br /></style></head><body><br /><table class=quot;
threequot;
cellspacing=quot;
0quot;
><tr><th>รหัสพนักงาน</th><th>ชื่อ</td><th>เงินเดือน</th></tr><tr><td>01</td><td>อำนาจ</td><td align=quot;
rightquot;
>30,000</td></tr><tr><td>02</td><td>สมชาย</td><td align=quot;
rightquot;
>25,000</td></tr><tr><td>03</td><td>วีระ</td><td align=quot;
rightquot;
>20,000</td></tr></table><br /></body></html> <br />Output <br />รหัสพนักงานชื่อเงินเดือน01อำนาจ30,00002สมชาย25,00003วีระ20,000<br />Link <br />PropertyPurposea:linkกำหนด style ให้กับ link ปกติที่ยังไม่เคยถูก clicka:visitedกำหนด style ให้กับ link ที่เคยถูกคลิกแล้วa:hoverกำหนด style ให้กับ link เมื่อเลื่อนเมาส์ไปอยู่เหนือ linka:activeกำหนด style ให้กับ link ขณะถูกคลิก<br />Example <br /><html><head><style type=quot;
text/cssquot;
>.linkbox a:link {color: #FF0000} /* unvisited link สีแดง*/ .linkbox a:visited {color: #00FF00} /* visited link สีเขียว*/ .linkbox a:hover {color: #FF00FF} /* mouse over link สีชมพู */ .linkbox a:active {color: #0000FF} /* selected link สีน้ำเงิน*/ </style></head><body><div class=quot;
linkboxquot;
><a href=quot;
css_chapter01.htmlquot;
>Chapter1</a><a href=quot;
css_chapter02.htmlquot;
>Chapter2</a><a href=quot;
css_chapter03.htmlquot;
>Chapter3</a><a href=quot;
css_chapter04.htmlquot;
>Chapter4</a><a href=quot;
css_chapter05.htmlquot;
>Chapter5</a></div><body></html><br />Output <br />Chapter1 Chapter2 Chapter3 Chapter4 Chapter5 <br />Example <br /><html><head><style type=quot;
text/cssquot;
>.linkpage a { font:12px Arial, Helvetica, sans-serif; background: #F8FBFC; color: #56ADDC; text-decoration: none; padding: 2px 4px; border: 1px solid #1BA0CD; }.linkpage a:hover { background-color:#C0F5FA;border-color: #608BD2; color:#0076AE }.linkpage span { font: 12px Arial, Helvetica, sans-serif; color:#333333; padding: 2px 4px; }</style></head><body><div class=quot;
linkpagequot;
style=quot;
margin:auto; padding:10pxquot;
><span>Page :</span><a href=quot;
css_chapter01.htmlquot;
>« First</a><a href=quot;
css_chapter14.htmlquot;
>‹ Prev</a><a href=quot;
css_chapter01.htmlquot;
>1</a><a href=quot;
css_chapter02.htmlquot;
>2</a><a href=quot;
css_chapter03.htmlquot;
>3</a><a href=quot;
css_chapter16.htmlquot;
>Next ›</a> <a href=quot;
css_chapter25.htmlquot;
>Last »</a> </div><body></html> <br />Output <br />Page : « First ‹ Prev 1 2 3 Next › <br />Classification<br />การแสดงผลวัตถุว่าจะแสดงอย่างไร ที่ไหน<br />PropertyDescriptionV
![รายงาน<br />เรื่อง CSS Table Design<br />จัดทำโดย<br />นาวสาว รำพรรณ วงค์ไชย เลขที่ 20<br />นางสาว ธารทิพย์ ศักดิ์แสน เลขที่ 11<br /> นางสาว บุษยา วงค์ศรี เลขที่ 12<br /> นางสาว พิมพา ผดุงกิจ เลขที่ 15<br /> นางสาว วาริวรรณ ชุ่มเชย เลขที่ 21<br />ชั้นมัธยมศึกษาปีที่ 4<br />เสนอ<br />อ. ฐิติพร ไหวดี<br />โรงเรียนทองสวัสดิ์วิทยาคาร<br />สำนักงานเขตพื้นที่ประศึกษา เขต 2<br /> คำนำ<br /> รายงานเล่มนี้จัดทำขึ้นเพื่อเป็นสื่อการเรียนการสอนให้แกน้องๆเพื่อพี่ๆทุกคน<br /> มีเนื้อหาในเรื่องนี้เกี่ยวกับการสอนวิธีใช่ CSS Table Design มีเนื้อหาบอกเล่าถึงวิธี<br /> การใช่งานหรือการเตรียมตัวก่อนเริ่มเรียน CSS ว่าจะต้องมีพื้นฐานในการใช้ HTML<br /> มาก่อนต้องขอขอบพระคุณ อ.ที่ปรึกษา อ.ฐิติพร ไหวดี เป็นอย่างสูง ที่ให้คำแนะนำ<br /> และคำติชมมาอย่างดี สุดท้ายนี้รายงานเล่มนี้หวังว่าคงจะเป็นประโยชน์กับเพื่อน <br /> พี่ๆ น้องๆ ไม่มากก็น้อยหากผิดพลาดประการใดต้องขออภัยมา ณ ที่นี้ด้วย<br /> จัดทำโดย<br /> นางสาว รำพรรณ วงค์ไชย เลขที่ 20<br /> นางสาว ธารทิพย์ ศักดิ์แสน เลขที่ 11<br /> นางสาว บุษยา วงค์ศรี เลขที่ 12<br /> นางสาว พิมพา ผดุงกิจ เลขที่ 15<br /> นางสาว วาริวรรณ ชุ่มเชย เลขที่ 21<br />สารบัญ<br />เรื่อง หน้า<br />Lntroduction <br />Syntax <br />Unit <br />Color <br />Lnsert a styleshee <br />Selector: HTML tag,class,id <br />Conlextual selectors <br />Font <br />Text <br />Background <br />Border <br />Margin,padding <br />Link <br />Table <br /> Classiflcation <br />Positioning <br />Lmage <br />Form <br />Scorll bar <br />Mouse cursor Media types <br />Layout(Table) <br />Layout(DIV) <br />Pseudo-classes <br />Pseudo-element <br />บรรณนุกรม <br />บรรณานุกรม<br />http://www.enjoyday.net/webtutorial/css/css_chapter02.html<br />CSS คืออะไร?<br />CSS ย่อมาจาก Cascading Style Sheets เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ และถูกกำหนดมาตรฐานโดย W3C (World Wide Web Consortium) เช่นเดียวกับ HTML และ XHTML ใช้สำหรับตกแต่งเอกสาร HTML/ XHTML ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการ ด้วยการกำหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML เช่น <body>, <p>, <h1> เป็นต้น<br />ประโยชน์ของ CSS<br />1. การใช้ 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 <br /><html><body><h1><font color=quot;
redquot;
face=quot;
Arialquot;
>วิธีดูแลรักษาสุขภาพ</font></h1> <p><font color=quot;
blackquot;
face=quot;
Arialquot;
><b>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</b></font></p><h1><font color=quot;
redquot;
face=quot;
Arialquot;
>วิธีกินผลไม้ที่ถูกต้อง</font></h1> <p><font color=quot;
blackquot;
face=quot;
Arialquot;
><b>ให้กินผลไม้แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ เพื่อให้ร่างกายจัดเตรียมการย่อยได้ง่าย ไม่สับสน นอกจากนี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</b></font></p></body></html><br />ตัวอย่างเมื่อเปลี่ยนมาใช้คำสั่ง style sheet จัดรูปแบบการแสดงผลแทนการใช้ code ภาษา HTML ทำให้ code ภายในเอกสารอ่านเข้าใจง่าย และแก้ไขได้ง่ายขึ้น ^^ <br /><html><head><style type=quot;
text/cssquot;
>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> <br />โครงสร้างคำสั่ง<br />คำสั่งของ CSS ประกอบด้วย selector, property และ value <br />selector { property:value } selector { property1:value1; property2:value2 }<br />- selector สามารถเป็น HTML Tag ต่างๆ เช่น <body>, <p> หรือเป็น Class name หรือ ID ที่เราตั้งชื่อให้ก็ได้- property คือ คุณสมบัติในการจัดรูปแบบการแสดงผล เช่น color สำหรับกำหนดสี, font-size สำหรับกำหนดขนาดตัวอักษร- value เป็น ค่า ที่เรากำหนดให้กับ property ต่างๆ เช่น color:white, font-size:14px<br />ตัวอย่างคำสั่ง CSS<br />กำหนดให้ข้อความที่อยู่ใน Tag <p> เป็นสีดำ และวางอยู่กึ่งกลาง<br />/* selector ที่เป็น HTML Tag */p {color:#000000;text-align:center} <br />กำหนดให้ข้อความที่ class name topic เป็นสีแดง ชนิดอักษรเป็น Arial ตัวหนา และจัดวางอยู่กึ่งกลาง<br />/* selector ที่เป็น Class name */.topic{color:red; font-family:Arial; font-weight:bold; text-align:center } <br />กรณีที่ selector มีค่า property เหมือนกัน สามารถเขียนรวมกันได้ โดยใช้เครื่องหมาย quot;
,quot;
คั่นระหว่าง selectorกำหนดให้ข้อความใน Tag <h1>,<h2> และ <h3> เป็นสีแดง ชนิดตัวอักษรเป็น sans-serif<br />h1, h2, h3 {color:red;font-family:sans-serif } <br />สำหรับเรื่อง property และ value จะได้ศึกษาอย่างละเอียดในหัวข้อต่อๆ ไป Comment <br />ใน Style Sheet Comment จะใช้เครื่องหมาย quot;
/*quot;
เป็นการเปิด และ quot;
*/quot;
เป็นการปิด เช่น <br />/* นี่คือ comment กำหนดสีตัวอักษรเป็นสีดำ ขนาด14px */body {color:#000000;font-size:14px} <br />หน่วยที่ใช้วัดค่าต่างๆ ใน Style Sheet<br />จาก syntax ของคำสั่ง CSS ค่า value ของ property บางค่าจะต้องมีการระบุหน่วยด้วย หน่วยที่ใช้งานใน CSS มีอะไรบ้าง มาดูกันค่ะหน่วยแบบ Relative Length (กำหนดแบบอัตราส่วน) <br />px (pixels, สัมพันธ์กับค่าความละเอียดของหน้าจอ) เช่น 1px, 4px<br />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 เหมือนเดิม <br />ex (x-height, ความสูงของตัวอักษร quot;
xquot;
) เช่น 1.5ex, 2ex<br />% (percent, สัมพันธ์กับขนาดหน้าจอ หรือ container ที่บรรจุวัตถุนั้นๆ อยู่) เช่น 50%, 130%<br />หน่วยแบบ Absolute Length (กำหนดตายตัว) <br />in (inches; 1in=2.54cm =72pt =6pc) เช่น 2in, 1.5in<br />cm (centimeters; 1cm=10mm) เช่น 2cm, 1.11cm<br />mm (millimeters) เช่น 50mm, 0.8mm <br />pt (points; 1pt=1/72in, 10pt มีขนาดพอๆกับ 12px) เป็นหน่วยที่ใช้ในงานสิ่งพิมพเช่น 12pt, 20pt <br />pc (picas; 1pc=12pt) เช่น 1pc, 2pc<br />สี (Color)<br />การกำหนดสีให้ตัวอักษร พื้นหลัง เส้นขอบ หรือส่วนอื่นๆ ของวัตถุ สามารถกำหนดได้หลายแบบ1. กำหนดโดยใช้ชื่อสี แต่การระบุชื่อสีแบบนี้ใช้สีได้จำนวนจำกัด ได้แก่ aqua, black, blue, fuchsia (แดงอมม่วง), gray, green, lime, maroon (น้ำตาลแดง), navy, olive, purple, red, silver, teal (เขียวขนเป็ด), white, และ yellow 2. กำหนดเป็นค่าสีแบบ RGB <br />#rrggbb เช่น #eecc00, #42e15e<br />#rgb เช่น #ec0 หมายถึง #eecc00 <br />rgb(x,x,x) โดยที่่ x คือจำนวนเต็มตั้งแต่ 0-255 เช่น rgb(0,204,0) <br />rgb(y%,y%,y%) โดยที่ี่ y คือเปอร์เซ็นต์ตั้งแต่ 0%-100% เช่น rgb(0%,80%,0%) <br />ชื่อสีรหัสค่าสีฐาน16รหัสค่าสีฐาน16 แบบย่อRGBการแสดงผลสีBlack#000000#000rgb(0,0,0) Red#FF0000#F00rgb(0,0,0) Green#00FF00#F00rgb(0,255,0) Blue#0000FF#00Frgb(0,0,255) Yellow#FFFF00#FF0rgb(255,255,0) Aqua#00FFFF#FF0rgb(0,255,255) Fuchsia#FF00FF#FF0rgb(255,0,255) Silver#C0C0C0 rgb(192,192,192) White#FFFFFF#FFFrgb(255,255,255) <br />วิธีใช้งาน Style Sheet<br />1. Inline Styles วิธีการนี้ควรใช้ในกรณีที่ต้องการกำหนด style ให้กับ element ของ HTML เีพียงอันเดียวเป็นการเฉพาะ โดยการแทรกคำสั่ง style sheet ใน HTML Tag อยู่ในคำสั่ง style=quot;
quot;
ดังนี้ <br /><Tag style=quot;
property:value;quot;
> <br />Example<br /><html><body><h1 style=quot;
color:red; font-family:Arialquot;
>วิธีดูแลรักษาสุขภาพ</h1><p style=quot;
color:black; font-family:Arial; font-weight:boldquot;
>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p> </body></html> <br />เราควรหลีกเลี่ยงการเขียน style=”quot;
ฝังลงใน HTML Tag เพราะมันทำให้อ่านยาก และนำไปใช้ต่อไม่ได้ และเป็นการยากที่จะแก้ไข2. Internal Style Sheet วิธีการนี้ควรใช้ในกรณีที่มีเพียง HTML ไฟล์เดียวที่ใช้ style นี้ เมื่อประกาศคำสั่ง Style Sheet เพื่อกำหนดคุณสมบัติ ให้กับ HTML Tag ใดๆ แล้ว จะมีผลกับเอกสาร HTML ทั้งหน้า นิยมใส่ส่วนของคำสั่ง Style Sheet ไว้ระหว่าง <head>...</head>สำหรับ Web Browser รุ่นเก่าที่ไม่สนับสนุนคำสั่ง Style Sheet หรือ Disable Style Sheet ไว้นั้น ให้ใส่ Comment ของ ภาษา HTML ไว้ด้วย เพื่อให้เว็บเบราเซอร์นั้นทราบว่าไม่ใช่คำสั่งภาษา HTML <br />คำสั่งที่ใช้เริ่มต้น และจบ Style Sheet มีโครงสร้างดังนี้ <br /><style type=quot;
text/cssquot;
><!--selector {property1: value1; property2: value2}....--></style> <br />Example<br /><html><br /><body><br /><head><br /><style type=quot;
text/cssquot;
><br /><!-- <br /> h1{color:red; font-family:Arial }<br /> p{color:black; font-family:Arial; font-weight:bold }<br />--> <br /></style><br /></head><br /><body> <br /><h1>วิธีดูแลรักษาสุขภาพ</h1><br /><p>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p><br /><h1>วิธีกินผลไม้ที่ถูกต้อง</h1><br /><p>ให้กินผลไม้แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ เพื่อให้ร่างกายจัดเตรียมการย่อยได้ง่าย <br />ไม่สับสน นอกจากนี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</p> <br /></body><br /></html><br />3. External Style Sheet วิธีการนี้เหมาะกับกรณีที่มีเพียง 1 style แล้วต้องการนำไปใช้กับเอกสาร HTML หลายๆ ไฟล์ โดยนำเอาคำสั่ง Style Sheet ที่อยู่ใน <style type=quot;
text/cssquot;
> ... </style> มาบันทึกเป็นไฟล์ใหม่ นามสกุล .css จากนั้นจึงทำการผนวกไฟล์ของ Style Sheet นี้ลงไปในเอกสาร HTML ทุกไฟล์ที่ต้องการใช้งาน Style Sheet ชุดนี้ ไว้ในส่วน <head>...</head> โดยใช้คำสั่ง <br /><link rel=quot;
stylesheetquot;
type=quot;
text/cssquot;
href=quot;
URL ไฟล์.cssquot;
><br />ตัวอย่างนี้จะสร้าง Style Sheet เก็บไว้ในไฟล์หนึ่ง แล้วให้ไฟล์เอกสาร HTML หลายๆ หน้ามาเรียกใช้<br />Example <br />ในไฟล์ mystyle.css ให้เขียน code ดังนี้ <br />h1{ color:red; font-family:Arial }p{ color:black; font-family:Arial; font-weight:bold }<br />ในไฟล์ HTML ex_css_chapter05_3.html เรียกใช้ style sheet จากภายนอก <br /><html><br /><head><br /><link rel=quot;
stylesheetquot;
type=quot;
text/cssquot;
href=quot;
mystyle.cssquot;
><br /></head><br /><body> <br /> <h1>วิธีดูแลรักษาสุขภาพ</h1><br /> <p>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p><br /></body><br /></html><br />ในไฟล์ HTML ex_css_chapter05_4.html เรียกใช้ style sheet จากภายนอก <br /><html><br /><head><br /><link rel=quot;
stylesheetquot;
type=quot;
text/cssquot;
href=quot;
mystyle.cssquot;
><br /></head><br /><body> <br /> <h1>วิธีกินผลไม้ที่ถูกต้อง</h1><br /> <p>ให้กินผลไม้แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ เพื่อให้ร่างกายจัดเตรียมการย่อยได้ง่าย <br />ไม่สับสน นอกจากนี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</p> <br /></body><br /></html> <br />การที่เราใช้งาน CSS โดยเรียกใช้จากภายนอก จะทำให้ไฟล์เวบเพจของเรามีขนาดเล็ก และการแก้ไขคำสั่ง style sheet เพียงที่เดียว จะมีผลกับเอกสารทุกหน้าได้ Cascading Order<br />1. กรณีที่มีการกำหนด style ด้วยชื่อ selector เดียวกันทั้งแบบ 3 แบบ Style sheet ที่จะถูกใช้คือแบบไหนลำดับความสำคัญ เรียงจากมากไปหาน้อยInline style (inside an HTML element), Internal style sheet (inside the <head> tag) และ External style sheet ตามลำดับจากลำดับความสำคัญดังกล่าว Style ที่จะถูกใช้คือแบบ Inline style2. กรณีที่มีการเขียน 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> จะได้ตัวอักษรสีดำ<br />การเขียนคำสั่ง Style Sheet<br />Selector ที่เป็น HTML TagExample <br /><html><br /><body><br /><head><br /><style type=quot;
text/cssquot;
><!-- <br /> h1{color:red; font-family:Arial }<br /> p{color:black; font-family:Arial }<br />--> </style><br /></head><br /><body> <br /><h1>วิธีดูแลรักษาสุขภาพ</h1><br /><p>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p><br /><h1>วิธีกินผลไม้ที่ถูกต้อง</h1><br /><p>ให้กินผลไม้แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ เพื่อให้ร่างกายจัดเตรียมการย่อยได้ง่าย <br />ไม่สับสน นอกจากนี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</p> <br /></body><br /></html><br />ตัวอย่างนี้เห็นกันมาหลายรอบแล้วนะคะ เป็นการกำหนด style ให้กับ HTML Tag <h1> และ <p> หมายความว่าข้อความภายใน <h1> ทุกอันในหน้าเว็บเพจนี้ให้เป็นสีแดง และข้อความใน <p> ทุกอันให้เป็นสีดำ <br />มาดู selector แบบอื่นๆ กันบ้างSelector ที่เป็น Class attribute เป็นการประกาศคำสั่ง Style Sheet เพื่อกำหนดคุณสมบัติแบบเฉพาะเจาะจง ให้กับ HTML element ผ่าน class attribute โดยเราสามารถตั้งชื่อ class ได้เอง class ใช้เมื่อต้องการใช้แสดงผลรูปแบบนั้นซ้ำหลายๆ ครั้ง หรือต้องการใช้กับ element หลายๆ อัน การประกาศใช้้เครื่องหมาย quot;
.quot;
นำหน้าชื่อ classExample <br /><html><br /><head><br /><style type=quot;
text/cssquot;
><br /><!--<br /> .topic {color:red; <br />font-family:Arial; <br />font-weight:bold; <br />text-align:center <br /> } <br /> .content {color:black; <br />font-family:Arial; <br /> } <br />--><br /></style><br /></head><br /><!-- การเรียกใช้งาน --> <br /><body> <br /> <div class=quot;
topicquot;
>บทความ</div><br /> <p class=quot;
topicquot;
>วิธีดูแลรักษาสุขภาพ</p><br /> <p class=quot;
contentquot;
>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p><br /> <p class=quot;
topicquot;
>วิธีกินผลไม้ที่ถูกต้อง</p><br /> <p class=quot;
contentquot;
>ให้กินผลไม้แค่ทีละอย่าง เช่น จะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ<br />เพื่อให้ร่างกายจัดเตรียมการย่อยได้ง่าย ไม่สับสน นอกจากนี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร <br />ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</p><br /> <p>หันมาใส่ใจสุขภาพกันเถอะค่ะ</p> <br /></body><br /></html> <br />จากตัวอย่างสังเกตได้ว่า class topic ถูกเรียกใช้หลายครั้งใน <p> และ ถูกใช้้ในหลาย element ได้ คือ <p> และ <div> แต่ถ้าต้องการกำหนดให้ class topic ใช้งานเฉพาะกับ <p> เท่านั้น ทำได้โดยใส่ quot;
p.quot;
นำหน้าชื่อ classจะมีผลทำให้ข้อความใน <div class=quot;
topicquot;
>บทความ</div> ไม่สามารถแสดงผลตามรูปแบบที่กำหนดใน class topic ได้ <br />p.topic{color:red; font-family:Arial; font-weight:bold; text-align:center } <br />กรณีที่ต้องการให้แสดงผลตามรูปแบบที่กำหนดใน 2 class ก็สามารถทำได้ <br />Example <br /><html><br /><head><br /><style type=quot;
text/cssquot;
><br /> p.center {text-align:center}<br /> p.bold{ font-weight:bold}<br /></style><br /></head><br /><body><br /> <p class=quot;
center boldquot;
>ข้อความในพารากราฟนี้จะจัดวางกึ่งกลาง และเป็นตัวหนา</p><br /></body><br /></html> <br />Selector ที่เป็น ID attributeเป็นการประกาศคำสั่ง Style Sheet เพื่อกำหนดคุณสมบัติแบบเฉพาะเจาะจง ให้กับ HTML element ผ่าน ID attribute เหมือนกับ Class แต่ต่างกันที่ ID จะใช้กับ element ที่มีเพียงอันเดียวในเอกสาร HTML การประกาศใช้ # นำหน้า ID <br />Example <br /><html><br /><head><br /><style type=quot;
text/cssquot;
><br /> p {text-align: center}<br /> #chapter {color:red; font-weight:bold}<br /> /*หรือเขียนเป็น p#chapter ก็ได้*/<br /></style><br /></head><br /><body><br /> <p id=quot;
chapterquot;
>Chapter ข้อความในนี้จัดวางกึ่งกลาง และเป็นสีแดง ตัวหนา</p><br /> <p>เนื้อหา ข้อความในนี้จัดวางกึ่งกลาง</p><br /> <p>เนื้อหา ข้อความในนี้จัดวางกึ่งกลาง</p><br /></body><br /></html> <br />อาจจะยังไม่เข้าใจตอนนี้ ไว้เห็นตัวอย่างมากๆ เข้า จะค่อยๆ เข้าใจเองค่ะ แล้วจะรู้ได้อย่างไรว่าค่า property และ value เช่น text-align: center, font-weight:bold มีอะไรบ้าง อันนี้ศึกษาได้จาก Chapter ต่อๆ ไป<br />Contextual selectors <br />การประกาศ selector ซ้อนกัน โดยเคาะ spacebar ทำให้สามารถสืบทอดคุณสมบัติเดิม และเพิ่มคุณสมบัติที่แตกต่างได้ ดูตัวอย่างเพื่อให้เข้าใจมากขึ้นค่ะExample <br /><html><head><style type=quot;
text/cssquot;
>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> <br />Output ข้อความใน <h1> จะเป็นสีน้ำเงิน แต่ถ้ามีการกำหนดว่าเป็นตัวเอียงแล้ว ข้อความใน <h1> จะเป็นสีแดง หรือระบุว่าขีดเส้นใต้แล้วจะได้เป็นสีเขียว โดยที่รูปแบบพื้นหลังของ <h1> ยังคงอยู่ <br />วิธีรักษาสุขภาพ<br />วิธีลดน้ำหนัก<br />วิธีรักษาสุขภาพ<br />วิธีรักษาสุขภาพ<br />อีกตัวอย่างหนึ่ง เพื่อแสดงให้เห็นประโยชน์ของการใช้ Contextual selectorsExample <br /><html><head><style type=quot;
text/cssquot;
>/*ให้ img ทั่วไป ขอบสีเทา หนา2*/img {border:solid;border-width:2px;border-color:#999999;}<br />/*ให้ 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><br /><body><br /><img src=quot;
../images/star_icons.gifquot;
/><img src=quot;
../images/star_icons.gifquot;
/><img src=quot;
../images/star_icons.gifquot;
/><br><br><br />แบบนี้ไม่ดี ต้องมาระบุ class borderimage ให้แต่ละรูป<br /><img src=quot;
../images/star_icons.gifquot;
class=quot;
borderimagequot;
/><img src=quot;
../images/star_icons.gifquot;
class=quot;
borderimagequot;
/><img src=quot;
../images/star_icons.gifquot;
class=quot;
borderimagequot;
/><br><br><br />แบบนี้ดี img ที่อยู่ในส่วน div class imgspecial_box จะเป็นขอบแดง หนา5 ให้ทั้งหมด ไม่ต้องมากำหนดทีละรูป<div id=quot;
imgspecial_boxquot;
><img src=quot;
../images/star_icons.gifquot;
/><img src=quot;
../images/star_icons.gifquot;
/><img src=quot;
../images/star_icons.gifquot;
/></div><br /></body></html><br />Output<br />แบบนี้ไม่ดี ต้องมาระบุ class borderimage ให้แต่ละรูปแบบนี้ดี img ที่อยู่ในส่วน div class imgspecial_box จะเป็นขอบแดง หนา5 ให้ทั้งหมด ไม่ต้องมากำหนดทีละรูป <br />มาดูอีกตัวอย่างที่ไม่ดี คล้ายกับตัวอย่างข้างบน เป็นตัวอย่างที่ใช้ CSS มากเกินไปExample <br /><html><head><title>ex_css_chapter07_3</title><style type=quot;
text/cssquot;
>a.boldlink { color:blue; font-weight:bold; }</style></head><br /><body><a href=quot;
http://www.enjoyday.net/webtutorial/html/index.htmlquot;
class=quot;
boldlinkquot;
>HTML</a><br /><a href=quot;
http://www.enjoyday.net/webtutorial/css/index.htmlquot;
class=quot;
boldlinkquot;
>CSS</a><br /><a href=quot;
http://www.enjoyday.net/webtutorial/xhtml/index.htmlquot;
class=quot;
boldlinkquot;
>XHTML</a><br /><a href=quot;
http://www.enjoyday.net/webtutorial/javascript/index.htmlquot;
class=quot;
boldlinkquot;
>JavaScript</a></body></html><br />แก้ไขใหม่เขียนแบบ Contextual selectors จะดีกว่าค่ะ<br /><html><head><title>ex_css_chapter07_3</title><style type=quot;
text/cssquot;
>#boldlink_box a { color:blue; font-weight:bold; } </style></head><br /><body><div id=quot;
boldlink_boxquot;
><a href=quot;
http://www.enjoyday.net/webtutorial/html/index.htmlquot;
>HTML</a><br /><a href=quot;
http://www.enjoyday.net/webtutorial/css/index.htmlquot;
>CSS</a><br /><a href=quot;
http://www.enjoyday.net/webtutorial/xhtml/index.htmlquot;
>XHTML</a><br /><a href=quot;
http://www.enjoyday.net/webtutorial/javascript/index.htmlquot;
>JavaScript</a> </div></body></html><br />Output<br />HTMLCSSXHTMLJavaScript <br />Font<br />การกำหนดลักษณะให้ตัวอักษร ใน HTML เราจะใช้ tag <font face=quot;
ชนิดตัวอักษรquot;
size=quot;
numberquot;
color=quot;
สีquot;
>ข้อความ</font> น่าจะพอจำกันได้อยู่ แต่ในเอกสาร HTML/XHTML แบบ strict จะถือว่า tag <font> เป็น tag ที่ล้าสมัยแล้ว ไม่สามารถนำมาใช้งานได้ ให้เราใช้ CSS แทนค่ะ<br />เรา็สามารถใช้ CSS กำหนดลักษณะให้ตัวอักษรได้ โดยกำหนดรูปแบบ font ผ่าน Property ต่างๆ ให้กับ HTML element เช่น <p>,<div>,<span>,<h1> และอื่นๆ<br />PropertyDescriptionValuesfont-familyใช้กำหนดชนิด font ที่ต้องการจะให้แสดงผล โดยที่ font นั้นจะต้องมีอยู่ในเครื่องของผู้ใช้งานด้วย เช่น Arial, Helvetica, sans-serif font-sizeใช้กำหนดขนาดของตัวอักษร ที่จะให้แสดงผล /td> xx-small x-smallsmallmediumlargex-largexx-large smaller larger 18px70% 150% font-styleใช้กำหนดรูปแบบของตัวอักษรในลักษณะต่างๆ normalitalicoblique เอียง 45 องศา font-variantใช้แปลงตัวอักษรที่เป็นตัวพิมพ์เล็กให้เป็นพิมพ์ใหญ่โดยที่ขนาดตัวอักษรยังคงเท่าตัวพิมพ์เล็ก normalSmall-Capsfont-weightใช้กำหนดความหนาของตัวอักษร normalboldbolderlighter100200300400500600colorใช้กำหนดสีให้ตัวอักษรred#000099 fontเราสามารถกำหนด property ให้กับ font ได้ในคำสั่งประกาศเดียวfont-stylefont-variantfont-weightfont-sizefont-family <br />Example <br /><p style=quot;
font-family:AngsanaUPC; font-size:16pt; color:greenquot;
>CSS ย่อมาจาก Cascading Style Sheet เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ และถูกกำหนดมาตรฐานโดย W3C (World Wide Web Consortium) เช่นเดียวกับ HTML และ XHTML ใช้สำหรับตกแต่งเอกสาร HTML/ XHTM ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการ ด้วยการกำหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML </p><br />Output<br />CSS ย่อมาจาก Cascading Style Sheet เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ และถูกกำหนดมาตรฐานโดย W3C (World Wide Web Consortium) เช่นเดียวกับ HTML และ XHTML ใช้สำหรับตกแต่งเอกสาร HTML/ XHTM ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการ ด้วยการกำหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML <br />Example <br /><p style=quot;
font-weight:boldquot;
>Love me Love my dog</p><br /><p style=quot;
font-family: sans-serif, Arial; font-size:16px; font-style:normal; font-variant:small-caps; font-weight:bold; color:#FF0033quot;
>Love me Love my dog</p><br /><!-- เขียนอย่างย่อได้เป็น --><p style=quot;
font: normal small-caps bold 16px sans-serif, Arial; color:#FF0033quot;
>Love me Love my dog</p> <br />Output<br />Love me Love my dog<br />Love me Love my dog<br />Love me Love my dog<br />Form<br />เรื่องของ CSS ที่เกี่ยวกับ Form มี 2 ส่วนที่อยากจะพูดถึงค่ะ ส่วนแรก คือ การตกแต่ง Form Elements ด้วย style sheet และส่วนที่สอง คือ การทำ Form โดยไม่ใช้ Table หรือเรียกว่า Tableless Form Form Elementsเราสามารถตกแต่ง ส่วนประกอบของ Form ได้แก่ inputbox, textarea, button เป็นต้น ให้มีสีสันที่สวยงามได้ ไปดูตัวอย่างกันค่ะ <br />Example - Text box <br /><html><head><style type=quot;
text/cssquot;
>.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, quot;
ms sans Serifquot;
;font-size:12px;color:#0033CC;background-image: url(../images/mail.gif);background-repeat:no-repeat;background-position:left;border: 1px solid #3366CC;padding-left:16px;}</style></head><body><input type=quot;
textquot;
size=quot;
30quot;
value=quot;
enjoyday.netquot;
/> <br><br><input type=quot;
textquot;
size=quot;
30quot;
class=quot;
textbox_grayquot;
value=quot;
enjoyday.netquot;
/><br><br><input type=quot;
textquot;
size=quot;
30quot;
class=quot;
textbox_yellowquot;
value=quot;
enjoyday.netquot;
/><br><br><input type=quot;
textquot;
size=quot;
30quot;
class=quot;
textbox_imagequot;
value=quot;
enjoyday.netquot;
/><br><br><input type=quot;
textquot;
size=quot;
30quot;
class=quot;
textbox_imgsidequot;
value=quot;
admin@enjoyday.netquot;
/> </body></html> <br />Output <br />การตกแต่ง Scroll bar ด้วย CSS จะพูดถึงในบทที่ 20Example - Textarea <br /><html><head><style type=quot;
text/cssquot;
>.textarea1 {scrollbar-arrow-color:#000;scrollbar-face-color:#face00;scrollbar-highlight-color:#fff;scrollbar-3dlight-color:#000;scrollbar-track-color:#fff;scrollbar-shadow-color:#face00;scrollbar-darkshadow-color:#000;border:1px solid #000;font-size:12px}.textarea2 {scrollbar-arrow-color:#000;scrollbar-face-color:#fff;scrollbar-highlight-color:#fff;scrollbar-3dlight-color:#000;scrollbar-track-color:#fff;scrollbar-shadow-color:#fff;scrollbar-darkshadow-color:#000;color:#000;border:1px solid #000000;font-size:12px} .textarea3 {scrollbar-arrow-color:#add8e6;scrollbar-face-color:#fff;scrollbar-highlight-color:#fff;scrollbar-3dlight-color:#add8e6;scrollbar-track-color:#fff;scrollbar-shadow-color:#fff;scrollbar-darkshadow-color:#add8e6;color:#197bff;border:1px solid #add8e6; font-size:12px} .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=quot;
4quot;
cols=quot;
20quot;
class=quot;
textarea1quot;
>ข้อความของคุณค่ะ....</textarea><br /><textarea rows=quot;
4quot;
cols=quot;
20quot;
class=quot;
textarea2quot;
>ข้อความของคุณค่ะ....</textarea><br /><br /><br /><textarea rows=quot;
4quot;
cols=quot;
20quot;
class=quot;
textarea3quot;
>ข้อความของคุณค่ะ....</textarea><br /><textarea rows=quot;
4quot;
cols=quot;
20quot;
class=quot;
textarea4quot;
>ข้อความของคุณค่ะ....</textarea><br /></body></html><br /> <br />Output <br />Example - Textarea <br /><html><head><style type=quot;
text/cssquot;
>.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}.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=quot;
border:1px solid #000; background:#add8e6; padding:5px; width:310pxquot;
><textarea rows=quot;
4quot;
class=quot;
textarea_aquot;
>ข้อความของคุณค่ะ....</textarea></div><br /><br /><br /><div style=quot;
border:1px solid #000;background:#fff;padding:4px; width:320pxquot;
><div style=quot;
border:1px solid #000;margin-bottom:4pxquot;
><div style=quot;
border-width:1px;border-style:solid;border-color:#fff #98cee0 #98cee0 #fff;background:#add8e6;color:#000;text-align:center;font-size:12px;padding:4pxquot;
>หัวข้อ</div></div><textarea rows=quot;
5quot;
class=quot;
textarea_bquot;
>ข้อความของคุณค่ะ....</textarea></div><br /><br /><br /><div style=quot;
border:1px solid #ff6699; width:320pxquot;
><div style=quot;
border-width:1px;border-style:solid;border-color:#fff #ffbbbb #ffbbbb #fff;background:#ffcccc;padding:4pxquot;
><div style=quot;
border-width:1px;border-style:solid;border-color:#ffbbbb #fff #fff #ffbbbbquot;
><div style=quot;
border:1px solid #ff6699;background:#fff;padding:2pxquot;
><textarea rows=quot;
5quot;
class=quot;
textarea_cquot;
>ข้อความของคุณค่ะ....</textarea></div></div></div></div><br /></body></html><br />Output <br />หัวข้อ<br />Example - Button <br /><html><br /><head> <style type=quot;
text/cssquot;
>.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><br /></head><body><br /> <input type=quot;
buttonquot;
value=quot;
Submitquot;
class=quot;
button_grayquot;
> <input type=quot;
buttonquot;
value=quot;
Submitquot;
class=quot;
button_imagequot;
></body></html><br /> <br />Output <br />รูปที่ใช้ทำปุ่ม <br />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 <br /><html><head><style type=quot;
text/cssquot;
><br />.cssform p{width: 300px;clear: left;margin: 0;padding: 5px 0 8px 0;padding-left: 155px; /*width of left column containing the label elements*/border-top: 1px dashed gray;height: 1%;}<br />.cssform label{font-weight: bold;float: left;margin-left: -155px; /*width of left column*/width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/}<br />.cssform input[type=quot;
textquot;
]{ /*width of text boxes. IE6 does not understand this attribute*/width: 180px;}<br />.cssform textarea{width: 250px;height: 150px;}<br />/*.threepxfix class below:Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html*/<br />* html .threepxfix{margin-left: 3px;}<br /></style></head><br /><body><form id=quot;
myformquot;
class=quot;
cssformquot;
action=quot;
quot;
><br /><p><label for=quot;
userquot;
>Name</label><input type=quot;
textquot;
id=quot;
userquot;
value=quot;
quot;
/></p><br /><p><label for=quot;
emailaddressquot;
>Email Address:</label><input type=quot;
textquot;
id=quot;
emailaddressquot;
value=quot;
quot;
/></p><br /><p><label for=quot;
commentsquot;
>Feedback:</label><textarea id=quot;
commentsquot;
rows=quot;
5quot;
cols=quot;
25quot;
></textarea></p><br /><p><label for=quot;
commentsquot;
>Sex:</label>Male: <input type=quot;
radioquot;
name=quot;
sexquot;
/> Female: <input type=quot;
radioquot;
name=quot;
sexquot;
/><br /></p><br /><p><label for=quot;
commentsquot;
>Hobbies:</label><input type=quot;
checkboxquot;
name=quot;
hobbyquot;
/> Tennis<br /><input type=quot;
checkboxquot;
name=quot;
hobbyquot;
class=quot;
threepxfixquot;
/> Reading <br /><input type=quot;
checkboxquot;
name=quot;
hobbyquot;
class=quot;
threepxfixquot;
/> Basketball <br /></p><br /><p><label for=quot;
termsquot;
>Agree to Terms?</label><input type=quot;
checkboxquot;
id=quot;
termsquot;
class=quot;
boxesquot;
/></p><br /><div style=quot;
margin-left: 150px;quot;
><input type=quot;
submitquot;
value=quot;
Submitquot;
/> <input type=quot;
resetquot;
value=quot;
resetquot;
/></div></form><br /></body></html><br />Output<br />ส่วนบนของฟอร์ม<br />Name <br />Email Address: <br />Feedback: <br />Sex: Male: Female: <br />Hobbies: TennisReading Basketball <br />Agree to Terms? <br />ส่วนล่างของฟอร์ม<br />อีกตัวอย่าง สวยๆ ค่ะ Credit to : http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.htmlExample <br /><html><head><style type=quot;
text/cssquot;
><br />body{font-family:quot;
Lucida Grandequot;
, quot;
Lucida Sans Unicodequot;
, 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;}<br />/* ----------- 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:4px 2px;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;}<br /></style></head><br /><body><div id=quot;
stylizedquot;
class=quot;
myformquot;
><form id=quot;
formquot;
name=quot;
formquot;
method=quot;
postquot;
action=quot;
index.htmlquot;
><h1>Sign-up form</h1><p>This is the basic look of my form without table</p><br /><label>Name<span class=quot;
smallquot;
>Add your name</span></label><input type=quot;
textquot;
name=quot;
namequot;
id=quot;
namequot;
/><br /><label>Email<span class=quot;
smallquot;
>Add a valid address</span></label><input type=quot;
textquot;
name=quot;
emailquot;
id=quot;
emailquot;
/><br /><label>Password<span class=quot;
smallquot;
>Min. size 6 chars</span></label><input type=quot;
textquot;
name=quot;
passwordquot;
id=quot;
passwordquot;
/><br /><button type=quot;
submitquot;
>Sign-up</button><div class=quot;
spacerquot;
></div><br /></form></div><br /></body></html><br />Output <br />ส่วนบนของฟอร์ม<br />Sign-up form<br />This is the basic look of my form without table<br />Name Add your name Email Add a valid address Password Min. size 6 chars Sign-up <br />ส่วนล่างของฟอร์ม<br />Background<br />เราสามารถกำหนดลักษณะพื้นหลังของ Element ต่างๆ เช่น <body>, <table>, <p>, <h1>, <h2>, <div> เป็นต้น <br />PropertyDescriptionValues background-attachmentใช้กำหนดว่าต้องการให้ภาพพื้นหลังนั้นอยู่กับที่ หรือว่าเลื่อนไปตาม Scroll Bar fixedscroll fix อยู่กับที่เลื่อนตาม Scroll Barbackground-colorใช้กำหนดทั้งสี พื้นหลังของเว็บเพจ หรือ ตาราง color-rgbcolor-hexcolor-nametransparentรหัสสีชื่อสีbackground-imageใช้กำหนดรูปภาพ ให้พื้นหลังของเว็บเพจ หรือตาราง url ของรูปเช่น url(images/bg.jpg)background-positionใช้กำหนดตำแหน่งการจัดวางรูปภาพพื้นหลังtop lefttop centertop rightcenter leftcenter centercenter rightbottom leftbottom centerbottom rightx% y%xpos ypos background-repeatกำหนดรูปภาพพื้นหลังว่าต้องการให้มีการเรียงต่อรูปภาพหรือไม่repeatrepeat-xrepeat-yno-repeat ไม่ให้มีการวางต่อรูปภาพ วางต่อรูปภาพแนวนอนวางต่อรูปภาพแนวตั้งวางต่อรูปภาพทั้งแนวนอนและตั้งbackgroundเราสามารถกำหนด property ให้กับ background ได้ในคำสั่งประกาศเดียวbackground-colorbackground-imagebackground-repeatbackground-attachmentbackground-position <br />ExampleBackground เป็นรูปอยู่ด้านบน ขวา ไม่ repeat <br /><div style=quot;
background-attachment:scroll; background-image:url(../images/bg1.gif); background-position:top right; background-repeat:no-repeatquot;
><br /><br /><br /><br /></div> <br />Output <br />ExampleBackground เป็นรูปอยู่ตรงกลาง ไม่ repeat <br /><div style=quot;
background-attachment:scroll; background-image:url(../images/bg2.gif); background-position:center; background-repeat:no-repeatquot;
><br /><br /><br /><br /></div> <br />Output <br />ExampleBackground เป็นรูปอยู่ตรงกลาง repeart แนวนอน <br /><div style=quot;
background-attachment:scroll; background-image:url(../images/bg2.gif); background-position:center; background-repeat:repeat-xquot;
><br /><br />Enjoyday.net<br /><br /></div> <br />Output <br />Enjoyday.net<br />ExampleBackground เป็นรูปอยู่ตรงกลาง repeart แนวตั้ง <br /><div style=quot;
background-attachment:scroll; background-image:url(../images/bg2.gif); background-position:center; background-repeat:repeat-yquot;
><br /><br />Enjoyday.net<br /><br /></div> <br />Output <br />Enjoyday.net<br />ExampleBackground เป็นรูป repeart ทั้งแนวนอน และแนวตั้ง <br /><div style=quot;
background-image:url(../images/bg2.gif); background-repeat:repeatquot;
><br /><br />Enjoyday.net<br /><br /></div> <br />Output <br />Enjoyday.net<br />ExampleBackground เป็นพื้นสีฟ้า <br /><div class=quot;
output_boxquot;
style=quot;
background-color:#D7EBFFquot;
><br /><br />Enjoyday.net<br /><br /></div> <br />Output <br />Enjoyday.net<br />ExampleBackground เป็นรูป Fix <br /><textarea style=quot;
background-image:url(../images/bg1.gif); background-attachment:fixed; width:300px quot;
rows=quot;
3quot;
>สวัสดีค่ะ นี่เป็น Background แบบ Fixรูปจะไม่เลือนไปตาม Scroll Bar ค่ะ.... </textarea><br />Output <br />ExampleBackground เป็นรูปไม่ Fix เลื่อนตาม Scroll Bar <br /><textarea style=quot;
background-image:url(../images/bg1.gif); background-attachment:scroll; width:300pxquot;
rows=quot;
3quot;
>สวัสดีค่ะ นี่เป็น Background แบบไม่ Fixรูปจะเลือนไปตาม Scroll Bar ค่ะ.... </textarea><br />Output <br />Border<br />เราสามารถกำหนดลักษณะเส้นกรอบของ Element ต่างๆ ได้ เช่น <p>, <div> เป็นต้น <br />PropertyDescriptionValues border-widthใช้กำหนดขนาดของกรอบของวัตถุทั้ง 4 ด้าน thinmediumthicklengthเช่น 5px, 5ptborder-styleใช้การกำหนดลักษณะของกรอบของวัตถุทั้ง 4 ด้าน nonehiddendotteddashedsoliddoublegrooveridgeinsetoutsetdotteddashedsoliddoublegrooveridgeinsetoutsetborder-colorใช้การกำหนดสีกรอบของวัตถุทั้ง 4 ด้าน *ต้องกำหนด style ก่อนcolor borderสามารถกำหนด property ให้กับ border ได้ในคำสั่งประกาศเดียวborder-widthborder-styleborder-color border-top-widthborder-top-styleborder-top-colorborder-top ่ใช้กำหนดคุณสมบัติให้กับกรอบด้านบน border-bottom-widthborder-bottom-styleborder-bottom-colorborder-bottom ใช้กำหนดคุณสมบัติให้กับกรอบด้านล่าง border-left-widthborder-left-styleborder-left-colorborder-leftใช้กำหนดคุณสมบัติให้กับกรอบด้านซ้าย border-right-widthbordr-right-styleborder-right-colorborder-righteใช้กำหนดคุณสมบัติให้กับกรอบด้านขวา <br />Exampleกำหนดขนาด border <br /><div style=quot;
border-top-width:5px; border-right-width:5px; border-bottom-width:5px; border-left-width:5px;quot;
><br /> <br /> <br /></div>หรือ<div style=quot;
border-width:5pxquot;
><br /><br /><br /></div> <br />Output <br />กำหนดขนาดให้เส้นกรอบทั้ง 4 ด้านมีค่า 5px Exampleกำหนดขนาด border <br /><div class=quot;
output_boxquot;
style=quot;
border-width:1px 10pxquot;
><br /><br /><br /></div> <br />Output <br />กำหนดขนาดให้เส้นกรอบ บน ล่าง เป็น 1px, และขนาดเส้นกรอบ ซ้าย ขวา เป็น 10px Exampleกำหนดขนาด border <br /><div class=quot;
output_boxquot;
style=quot;
border-width:1px 10px 20pxquot;
><br /><br /><br /></div> <br />Output <br />กำหนดขนาดให้เส้นกรอบ บน เป็น 1px, ขนาดเส้นกรอบ ซ้าย ขวา เป็น 10px และขนาดเส้นกรอบ ล่าง เป็น 20pxExampleกำหนดขนาด border <br /><div class=quot;
output_boxquot;
style=quot;
border-top-width:1px; border-right-width:10px; border-bottom-width:20px; border-left-width:30px;quot;
><br /> <br /> <br />หรือ</div> <div class=quot;
output_boxquot;
style=quot;
border-width:1px 10px 20px 30pxquot;
><br /><br /><br /></div> <br />Output <br />กำหนดขนาดให้เส้นกรอบ 1px 10px 20px 30px เป็นขนาดของเส้นกรอบ บน ขวา ล่าง ซ้าย ตามลำดับExampleลักษณะ border <br /><div style=quot;
border-style:dashed dotted solid double; border-color:#FF6633quot;
><br /><br /><br /><br /></div> <br />Output <br />กำหนดลักษณะให้เส้นกรอบในคำสั่งเดียว dashed dotted solid double เป็นลักษณะของเส้นกรอบ บน ขวา ล่าง ซ้าย ตามลำดับExampleกำหนดสี border <br /><div style=quot;
border-style:solid; border-color:red blue green blackquot;
><br /> <br /> <br /></div> <br />Output <br />กำหนดสีให้เส้นกรอบในคำสั่งเดียว red blue green black เป็นสีของเส้นกรอบ บน ขวา ล่าง ซ้าย ตามลำดับExampleกำหนด property ให้กับ border ในคำสั่งประกาศเดียว <br /><div style=quot;
border-width:5px; border-style:double; border-color:#336699quot;
><br /> <br /> <br /></div>หรือ<div style=quot;
border:5px double #336699quot;
><br /> <br /> <br /></div> <br />Output <br />กำหนด property ให้กับ border ได้ในคำสั่งประกาศเดียว<br />Margin, Padding<br />PropertyDescriptionValues margin-topใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านบน กับวัตถุอื่นๆautolengthเช่น 5px, 5pt,5cm margin-bottomใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านล่าง กับวัตถุอื่นๆ margin-leftใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านซ้าย กับวัตถุอื่นๆ margin-rightใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านขวา กับวัตถุอื่นๆ marginใช้กำหนดระยะห่างระหว่างขอบของวัตถุที่ต้องการ ทั้ง 4 ด้าน กับวัตถุอื่น ๆ ในคำสั่งเดียว padding-topใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นบน กับ ข้อความที่อยู่ในกรอบ padding-bottomใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นล่าง กับ ข้อความที่อยู่ในกรอบ padding-leftใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นซ้าย กับ ข้อความที่อยู่ในกรอบ padding-rightใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นขวา กับ ข้อความที่อยู่ในกรอบ paddingใช้กำหนดระยะห่างระหว่างขอบของวัตถุด้านใน กับ ข้อความที่อยู่ในกรอบ (ไม่เกี่ยวข้องกับวัตถุด้านนอก) <br />Exampleถ้าไม่ได้ใช้้งาน margin และ padding <br />ข้อความข้างนอกด้านบน<div style=quot;
border:20px solid #3399CCquot;
>block นี้มี Border สีน้ำเงิน ขนาด 20px ไม่ใช้งาน Margin และ Padding ลองมาดูกันว่าได้ผลเป็นอย่างไร</div>ข้อความข้างนอกด้านล่าง <br />Output <br />ข้อความข้างนอกด้านบน block นี้มี Border สีน้ำเงิน ขนาด 20px ไม่ใช้งาน Margin และ Padding ลองมาดูกันว่าได้ผลเป็นอย่างไร ข้อความข้างนอกด้านล่าง ลองมาดูต่อว่า... ถ้านำ margin และ padding มาใช้งานล่ะ Example การใช้งาน margin และ padding <br />ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านบน<div style=quot;
margin:20px; padding:20px; border:20px solid #3399CCquot;
>block นี้มี Border สีน้ำเงิน ขนาด 20px <br />มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 20px<br />และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทีนี้คงเข้าใจแล้วว่า margin และpadding คือส่วนไหนกันแล้ว</div>ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านล่าง <br />Output <br />ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านบน <br />block นี้มี Border สีน้ำเงิน ขนาด 20px มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 20pxและมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทีนี้คงเข้าใจแล้วว่า margin และpadding คือส่วนไหนกันแล้ว <br />ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านล่าง <br />ถ้ายังงงๆ ว่าตรงไหนคือ margin และ padding อยู่ ให้ดูที่รูปนี้ค่ะ Exampleการใช้งาน margin ที่แต่ละด้านไม่เท่ากัน <br /><div style=quot;
margin:20px; padding:10px 20px 30px 40px; border:2px solid #009999quot;
>block นี้มี Border สีส้ม ขนาด 2px <br />มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 10px 20px 30px 40px ซึ่งเป็น pading ของด้านบน ขวา ล่าง ซ้าย ตามลำดับ และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทั้ง 4 ด้าน</div>ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านล่าง <br />Output <br />ความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 10x นี่คือ margin ด้านบน <br />block นี้มี Border สีส้ม ขนาด 2px มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 20px ทั้ง 4 ด้าน และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 10px 20px 30px 40px ซึ่งเป็น margin ของด้านบน ขวา ล่าง ซ้าย ตามลำดับ ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 30x นี่คือ margin ด้านล่าง <br />Exampleการใช้งาน padding ที่แต่ละด้านไม่เท่ากัน <br />ความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านบน<div style=quot;
margin:20px; padding:10px 20px 30px 40px; border:2px solid #009999quot;
>block นี้มี Border สีเขียว ขนาด 2px <br />มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 10px 20px 30px 40px ซึ่งเป็น pading ของด้านบน ขวา ล่าง ซ้าย ตามลำดับ และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทั้ง 4 ด้าน</div>ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านล่าง <br />Output <br />ความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านบน <br />block นี้มี Border สีเขียว ขนาด 2px มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 10px 20px 30px 40px ซึ่งเป็น pading ของด้านบน ขวา ล่าง ซ้าย ตามลำดับ และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทั้ง 4 ด้าน <br />ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านล่าง <br />Example อื่นๆ<br />h1 {margin: 10px}<br />Happy New Year<br />margin ทั้ง4 ด้านเป็น 10px <br />h1 {margin: 10px 2%}<br />Happy New Year<br />margin ด้านบนและล่าง 10px, ด้านขวาและซ้าย เป็น 2% ของความกว้างเอกสาร <br />h1 {margin: 10px 2% -10px}<br />Happy New Year<br />margin ด้านบน 10px, ด้านขวาและซ้าย 2% ของความกว้างเอกสาร, ด้านล่าง เป็น -10px <br />h1 {margin: 10px 2% -10px auto}<br />Happy New Year<br />margin ด้านบน 10px, ด้านขวา 2% ของความกว้างเอกสาร, ด้านล่าง เป็น -10px และด้านซ้ายกำหนดตาม Browser <br />Exampleการใช้งานผสม Chapter 8-12 <br /><html><head><style type=quot;
text/cssquot;
>.mixcode {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:2px dotted #FF6699; margin:20px; padding:20px</style></head><body>Hello all,<div class=quot;
mixcodequot;
>Happy New Year 2009</div>Hope you enjoy your stay here.</body></html> <br />Output <br />Hello all, <br />Happy New Year 2009<br />Hope you enjoy your stay here. <br />List<br />PropertyDescriptionValues list-style-typeใช้กำหนดลักษณะที่ใช้นำหน้าแต่ละรายการย่อย nonedisccirclesquaredecimaldecimal-leading-zerolower-romanupper-romanlower-alphaupper-alphalower-greeklower-latinupper-latinhebrewarmeniangeorgiancjk-ideographichiraganakatakanahiragana-irohakatakana-iroha disccirclesquaredecimaldecimal-leading-zerolower-romanupper-romanlower-alphaupper-alphalower-greeklower-latinupper-latinhebrewarmeniangeorgiangeorgiancjk-ideographichiraganahiragana-irohakatakana-irohalist-style-positionใช้การกำหนดลักษณะการปัดขึ้นบรรทัดใหม่ของข้อความ กรณีที่มีความยาวเกิน 1 บรรทัด * ถ้าไม่กำหนดจะเป็นแบบ outsideinsideoutsideจัดให้ตรงแนวกับสัญลักษณ์จัดให้ตรงแนวกับข้อความแถวแรกlist-style-imageใช้การกำหนดรูปภาพเพื่อนำมาเป็นสัญลักษณ์รายการย่อยurlของรูปภาพ list-styleสามารถกำหนด property ให้กับ list ได้ในคำสั่งประกาศเดียวlist-style-typelist-style-positionlist-style-image <br />Example <br />Enjoyday.net - Web builder Tutorial<ul style=quot;
list-style-type:squarequot;
><li>HTML</li><li>CSS</li><li>XHTML</li><li>JavaScript</li><li>SQL</li></ul><br />Output <br />Enjoyday.net - Web builder Tutorial <br />HTML<br />CSS<br />XHTML<br />JavaScript<br />SQL<br />Example <br />Enjoyday.net - Web builder Tutorial<ul><li style=quot;
list-style-type:circlequot;
>HTML</li><li style=quot;
list-style-type:discquot;
>CSS</li><li style=quot;
list-style-type:squarequot;
>XHTML</li><li style=quot;
list-style-type:decimalquot;
>JavaScript</li><li style=quot;
list-style-type:upper-romanquot;
>SQL</li></ul><br />Output <br />Enjoyday.net - Web builder Tutorial <br />HTML<br />CSS<br />XHTML<br />JavaScript<br />SQL<br />Example <br />Enjoyday.net - Web builder Tutorial<ul style=quot;
list-style-image:url(images/list.gif)quot;
><li>HTML</li><li>CSS</li><li>XHTML</li><li>JavaScript</li><li>SQL</li></ul><br />Output <br />Enjoyday.net - Web builder Tutorial <br />HTML<br />CSS<br />XHTML<br />JavaScript<br />SQL<br />Example <br />ประโยชน์ของ CSS<ul style=quot;
list-style-type:circle; list-style-position:insidequot;
><li>การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำได้ง่ายและรวดเร็ว</li><li>เมื่อ code ภายในเอกสาร HTML ลดลง ทำให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว</li><li>สามารถกำหนดรูปแบบการแสดงผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำให้เวลาแก้ไขหรือปรับปรุงทำได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML Tag ต่างๆ ทั่วทั้งเอกสาร</li></ul><br />Output <br />ประโยชน์ของ CSS <br />การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำได้ง่ายและรวดเร็ว<br />เมื่อ code ภายในเอกสาร HTML ลดลง ทำให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว<br />สามารถกำหนดรูปแบบการแสดงผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำให้เวลาแก้ไขหรือปรับปรุงทำได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML Tag ต่างๆ ทั่วทั้งเอกสาร<br />Example <br />ประโยชน์ของ CSS<ul style=quot;
list-style-type:circle; list-style-position:outsidequot;
><li>การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำได้ง่ายและรวดเร็ว</li><li>เมื่อ code ภายในเอกสาร HTML ลดลง ทำให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว</li><li>สามารถกำหนดรูปแบบการแสดงผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำให้เวลาแก้ไขหรือปรับปรุงทำได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML Tag ต่างๆ ทั่วทั้งเอกสาร</li></ul><br />Output <br />ประโยชน์ของ CSS <br />การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำได้ง่ายและรวดเร็ว<br />เมื่อ code ภายในเอกสาร HTML ลดลง ทำให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว<br />สามารถกำหนดรูปแบบการแสดงผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำให้เวลาแก้ไขหรือปรับปรุงทำได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML Tag ต่างๆ ทั่วทั้งเอกสาร<br />Example กำหนด property ให้กับ list ได้ในคำสั่งประกาศเดียว <br />ประโยชน์ของ CSS<ul style=quot;
list-style:decimal insidequot;
><li>การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำได้ง่ายและรวดเร็ว</li><li>เมื่อ code ภายในเอกสาร HTML ลดลง ทำให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว</li><li>สามารถกำหนดรูปแบบการแสดงผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำให้เวลาแก้ไขหรือปรับปรุงทำได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML Tag ต่างๆ ทั่วทั้งเอกสาร</li></ul> <br />Output <br />ประโยชน์ของ CSS <br />การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำได้ง่ายและรวดเร็ว<br />เมื่อ code ภายในเอกสาร HTML ลดลง ทำให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว<br />สามารถกำหนดรูปแบบการแสดงผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำให้เวลาแก้ไขหรือปรับปรุงทำได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML Tag ต่างๆ ทั่วทั้งเอกสาร<br />Table <br />ต้องใช้กับเว็บเบราเซอร์รุ่นใหม่ๆ เช่น IE6 เป็นต้นไป*บาง property เมื่อทดสอบแล้วไม่เห็นผล <br />PropertyDescriptionValues table-layoutใช้กำหนดความกว้างของตารางและคอลัมน์automaticfixedDefaultกว้างตามที่ำกำหนดเท่านั้นcaption-sideใช้กำหนดตำแหน่งของชื่อตารางtopbottomleftrightDefaultempty-cellsใช้กำหนดว่าจะแสดง/ไม่แสดง เส้นขอบ เมื่อ cell นั้นไม่มีข้อความ (empty)hideshowDefaultborder-spacingใช้กำหนดระยะระหว่างตาราง และขอบ แนวนอน และแนวตั้งlength lengthเช่น 2px 5pxborder-collapseใช้กำหนดลักษณะเส้นขอบseparatecollapseDefault แยกเป็น 2 เส้นเป็นเส้นเดียว<br />Example <br /><html><head><style type=quot;
text/cssquot;
>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><br /><table class=quot;
onequot;
><caption>ตารางแสดงตัวเลข</caption><tr><td width=quot;
20%quot;
>1000000000000000000000000000</td><td width=quot;
40%quot;
>10000000</td><td width=quot;
40%quot;
></td></tr></table><br /><table class=quot;
twoquot;
><caption>ตารางแสดงตัวเลข</caption> <tr><td width=quot;
20%quot;
>1000000000000000000000000000</td><td width=quot;
40%quot;
>10000000</td><td width=quot;
40%quot;
></td></tr></table><br /></body></html> <br />Output <br />ตารางแสดงตัวเลข100000000000000000000000000010000000<br />ตารางแสดงตัวเลข100000000000000000000000000010000000<br />สังเกต ตารางที่สอง จะ fix ความกว้างของช่องตารางไว้ ทำให้แสดงข้อความไม่พอ นอกจากนี้มีการกำหนด cell ว่างให้แสดงด้วย และให้แสดงเส้นขอบรวมเป็นเส้นเดียวExampleลองจัดรูปแบบอื่นๆ ให้กับตาราง โดยใช้ CSS บทที่ผ่านๆ มา ดูค่ะ <br /><html><head><style type=quot;
text/cssquot;
>table.three{width:60%;border:0; } table.three th { font-weight:bold; border-bottom:1px solid #CCC; border-top:1px solid #CCC; background-color:#F2F9FF ;color:#0000CC;}table.three td { padding:5px; border-bottom:1px dotted #CCC; }<br /></style></head><body><br /><table class=quot;
threequot;
cellspacing=quot;
0quot;
><tr><th>รหัสพนักงาน</th><th>ชื่อ</td><th>เงินเดือน</th></tr><tr><td>01</td><td>อำนาจ</td><td align=quot;
rightquot;
>30,000</td></tr><tr><td>02</td><td>สมชาย</td><td align=quot;
rightquot;
>25,000</td></tr><tr><td>03</td><td>วีระ</td><td align=quot;
rightquot;
>20,000</td></tr></table><br /></body></html> <br />Output <br />รหัสพนักงานชื่อเงินเดือน01อำนาจ30,00002สมชาย25,00003วีระ20,000<br />Link <br />PropertyPurposea:linkกำหนด style ให้กับ link ปกติที่ยังไม่เคยถูก clicka:visitedกำหนด style ให้กับ link ที่เคยถูกคลิกแล้วa:hoverกำหนด style ให้กับ link เมื่อเลื่อนเมาส์ไปอยู่เหนือ linka:activeกำหนด style ให้กับ link ขณะถูกคลิก<br />Example <br /><html><head><style type=quot;
text/cssquot;
>.linkbox a:link {color: #FF0000} /* unvisited link สีแดง*/ .linkbox a:visited {color: #00FF00} /* visited link สีเขียว*/ .linkbox a:hover {color: #FF00FF} /* mouse over link สีชมพู */ .linkbox a:active {color: #0000FF} /* selected link สีน้ำเงิน*/ </style></head><body><div class=quot;
linkboxquot;
><a href=quot;
css_chapter01.htmlquot;
>Chapter1</a><a href=quot;
css_chapter02.htmlquot;
>Chapter2</a><a href=quot;
css_chapter03.htmlquot;
>Chapter3</a><a href=quot;
css_chapter04.htmlquot;
>Chapter4</a><a href=quot;
css_chapter05.htmlquot;
>Chapter5</a></div><body></html><br />Output <br />Chapter1 Chapter2 Chapter3 Chapter4 Chapter5 <br />Example <br /><html><head><style type=quot;
text/cssquot;
>.linkpage a { font:12px Arial, Helvetica, sans-serif; background: #F8FBFC; color: #56ADDC; text-decoration: none; padding: 2px 4px; border: 1px solid #1BA0CD; }.linkpage a:hover { background-color:#C0F5FA;border-color: #608BD2; color:#0076AE }.linkpage span { font: 12px Arial, Helvetica, sans-serif; color:#333333; padding: 2px 4px; }</style></head><body><div class=quot;
linkpagequot;
style=quot;
margin:auto; padding:10pxquot;
><span>Page :</span><a href=quot;
css_chapter01.htmlquot;
>« First</a><a href=quot;
css_chapter14.htmlquot;
>‹ Prev</a><a href=quot;
css_chapter01.htmlquot;
>1</a><a href=quot;
css_chapter02.htmlquot;
>2</a><a href=quot;
css_chapter03.htmlquot;
>3</a><a href=quot;
css_chapter16.htmlquot;
>Next ›</a> <a href=quot;
css_chapter25.htmlquot;
>Last »</a> </div><body></html> <br />Output <br />Page : « First ‹ Prev 1 2 3 Next › <br />Classification<br />การแสดงผลวัตถุว่าจะแสดงอย่างไร ที่ไหน<br />PropertyDescriptionV](https://image.slidesharecdn.com/random-110310001023-phpapp02/85/-1-320.jpg)
