รายงาน กลุ่ม คอม ป๊อบ

รายงาน
เรื่อง CSS Table Design
จัดทำาโดย
น.ส. รุ่งทิวา สุขบรรจง เลขที่ ١٩
ชั้นมัธยมศึกษาปีที่ 4
เสนอ
อ. ฐิติพร ไหวดี
โรงเรียนทองสวัสดิ์วิทยาคาร
สำานักงานเขตพื้นที่ประศึกษา เขต 2

คำานำา
รายงานเล่ม นี้จัดทำา ขึ้นเพื่ อเป็น สื่อการเรียน
การสอนให้แก่ พี่ๆ น้อง ๆ ทุกคนมีความรู้ในเรื่องเกี่ยว
กั บ การสอนวิ ธี ใ ช่ CSS Table Design มี เ นื้ อ หาบอก
เล่ า ถึ ง วิ ธี ก ารใช่ ง านหรื อ การเตี ย มตั ว ก่ อ นเริ่ ม เรี ย น
CSS สุดท้ายนี้รายงานเล่มนี้หวังว่าคงจะเป็นประโยชน์
กั บ เพื่ อ นๆ พี่ ๆ น้ อ งๆ ไม่ ม ากก็ น้ อ ยหากผิ ด พลาด
ประการใดต้องขออภัยมา ณ ที่นี้ด้วย

สารบัญ
เรือง
่
หน้า
Introduction
Syntax
Unit
Color
Insert styluses
Selector: HTML tag, class, id
Contextual selectors
Font
Text
Background
Border
Margin, padding
Link
Table

Classification
Positioning

Image
Form
Scroll bar
Mousecursor
Media types
Layout (Table)
Layout (DIV)
Pseudo-classes
Pseudo-element
บรรณานุกรม
http://www.enjoyday.net/webtutorial/css/css_ch
apter02.html

CSS คืออะไร

CSS ย่อมาจาก Cascading Style Sheets เป็นภาษาทีมี ่
รูปแบบการเขียน Syntax ที่เฉพาะ และถูกกำาหนดมาตรฐานโดย
W3C (World Wide Web Consortium) เช่นเดียวกับ HTML และ
XHTML ใช้สำาหรับตกแต่งเอกสาร HTML/ XHTML ให้มีหน้าตา
สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการ
ด้วยการกำาหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML เช่น
<body>, <p>, <h1> เป็นต้น
ประโยชน์ของ CSS
1. การใช้ CSS ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้
ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำาให้ code ภายใน
เอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำาให้เข้าใจง่ายขึ้น การ
แก้ไขเอกสารทำาได้งายและรวดเร็ว
่
2. เมื่อ Code ภายในเอกสาร HTML ลดลง ทำาให้ขนาดไฟล์เล็กลง
จึงดาวน์โหลดได้เร็ว
3. สามารถกำาหนดรูปแบบการแสดงผลจากคำาสั่ง Style sheet ชุด
เดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำาให้
เวลาแก้ไขหรือปรับปรุงทำาได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML tag
ต่างๆ ทั่วทั้งเอกสาร
4. สามารถควบคุมการแสดงผลให้เหมือนกัน หรือใกล้เคียงกัน ได้
ในหลาย Web Browser
5. สามารถกำาหนดการแสดงผลในรูปแบบที่เหมาะกับสื่อชนิดต่างๆ
ไม่วาจะเป็นการแสดงผลบนหน้าจอ, บนกระดาษเมื่อสั่งพิมพ์, บน
่
มือถือ หรือบน PDA โดยที่เป็นเนื้อหาเดียวกัน
6. ทำาให้เป็นเว็บไซต์ที่มมาตรฐาน ปัจจุบันการใช้ Attribute ของ
ี
HTML ตกแต่งเอกสารเว็บเพจ นั้นล้าสมัยแล้ว W3C แนะนำาให้เรา
ใช้ CSS แทน ดังนั้นหากเราใช้ CSS กับเอกสาร HTML ของเรา ก็
จะทำาให้เข้ากับเว็บเบราเซอร์ในอนาคตได้ดี
ตัวอย่างกรณีที่จัดรูปแบบการแสดงผลด้วยภาษา HTML
<Html>
<body>

<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>ให้กินผลไม้แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียว

ทั้งมื้อ เพือให้ร่างกายจัดเตรียมการย่อยได้ง่าย ไม่สับสน นอกจาก
่
นี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร
ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 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 ที่เป็น Class
name */
.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 จะได้ศึกษาอย่างละเอียดในหัว
ข้อต่อๆ ไป

Comment ใน Style Sheet Comment จะใช้เครื่องหมาย "/*"
เป็นการเปิด และ "*/" เป็นการปิด เช่น /* นี่คือ comment
กำาหนดสีตวอักษรเป็นสีดำา ขนาด14PX */ body {color:
ั
#000000; font-size: 14px} หน่วยที่ใช้วัดค่าต่างๆ ใน Style
Sheet
จาก 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)

