Your SlideShare is downloading. ×
รายงาน    เรื่อง    CSS Table Design               จัดทำาโดยน.ส. พิทยารัตน์ แก้วดับภัย เลขที่ ١٤        ชั้นมัธยมศึกษาปีที...
คำานำา                 รายงานเล่ม นี้จัดทำา ขึ้นเพื่ อเป็น สื่อการเรียนการสอนให้แก่ พี่ๆ น้อง ๆ ทุกคนมีความรู้ในเรื่องเกี่...
สารบัญเรือง   ่หน้าIntroductionSyntaxUnitColorInsert stylusesSelector: HTML tag, class, idContextual selectorsFontTextBack...
ImageFormScroll barMousecursorMedia typesLayout (Table)Layout (DIV)Pseudo-classesPseudo-elementบรรณานุกรมhttp://www.enjoyd...
CSS ย่อมาจาก Cascading Style Sheets เป็นภาษาทีมี    ่รูปแบบการเขียน Syntax ที่เฉพาะ และถูกกำาหนดมาตรฐานโดยW3C (World Wide ...
<h1><font color="red" face="Arial">วิธีดูแลรักษาสุขภาพ</font></h1><p><font color="black" face="Arial"><b>รับประทานอาหารที่...
ทั้งมื้อ เพือให้ร่างกายจัดเตรียมการย่อยได้ง่าย ไม่สับสน นอกจาก            ่นี้ยังไม่ควรกินผลไม้ทันทีหลังอาหารถ้าทานมื้อหลั...
Comment ใน Style Sheet Comment จะใช้เครื่องหมาย "/*"เป็นการเปิด และ "*/" เป็นการปิด เช่น /* นี่คือ commentกำาหนดสีตวอักษรเ...
การกำาหนดสีให้ตัวอักษร พื้นหลัง เส้นขอบ หรือส่วนอื่นๆ ของวัตถุสามารถกำาหนดได้หลายแบบ1. กำาหนดโดยใช้ชื่อสี แต่การระบุชื่อสี...
F                 5)วิธีใช้งาน Style Sheet   1. Inline Styles วิธีการนี้ควรใช้ในกรณีที่ต้องการกำาหนด      style ให้กับ ele...
<style type="text/css"><!--selector {property1: value1; property2: value2}....--></style>Example<Html><Body><Head><style t...
ตัวอย่างนี้จะสร้าง Style Sheet เก็บไว้ในไฟล์หนึ่ง แล้วให้ไฟล์เอกสาร HTML หลายๆ หน้ามาเรียกใช้Exampleในไฟล์ Mystyle.css ให้...
นอกจากนี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</p></body></html>การที่เราใช้งาน CSS โดย...
<body><head><style type="text/css"><!-- h1{color:red; font-family:Arial }   p{color:black; font-family:Arial }--></style><...
<!--.topic {color:red; font-family:Arial; font-weight:bold;text-align:center } .content {color:black; font-family:Arial; }...
p.center {text-align:center} p.bold{ font-weight:bold}</style></head><body> <p class="center bold">ข้อความในพารากราฟนี้จะจ...
อาจจะยังไม่เข้าใจตอนนี้ ไว้เห็นตัวอย่างมากๆ เข้า จะค่อยๆ เข้าใจเองค่ะ แล้วจะรู้ได้อย่างไรว่าค่า property และ value เช่น te...
วิธีรักษาสุขภาพ   วิธีลดนำ้าหนัก   วิธีรักษาสุขภาพ   วิธีรักษาสุขภาพอีกตัวอย่างหนึ่ง เพื่อแสดงให้เห็นประโยชน์ของการใช้Cont...
class="borderimage" /><img src="../images/star_icons.gif"class="borderimage" /><img src="../images/star_icons.gif"class="b...
<body><ahref="http://www.enjoyday.net/webtutorial/html/index.html" class="bold link">HTML</a><br /><ahref="http://www.enjo...
<a href="http://www.enjoyday.net/webtutorial/xhtml/index.html">XHTML</a><br /><ahref="http://www.enjoyday.net/webtutorial/...
70%                                                150%font-style   ใช้กำาหนดรูปแบบของตัวอักษรใน normal             ลักษณะ...
(World Wide Web Consortium) เช่นเดียวกับ HTML และ XHTML ใช้สำาหรับตกแต่งเอกสาร HTML/ XHTM ให้มีหน้าตา สีสันตัวอักษร เส้นขอ...
Form ได้แก่ input box, text area, button เป็นต้น ให้มสีสันที่                                                     ีสวยงามไ...
<input type="text" size="30" class="textbox image"value="enjoyday.net" /><br><br><input type="text" size="30" class="textb...
solid #add8e6;font-size:12px}.textarea4 {scrollbar-arrow-color:#ffb090;scrollbar-face-color:#fff;scrollbar-highlight-color...
.</text area><text area rows="4" cols="20" class="textarea4">ข้อความของคุณค่ะ....</textarea></body></html>OutputExample - ...
color:#fff;scrollbar-3dlight-color:#fff;scrollbar-track-color:#fff;scrollbar-shadow-color:#fff;scrollbar-darkshadow-color:...
</text area></div><br /><div style="border:1px solid #ff6699; width:320px"><div style="border-width:1px;border-style:solid...
<head> <style type="text/css">.button_gray {font-family:Arial, Helvetica, sans-serif;font-weight:bold;color:#333333;backgr...
<html><head><style type="text/css">.cssform p{width: 300px;clear: left;margin: 0;padding:5px 0 8px 0;padding-left: 155px; ...
<p><label for="email address">Email Address:</label><input type="text" id="email address" value="" /></p><p><label for="co...
</div></form></body></html>OutputNameEmail Address:Feedback:Sex: Male: Female:Hobbies: TennisReadingBasketballAgree to Ter...
/* ----------- My Form ----------- */.myform{margin:0 auto;width:400px;padding:14px;}/* ----------- stylized ----------- *...
<label>Name<span class="small">Add your name</span></label><input type="text" name="name" id="name" /><Label>Email<span cl...
ybackgr    ใช้กำาหนดว่าต้องการ      fixed    fix อยู่กับที่ound-     ให้ภาพพื้นหลังนั้นอยู่   scroll   เลื่อนตาม Scrollatt...
วางต่อรูปภาพทั้ง                                         แนวนอนและตั้งbackgr เราสามารถกำาหนด      backgrounound   property...
position:center; background-repeat:repeat-x"><br /><br />Enjoyday.net<br /><br /></div>OutputEnjoyday.netExample Backgroun...
<textarea style="background-image:url(../images/bg1.gif); background-attachment:fixed; width:300px " rows="3">สวัสดีคะ    ...
lengthborder-style ใช้การกำาหนด          none           dotted             ลักษณะของกรอบ         hidden             ของวัต...
border-bottom-colorborder-bottomborder-left-    ใช้กำาหนดคุณสมบัติwidth           ให้กับกรอบด้านซ้ายborder-left-styleborde...
<div class="output_box" style="border-width:1px10px"><br /><br /><br /></div>Outputกำาหนดขนาดให้เส้นกรอบ บน ล่าง เป็น 1px,...
<div style="border-style:dashed dotted solid double;border-color:#FF6633"><br /><br /><br /><br /></div>Outputกำาหนดลักษณะ...
top       วัตถุดานบน กับวัตถุอื่นๆ                ้                                    lengt 5px,                         ...
Exampleถ้าไม่ได้ใช้่้ งาน margin และ padding ข้อความข้างนอกด้านบน<div style="border:20px solid #3399CC">block นี้มีBorder ...
ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือmargin ด้านบน block นี้มี Border สีนำ้าเงิน ขนาด 20px มีPadding ร...
ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือmargin ด้านล่างOutputความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block ...
ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 10px 20px30px 40px ซึ่งเป็น pading ของด้านบน ขวา ล่าง ซ้าย ตามลำาดับและมี Mar...
<style type="text/css">.miscode {font: normal small-caps bold 16px Arial,Helvetica, sans-serif; color:#FF0033;text-align:c...
lower-       •lower-                               roman        roman                               upper-                ...
image        รูปภาพเพื่อนำามา             เป็นสัญลักษณ์             รายการย่อยlist-style   สามารถกำาหนด        list-style-...
<li style="list-style-type: square">XHTML</li><li style="list-style-type: decimal">JavaScript</li><li style="list-style-ty...
ประโยชน์ของ CSS<ul style="list-style-type: circle; list-style-position:outside"><li>การใช้ css ในการจัดรูปแบบการแสดงผล จะช...
<li>เมื่อ code ภายในเอกสาร HTML ลดลง ทำาให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว</li><li>สามารถกำาหนดรูปแบบการแสดงผลจากคำาสั่...
cells      แสดง/ไม่แสดง         show           เส้นขอบ เมื่อ cell           นั้นไม่มีข้อความ           (empty)border-    ใ...
</tr></table><br /><table class="two"><caption>ตารางแสดงตัวเลข</caption><tr><tdwidth="20%">1000000000000000000000000000</t...
table.three{width:60%;border:0; }table.three th { font-weight:bold; border-bottom:1pxsolid #CCC; border-top:1px solid #CCC...
</body></html>Outputรหัสพนักงาน   ชื่อ       เงินเดือน01            อำานาจ      30,00002            สมชาย       25,00003  ...
<a href="css_chapter04.html">Chapter4</a><a href="css_chapter05.html">Chapter5</a></div><body></html>OutputChapter1 Chapte...
</div><body></html>Classificationการแสดงผลวัตถุว่าจะแสดงอย่างไร ที่ไหนProperty   Description            ValuesFloat      ใ...
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
รายงาน กลุ่ม คอม ฟ้า
Upcoming SlideShare
Loading in...5
×

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

582

Published on

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

  • Be the first to like this

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

No notes for slide

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

  1. 1. รายงาน เรื่อง CSS Table Design จัดทำาโดยน.ส. พิทยารัตน์ แก้วดับภัย เลขที่ ١٤ ชั้นมัธยมศึกษาปีที่ 4 เสนอ อ. ฐิติพร ไหวดี โรงเรียนทองสวัสดิ์วิทยาคารสำานักงานเขตพื้นที่ประศึกษา เขต 2
  2. 2. คำานำา รายงานเล่ม นี้จัดทำา ขึ้นเพื่ อเป็น สื่อการเรียนการสอนให้แก่ พี่ๆ น้อง ๆ ทุกคนมีความรู้ในเรื่องเกี่ยวกั บ การสอนวิ ธี ใ ช่ CSS Table Design มี เ นื้ อ หาบอกเล่ า ถึ ง วิ ธี ก ารใช่ ง านหรื อ การเตี ย มตั ว ก่ อ นเริ่ ม เรี ย นCSS สุดท้ายนี้รายงานเล่มนี้หวังว่าคงจะเป็นประโยชน์กั บ เพื่ อ นๆ พี่ ๆ น้ อ งๆ ไม่ ม ากก็ น้ อ ยหากผิ ด พลาดประการใดต้องขออภัยมา ณ ที่นี้ด้วย
  3. 3. สารบัญเรือง ่หน้าIntroductionSyntaxUnitColorInsert stylusesSelector: HTML tag, class, idContextual selectorsFontTextBackgroundBorderMargin, paddingLinkTableClassificationPositioning
  4. 4. ImageFormScroll barMousecursorMedia typesLayout (Table)Layout (DIV)Pseudo-classesPseudo-elementบรรณานุกรมhttp://www.enjoyday.net/webtutorial/css/css_chapter02.htmlCSS คืออะไร
  5. 5. CSS ย่อมาจาก Cascading Style Sheets เป็นภาษาทีมี ่รูปแบบการเขียน Syntax ที่เฉพาะ และถูกกำาหนดมาตรฐานโดยW3C (World Wide Web Consortium) เช่นเดียวกับ HTML และXHTML ใช้สำาหรับตกแต่งเอกสาร HTML/ XHTML ให้มีหน้าตาสีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการด้วยการกำาหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML เช่น<body>, <p>, <h1> เป็นต้นประโยชน์ของ CSS1. การใช้ CSS ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำาให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำาให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำาได้งายและรวดเร็ว ่2. เมื่อ Code ภายในเอกสาร HTML ลดลง ทำาให้ขนาดไฟล์เล็กลงจึงดาวน์โหลดได้เร็ว3. สามารถกำาหนดรูปแบบการแสดงผลจากคำาสั่ง Style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำาให้เวลาแก้ไขหรือปรับปรุงทำาได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML tagต่างๆ ทั่วทั้งเอกสาร4. สามารถควบคุมการแสดงผลให้เหมือนกัน หรือใกล้เคียงกัน ได้ในหลาย Web Browser5. สามารถกำาหนดการแสดงผลในรูปแบบที่เหมาะกับสื่อชนิดต่างๆไม่วาจะเป็นการแสดงผลบนหน้าจอ, บนกระดาษเมื่อสั่งพิมพ์, บน ่มือถือ หรือบน PDA โดยที่เป็นเนื้อหาเดียวกัน6. ทำาให้เป็นเว็บไซต์ที่มมาตรฐาน ปัจจุบันการใช้ Attribute ของ ีHTML ตกแต่งเอกสารเว็บเพจ นั้นล้าสมัยแล้ว W3C แนะนำาให้เราใช้ CSS แทน ดังนั้นหากเราใช้ CSS กับเอกสาร HTML ของเรา ก็จะทำาให้เข้ากับเว็บเบราเซอร์ในอนาคตได้ดี ตัวอย่างกรณีที่จัดรูปแบบการแสดงผลด้วยภาษา HTML<Html><body>
  6. 6. <h1><font color="red" face="Arial">วิธีดูแลรักษาสุขภาพ</font></h1><p><font color="black" face="Arial"><b>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำาลังกาย และพักผ่อนให้เพียงพอ</b></font></p><h1><font color="red" face="Arial">วิธีกินผลไม้ที่ถูกต้อง</font></h1><p><font color="black" face="Arial"><b>ให้กินผลไม้แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ เพื่อให้ร่างกายจัดเตรียมการย่อยได้งาย ไม่สับสน นอกจากนี้ยังไม่ควรกิน ่ผลไม้ทันทีหลังอาหารถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20นาที</b></font></p></body></html>ตัวอย่างเมื่อเปลี่ยนมาใช้คำาสัง Style sheet จัดรูปแบบการแสดง ่ผลแทนการใช้ code ภาษา HTML ทำาให้ code ภายในเอกสารอ่านเข้าใจง่าย และแก้ไขได้ง่ายขึ้น ^^<Html><head><style type="text/css">h1 {color: red; font-family: Arial ;}p {color: black; font-family: Arial; font-weight: bold }</style></head><body><h1>วิธีดูแลรักษาสุขภาพ</h1><p>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำาลังกาย และพักผ่อนให้เพียงพอ</p><h1>วิธีกินผลไม้ที่ถูกต้อง</h1><p>ให้กินผลไม้แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียว
  7. 7. ทั้งมื้อ เพือให้ร่างกายจัดเตรียมการย่อยได้ง่าย ไม่สับสน นอกจาก ่นี้ยังไม่ควรกินผลไม้ทันทีหลังอาหารถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</p> </body></html>โครงสร้างคำาสั่ง คำาสั่งของ CSS ประกอบด้วย selector,property และ value Selector {property: value} selector{property1:value1; property2:value2}- selector สามารถเป็น HTML Tag ต่างๆ เช่น <body>, <p>หรือเป็น Class name หรือ ID ที่เราตั้งชื่อให้ก็ได้- property คือ คุณสมบัตในการจัดรูปแบบการแสดงผล เช่น ิcolor สำาหรับกำาหนดสี, font-size สำาหรับกำาหนดขนาดตัวอักษร- value เป็น ค่า ที่เรากำาหนดให้กับ property ต่างๆ เช่นcolor:white, font-size:14pxตัวอย่างคำาสัง CSS ่กำาหนดให้ข้อความที่อยู่ใน Tag <p> เป็นสีดำา และวางอยู่กึ่งกลาง/* selector ที่เป็น HTML Tag */p {color:#000000;text-align: center}กำาหนดให้ข้อความที่ Class name topic เป็นสีแดง ชนิดอักษรเป็นArial ตัวหนา และจัดวางอยู่กึ่งกลาง /* selector ที่เป็น Classname */.topic {color: red; font-family: Arial; font-weight: bold;text-align: center}กรณีที่ Selector มีคา property เหมือนกัน สามารถเขียนรวมกัน ่ได้ โดยใช้เครื่องหมาย "," คั่นระหว่าง selectorกำาหนดให้ข้อความใน Tag <h1>, <h2> และ <h3> เป็นสีแดง ชนิดตัวอักษรเป็นsans-serif H1, h2, h3 {color: red; font-family: sans-serif}สำาหรับเรื่อง Property และ value จะได้ศึกษาอย่างละเอียดในหัวข้อต่อๆ ไป
  8. 8. Comment ใน Style Sheet Comment จะใช้เครื่องหมาย "/*"เป็นการเปิด และ "*/" เป็นการปิด เช่น /* นี่คือ commentกำาหนดสีตวอักษรเป็นสีดำา ขนาด14PX */ body {color: ั#000000; font-size: 14px} หน่วยที่ใช้วัดค่าต่างๆ ใน StyleSheetจาก Syntax ของคำาสั่ง CSS ค่า value ของ property บางค่าจะต้องมีการระบุหน่วยด้วย หน่วยทีใช้งานใน CSS มีอะไรบ้าง มาดู ่กันค่ะ หน่วยแบบ Relative Length (กำาหนดแบบอัตราส่วน) • px (pixels, สัมพันธ์กับค่าความละเอียดของหน้าจอ) เช่น 1px, 4px •em (emphasize, ความสูงของตัวอักษร) เป็นขนาดจำานวนเท่า ของขนาด font ที่กำาหนดให้ body ถ้า font ที่ body กำาหนดเป็น 10px h1{fon-size:1.5em} h1 จะมีขนาดเป็น 1.5 เท่า ของ 10px = 15px h2{fon-size:1.4em} h2 จะมีขนาดเป็น 1.4 เท่า ของ 10px = 14px และถ้าเรากำาหนดเป็น 1em ก็จะมีขนาด้ เท่ากับ 10px เหมือนเดิม •ex (x-height, ความสูงของตัวอักษร "x") เช่น 1.5ex, 2ex •% (percent, สัมพันธ์กับขนาดหน้าจอ หรือ container ทีบรรจุ ่ วัตถุนั้นๆ อยู่) เช่น 50%, 130% หน่วยแบบ Absolute Length (กำาหนดตายตัว) •in (inches; 1in=2.54cm =72pt =6pc) เช่น 2in, 1.5in •cm (centimeters; 1cm=10mm) เช่น 2cm, 1.11cm •mm (millimeters) เช่น 50mm, 0.8mm •pt (points; 1pt=1/72in, 10pt มีขนาดพอๆกับ 12px) เป็น หน่วยทีใช้ในงานสิ่งพิมพเช่น 12pt, 20pt ่ •pc (picas; 1pc=12pt) เช่น 1pc, 2pcสี (Color)
  9. 9. การกำาหนดสีให้ตัวอักษร พื้นหลัง เส้นขอบ หรือส่วนอื่นๆ ของวัตถุสามารถกำาหนดได้หลายแบบ1. กำาหนดโดยใช้ชื่อสี แต่การระบุชื่อสีแบบนี้ใช้สีได้จำานวนจำากัดได้แก่ aqua, black, blue, fuchsia (แดงอมม่วง), gray, green,lime, maroon (นำ้าตาลแดง), navy, olive, purple, red, silver,teal (เขียวขนเป็ด), white, และ yellow2. กำาหนดเป็นค่าสีแบบ RGB •#rrggbb เช่น #eecc00, #42e15e •#rgb เช่น #ec0 หมายถึง #eecc00 •rgb(x,x,x) โดยที่่ x คือจำานวนเต็มตั้งแต่ 0-255 เช่น ่ rgb(0,204,0) •Rgb(y%, y%, y %) โดยที่่ี ่ ่ y คือเปอร์เซ็นต์ตั้งแต่ 0%-100% เช่น rgb (0%, 80%, 0%) รหัสค่าสี รหัสค่าสีชื่อสี ฐาน16 RGB การแสดงผลสี ฐาน16 แบบย่อ #0000Black #000 rgb(0,0,0) 00 #FF00Red #F00 rgb(0,0,0) 00 #00FFGreen #F00 rgb(0,255,0) 00 #0000Blue #00F rgb(0,0,255) FF #FFFF0Yellow #FF0 rgb(255,255,0) 0 #00FFAqua #FF0 rgb(0,255,255) FF #FF00Fuchsia #FF0 rgb(255,0,255) FF #C0C0 rgb(192,192,19Silver C0 2)White #FFFFF #FFF rgb(255,255,25
  10. 10. F 5)วิธีใช้งาน Style Sheet 1. Inline Styles วิธีการนี้ควรใช้ในกรณีที่ต้องการกำาหนด style ให้กับ element ของ HTML เพียงอันเดียวเป็นการ เฉพาะ โดยการแทรกคำาสั่ง style sheet ใน HTML Tag อยู่ ในคำาสั่ง style="" ดังนี้ <Tag style="property: value ;">Example<Html><body><h1 style="color: red; font-family: Arial">วิธีดูแลรักษาสุขภาพ</h1><p style="color: black; font-family: Arial; font-weight:bold">รับประทานอาหารที่มีประโยชน์ หมั่นออกกำาลังกาย และพักผ่อนให้เพียงพอ</p></body></html>เราควรหลีกเลี่ยงการเขียน style=”" ฝังลงใน HTML Tag เพราะมันทำาให้อ่านยาก และนำาไปใช้ต่อไม่ได้ และเป็นการยากที่จะแก้ไข2. Internal Style Sheetวิธีการนี้ควรใช้ในกรณีที่มีเพียง HTML ไฟล์เดียวที่ใช้ style นี้ เมื่อประกาศคำาสั่ง Style Sheet เพื่อกำาหนดคุณสมบัติ ให้กับ HTMLTag ใดๆ แล้ว จะมีผลกับเอกสาร HTML ทั้งหน้า นิยมใส่ส่วนของคำาสั่ง Style Sheet ไว้ระหว่าง <head>...</head> สำาหรับ WebBrowser รุ่นเก่าที่ไม่สนับสนุนคำาสั่ง Style Sheet หรือ DisableStyle Sheet ไว้นั้น ให้ใส่ Comment ของ ภาษา HTML ไว้ด้วยเพื่อให้เว็บเบราเซอร์นั้นทราบว่าไม่ใช่คำาสั่งภาษา HTMLคำาสั่งที่ใช้เริ่มต้น และจบ Style Sheet มีโครงสร้างดังนี้
  11. 11. <style type="text/css"><!--selector {property1: value1; property2: value2}....--></style>Example<Html><Body><Head><style type="text/css"><! -- h1 {color: red; font-family:Arial}P {color: black; font-family: Arial; font-weight: bold} --></style></head><body><h1>วิธีดูแลรักษาสุขภาพ</h1><p>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำาลังกาย และพักผ่อนให้เพียงพอ</p><h1>วิธีกินผลไม้ที่ถูกต้อง</h1><p>ให้กินผลไม้แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ เพือให้ร่างกายจัดเตรียมการย่อยได้ง่าย ไม่สับสน นอกจาก ่นี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</p></body></html>3. External Style Sheetวิธีการนี้เหมาะกับกรณีที่มีเพียง 1 style แล้วต้องการนำาไปใช้กับเอกสาร HTML หลายๆ ไฟล์ โดยนำาเอาคำาสั่ง Style Sheet ที่อยู่ใน <style type="text/css"> ... </style> มาบันทึกเป็นไฟล์ใหม่ นามสกุล .css จากนั้นจึงทำาการผนวกไฟล์ของ Style Sheetนี้ลงไปในเอกสาร HTML ทุกไฟล์ที่ต้องการใช้งาน Style Sheetชุดนี้ ไว้ในส่วน <head>...</head>โดยใช้คำาสั่ง <link rel="style sheet" type="text/css"href="URL ไฟล์.css">
  12. 12. ตัวอย่างนี้จะสร้าง Style Sheet เก็บไว้ในไฟล์หนึ่ง แล้วให้ไฟล์เอกสาร HTML หลายๆ หน้ามาเรียกใช้Exampleในไฟล์ Mystyle.css ให้เขียน code ดังนี้h1 {color: red; font-family: Arial}p {color: black; font-family: Arial; font-weight: bold}ในไฟล์ HTML ex_css_chapter05_3.html เรียกใช้ stylesheet จากภายนอก<Html><Head><link rel="style sheet" type="text/css"href="mystyle.css"></head><Body> <h1>วิธีดูแลรักษาสุขภาพ</h1> <p>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำาลังกาย และพักผ่อนให้เพียงพอ</p></body></html>ในไฟล์ HTML ex_css_chapter05_4.html เรียกใช้ stylesheet จากภายนอก<Html><Head><link rel="style sheet" type="text/css"href="mystyle.css"></head><Body> <h1>วิธีกินผลไม้ที่ถูกต้อง</h1> <p>ให้กินผลไม้แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ เพื่อให้ร่างกายจัดเตรียมการย่อยได้งาย ไม่สบสน ่ ั
  13. 13. นอกจากนี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</p></body></html>การที่เราใช้งาน CSS โดยเรียกใช้จากภายนอก จะทำาให้ไฟล์เวบเพจของเรามีขนาดเล็ก และการแก้ไขคำาสั่ง style sheet เพียงที่เดียว จะมีผลกับเอกสารทุกหน้าได้Cascading Order 1. กรณีที่มีการกำาหนด style ด้วยชื่อ selector เดียวกันทั้งแบบ 3 แบบ Style sheet ที่จะถูกใช้คือแบบไหนลำาดับความสำาคัญ เรียงจากมากไปหาน้อยInline style (inside an HTML element), Internal style sheet (inside the <head> tag) และ External style sheet ตามลำาดับจากลำาดับความ สำาคัญดังกล่าว Style ที่จะถูกใช้คือแบบ Inline style 2. กรณีที่มีการเขียน style ซำ้า selector เดิม อันที่อยู่ดานล่าง จะ ้ ถูกทำาเป็นลำาดับสุดท้าย ตัวอย่าง ไฟล์ mystyle.css p{ color: black } p{ color: blue } เมื่อเราเรียกใช้ <p> ใน HTML เช่น <p>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำาลังกาย และ พักผ่อนให้เพียงพอ</p> จะได้ตวอักษรใน Tag <p> เป็นสีนำ้าเงิน แต่หากเรากำาหนด! ั Important ไว้ใน value เช่น p {color: black! important} p {color: blue} เมื่อเขียนแบบนี้ ใน Tag <p> จะได้ตวอักษรั สีดำาการเขียนคำาสั่ง Style Sheet Selector ที่เป็น HTML TagExample<html>
  14. 14. <body><head><style type="text/css"><!-- h1{color:red; font-family:Arial } p{color:black; font-family:Arial }--></style></head><body><h1>วิธีดูแลรักษาสุขภาพ</h1><p>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำาลังกาย และพักผ่อนให้เพียงพอ</p><h1>วิธีกินผลไม้ที่ถูกต้อง</h1><p>ให้กินผลไม้แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ เพือให้ร่างกายจัดเตรียมการย่อยได้ง่าย ไม่สับสน นอกจาก ่นี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</p></body></html>ตัวอย่างนีเห็นกันมาหลายรอบแล้วนะคะ เป็นการกำาหนด style ให้ ้กับ HTML Tag <h1> และ <p> หมายความว่าข้อความภายใน<h1> ทุกอันในหน้าเว็บเพจนี้ให้เป็นสีแดง และข้อความใน <p>ทุกอันให้เป็นสีดำา มาดู selector แบบอื่นๆ กันบ้าง Selector ที่เป็นClass attribute เป็นการประกาศคำาสั่ง Style Sheet เพื่อกำาหนดคุณสมบัตแบบเฉพาะเจาะจง ให้กับ HTML element ผ่าน class ิattribute โดยเราสามารถตั้งชื่อ class ได้เอง class ใช้เมื่อต้องการใช้แสดงผลรูปแบบนั้นซำ้าหลายๆ ครั้ง หรือต้องการใช้กับelement หลายๆ อัน การประกาศใช้่้ เครื่องหมาย "." นำาหน้าชือ ่classExample<html><head><style type="text/css">
  15. 15. <!--.topic {color:red; font-family:Arial; font-weight:bold;text-align:center } .content {color:black; font-family:Arial; } --></style></head><!-- การเรียกใช้งาน --><body> <div class="topic">บทความ</div> <p class="topic">วิธีดูแลรักษาสุขภาพ</p> <p class="content">รับประทานอาหารที่มีประโยชน์ หมั่นออกกำาลังกาย และพักผ่อนให้เพียงพอ</p> <p class="topic">วิธีกินผลไม้ที่ถูกต้อง</p><p class="content">ให้กินผลไม้แค่ทีละอย่าง เช่น จะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ เพื่อให้ร่างกายจัดเตรียมการย่อยได้ง่าย ไม่สบสน นอกจากนี้ยังไม่ควรกินผลไม้ ัทันทีหลังอาหาร ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20นาที</p><p>หันมาใส่ใจสุขภาพกันเถอะค่ะ</p></body></html>จากตัวอย่างสังเกตได้วา class topic ถูกเรียกใช้หลายครั้งใน ่<p> และ ถูกใช้่้ ในหลาย element ได้ คือ <p> และ <div> แต่ถ้าต้องการกำาหนดให้ class topic ใช้งานเฉพาะกับ <p> เท่านั้นทำาได้โดยใส่ "p." นำาหน้าชื่อ class จะมีผลทำาให้ข้อความใน <divclass="topic">บทความ</div> ไม่สามารถแสดงผลตามรูปแบบที่กำาหนดใน class topic ได้ p.topic{color:red; font-family:Arial; font-weight:bold; text-align:center } กรณีที่ต้องการให้แสดงผลตามรูปแบบที่กำาหนดใน 2 class ก็สามารถทำาได้Example<html><head><style type="text/css">
  16. 16. p.center {text-align:center} p.bold{ font-weight:bold}</style></head><body> <p class="center bold">ข้อความในพารากราฟนี้จะจัดวางกึ่งกลาง และเป็นตัวหนา</p></body></html>Selector ที่เป็น ID attributeเป็นการประกาศคำาสั่ง Style Sheet เพื่อกำาหนดคุณสมบัติแบบเฉพาะเจาะจง ให้กับ HTML element ผ่าน ID attribute เหมือนกับ Class แต่ตางกันที่ ID จะใช้กับ element ที่มีเพียงอันเดียวใน ่เอกสาร HTML การประกาศใช้ # นำาหน้า IDExample<html><head><style type="text/css"> p {text-align: center} #chapter {color:red; font-weight:bold} /*หรือเขียนเป็น p#chapter ก็ได้*/</style></head><body> <p id="chapter">Chapter ข้อความในนี้จัดวางกึ่งกลาง และเป็นสีแดง ตัวหนา</p> <p>เนื้อหา ข้อความในนี้จัดวางกึ่งกลาง</p> <p>เนื้อหา ข้อความในนี้จัดวางกึ่งกลาง</p></body></html>
  17. 17. อาจจะยังไม่เข้าใจตอนนี้ ไว้เห็นตัวอย่างมากๆ เข้า จะค่อยๆ เข้าใจเองค่ะ แล้วจะรู้ได้อย่างไรว่าค่า property และ value เช่น text-align: center, font-weight:bold มีอะไรบ้าง อันนี้ศึกษาได้จากChapter ต่อๆ ไป Contextual selectors การประกาศ selectorซ้อนกัน โดยเคาะ spacebar ทำาให้สามารถสืบทอดคุณสมบัติเดิมและเพิ่มคุณสมบัติที่แตกต่างได้ ดูตวอย่างเพื่อให้เข้าใจมากขึ้นค่ะ ัExample<html><head><style type="text/css">h1 { color: blue; background-color:#FFFFCC }h1 em { color: red }h1 u { color:green}</style></head><body> <h1>วิธีรักษาสุขภาพ</h1><h1>วิธีลดนำ้าหนัก</h1><h1><em>วิธีรักษาสุขภาพ</em></h1><h1><u>วิธีรักษาสุขภาพ</u></h1></body></html>Outputข้อความใน <h1> จะเป็นสีนำ้าเงิน แต่ถ้ามีการกำาหนดว่าเป็นตัวเอียงแล้ว ข้อความใน <h1> จะเป็นสีแดง หรือระบุวาขีดเส้นใต้แล้ว ่จะได้เป็นสีเขียว โดยที่รูปแบบพื้นหลังของ <h1> ยังคงอยู่
  18. 18. วิธีรักษาสุขภาพ วิธีลดนำ้าหนัก วิธีรักษาสุขภาพ วิธีรักษาสุขภาพอีกตัวอย่างหนึ่ง เพื่อแสดงให้เห็นประโยชน์ของการใช้Contextual selectorsExample<html><head><style type="text/css">/*ให้ img ทัวไป ขอบสีเทา หนา2*/ ่img {border:solid;border-width:2px;border-color:#999999;}/*ให้ class borderimage มีขอบสีแดง หนา5 แต่ไม่ได้กำาหนดHTML tag เฉพาะ*/.borderimage {border:solid;border-width:5px;border-color:red;}/*ให้ เฉพาะ tag <img> class imgspecial_box มีขอบสีแดงหนา5*/#imgspecial_box img {border:solid; border-width:5px;border-color:red;}</style></head><body><img src="../images/star_icons.gif" /><img src="../images/star_icons.gif" /><img src="../images/star_icons.gif" /><br><br>แบบนี้ไม่ดี ต้องมาระบุ Class borderimage ให้แต่ละรูป<br /><img src="../images/star_icons.gif"
  19. 19. class="borderimage" /><img src="../images/star_icons.gif"class="borderimage" /><img src="../images/star_icons.gif"class="borderimage" /><br><br>แบบนี้ดี img ที่อยู่ในส่วน div class imgspecial_box จะเป็นขอบแดง หนา5 ให้ทั้งหมด ไม่ต้องมากำาหนดทีละรูป<div id="imgspecial_box"><img src="../images/star_icons.gif" /><img src="../images/star_icons.gif" /><img src="../images/star_icons.gif" /></div></body></html>Outputแบบนี้ไม่ดี ต้องมาระบุ class border image ให้แต่ละรูปแบบนี้ดี img ที่อยู่ในส่วน div class imgspecial_box จะเป็นขอบแดง หนา5 ให้ทั้งหมด ไม่ต้องมากำาหนดทีละรูป มาดูอีกตัวอย่างที่ไม่ดี คล้ายกับตัวอย่างข้างบน เป็นตัวอย่างทีใช้ CSS ่มากเกินไปExample<html><head><title>ex_css_chapter07_3</title><style type="text/css">a.boldlink { color: blue; font-weight: bold; }</style></head>
  20. 20. <body><ahref="http://www.enjoyday.net/webtutorial/html/index.html" class="bold link">HTML</a><br /><ahref="http://www.enjoyday.net/webtutorial/css/index.html" class="bold link">CSS</a><br<a href="http://www.enjoyday.net/webtutorial/xhtml/index.html" class="bold link">XHTML</a><br /><ahref="http://www.enjoyday.net/webtutorial/javascript/index.html" class="bold link">JavaScript</a></body></html>แก้ไขใหม่เขียนแบบ Contextual selector’s จะดีกว่าค่ะ<html><head><title>ex_css_chapter07_3</title><style type="text/css">#boldlink_box a { color: blue; font-weight: bold; }</style></head><Body><div id="boldlink_box"><ahref="http://www.enjoyday.net/webtutorial/html/index.html">HTML</a><br /><ahref="http://www.enjoyday.net/webtutorial/css/index.html">CSS</a><br />
  21. 21. <a href="http://www.enjoyday.net/webtutorial/xhtml/index.html">XHTML</a><br /><ahref="http://www.enjoyday.net/webtutorial/javascript/index.html">JavaScript</a> </div></body></html>Output HTML CSS XHTML JavaScriptFont คือ การกำาหนดลักษณะให้ตวอักษร ใน HTML เราจะใช้ tag ั<font face="ชนิดตัวอักษร" size="number"color="สี">ข้อความ</font> น่าจะพอจำากันได้อยู่ แต่ในเอกสารHTML/XHTML แบบ strict จะถือว่า tag <font> เป็น tag ที่ล้าสมัยแล้ว ไม่สามารถนำามาใช้งานได้ ให้เราใช้ CSS แทนค่ะ เราก็สามารถใช้ CSS กำาหนดลักษณะให้ตวอักษรได้ โดยกำาหนดรูปแบบ ัfont ผ่าน Property ต่างๆ ให้กับ HTML element เช่น<p>,<div>,<span>,<h1> และอื่นๆProperty Description Valuesfont-family ใช้กำาหนดชนิด font ที่ต้องการจะ เช่น Arial, ให้แสดงผล โดยที่ font นั้นจะต้อง Helvetica, มีอยู่ในเครื่องของผู้ใช้งานด้วย sans-seriffont-size ใช้กำาหนดขนาดของตัวอักษร ที่จะ xx-small ให้แสดงผล /td> x-small small medium large x-large xx-large smaller larger 18px
  22. 22. 70% 150%font-style ใช้กำาหนดรูปแบบของตัวอักษรใน normal ลักษณะต่างๆ italic oblique เอียง 45 องศาfont-variant ใช้แปลงตัวอักษรที่เป็นตัวพิมพ์เล็ก normal ให้เป็นพิมพ์ใหญ่ Small-Caps โดยที่ขนาดตัวอักษรยังคงเท่าตัว พิมพ์เล็กfont-weight ใช้กำาหนดความหนาของตัวอักษร normal bold bolder lighter 100 200 300 400 500 600color ใช้กำาหนดสีให้ตัวอักษร red #000099font เราสามารถกำาหนด property ให้ font-style กับ font ได้ในคำาสั่งประกาศเดียว font- variant font- weight font-size font-familyExample<p style="font-family: AngsanaUPC; font-size:16pt;color: green">CSS ย่อมาจาก Cascading Style Sheet เป็นภาษาทีมีรูปแบบ ่การเขียน Syntax ที่เฉพาะ และถูกกำาหนดมาตรฐานโดย W3C
  23. 23. (World Wide Web Consortium) เช่นเดียวกับ HTML และ XHTML ใช้สำาหรับตกแต่งเอกสาร HTML/ XHTM ให้มีหน้าตา สีสันตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างทีเราต้องการ ด้วย ่การกำาหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML </p>OutputCSS ย่อมาจาก Cascading Style Sheet เป็นภาษาทีมีรูป ่แบบการเขียน Syntax ที่เฉพาะ และถูกกำาหนดมาตรฐานโดยW3C (World Wide Web Consortium) เช่นเดียวกับ HTML และXHTML ใช้สำาหรับตกแต่งเอกสาร HTML/ XHTM ให้มีหน้าตาสีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการด้วยการกำาหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTMLExample<p style="font-weight: bold">Love me Love mydog</p><p style="font-family: sans-serif, Arial; font-size:16px;font-style: normal; font-variant: small-caps; font-weight:bold; color:#FF0033">Love me Love my dog</p><! -- เขียนอย่างย่อได้เป็น --><p style="font: normal small-caps bold 16px sans-serif,Arial; color:#FF0033">Love me Love my dog</p>OutputLove me Love my dogLove me Love my dogLove me Love my dogFormเรื่องของ CSS ที่เกี่ยวกับ Form มี 2 ส่วนที่อยากจะพูดถึงค่ะ ส่วนแรก คือ การตกแต่ง Form Elements ด้วย style sheet และส่วนที่สอง คือ การทำา Form โดยไม่ใช้ Table หรือเรียกว่า Table lessForm Form Elements เราสามารถตกแต่ง ส่วนประกอบของ
  24. 24. Form ได้แก่ input box, text area, button เป็นต้น ให้มสีสันที่ ีสวยงามได้ ไปดูตวอย่างกันค่ะ ัExample - Text box<html><head><style type="text/css">.textbox gray { color:#55555;background-color:#FFFFFF;border:1px solid #999999;}.textbox yellow {text-align:center;color:#55555;background-color:#FAFCD1;border:1px solid #999999; }.textbox image{color:#55555;background-image:url(../images/bg.png);border: 1px solid #999999;}.textbox_imgside {font-family: Tahoma, "ms sansSerif";font-size:12px;color:#0033CC;background-image: url(../images/mail. if);background-repeat:no-repeat;background-position:left;border: 1pxsolid #3366CC;padding-left:16px;}</style></head><body><input type="text" size="30" value="enjoyday.net" /><br><br><input type="text" size="30" class="textbox gray"value="enjoyday.net" /><br><br><input type="text" size="30" class="textbox yellow"value="enjoyday.net" /><br><br>
  25. 25. <input type="text" size="30" class="textbox image"value="enjoyday.net" /><br><br><input type="text" size="30" class="textbox_imgside"value="admin@enjoyday.net" /></body></html>Outputการตกแต่ง Scroll bar ด้วย CSS จะพูดถึงในบทที่ 20Example - Text area<html><head><style type="text/css">.textarea1 {scrollbar-arrow-color:#000;scrollbar-face-color:#face00;scrollbar-highlight-color:#fff;scrollbar-3dlight-color:#000;scrollbar-track-color:#fff;scrollbar-shadow-color:#face00;scrollbar-darkshadow-color:#000;border:1px solid #000;font-size:12px}.textarea2 {scrollbar-arrow-color:#000;scrollbar-face-color:#fff;scrollbar-highlight-color:#fff;scrollbar-3dlight-color:#000;scrollbar-track-color:#fff;scrollbar-shadow-color:#fff;scrollbar-darkshadow-color:#000;color:#000;border:1pxsolid #000000;font-size:12px}.textarea3 {scrollbar-arrow-color:#add8e6;scrollbar-face-color:#fff;scrollbar-highlight-color:#fff;scrollbar-3dlight-color:#add8e6;scrollbar-track-color:#fff;scrollbar-shadow-color:#fff;scrollbar-darkshadow-color:#add8e6;color:#197bff;border:1px
  26. 26. solid #add8e6;font-size:12px}.textarea4 {scrollbar-arrow-color:#ffb090;scrollbar-face-color:#fff;scrollbar-highlight-color:#fff;scrollbar-3dlight-color:#ffb090;scrollbar-track-color:#fff;scrollbar-shadow-color:#fff;scrollbar-darkshadow-color:#ffb090;color:#ff4a19;border:1px solid #ffb090;font-size:12px }</style></head><body><text area rows="4" cols="20" class="textarea1">ข้อความของคุณค่ะ....</text area><text area rows="4" cols="20" class="textarea2">ข้อความของคุณค่ะ....</text area><br /><text area rows="4" cols="20" class="textarea3">ข้อความของคุณค่ะ...
  27. 27. .</text area><text area rows="4" cols="20" class="textarea4">ข้อความของคุณค่ะ....</textarea></body></html>OutputExample - Textarea<html><head><style type="text/css">.textarea_a {width:300px; scrollbar-arrow-color:#000;scrollbar-face-color:#fff;scrollbar-highlight-color:#fff;scrollbar-3dlight-color:#fff;scrollbar-track-color:#fff;scrollbar-shadow-color:#fff;scrollbar-darkshadow-color:#fff;color:#000;border:1px solid #000;font-size:12px}width:300px; .textarea_b {width:300px; scrollbar-arrow-color:#000;scrollbar-face-color:#fff;scrollbar-highlight-color:#fff;scrollbar-3dlight-color:#fff;scrollbar-track-color:#fff;scrollbar-shadow-color:#fff;scrollbar-darkshadow-color:#fff;color:#000;border-width:0;font-size:12px}.textarea_c {scrollbar-arrow-color:#ff6699;scrollbar-face-color:#fff;scrollbar-highlight-
  28. 28. color:#fff;scrollbar-3dlight-color:#fff;scrollbar-track-color:#fff;scrollbar-shadow-color:#fff;scrollbar-darkshadow-color:#fff;color:#ff6699;border-width:0;font-size:12px}</head><body><div style="border:1px solid #000;background:#add8e6; padding:5px; width:310px"><textarea rows="4" class="textarea_a">ข้อความของคุณค่ะ....</text area></div><br /><div style="border:1px solid#000;background:#fff;padding:4px; width:320px"><div style="border:1px solid #000;margin-bottom:4px"><div style="border-width:1px;border-style:solid;border-color:#fff #98cee0 #98cee0#fff;background:#add8e6;color:#000;text-align:center;font-size:12px;padding:4px">หัวข้อ</div></div><text area rows="5" class="textarea_b">ข้อความของคุณค่ะ....
  29. 29. </text area></div><br /><div style="border:1px solid #ff6699; width:320px"><div style="border-width:1px;border-style:solid;border-color:#fff #ffbbbb #ffbbbb#fff;background:#ffcccc;padding:4px"><div style="border-width:1px;border-style:solid;border-color:#ffbbbb #fff #fff #ffbbbb"><div style="border:1px solid#ff6699;background:#fff;padding:2px"><textarea rows="5" class="textarea_c">ข้อความของคุณค่ะ....</text area></div></div></div></div></body></html>Outputหัวข้อExample - Button<html>
  30. 30. <head> <style type="text/css">.button_gray {font-family:Arial, Helvetica, sans-serif;font-weight:bold;color:#333333;background-color:#F7F7F7;border: 1px solid#000000;padding: 1px 0;}.button_image {font-family:Arial, Helvetica, sans-serif;color:#333333;background:url(images/button_bg.gif) repeat-x;border: 1px solid#000000;padding: 1px 0;} </style></head><body> <input type="button" value="Submit" class="buttongray"> <input type="button" value="Submit" class="buttonimage"></body></html> Outputรูปที่ใช้ทำาปุ่มTable less Formเราสามารถกำาหนด Form เป็น 2 column โดยไม่ต้องใช้ Table ได้โดยกำาหนดความกว้างของ column แรกโดยใช้ tag <label>และ colunm ที่สอง จะเป็นพวก text box ทีวางต่อจาก column ่แรก credit to :http://www.dynamicdrive.com/style/csslibrary/item/css-tableless-form/ลองนำา code ไปปรับปรุงเปลี่ยนแปลงต่อได้ค่ะExample
  31. 31. <html><head><style type="text/css">.cssform p{width: 300px;clear: left;margin: 0;padding:5px 0 8px 0;padding-left: 155px; /*width of left columncontaining the label elements*/border-top: 1px dashedgray;height: 1%;}.cssform label{font-weight: bold;float: left;margin-left:-155px; /*width of left column*/width: 150px; /*width of labels. Should be smaller thanleft column (155px) to create some right margin*/}.cssform input[type="text"]{ /*width of text boxes. IE6does not understand this attribute*/width: 180px;}.cssform textarea{width: 250px;height: 150px;}/*.threepxfix class below:Targets IE6- ONLY. Adds 3 pixel indent for multi-lineform contents.to account for 3 pixel bug:http://www.positioniseverything.net/explorer/threepxtest.html*/ html .threepxfix{margin-left: 3px;}</style></head><body><form id="myform" class="cssform" action=""><p><label for="user">Name</label><input type="text" id="user" value="" /></p>
  32. 32. <p><label for="email address">Email Address:</label><input type="text" id="email address" value="" /></p><p><label for="comments">Feedback:</label><text area id="comments" rows="5"cols="25"></textarea></p><p><label for="comments">Sex:</label>Male: <input type="radio" name="sex" /> Female:<input type="radio" name="sex" /><br /></p><p><label for="comments">Hobbies:</label><input type="checkbox" name="hobby" /> Tennis<br /><input type="checkbox" name="hobby"class="threepxfix" /> Reading <br /><input type="checkbox" name="hobby"class="threepxfix" /> Basketball <br /></p><p><label for="terms">Agree to Terms?</label><input type="checkbox" id="terms" class="boxes" /></p><div style="margin-left: 150px;"><input type="submit" value="Submit" /> <inputtype="reset" value="reset" />
  33. 33. </div></form></body></html>OutputNameEmail Address:Feedback:Sex: Male: Female:Hobbies: TennisReadingBasketballAgree to Terms?อีกตัวอย่าง สวยๆ ค่ะCredit to : http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.htmlExample<html><head><style type="text/css">body{font-family:"Lucida Grande", "Lucida SansUnicode", Verdana, Arial, Helvetica, sans-serif;font-size:12px;}p, h1, form, button{border:0; margin:0; padding:0;}.spacer{clear:both; height:1px;}
  34. 34. /* ----------- My Form ----------- */.myform{margin:0 auto;width:400px;padding:14px;}/* ----------- stylized ----------- */#stylized{border:solid 2px#b7ddf2;background:#ebf4fb;}#stylized h1 {font-size:14px;font-weight:bold;margin-bottom:8px;}#stylized p{font-size:11px;color:#666666;margin-bottom:20px;border-bottom:solid 1px #b7ddf2;padding-bottom:10px;}#stylized label{display:block;font-weight:bold;text-align:right;width:140px;float:left;}#stylized .small{color:#666666;display:block;font-size:11px;font-weight:normal;text-align:right;width:140px;}#stylized input{float:left;font-size:12px;padding:4px2px;border:solid 1px #aacfe4;width:200px;margin:2px 0 20px 10px;}#stylized button{clear:both;margin-left:150px;width:125px;height:31px;background:#666666 url(img/button.png) no-repeat;text-align:center;line-height:31px;color:#FFFFFF;font-size:11px;font-weight:bold;}</style></head><body><div id="stylized" class="myform"><form id="form" name="form" method="post"action="index.html"><h1>Sign-up form</h1><p>This is the basic look of my form without table</p>
  35. 35. <label>Name<span class="small">Add your name</span></label><input type="text" name="name" id="name" /><Label>Email<span class="small">Add a valid address</span></label><input type="text" name="email" id="email" /><Label>Password<span class="small">Min. size 6 chars</span></label><input type="text" name="password" id="password" /><button type="submit">Sign-up</button><div class="spacer"></div></form></div></body></html>OutputSign-up formThis is the basic look of my form without tableName Add your name Email Add a valid addressPassword Min. size 6 chars Sign-upBackgroundเราสามารถกำาหนดลักษณะพื้นหลังของ Element ต่างๆ เช่น<body>, <table>, <p>, <h1>, <h2>, <div> เป็นต้นPropert Description Values
  36. 36. ybackgr ใช้กำาหนดว่าต้องการ fixed fix อยู่กับที่ound- ให้ภาพพื้นหลังนั้นอยู่ scroll เลื่อนตาม Scrollattach กับที่ หรือว่าเลื่อนไป Barment ตาม Scroll Barbackgr ใช้กำาหนดทั้งสี พืน ้ color-rgb รหัสสีound- หลังของเว็บเพจ หรือ color-hexcolor ตาราง color- ชื่อสี name transpare ntbackgr ใช้กำาหนดรูปภาพ ให้ url ของรูป เช่นound- พื้นหลังของเว็บเพจ url(images/bg.image หรือตาราง jpg)backgr ใช้กำาหนดตำาแหน่ง top leftound- การจัดวางรูปภาพพื้น top centerpositio หลัง top rightn center left center center center right bottom left bottom center bottom right x% y% xpos yposbackgr กำาหนดรูปภาพพื้น repeat ไม่ให้มีการวางต่อound- หลังว่าต้องการให้มี repeat-x รูปภาพrepeat การเรียงต่อรูปภาพ repeat-y วางต่อรูปภาพ หรือไม่ no-repeat แนวนอน วางต่อรูปภาพ แนวตั้ง
  37. 37. วางต่อรูปภาพทั้ง แนวนอนและตั้งbackgr เราสามารถกำาหนด backgrounound property ให้กับ d-color background ได้ใน backgroun คำาสั่งประกาศเดียว d-image backgroun d-repeat backgroun d- attachmen t backgroun d-positionExampleBackground เป็นรูปอยู่ดานบน ขวา ไม่ repeat ้<div style="background-attachment: scroll; background-image: url (../images/bg1.gif); background-position: topright; background-repeat: no-repeat"><br /><br /><br /><br /></div>OutputExampleBackground เป็นรูปอยู่ตรงกลาง ไม่ repeat<div style="background-attachment:scroll; background-image:url(../images/bg2.gif); background-position:center; background-repeat:no-repeat"><br /><br /><br /><br /></div>OutputExample Background เป็นรูปอยู่ตรงกลาง repeart แนวนอน<div style="background-attachment:scroll; background-image:url(../images/bg2.gif); background-
  38. 38. position:center; background-repeat:repeat-x"><br /><br />Enjoyday.net<br /><br /></div>OutputEnjoyday.netExample Background เป็นรูปอยู่ตรงกลาง repeart แนวตั้ง<div style="background-attachment: scroll; background-image:url(../images/bg2.gif); background-position:center; background-repeat:repeat-y"><br /><br />Enjoyday.net<br /><br /></div>OutputEnjoyday.netExample Background เป็นรูป repeat ทั้งแนวนอน และแนวตั้ง<div style="background-image:url(../images/bg2.gif);background-repeat: repeat"><br /><br />Enjoyday.net<br /><br /></div>OutputEnjoyday.netExample Background เป็นพื้นสีฟ้า<div class="output_box" style="background-color:#D7EBFF"><br /><br />Enjoyday.net<br /><br /></div>OutputEnjoyday.netExampleBackground เป็นรูป Fix
  39. 39. <textarea style="background-image:url(../images/bg1.gif); background-attachment:fixed; width:300px " rows="3">สวัสดีคะ ่นี่เป็น Background แบบ Fixรูปจะไม่เลือนไปตาม Scroll Bar ค่ะ....</textarea>OutputExampleBackground เป็นรูปไม่ Fix เลื่อนตาม Scroll Bar<textarea style="background-image:url(../images/bg1.gif); background-attachment:scroll; width:300px" rows="3">สวัสดีค่ะนี่เป็น Background แบบไม่ Fixรูปจะเลือนไปตาม Scroll Bar ค่ะ....</textarea>OutputBorderเราสามารถกำาหนดลักษณะเส้นกรอบของ Element ต่างๆ ได้ เช่น<p>, <div> เป็นต้นProperty Description Valuesborder-width ใช้กำาหนดขนาดของ thin เช่น กรอบของวัตถุทั้ง 4 medium 5px, ด้าน thick 5pt
  40. 40. lengthborder-style ใช้การกำาหนด none dotted ลักษณะของกรอบ hidden ของวัตถุทั้ง 4 ด้าน dotted dashed dashed solid solid double groove double ridge inset groove outset ridge inset outsetborder-color ใช้การกำาหนดสีกรอบ color ของวัตถุทั้ง 4 ด้าน *ต้องกำาหนด style ก่อนborder สามารถกำาหนด border- property ให้กับ width border ได้ในคำาสั่ง border-style ประกาศเดียว border-colorborder-top- ่่ ใช้กำาหนดwidth คุณสมบัติให้กับborder-top- กรอบด้านบนstyleborder-top-colorborder-topborder- ใช้กำาหนดคุณสมบัติbottom- ให้กับกรอบด้านล่างwidthborder-bottom-style
  41. 41. border-bottom-colorborder-bottomborder-left- ใช้กำาหนดคุณสมบัติwidth ให้กับกรอบด้านซ้ายborder-left-styleborder-left-colorborder-leftborder-right- ใช้กำาหนดคุณสมบัติwidth ให้กับกรอบด้านขวาbordr-right-styleborder-right-colorborder-righteExample กำาหนดขนาด border<div style="border-top-width:5px; border-right-width:5px; border-bottom-width:5px; border-left-width:5px;"><br /> <br /> <br /></div>หรือ<div style="border-width:5px"><br /><br /><br /></div>Outputกำาหนดขนาดให้เส้นกรอบทั้ง 4 ด้านมีค่า 5pxExample กำาหนดขนาด border
  42. 42. <div class="output_box" style="border-width:1px10px"><br /><br /><br /></div>Outputกำาหนดขนาดให้เส้นกรอบ บน ล่าง เป็น 1px, และขนาดเส้นกรอบซ้าย ขวา เป็น 10pxExampleกำาหนดขนาด border<div class="output_box" style="border-width:1px 10px20px"><br /><br /><br /></div>Outputกำาหนดขนาดให้เส้นกรอบ บน เป็น 1px, ขนาดเส้นกรอบ ซ้าย ขวาเป็น 10px และขนาดเส้นกรอบ ล่าง เป็น 20pxExampleกำาหนดขนาด border<div class="output_box" style="border-top-width:1px;border-right-width:10px; border-bottom-width:20px;border-left-width:30px;"><br /> <br /> <br /> หรือ </div> <divclass="output_box" style="border-width:1px 10px 20px30px"><br /><br /><br /></div>Outputกำาหนดขนาดให้เส้นกรอบ 1px 10px 20px 30px เป็นขนาดของเส้นกรอบ บน ขวา ล่าง ซ้าย ตามลำาดับExampleลักษณะ border
  43. 43. <div style="border-style:dashed dotted solid double;border-color:#FF6633"><br /><br /><br /><br /></div>Outputกำาหนดลักษณะให้เส้นกรอบในคำาสั่งเดียว dashed dotted soliddouble เป็นลักษณะของเส้นกรอบ บน ขวา ล่าง ซ้าย ตามลำาดับExampleกำาหนดสี border<div style="border-style:solid; border-color:red bluegreen black"><br /> <br /> <br /></div>Outputกำาหนดสีให้เส้นกรอบในคำาสั่งเดียว red blue green black เป็นสีของเส้นกรอบ บน ขวา ล่าง ซ้าย ตามลำาดับExampleกำาหนด property ให้กับ border ในคำาสั่งประกาศเดียว<div style="border-width:5px; border-style:double;border-color:#336699"><br /> <br /> <br /></div>หรือ<div style="border:5px double #336699"><br /> <br /> <br /></div>Outputกำาหนด Property ให้กับ border ได้ในคำาสั่งประกาศเดียวMargin, Padding ValueProperty Description smargin- ใช้กำาหนดระยะห่างระหว่างขอบของ auto เช่น
  44. 44. top วัตถุดานบน กับวัตถุอื่นๆ ้ lengt 5px, h 5pt,5 cmmargin- ใช้กำาหนดระยะห่างระหว่างขอบของbottom วัตถุดานล่าง กับวัตถุอื่นๆ ้margin- ใช้กำาหนดระยะห่างระหว่างขอบของleft วัตถุดานซ้าย กับวัตถุอื่นๆ ้margin- ใช้กำาหนดระยะห่างระหว่างขอบของright วัตถุดานขวา กับวัตถุอื่นๆ ้margin ใช้กำาหนดระยะห่างระหว่างขอบของ วัตถุที่ต้องการ ทั้ง 4 ด้าน กับวัตถุอื่น ๆ ในคำาสั่งเดียวpadding ใช้กำาหนดระยะห่างระหว่างขอบของ-top วัตถุดานในเส้นบน กับ ข้อความที่อยู่ ้ ในกรอบpadding ใช้กำาหนดระยะห่างระหว่างขอบของ-bottom วัตถุดานในเส้นล่าง กับ ข้อความที่อยู่ ้ ในกรอบpadding ใช้กำาหนดระยะห่างระหว่างขอบของ-left วัตถุดานในเส้นซ้าย กับ ข้อความที่อยู่ ้ ในกรอบpadding ใช้กำาหนดระยะห่างระหว่างขอบของ-right วัตถุดานในเส้นขวา กับ ข้อความที่อยู่ ้ ในกรอบpadding ใช้กำาหนดระยะห่างระหว่างขอบของ วัตถุดานใน กับ ข้อความที่อยู่ในกรอบ ้ (ไม่เกี่ยวข้องกับวัตถุด้านนอก)
  45. 45. Exampleถ้าไม่ได้ใช้่้ งาน margin และ padding ข้อความข้างนอกด้านบน<div style="border:20px solid #3399CC">block นี้มีBorder สีนำ้าเงิน ขนาด 20pxไม่ใช้งาน Margin และ Padding ลองมาดูกันว่าได้ผลเป็นอย่างไร</div>ข้อความข้างนอกด้านล่างOutputข้อความข้างนอกด้านบน block นี้มี Border สีนำ้าเงิน ขนาด 20pxไม่ใช้งาน Margin และ Padding ลองมาดูกันว่าได้ผลเป็นอย่างไรข้อความข้างนอกด้านล่าง ลองมาดูต่อว่า... ถ้านำา margin และpadding มาใช้งานล่ะExample การใช้งาน margin และ paddingข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือmargin ด้านบน<div style="margin:20px; padding:20px; border:20pxsolid #3399CC">block นี้มี Border สีนำ้าเงิน ขนาด 20px <br />มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block20px<br />และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทีนี้คงเข้าใจแล้วว่า margin และpaddingคือส่วนไหนกันแล้ว</div>ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือmargin ด้านล่างOutput
  46. 46. ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือmargin ด้านบน block นี้มี Border สีนำ้าเงิน ขนาด 20px มีPadding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block20pxและมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทีนี้คงเข้าใจแล้วว่า margin และpaddingคือส่วนไหนกันแล้ว ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านล่าง ถ้ายังงงๆ ว่าตรงไหนคือmargin และ padding อยู่ ให้ดูที่รูปนี้ค่ะExampleการใช้งาน margin ที่แต่ละด้านไม่เท่ากัน<div style="margin:20px; padding:10px 20px 30px40px; border:2px solid #009999">block นี้มี Border สีส้ม ขนาด 2px <br />มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block10px 20px 30px 40px ซึงเป็น pading ของด้านบน ขวา ล่าง ่ซ้าย ตามลำาดับ และมี Margin ระยะห่างระหว่างขอบด้านนอก กับข้อความที่อยู่ข้างนอก block 20px ทั้ง 4 ด้าน</div>
  47. 47. ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือmargin ด้านล่างOutputความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 10x นี่คือmargin ด้านบนblock นี้มี Border สีส้ม ขนาด 2px มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 20px ทั้ง 4 ด้าน และมี Marginระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ขางนอก block ้10px 20px 30px 40px ซึงเป็น margin ของด้านบน ขวา ล่าง ่ซ้าย ตามลำาดับ ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของblock 30x นี่คือ margin ด้านล่างExampleการใช้งาน padding ทีแต่ละด้านไม่เท่ากัน ่ความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือmargin ด้านบน<div style="margin:20px; padding:10px 20px 30px40px; border:2px solid #009999">block นี้มี Border สีเขียว ขนาด 2px <br />มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 10px 20px 30px40px ซึ่งเป็น pading ของด้านบน ขวา ล่าง ซ้าย ตามลำาดับและมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทั้ง 4 ด้าน</div>ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block20x นี่คือ margin ด้านล่างOutputความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือmargin ด้านบน block นี้มี Border สีเขียว ขนาด 2px มี Padding
  48. 48. ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 10px 20px30px 40px ซึ่งเป็น pading ของด้านบน ขวา ล่าง ซ้าย ตามลำาดับและมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทั้ง 4 ด้าน ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านล่างExample อื่นๆh1 {margin: 10px}Happy New Year margin ทั้ง4 ด้านเป็น 10pxh1 {margin: 10px 2%}Happy New YearMargin ด้านบนและล่าง 10px, ด้านขวาและซ้าย เป็น 2% ของความกว้างเอกสารh1 {margin: 10px 2% -10px}Happy New YearMargin ด้านบน 10px, ด้านขวาและซ้าย 2% ของความกว้างเอกสาร, ด้านล่าง เป็น -10pxh1 {margin: 10px 2% -10px auto}Happy New YearMargin ด้านบน 10px, ด้านขวา 2% ของความกว้างเอกสาร, ด้านล่าง เป็น -10px และด้านซ้ายกำาหนดตาม BrowserExampleการใช้งานผสม Chapter 8-12<html><head>
  49. 49. <style type="text/css">.miscode {font: normal small-caps bold 16px Arial,Helvetica, sans-serif; color:#FF0033;text-align:center; text-decoration:underline; word-spacing:0.5em; background-color:#FBEFFC; border:2pxdotted #FF6699; margin:20px; padding:20px</style></head><body>Hello all,<div class="mixcode">Happy New Year 2009</div>Hope you enjoy your stay here.</body></html>OutputHello all,Happy New Year 2009Hope you enjoy your stay here.ListProperty Description Valueslist-style- ใช้กำาหนด none •disctype ลักษณะที่ใช้นำา disc •circle หน้าแต่ละรายการ circle ย่อย square •square decimal •decimal decimal- •decimal- leading- leading-zero zero
  50. 50. lower- •lower- roman roman upper- •upper- roman roman lower- alpha •lower-alpha upper- •upper-alpha alpha •lower-greek lower- greek •lower-latin lower- •upper-latin latin •hebrew upper- •armenian latin hebrew •georgian armenian •georgian georgian •cjk- cjk- ideographic ideograph •hiragana ic hiragana •hiragana- katakana iroha hiragana- •katakana- iroha iroha katakana- irohalist-style- ใช้การกำาหนด inside จัดให้ตรงแนวกับposition ลักษณะการปัด outside สัญลักษณ์ ขึนบรรทัดใหม่ ้ จัดให้ตรงแนวกับ ของข้อความ ข้อความแถวแรก กรณีที่มีความยาว เกิน 1 บรรทัด * ถ้าไม่กำาหนดจะ เป็นแบบ outsidelist-style- ใช้การกำาหนด url ของรูปภาพ
  51. 51. image รูปภาพเพื่อนำามา เป็นสัญลักษณ์ รายการย่อยlist-style สามารถกำาหนด list-style- property ให้กับ type list ได้ในคำาสั่ง list-style- ประกาศเดียว position list-style- imageExampleEnjoyday.net - Web builder Tutorial<ul style="list-style-type: square"><li>HTML</li><li>CSS</li><li>XHTML</li><li>JavaScript</li><li>SQL</li></ul>OutputEnjoyday.net - Web builder Tutorial •HTML •CSS •XHTML •JavaScript •SQLExampleEnjoyday.net - Web builder Tutorial<ul><li style="list-style-type: circle">HTML</li><li style="list-style-type:disc">CSS</li>
  52. 52. <li style="list-style-type: square">XHTML</li><li style="list-style-type: decimal">JavaScript</li><li style="list-style-type:upper-roman">SQL</li></ul>OutputEnjoyday.net - Web builder Tutorial •HTML •CSS •XHTML •JavaScript •SQLExampleEnjoyday.net - Web builder Tutorial<ul style="list-style-image:url(images/list. if)"><li>HTML</li><li>CSS</li><li>XHTML</li><li>JavaScript</li><li>SQL</li></ul>OutputEnjoyday.net - Web builder Tutorial •HTML •CSS •XHTML •JavaScript •SQLExample
  53. 53. ประโยชน์ของ CSS<ul style="list-style-type: circle; list-style-position:outside"><li>การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำาให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำาให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำาได้งายและรวดเร็ว</li> <li>เมื่อ code ภายใน ่เอกสาร HTML ลดลง ทำาให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว</li> <li>สามารถกำาหนดรูปแบบการแสดงผลจากคำาสั่งstyle sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำาให้เวลาแก้ไขหรือปรับปรุงทำาได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML Tag ต่างๆ ทั่วทั้งเอกสาร</li> </ul>Outputประโยชน์ของ CSS •การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำาให้ code ภายใน เอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำาให้เข้าใจง่ายขึ้น การ แก้ไขเอกสารทำาได้งายและรวดเร็ว ่ •เมื่อ code ภายในเอกสาร HTML ลดลง ทำาให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว •สามารถกำาหนดรูปแบบการแสดงผลจากคำาสั่ง style sheet ชุด เดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำาให้ เวลาแก้ไขหรือปรับปรุงทำาได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML Tag ต่างๆ ทั่วทั้งเอกสารExample กำาหนด property ให้กับ list ได้ในคำาสั่งประกาศเดียวประโยชน์ของ CSS<ul style="list-style:decimal inside"><li>การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำาให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำาให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำาได้งายและรวดเร็ว</li> ่
  54. 54. <li>เมื่อ code ภายในเอกสาร HTML ลดลง ทำาให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว</li><li>สามารถกำาหนดรูปแบบการแสดงผลจากคำาสั่ง style sheetชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ทำาให้เวลาแก้ไขหรือปรับปรุงทำาได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTMLTag ต่างๆ ทั่วทั้งเอกสาร</li></ul>Outputประโยชน์ของ CSS •การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำาให้ code ภายใน เอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำาให้เข้าใจง่ายขึ้น การ แก้ไขเอกสารทำาได้งายและรวดเร็ว ่ •เมื่อ code ภายในเอกสาร HTML ลดลง ทำาให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว •สามารถกำาหนดรูปแบบการแสดงผลจากคำาสั่ง style sheet ชุด เดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำาให้ เวลาแก้ไขหรือปรับปรุงทำาได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML Tag ต่างๆ ทั่วทั้งเอกสารTableต้องใช้กับเว็บเบราเซอร์รุ่นใหม่ๆ เช่น IE6 เป็นต้นไป*บาง property เมื่อทดสอบแล้วไม่เห็นผลProperty Description Valuestable- ใช้กำาหนดความ automatic Defaultlayout กว้างของตาราง fixed กว้างตามที่่ ำ และคอลัมน์ กำาหนดเท่านัน้caption- ใช้กำาหนด top Defaultside ตำาแหน่งของชื่อ bottom ตาราง left rightempty- ใช้กำาหนดว่าจะ hide Default
  55. 55. cells แสดง/ไม่แสดง show เส้นขอบ เมื่อ cell นั้นไม่มีข้อความ (empty)border- ใช้กำาหนดระยะ length เช่น 2px 5pxspacing ระหว่างตาราง length และขอบ แนวนอน และแนวตั้งborder- ใช้กำาหนด separate Default แยกเป็นcollapse ลักษณะเส้นขอบ collapse 2 เส้น เป็นเส้นเดียวExample<html><head><style type="text/css">table.one{table-layout:automatic;width:100%;border:1px solid#666666}table.two{table-layout:fixed;empty-cells:show; border-collapse:collapse; width:100%;border:1px solid #666666 }td {border:1px solid #666666 }</style></head><body><table class="one"><caption>ตารางแสดงตัวเลข</caption><tr><tdwidth="20%">1000000000000000000000000000</td><td width="40%">10000000</td><td width="40%"></td>
  56. 56. </tr></table><br /><table class="two"><caption>ตารางแสดงตัวเลข</caption><tr><tdwidth="20%">1000000000000000000000000000</td><td width="40%">10000000</td><td width="40%"></td></tr></table></body></html>Outputตารางแสดงตัวเลข10000000000000 1000000000000000000000ตารางแสดงตัวเลข10000000000000 1000000000000000000000สังเกต ตารางที่สอง จะ fix ความกว้างของช่องตารางไว้ ทำาให้แสดงข้อความไม่พอ นอกจากนี้มีการกำาหนด cell ว่างให้แสดงด้วยและให้แสดงเส้นขอบรวมเป็นเส้นเดียวExampleลองจัดรูปแบบอื่นๆ ให้กับตาราง โดยใช้ CSS บทที่ผ่านๆมา ดูคะ ่<html><head><style type="text/css">
  57. 57. table.three{width:60%;border:0; }table.three th { font-weight:bold; border-bottom:1pxsolid #CCC; border-top:1px solid #CCC; background-color:#F2F9FF ;color:#0000CC;}table.three td { padding:5px; border-bottom:1px dotted#CCC; }</style></head><body><table class="three" cellspacing="0"><tr><th>รหัสพนักงาน</th><th>ชื่อ</td><th>เงินเดือน</th></tr><tr><td>01</td><td>อำานาจ</td><td align="right">30,000</td></tr><tr><td>02</td><td>สมชาย</td><td align="right">25,000</td></tr><tr><td>03</td><td>วีระ</td><td align="right">20,000</td></tr></table>
  58. 58. </body></html>Outputรหัสพนักงาน ชื่อ เงินเดือน01 อำานาจ 30,00002 สมชาย 25,00003 วีระ 20,000LinkProperty Purposea:link กำาหนด style ให้กับ link ปกติที่ยังไม่เคยถูก clicka:visited กำาหนด style ให้กับ link ที่เคยถูกคลิกแล้วa:hover กำาหนด style ให้กับ link เมื่อเลื่อนเมาส์ไปอยู่ เหนือ linka:active กำาหนด style ให้กับ link ขณะถูกคลิกExample<html><head><style type="text/css">.linkbox a:link {color: #FF0000}/* unvisited link สีแดง*/.linkbox a:visited {color: #00FF00} /* visited link สีเขียว*/ .linkbox a:hover {color: #FF00FF} /* mouse overlink สีชมพู */ .linkbox a:active {color: #0000FF} /*selected link สีนำ้าเงิน*/</style></head><body><div class="linkbox"><a href="css_chapter01.html">Chapter1</a><a href="css_chapter02.html">Chapter2</a><a href="css_chapter03.html">Chapter3</a>
  59. 59. <a href="css_chapter04.html">Chapter4</a><a href="css_chapter05.html">Chapter5</a></div><body></html>OutputChapter1 Chapter2 Chapter3 Chapter4 Chapter5Example<html><head><style type="text/css">.linkpage a { font:12px Arial, Helvetica, sans-serif;background: #F8FBFC; color: #56ADDC;text-decoration: none; padding: 2px 4px; border: 1pxsolid #1BA0CD; }.linkpage a:hover { background-color:#C0F5FA;border-color: #608BD2; color:#0076AE }.linkpage span { font: 12px Arial, Helvetica, sans-serif;color:#333333; padding: 2px 4px; }</style></head><body><div class="linkpage" style="margin:auto;padding:10px"><span>Page :</span><a href="css_chapter01.html">&laquo; First</a><a href="css_chapter14.html">&lsaquo; Prev</a><a href="css_chapter01.html">1</a><a href="css_chapter02.html">2</a><a href="css_chapter03.html">3</a><a href="css_chapter16.html">Next &rsaquo;</a><a href="css_chapter25.html">Last &raquo;</a>
  60. 60. </div><body></html>Classificationการแสดงผลวัตถุว่าจะแสดงอย่างไร ที่ไหนProperty Description ValuesFloat ใช้กำาหนดการจัดวาง left รูปภาพ หรือวัตถุที่ right ต้องการ ว่าจะให้อยู่ทาง none ด้านใดของข้อความที่มี อยู่display ใช้กำาหนดรูปแบบการ แสดงของวัตถุ

×