การกำาหนดสีให้ตัวอักษร พื้นหลัง เส้นขอบ หรือส่วนอื่นๆ ของวัตถุ
สามารถกำาหนดได้หลายแบบ
1. กำาหนดโดยใช้ชื่อสี แต่การระบุชื่อสีแบบนี้ใช้สีได้จำานวนจำากัด
ได้แก่ aqua, black, blue, fuchsia (แดงอมม่วง), gray, green,
lime, maroon (นำ้าตาลแดง), navy, olive, purple, red, silver,
teal (เขียวขนเป็ด), white, และ yellow
2. กำาหนดเป็นค่าสีแบบ 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
แบบย่อ
#0000
Black #000 rgb(0,0,0)
00
#FF00
Red #F00 rgb(0,0,0)
00
#00FF
Green #F00 rgb(0,255,0)
00
#0000
Blue #00F rgb(0,0,255)
FF
#FFFF0
Yellow #FF0 rgb(255,255,0)
0
#00FF
Aqua #FF0 rgb(0,255,255)
FF
#FF00
Fuchsia #FF0 rgb(255,0,255)
FF
#C0C0 rgb(192,192,19
Silver
C0 2)
White #FFFFF #FFF rgb(255,255,25

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">รับประทานอาหารที่มีประโยชน์ หมั่นออกกำาลังกาย และพัก
</body>
</html>

เราควรหลีกเลี่ยงการเขียน style=”" ฝังลงใน 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
คำาสั่งที่ใช้เริ่มต้น และจบ Style Sheet มีโครงสร้างดังนี้

</style></head><body>
่
นี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร ถ้าทานมื้อหลักแล้วควรรอ
อย่างน้อย 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">

ตัวอย่างนี้จะสร้าง 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 เรียกใช้ style
sheet จากภายนอก
<Html>
<Head>
<link rel="style sheet" type="text/css"
href="mystyle.css">
</head>
<Body>
</body>
</html>

ในไฟล์ HTML ex_css_chapter05_4.html เรียกใช้ style
sheet จากภายนอก
<Html>
<Head>
<link rel="style sheet" type="text/css"
href="mystyle.css">
</head>
<Body>
<p>ให้กินผลไม้แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่าง
เดียวทั้งมื้อ เพื่อให้ร่างกายจัดเตรียมการย่อยได้งาย ไม่สบสน
่ ั

นอกจากนี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร ถ้าทานมื้อหลักแล้ว
ควรรออย่างน้อย 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 Tag
Example
<html>

<body>
<head>

</style></head><body>
่
นี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร ถ้าทานมื้อหลักแล้วควรรอ
อย่างน้อย 20 นาที
</p>
</body>
</html>
ตัวอย่างนีเห็นกันมาหลายรอบแล้วนะคะ เป็นการกำาหนด style ให้
้
กับ HTML Tag <h1> และ <p> หมายความว่าข้อความภายใน
<h1> ทุกอันในหน้าเว็บเพจนี้ให้เป็นสีแดง และข้อความใน <p>
ทุกอันให้เป็นสีดำา มาดู selector แบบอื่นๆ กันบ้าง Selector ที่เป็น
Class attribute เป็นการประกาศคำาสั่ง Style Sheet เพื่อกำาหนด
คุณสมบัตแบบเฉพาะเจาะจง ให้กับ HTML element ผ่าน class
ิ
attribute โดยเราสามารถตั้งชื่อ class ได้เอง class ใช้เมื่อ
ต้องการใช้แสดงผลรูปแบบนั้นซำ้าหลายๆ ครั้ง หรือต้องการใช้กับ
element หลายๆ อัน การประกาศใช้่้ เครื่องหมาย "." นำาหน้าชือ ่
class
Example
<html>
<head>

</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 จะมีผลทำาให้ข้อความใน <div
class="topic">บทความ</div> ไม่สามารถแสดงผลตามรูป
แบบที่กำาหนดใน class topic ได้ p.topic{color:red; font-
family:Arial; font-weight:bold; text-align:center } กรณีที่
ต้องการให้แสดงผลตามรูปแบบที่กำาหนดใน 2 class ก็สามารถ
ทำาได้
Example
<html>
<head>

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 การประกาศใช้ # นำาหน้า ID
Example
<html>
<head>
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>

อาจจะยังไม่เข้าใจตอนนี้ ไว้เห็นตัวอย่างมากๆ เข้า จะค่อยๆ เข้าใจ
เองค่ะ แล้วจะรู้ได้อย่างไรว่าค่า property และ value เช่น text-
align: center, font-weight:bold มีอะไรบ้าง อันนี้ศึกษาได้จาก
Chapter ต่อๆ ไป Contextual selectors การประกาศ selector
ซ้อนกัน โดยเคาะ spacebar ทำาให้สามารถสืบทอดคุณสมบัติเดิม
และเพิ่มคุณสมบัติที่แตกต่างได้ ดูตวอย่างเพื่อให้เข้าใจมากขึ้นค่ะ
ั
Example
<html>
<head>
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> ยังคงอยู่

วิธีรักษาสุขภาพ วิธีลดนำ้าหนัก วิธีรักษาสุขภาพ วิธีรักษา
สุขภาพ
อีกตัวอย่างหนึ่ง เพื่อแสดงให้เห็นประโยชน์ของการใช้
Contextual selectors
Example
<html>
<head>
/*ให้ 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" />
<br><br>
แบบนี้ไม่ดี ต้องมาระบุ Class borderimage ให้แต่ละรูป<br />
<img src="../images/star_icons.gif"

class="borderimage" />
<br>
<br>
แบบนี้ดี img ที่อยู่ในส่วน div class imgspecial_box จะเป็นขอบ
แดง หนา5 ให้ทั้งหมด ไม่ต้องมากำาหนดทีละรูป
<div id="imgspecial_box">
</div>
</body>
</html>

Output
แบบนี้ไม่ดี ต้องมาระบุ class border image ให้แต่ละรูป
แบบนี้ดี img ที่อยู่ในส่วน div class imgspecial_box จะเป็นขอบ
แดง หนา5 ให้ทั้งหมด ไม่ต้องมากำาหนดทีละรูป มาดูอีก
ตัวอย่างที่ไม่ดี คล้ายกับตัวอย่างข้างบน เป็นตัวอย่างทีใช้ CSS
่
มากเกินไป
Example
<html>
<head>
<title>ex_css_chapter07_3</title>
a.boldlink { color: blue; font-weight: bold; }
</style>
</head>

<body>
<a
href="http://www.enjoyday.net/webtutorial/html/inde
x.html" class="bold link">HTML</a><br />
<a
href="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 />
<a
href="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>
#boldlink_box a { color: blue; font-weight: bold; }
</style>
</head>
<Body>
<div id="boldlink_box">
<a
href="http://www.enjoyday.net/webtutorial/html/inde
x.html">HTML</a><br />
<a
href="http://www.enjoyday.net/webtutorial/css/index.
html">CSS</a><br />

<a href="http://www.enjoyday.net/webtutorial/xhtml/
index.html">XHTML</a><br />
<a
href="http://www.enjoyday.net/webtutorial/javascript
/index.html">JavaScript</a> </div>
</body>
</html>

Output HTML CSS XHTML JavaScript
Font คือ การกำาหนดลักษณะให้ตวอักษร ใน 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 Values
font-family ใช้กำาหนดชนิด font ที่ต้องการจะ เช่น Arial,
ให้แสดงผล โดยที่ font นั้นจะต้อง Helvetica,
มีอยู่ในเครื่องของผู้ใช้งานด้วย sans-serif
font-size ใช้กำาหนดขนาดของตัวอักษร ที่จะ xx-small
ให้แสดงผล /td> x-small
small
medium
large
x-large
xx-large
smaller
larger
18px

70%
150%
font-style ใช้กำาหนดรูปแบบของตัวอักษรใน normal
ลักษณะต่างๆ italic
oblique
เอียง 45
องศา
font-variant ใช้แปลงตัวอักษรที่เป็นตัวพิมพ์เล็ก normal
ให้เป็นพิมพ์ใหญ่ Small-Caps
โดยที่ขนาดตัวอักษรยังคงเท่าตัว
พิมพ์เล็ก
font-weight ใช้กำาหนดความหนาของตัวอักษร normal
bold
bolder
lighter
100
200
300
400
500
600
color ใช้กำาหนดสีให้ตัวอักษร red
#000099
font เราสามารถกำาหนด property ให้ font-style
กับ font ได้ในคำาสั่งประกาศเดียว font-
variant
font-
weight
font-size
font-family
Example
<p style="font-family: AngsanaUPC; font-size:16pt;
color: green">
CSS ย่อมาจาก Cascading Style Sheet เป็นภาษาทีมีรูปแบบ
่
การเขียน Syntax ที่เฉพาะ และถูกกำาหนดมาตรฐานโดย W3C

(World Wide Web Consortium) เช่นเดียวกับ HTML และ XH
TML ใช้สำาหรับตกแต่งเอกสาร HTML/ XHTM ให้มีหน้าตา สีสัน
ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างทีเราต้องการ ด้วย
่
การกำาหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML </p>
OutputCSS ย่อมาจาก Cascading Style Sheet เป็นภาษาทีมีรูป ่
แบบการเขียน Syntax ที่เฉพาะ และถูกกำาหนดมาตรฐานโดย
W3C (World Wide Web Consortium) เช่นเดียวกับ HTML และ
XHTML ใช้สำาหรับตกแต่งเอกสาร HTML/ XHTM ให้มีหน้าตา
สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการ
ด้วยการกำาหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML
Example
<p style="font-weight: bold">Love me Love my
dog</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>

Output
Love me Love my dog
Love me Love my dog
Love me Love my dog
Form
เรื่องของ CSS ที่เกี่ยวกับ Form มี 2 ส่วนที่อยากจะพูดถึงค่ะ ส่วน
แรก คือ การตกแต่ง Form Elements ด้วย style sheet และส่วน
ที่สอง คือ การทำา Form โดยไม่ใช้ Table หรือเรียกว่า Table less
Form Form Elements เราสามารถตกแต่ง ส่วนประกอบของ

Form ได้แก่ input box, text area, button เป็นต้น ให้มสีสันที่
ี
สวยงามได้ ไปดูตวอย่างกันค่ะ
ั

Example - Text box
<html>
<head>
.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 sans
Serif";font-size:12px;color:#0033CC
;background-image: url(../images/mail. if);background-
repeat:no-repeat;background-position:left;border: 1px
solid #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"

<input type="text" size="30" class="textbox image"
<input type="text" size="30" class="textbox_imgside"
value="admin@enjoyday.net" />
</body>
</html>
Output
การตกแต่ง Scroll bar ด้วย CSS จะพูดถึงในบทที่ 20
Example - Text area
<html>
<head>
.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>
<text area rows="4" cols="20" class="textarea1">
ข้อความของคุณค่ะ
.
.
.
.
</text area>
.
.
.
.
</text area>
<br />
.
.
.

.
</text area>
.
.
.
.
</textarea>
</body>
</html>
Output
Example - Textarea
<html>
<head>
.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-

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

</text area>
</div>
<br />
<div style="border:1px solid #ff6699; width:320px">
color:#fff #ffbbbb #ffbbbb
#fff;background:#ffcccc;padding:4px">
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>

<head>
.button_gray {font-family:Arial, Helvetica, sans-
serif;font-weight:bold;color:#333333;
background-color:#F7F7F7;border: 1px solid
#000000;padding: 1px 0;}
.button_image {font-family:Arial, Helvetica, sans-
serif;color:#333333;background:
url(images/button_bg.gif) repeat-x;border: 1px solid
#000000;padding: 1px 0;}
</style>
</head>
<body>
<input type="button" value="Submit" class="button
gray">
<input type="button" value="Submit" class="button
image">
</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/cs
s-tableless-form/
ลองนำา code ไปปรับปรุงเปลี่ยนแปลงต่อได้ค่ะ
Example

<html>
<head>
.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%;}
.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*/}
.cssform input[type="text"]{ /*width of text boxes. IE6
does not understand this attribute*/
width: 180px;}
.cssform textarea{width: 250px;height: 150px;}
/*.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/threepxt
est.html
*/ html .threepxfix{margin-left: 3px;}
</style>
</head>
<body>
<form id="myform" class="cssform" action="">
<p>
<label for="user">Name</label>
<input type="text" id="user" value="" />
</p>

<p>
<label for="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" /> <input
type="reset" value="reset" />

</div>
</form>
</body>
</html>
Output
Name
Email Address:
Feedback:
Sex: Male: Female:
Hobbies: Tennis
Reading
Basketball
Agree to Terms?
อีกตัวอย่าง สวยๆ ค่ะ
Credit to : http://woork.blogspot.com/2008/06/clean-
and-pure-css-form-design.html
Example
<html>
<head>
body{font-family:"Lucida Grande", "Lucida Sans
Unicode", Verdana, Arial, Helvetica, sans-serif;font-
size:12px;}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}

/* ----------- My Form ----------- */
.myform{margin:0 auto;width:400px;padding:14px;}
/* ----------- stylized ----------- */
#stylized{border:solid 2px
#b7ddf2;background:#ebf4fb;}
#stylized h1 {font-size:14px;font-weight:bold;margin-
bottom:8px;}
#stylized p{font-size:11px;color:#666666;margin-
bottom:20px;border-bottom:solid 1px #b7ddf2;padding-
bottom:10px;}
#stylized label{display:block;font-weight:bold;text-
align:right;width:140px;float:left;}
#stylized .small{color:#666666;display:block;font-
size:11px;font-weight:normal;text-
align:right;width:140px;}
#stylized input{float:left;font-size:12px;padding: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:#6666
66 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>

<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>
Output
Sign-up form
This is the basic look of my form without table

Name Add your name Email Add a valid address
Password Min. size 6 chars Sign-up
Background
เราสามารถกำาหนดลักษณะพื้นหลังของ Element ต่างๆ เช่น
<body>, <table>, <p>, <h1>, <h2>, <div> เป็นต้น
Propert Description Values

y
backgr ใช้กำาหนดว่าต้องการ fixed fix อยู่กับที่
ound- ให้ภาพพื้นหลังนั้นอยู่ scroll เลื่อนตาม Scroll
attach กับที่ หรือว่าเลื่อนไป Bar
ment ตาม Scroll Bar
backgr ใช้กำาหนดทั้งสี พืน ้
color-rgb รหัสสี
ound- หลังของเว็บเพจ หรือ color-hex
color ตาราง color- ชื่อสี
name
transpare
nt
backgr ใช้กำาหนดรูปภาพ ให้ url ของรูป เช่น
ound- พื้นหลังของเว็บเพจ url(images/bg.
image หรือตาราง jpg)
backgr ใช้กำาหนดตำาแหน่ง top left
ound- การจัดวางรูปภาพพื้น top center
positio หลัง top right
n center left
center
center
center
right
bottom
left
bottom
center
bottom
right
x% y%
xpos ypos
backgr กำาหนดรูปภาพพื้น repeat ไม่ให้มีการวางต่อ
ound- หลังว่าต้องการให้มี repeat-x รูปภาพ
repeat การเรียงต่อรูปภาพ repeat-y วางต่อรูปภาพ
หรือไม่ no-repeat แนวนอน
วางต่อรูปภาพ
แนวตั้ง

วางต่อรูปภาพทั้ง
แนวนอนและตั้ง
backgr เราสามารถกำาหนด backgroun
ound property ให้กับ d-color
background ได้ใน backgroun
คำาสั่งประกาศเดียว d-image
backgroun
d-repeat
backgroun
d-
attachmen
t
backgroun
d-position

ExampleBackground เป็นรูปอยู่ดานบน ขวา ไม่ repeat
้
<div style="background-attachment: scroll; background-
image: url (../images/bg1.gif); background-position: top
right; background-repeat: no-repeat">
<br /><br /><br /><br />
</div>
Output
ExampleBackground เป็นรูปอยู่ตรงกลาง ไม่ repeat
<div style="background-attachment:scroll; background-
image:url(../images/bg2.gif); background-
position:center; background-repeat:no-repeat">
<br /><br /><br /><br />
</div>
Output
Example Background เป็นรูปอยู่ตรงกลาง repeart แนวนอน
<div style="background-attachment:scroll; background-

position:center; background-repeat:repeat-x">
<br /><br />Enjoyday.net<br /><br />
</div>
Output
Enjoyday.net
Example Background เป็นรูปอยู่ตรงกลาง repeart แนวตั้ง
<div style="background-attachment: scroll; background-
image:url(../images/bg2.gif); background-position:
center; background-repeat:repeat-y">
</div>
Output
Enjoyday.net
Example Background เป็นรูป repeat ทั้งแนวนอน และแนวตั้ง
<div style="background-image:url(../images/bg2.gif);
background-repeat: repeat">
</div>
Output
Enjoyday.net
Example Background เป็นพื้นสีฟ้า
<div class="output_box" style="background-
color:#D7EBFF">
</div>
Output
Enjoyday.net
ExampleBackground เป็นรูป Fix

<textarea style="background-
attachment:fixed; width:300px " rows="3">สวัสดีคะ
่
นี่เป็น Background แบบ Fix
รูปจะไม่เลือนไปตาม Scroll Bar ค่ะ
.
.
.
.
</textarea>
Output
ExampleBackground เป็นรูปไม่ Fix เลื่อนตาม Scroll Bar
<textarea style="background-
attachment:scroll; width:300px" rows="3">สวัสดีค่ะ
นี่เป็น Background แบบไม่ Fix
รูปจะเลือนไปตาม Scroll Bar ค่ะ
.
.
.
.
</textarea>
Output
Border
เราสามารถกำาหนดลักษณะเส้นกรอบของ Element ต่างๆ ได้ เช่น
<p>, <div> เป็นต้น
border-width ใช้กำาหนดขนาดของ thin เช่น
กรอบของวัตถุทั้ง 4 medium 5px,
ด้าน thick 5pt

length
border-style ใช้การกำาหนด none dotted
ลักษณะของกรอบ hidden
ของวัตถุทั้ง 4 ด้าน dotted dashed
dashed
solid solid
double
groove double
ridge
inset groove
outset
ridge

inset

outset
border-color ใช้การกำาหนดสีกรอบ color
ของวัตถุทั้ง 4 ด้าน
*ต้องกำาหนด style
ก่อน
border สามารถกำาหนด border-
property ให้กับ width
border ได้ในคำาสั่ง border-style
ประกาศเดียว border-color
border-top- ่่ ใช้กำาหนด
width คุณสมบัติให้กับ
border-top- กรอบด้านบน
style
border-top-
color
border-top
border- ใช้กำาหนดคุณสมบัติ
bottom- ให้กับกรอบด้านล่าง
width
border-
bottom-style

border-
bottom-color
border-
bottom
border-left- ใช้กำาหนดคุณสมบัติ
width ให้กับกรอบด้านซ้าย
border-left-
style
border-left-
color
border-left
border-right- ใช้กำาหนดคุณสมบัติ
width ให้กับกรอบด้านขวา
bordr-right-
style
border-right-
color
border-
righte

Example กำาหนดขนาด 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 ด้านมีค่า 5px
Example กำาหนดขนาด border

<div class="output_box" style="border-width:1px
10px">
<br /><br /><br />
</div>
Output
กำาหนดขนาดให้เส้นกรอบ บน ล่าง เป็น 1px, และขนาดเส้นกรอบ
ซ้าย ขวา เป็น 10px
Exampleกำาหนดขนาด border
<div class="output_box" style="border-width:1px 10px
20px">
<br /><br /><br />
</div>
Output
กำาหนดขนาดให้เส้นกรอบ บน เป็น 1px, ขนาดเส้นกรอบ ซ้าย ขวา
เป็น 10px และขนาดเส้นกรอบ ล่าง เป็น 20px
Exampleกำาหนดขนาด 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> <div
class="output_box" style="border-width:1px 10px 20px
30px">
<br /><br /><br />
</div>
Output
กำาหนดขนาดให้เส้นกรอบ 1px 10px 20px 30px เป็นขนาดของ
เส้นกรอบ บน ขวา ล่าง ซ้าย ตามลำาดับ
Exampleลักษณะ border

<div style="border-style:dashed dotted solid double;
border-color:#FF6633">
<br /><br /><br /><br />
</div>
Output
กำาหนดลักษณะให้เส้นกรอบในคำาสั่งเดียว dashed dotted solid
double เป็นลักษณะของเส้นกรอบ บน ขวา ล่าง ซ้าย ตามลำาดับ
Exampleกำาหนดสี border
<div style="border-style:solid; border-color:red blue
green 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
Value
Property Description
s
margin- ใช้กำาหนดระยะห่างระหว่างขอบของ auto เช่น

top วัตถุดานบน กับวัตถุอื่นๆ
้ lengt 5px,
h 5pt,5
cm
margin- ใช้กำาหนดระยะห่างระหว่างขอบของ
bottom วัตถุดานล่าง กับวัตถุอื่นๆ
้
left วัตถุดานซ้าย กับวัตถุอื่นๆ
้
right วัตถุดานขวา กับวัตถุอื่นๆ
้
margin ใช้กำาหนดระยะห่างระหว่างขอบของ
วัตถุที่ต้องการ ทั้ง 4 ด้าน กับวัตถุอื่น
ๆ ในคำาสั่งเดียว
padding ใช้กำาหนดระยะห่างระหว่างขอบของ
-top วัตถุดานในเส้นบน กับ ข้อความที่อยู่
้
ในกรอบ
-bottom วัตถุดานในเส้นล่าง กับ ข้อความที่อยู่
้
ในกรอบ
-left วัตถุดานในเส้นซ้าย กับ ข้อความที่อยู่
้
ในกรอบ
-right วัตถุดานในเส้นขวา กับ ข้อความที่อยู่
้
ในกรอบ
วัตถุดานใน กับ ข้อความที่อยู่ในกรอบ
้
(ไม่เกี่ยวข้องกับวัตถุด้านนอก)

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:20px
solid #3399CC">
block นี้มี Border สีนำ้าเงิน ขนาด 20px <br />
มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block
20px<br />
และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่
ข้างนอก block 20px ทีนี้คงเข้าใจแล้วว่า margin และpadding
คือส่วนไหนกันแล้ว</div>
margin ด้านล่าง
Output

margin ด้านบน block นี้มี Border สีนำ้าเงิน ขนาด 20px มี
Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block
20px
ข้างนอก block 20px ทีนี้คงเข้าใจแล้วว่า margin และpadding
คือส่วนไหนกันแล้ว ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอก
ของ block 20x นี่คือ margin ด้านล่าง ถ้ายังงงๆ ว่าตรงไหนคือ
margin และ padding อยู่ ให้ดูที่รูปนี้ค่ะ

Exampleการใช้งาน margin ที่แต่ละด้านไม่เท่ากัน
<div style="margin:20px; padding:10px 20px 30px
40px; border:2px solid #009999">
block นี้มี Border สีส้ม ขนาด 2px <br />
มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block
10px 20px 30px 40px ซึงเป็น pading ของด้านบน ขวา ล่าง
่
ซ้าย ตามลำาดับ และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ
ข้อความที่อยู่ข้างนอก block 20px ทั้ง 4 ด้าน
</div>

margin ด้านล่าง
Output
ความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 10x นี่คือ
block นี้มี Border สีส้ม ขนาด 2px มี Padding ระยะห่างระหว่าง
ขอบด้านใน กับ ข้อความใน block 20px ทั้ง 4 ด้าน และมี Margin
ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ขางนอก block
้
10px 20px 30px 40px ซึงเป็น margin ของด้านบน ขวา ล่าง
่
ซ้าย ตามลำาดับ ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ
block 30x นี่คือ margin ด้านล่าง
Exampleการใช้งาน padding ทีแต่ละด้านไม่เท่ากัน
่
<div style="margin:20px; padding:10px 20px 30px
40px; border:2px solid #009999">
block นี้มี Border สีเขียว ขนาด 2px <br />มี Padding ระยะ
ห่างระหว่างขอบด้านใน กับ ข้อความใน block 10px 20px 30px
40px ซึ่งเป็น pading ของด้านบน ขวา ล่าง ซ้าย ตามลำาดับ
ข้างนอก block 20px ทั้ง 4 ด้าน
</div>ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block
20x นี่คือ margin ด้านล่าง

Output
margin ด้านบน block นี้มี Border สีเขียว ขนาด 2px มี Padding

ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 10px 20px
30px 40px ซึ่งเป็น pading ของด้านบน ขวา ล่าง ซ้าย ตามลำาดับ
ข้างนอก block 20px ทั้ง 4 ด้าน ข้อความข้างนอกตรงนี้ห่างจาก
ขอบด้านนอกของ block 20x นี่คือ margin ด้านล่าง
Example อื่นๆ
h1 {margin: 10px}
Happy New Year margin ทั้ง4 ด้านเป็น 10px
h1 {margin: 10px 2%}
Happy New Year
Margin ด้านบนและล่าง 10px, ด้านขวาและซ้าย เป็น 2% ของ
ความกว้างเอกสาร
h1 {margin: 10px 2% -10px}
Happy New Year
Margin ด้านบน 10px, ด้านขวาและซ้าย 2% ของความกว้าง
เอกสาร, ด้านล่าง เป็น -10px
h1 {margin: 10px 2% -10px auto}
Happy New Year
Margin ด้านบน 10px, ด้านขวา 2% ของความกว้างเอกสาร, ด้าน
ล่าง เป็น -10px และด้านซ้ายกำาหนดตาม Browser
Exampleการใช้งานผสม Chapter 8-12
<html>
<head>

.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:2px
dotted #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>
Output
Hello all,
Happy New Year 2009
Hope you enjoy your stay here.
List
list-style- ใช้กำาหนด none •disc
type ลักษณะที่ใช้นำา disc
•circle
หน้าแต่ละรายการ circle
ย่อย square •square
decimal •decimal
decimal- •decimal-
leading- leading-zero
zero

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-
iroha
list-style- ใช้การกำาหนด inside จัดให้ตรงแนวกับ
position ลักษณะการปัด outside สัญลักษณ์
ขึนบรรทัดใหม่
้ จัดให้ตรงแนวกับ
ของข้อความ ข้อความแถวแรก
กรณีที่มีความยาว
เกิน 1 บรรทัด

* ถ้าไม่กำาหนดจะ
เป็นแบบ outside
list-style- ใช้การกำาหนด url ของรูปภาพ

image รูปภาพเพื่อนำามา
เป็นสัญลักษณ์
รายการย่อย
list-style สามารถกำาหนด list-style-
property ให้กับ type
list ได้ในคำาสั่ง list-style-
ประกาศเดียว position
list-style-
image

Example
Enjoyday.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>
Output
•HTML
•CSS
•XHTML
•JavaScript
•SQL
Example
<ul>
<li style="list-style-type: circle">HTML</li>
<li style="list-style-type:disc">CSS</li>

<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>
Output
•HTML
•CSS
•XHTML
•JavaScript
•SQL
Example
<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>
Output
•HTML
•CSS
•XHTML
•JavaScript
•SQL
Example

<ul style="list-style-type: circle; list-style-position:
outside">
<li>การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้
แก้ไขเอกสารทำาได้งายและรวดเร็ว</li> <li>เมื่อ code ภายใน
่
เอกสาร HTML ลดลง ทำาให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้
เร็ว</li> <li>สามารถกำาหนดรูปแบบการแสดงผลจากคำาสั่ง
style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือ
ทุกหน้าได้ ทำาให้เวลาแก้ไขหรือปรับปรุงทำาได้ง่าย ไม่ต้องไล่ตาม
แก้ที่ HTML Tag ต่างๆ ทั่วทั้งเอกสาร</li> </ul>
Output
•การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้
่
•เมื่อ code ภายในเอกสาร HTML ลดลง ทำาให้ขนาดไฟล์เล็กลง
•สามารถกำาหนดรูปแบบการแสดงผลจากคำาสั่ง style sheet ชุด
เวลาแก้ไขหรือปรับปรุงทำาได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML
Tag ต่างๆ ทั่วทั้งเอกสาร
Example กำาหนด property ให้กับ list ได้ในคำาสั่งประกาศเดียว
<ul style="list-style:decimal inside">
<li>การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้
แก้ไขเอกสารทำาได้งายและรวดเร็ว</li>
่

<li>เมื่อ code ภายในเอกสาร HTML ลดลง ทำาให้ขนาดไฟล์เล็ก
ลง จึงดาวน์โหลดได้เร็ว</li>
<li>สามารถกำาหนดรูปแบบการแสดงผลจากคำาสั่ง style sheet
ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้
ทำาให้เวลาแก้ไขหรือปรับปรุงทำาได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML
Tag ต่างๆ ทั่วทั้งเอกสาร</li>
</ul>
Output
•การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้
่
•เมื่อ code ภายในเอกสาร HTML ลดลง ทำาให้ขนาดไฟล์เล็กลง
•สามารถกำาหนดรูปแบบการแสดงผลจากคำาสั่ง style sheet ชุด
เวลาแก้ไขหรือปรับปรุงทำาได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML
Tag ต่างๆ ทั่วทั้งเอกสาร
Table
ต้องใช้กับเว็บเบราเซอร์รุ่นใหม่ๆ เช่น IE6 เป็นต้นไป
*บาง property เมื่อทดสอบแล้วไม่เห็นผล
table- ใช้กำาหนดความ automatic Default
layout กว้างของตาราง fixed กว้างตามที่่ ำ
และคอลัมน์ กำาหนดเท่านัน้
caption- ใช้กำาหนด top Default
side ตำาแหน่งของชื่อ bottom
ตาราง left
right
empty- ใช้กำาหนดว่าจะ hide Default

cells แสดง/ไม่แสดง show
เส้นขอบ เมื่อ cell
นั้นไม่มีข้อความ
(empty)
border- ใช้กำาหนดระยะ length เช่น 2px 5px
spacing ระหว่างตาราง 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>
<td
width="20%">1000000000000000000000000000</td
>
<td width="40%">10000000</td>
<td width="40%"></td>

</tr>
</table>
<br />
<table class="two">
<caption>ตารางแสดงตัวเลข</caption>
<tr>
<td
width="20%">1000000000000000000000000000</td
>
<td width="40%">10000000</td>
<td width="40%"></td>
</tr>
</table>
</body>
</html>
Output
ตารางแสดงตัวเลข
10000000000000
10000000
00000000000000

ตารางแสดงตัวเลข
10000000000000
10000000
00000000000000
สังเกต ตารางที่สอง จะ fix ความกว้างของช่องตารางไว้ ทำาให้
แสดงข้อความไม่พอ นอกจากนี้มีการกำาหนด cell ว่างให้แสดงด้วย
และให้แสดงเส้นขอบรวมเป็นเส้นเดียว
Exampleลองจัดรูปแบบอื่นๆ ให้กับตาราง โดยใช้ CSS บทที่ผ่านๆ
มา ดูคะ
่
<html>
<head>

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; }
</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>
</tr>
<tr>
<td>03</td>
<td>วีระ</td>
</tr>
</table>

</body>
</html>
Output
รหัสพนักงาน ชื่อ เงินเดือน
01 อำานาจ 30,000
02 สมชาย 25,000
03 วีระ 20,000
Link
Property Purpose
a:link กำาหนด style ให้กับ link ปกติที่ยังไม่เคยถูก
click
a:visited กำาหนด style ให้กับ link ที่เคยถูกคลิกแล้ว
a:hover กำาหนด style ให้กับ link เมื่อเลื่อนเมาส์ไปอยู่
เหนือ link
a: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 over
link สีชมพู */ .linkbox a:active {color: #0000FF} /*
selected link สีนำ้าเงิน*/
</style>
</head>
<body>
<div class="linkbox">
<a href="css_chapter01.html">Chapter1</a>

</div>
<body>
</html>
Output
Chapter1 Chapter2 Chapter3 Chapter4 Chapter5
Example
<html>
<head>
.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="linkpage" style="margin:auto;
padding:10px">
<span>Page :</span>
<a href="css_chapter01.html">« First</a>
<a href="css_chapter14.html">&lsaquo; Prev</a>
<a href="css_chapter01.html">1</a>
<a href="css_chapter16.html">Next &rsaquo;</a>
<a href="css_chapter25.html">Last »</a>

</div>
<body>
</html>
Classification
การแสดงผลวัตถุว่าจะแสดงอย่างไร ที่ไหน
Float ใช้กำาหนดการจัดวาง left
รูปภาพ หรือวัตถุที่ right
ต้องการ ว่าจะให้อยู่ทาง none
ด้านใดของข้อความที่มี
อยู่
display ใช้กำาหนดรูปแบบการ
แสดงของวัตถุ

value description
none ไม่แสดงวัตถุนั้น
block แสดงเป็น block โดยขึ้นบรรทัด
ใหม่ก่อน
inline เป็นค่า Default โดย element
จะ่ี ่ ่ แสดงแบบ inline ไม่มีการ
ขึนบรรทัดใหม่
้
list-item แสดงเป็นลิสต์รายการ
run-in The element will be displayed
as block-level or inline
element depending on
context
compact The element will be displayed
as block-level or inline
element depending on
context
marker
table The element will be displayed
as a block table (like
<table>), with a line break
before and after the table
inline-table The element will be displayed
as an inline table (like
<table>), with no line break
before or after the table
table-row- The element will be displayed
group as a group of one or more
rows (like <tbody>)
table- The element will be displayed

รายงาน กลุ่ม คอม ป๊อบ

รายงาน กลุ่ม คอม ป๊อบ

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie รายงาน กลุ่ม คอม ป๊อบ

Ähnlich wie รายงาน กลุ่ม คอม ป๊อบ (20)

รายงาน กลุ่ม คอม ป๊อบ