รายงาน
เรอง CSS Table Design
จดท าโดย
นาวสาว ผองนภา มณธร
เลขท 13
ชนมธยมศกษาปท 4
เสนอ
อ. ฐตพร ไหวด
โรงเรยนทองสวสดวทยาคาร
ส านกงานเขตพนทประศกษา เขต 2
ค าน า
รายงานเลมนจดท าขนเพอเปนสอการเรยนการสอนใหแกนองๆเพอพๆทกคน
มเนอหาในเรองนเกยวกบการสอนวธใช CSS Table Design มเนอหาบอกเลา
ถงวธการใชงานหรอการเตยมตวกอนเรมเรยน CSS วาจะตองมพนฐานในการใช
HTML มากอนตองขอขอบพระคณอ.ทปรกษา อ.ฐตพร ไหวด เปนอยางสง
ทใหค าแนะน าและค าตชมมาอยางด สดทายนรายงานเลมนหวงวาคงจะเปนประโยชน
กบเพอนๆ พๆ นองๆ ไมมากกนอยหากผดพลาดประการใดตองขออภยมา ณ ทนดวย
จดท าโดย
นางสาว ผองนภา มณธร เลขท13 ม.4
สารบญ
เรอง หนา
Lntroduction
Syntax
Unit
Color
Lnsert a styleshee
Selector: HTML tag,class,id
Conlextual selectors
Font
Text
Background
Border
Margin,padding
Link
Table
Classiflcation
Positioning
Lmage
Form
Scorll bar
Mouse cursor
Media types
Layout(Table)
Layout(DIV)
Pseudo-classes
Pseudo-element
บรรณนกรม
บรรณานกรม
http://www.enjoyday.net/webtutorial/css/css_chapter02.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
o #rrggbb เชน #eecc00, #42e15e o #rgb เชน #ec0 หมายถง #eecc00 o rgb(x,x,x) โดยท x คอจ านวนเตมตงแต 0-255 เชน rgb(0,204,0) o rgb(y%,y%,y%) โดยท y คอเปอรเซนตตงแต 0%-100% เชน rgb(0%,80%,0%)
ชอส รหสคาสฐาน16
รหสคาสฐาน16 แบบยอ
RGB การแสดงผลส
Black #000000 #000 rgb(0,0,0)
Red #FF0000 #F00 rgb(0,0,0)
Green #00FF00 #F00 rgb(0,255,0)
Blue #0000FF #00F rgb(0,0,255)
Yellow #FFFF00 #FF0 rgb(255,255,0)
Aqua #00FFFF #FF0 rgb(0,255,255)
Fuchsia #FF00FF #FF0 rgb(255,0,255)
Silver #C0C0C0 rgb(192,192,192)
White #FFFFFF #FFF rgb(255,255,255)
วธใชงาน 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 เพอก าหนดคณสมบต ใหกบ HTML Tag ใดๆ แลว จะมผลกบเอกสาร HTML ทงหนา นยมใสสวนของค าสง Style Sheet ไวระหวาง <head>...</head> ส าหรบ Web Browser รนเกาทไมสนบสนนค าสง Style Sheet หรอ Disable Style Sheet ไวนน ใหใส Comment ของ ภาษา HTML ไวดวย เพอใหเวบเบราเซอรนนทราบวาไมใชค าสงภาษา HTML
ค าสงทใชเรมตน และจบ STYLE SHEET มโครงสรางดงน <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="stylesheet" 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="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <h1>วธดแลรกษาสขภาพ</h1> <p>รบประทานอาหารทมประโยชน หมนออกก าลงกาย และพกผอนใหเพยงพอ</p> </body> </html>
ในไฟล HTML ex_css_chapter05_4.html เรยกใช style sheet จากภายนอก <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <h1>วธกนผลไมทถกตอง</h1> <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 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 หลายๆ อน การประกาศใชเครองหมาย "." น าหนาชอ class EXAMPLE <html> <head> <style type="text/css"> <!-- .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 จะมผลท าใหขอความใน <div class="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"> 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> <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>
อาจจะยงไมเขาใจตอนน ไวเหนตวอยางมากๆ เขา จะคอยๆ เขาใจเองคะ แลวจะรไดอยางไรวาคา 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> ยงคงอย
วธรกษาสขภาพ
วธลดน าหนก
วธรกษาสขภาพ
วธรกษาสขภาพ
อกตวอยางหนง เพอแสดงใหเหนประโยชนของการใช Contextual selectors
EXAMPLE
<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" 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 borderimage ใหแตละรป
แบบนด 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>
<body> <a href="http://www.enjoyday.net/webtutorial/html/index.html" class="boldlink">HTML</a><br /> <a href="http://www.enjoyday.net/webtutorial/css/index.html" class="boldlink">CSS</a><br /> <a href="http://www.enjoyday.net/webtutorial/xhtml/index.html" class="boldlink">XHTML</a><br /> <a href="http://www.enjoyday.net/webtutorial/javascript/index.html" class="boldlink">JavaScript</a> </body> </html>
แกไขใหมเขยนแบบ Contextual selectors จะดกวาคะ
<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"> <a href="http://www.enjoyday.net/webtutorial/html/index.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 ทตองการจะใหแสดงผล โดยท font นนจะตองมอยในเครองของผใชงานดวย
เชน Arial, Helvetica, sans-serif
font-size ใชก าหนดขนาดของตวอกษร ทจะใหแสดงผล /td> xx-small 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 ไดในค าสงประกาศเดยว
font-style 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 และ XHTML ใชส าหรบตกแตงเอกสาร HTML/ XHTM ใหมหนาตา สสน ตวอกษร เสนขอบ พนหลง ระยะหาง ฯลฯ อยางทเราตองการ ดวยการก าหนดคณสมบตใหกบ Element ตางๆ ของ HTML </p>
OUTPUT
CSS ยอมาจาก 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 หรอเรยกวา Tableless Form Form Elements เราสามารถตกแตง สวนประกอบของ Form ไดแก inputbox, textarea, 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 sans Serif";
font-size:12px;
color:#0033CC;
background-image: url(../images/mail.gif);
background-repeat:no-repeat;
background-position:left;
border: 1px solid #3366CC;
padding-left:16px;
}
</style>
</head>
<body>
<input type="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>
<input type="text" size="30" class="textbox_image" value="enjoyday.net" />
<br><br>
<input type="text" size="30" class="textbox_imgside" value="[email protected]" />
</body>
</html>
OUTPUT
enjoyday.net
enjoyday.net
enjoyday.net
enjoyday.net
การตกแตง Scroll bar ดวย CSS จะพดถงในบทท 20
EXAMPLE - TEXTAREA
<html> <head> <style type="text/css"> .textarea1 { scrollbar-arrow-color:#000; scrollbar-face-color:#face00; scrollbar-highlight-color:#fff; scrollbar-3dlight-color:#000; scrollbar-track-color:#fff; scrollbar-shadow-color:#face00; scrollbar-darkshadow-color:#000; border:1px solid #000; font-size:12px } .textarea2 { scrollbar-arrow-color:#000;
scrollbar-face-color:#fff; scrollbar-highlight-color:#fff; scrollbar-3dlight-color:#000; scrollbar-track-color:#fff; scrollbar-shadow-color:#fff; scrollbar-darkshadow-color:#000; color:#000; border:1px solid #000000; font-size:12px } .textarea3 { scrollbar-arrow-color:#add8e6; scrollbar-face-color:#fff; scrollbar-highlight-color:#fff; scrollbar-3dlight-color:#add8e6; scrollbar-track-color:#fff; scrollbar-shadow-color:#fff; scrollbar-darkshadow-color:#add8e6; color:#197bff; border:1px solid #add8e6; font-size:12px } .textarea4 { scrollbar-arrow-color:#ffb090; scrollbar-face-color:#fff; scrollbar-highlight-color:#fff; scrollbar-3dlight-color:#ffb090; scrollbar-track-color:#fff; scrollbar-shadow-color:#fff; scrollbar-darkshadow-color:#ffb090;
color:#ff4a19; border:1px solid #ffb090; font-size:12px } </style> </head> <body> <textarea rows="4" cols="20" class="textarea1"> ขอความของคณคะ . . . . </textarea>
<textarea rows="4" cols="20" class="textarea2"> ขอความของคณคะ . . . . </textarea>
<br />
<textarea rows="4" cols="20" class="textarea3"> ขอความของคณคะ . . . . </textarea>
<textarea rows="4" cols="20" class="textarea4"> ขอความของคณคะ . . . . </textarea>
</body> </html>
OUTPUT
ขอความของคณคะ
.
.
.
ขอความของคณคะ
.
.
.
ขอความของคณคะ
.
.
.
ขอความของคณคะ
.
.
.
EXAMPLE - 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 } .textarea_b { width:300px; scrollbar-arrow-color:#000; scrollbar-face-color:#fff; scrollbar-highlight-color:#fff; scrollbar-3dlight-color:#fff; scrollbar-track-color:#fff; scrollbar-shadow-color:#fff; scrollbar-darkshadow-color:#fff; color:#000; border-width:0; font-size:12px } .textarea_c { width:300px; scrollbar-arrow-color:#ff6699; scrollbar-face-color:#fff; scrollbar-highlight-color:#fff; scrollbar-3dlight-color:#fff; scrollbar-track-color:#fff; scrollbar-shadow-color:#fff;
scrollbar-darkshadow-color:#fff; color:#ff6699; border-width:0; font-size:12px } </head> <body> <div style="border:1px solid #000; background:#add8e6; padding:5px; width:310px"> <textarea rows="4" class="textarea_a"> ขอความของคณคะ . . . . </textarea> </div>
<br />
<div style="border:1px solid #000;background:#fff;padding:4px; width:320px"> <div style="border:1px solid #000;margin-bottom:4px"> <div style="border-width:1px;border-style:solid;border-color:#fff #98cee0 #98cee0 #fff;background:#add8e6;color:#000;text-align:center;font-size:12px;padding:4px">หวขอ</div> </div> <textarea rows="5" class="textarea_b"> ขอความของคณคะ . . . .
</textarea> </div>
<br />
<div style="border:1px solid #ff6699; width:320px"> <div style="border-width:1px;border-style:solid;border-color:#fff #ffbbbb #ffbbbb #fff;background:#ffcccc;padding:4px"> <div style="border-width:1px;border-style:solid;border-color:#ffbbbb #fff #fff #ffbbbb"> <div style="border:1px solid #ff6699;background:#fff;padding:2px"> <textarea rows="5" class="textarea_c"> ขอความของคณคะ . . . . </textarea> </div> </div> </div> </div>
</body> </html>
OUTPUT
ขอความของคณคะ
.
.
.
หวขอ
ขอความของคณคะ
.
.
.
.
ขอความของคณคะ
.
.
.
.
EXAMPLE - BUTTON
<html> <head> <style type="text/css"> .button_gray { font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#333333; background-color:#F7F7F7; border: 1px solid #000000; padding: 1px 0; } .button_image { font-family:Arial, Helvetica, sans-serif; color:#333333; background: url(images/button_bg.gif) repeat-x; border: 1px solid #000000; padding: 1px 0; } </style>
</head> <body> <input type="button" value="Submit" class="button_gray"> <input type="button" value="Submit" class="button_image"> </body> </html> OUTPUT
รปทใชท าปม
Tableless Form เราสามารถก าหนด Form เปน 2 column โดยไมตองใช Table ได โดยก าหนดความกวางของ column แรกโดยใช tag <label> และ colunm ทสอง จะเปนพวก text box ทวางตอจาก column แรก credit to : http://www.dynamicdrive.com/style/csslibrary/item/css-tableless-form/ ลองน า code ไปปรบปรงเปลยนแปลงตอไดคะ EXAMPLE
<html> <head> <style type="text/css">
.cssform p{ width: 300px; clear: left; margin: 0; padding: 5px 0 8px 0; padding-left: 155px; /*width of left 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/threepxtest.html */
* html .threepxfix{ margin-left: 3px; }
</style> </head>
<body> <form id="myform" class="cssform" action="">
<p> <label for="user">Name</label>
<input type="text" id="user" value="" /> </p>
<p> <label for="emailaddress">Email Address:</label> <input type="text" id="emailaddress" value="" /> </p>
<p> <label for="comments">Feedback:</label> <textarea id="comments" rows="5" cols="25"></textarea> </p>
<p> <label for="comments">Sex:</label> Male: <input type="radio" name="sex" /> Female: <input type="radio" name="sex" /><br /> </p>
<p> <label for="comments">Hobbies:</label> <input type="checkbox" name="hobby" /> Tennis<br /> <input type="checkbox" name="hobby" 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?
Submit reset
อกตวอยาง สวยๆ คะ
Credit to : http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html
EXAMPLE
<html> <head> <style type="text/css">
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:#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>
<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> เปนตน
Property Description Values
background-attachment
ใชก าหนดวาตองการใหภาพพนหลงนนอยกบท หรอวาเลอนไปตาม Scroll Bar
fixed scroll
fix อยกบท เลอนตาม Scroll Bar
background-color
ใชก าหนดทงส พนหลงของเวบเพจ หรอ ตาราง
color-rgb color-hex color-name transparent
รหสส ชอส
background-image
ใชก าหนดรปภาพ ใหพนหลงของเวบเพจ หรอตาราง
url ของรป เชน url(images/bg.jpg)
background-position
ใชก าหนดต าแหนงการจดวางรปภาพพนหลง
top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos
background-repeat
ก าหนดรปภาพพนหลงวาตองการใหมการเรยงตอรปภาพหรอไม
repeat repeat-x repeat-y no-repeat
ไมใหมการวางตอรปภาพ วางตอรปภาพแนวนอน วางตอรปภาพแนวตง วางตอรปภาพทงแนวนอน
และตง
background เราสามารถก าหนด property ใหกบ background ไดในค าสงประกาศเดยว
background-color background-image background-repeat background-attachment background-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 EXAMPLEBackground เปนรปอยตรงกลาง repeart แนวนอน
<div style="background-attachment:scroll; background-image:url(../images/bg2.gif); background-position:center; background-repeat:repeat-x"> <br /><br />Enjoyday.net<br /><br /> </div>
OUTPUT
Enjoyday.net
EXAMPLEBackground เปนรปอยตรงกลาง 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>
OUTPUT Enjoyday.net
EXAMPLEBackground เปนรป repeart ทงแนวนอน และแนวตง <div style="background-image:url(../images/bg2.gif); background-repeat:repeat"> <br /><br />Enjoyday.net<br /><br /> </div>
OUTPUT Enjoyday.net
EXAMPLEBackground เปนพนสฟา <div class="output_box" style="background-color:#D7EBFF"> <br /><br />Enjoyday.net<br /><br /> </div>
OUTPUT Enjoyday.net
EXAMPLEBackground เปนรป Fix <textarea style="background-image:url(../images/bg1.gif); background-attachment:fixed; width:300px " rows="3">สวสดคะ นเปน Background แบบ Fix รปจะไมเลอนไปตาม Scroll Bar คะ .
.
.
. </textarea>
OUTPUT สวสดคะ
น เ ปน Background แบบ Fix
รปจะไมเ ลอนไปตาม Scroll Bar คะ
EXAMPLEBackground เปนรปไม Fix เลอนตาม Scroll Bar <textarea style="background-image:url(../images/bg1.gif); background-attachment:scroll; width:300px" rows="3">สวสดคะ นเปน Background แบบไม Fix รปจะเลอนไปตาม Scroll Bar คะ . . . . </textarea>
OUTPUT
สวสดคะ
น เ ปน Background แบบไม Fix
รปจะเ ลอนไปตาม Scroll Bar คะ
Border
เราสามารถก าหนดลกษณะเสนกรอบของ Element ตางๆ ได เชน <p>, <div> เปนตน
Property Description Values
border-width ใชก าหนดขนาดของกรอบของวตถทง 4 ดาน
thin medium thick length
เชน 5px, 5pt
border-style ใชการก าหนดลกษณะของกรอบของวตถทง 4 ดาน
none hidden dotted dashed solid double groove ridge inset outset
dotted dashed solid double groove ridge inset outset
border-color ใชการก าหนดสกรอบของวตถทง 4 ดาน *ตองก าหนด style กอน
color
border สามารถก าหนด property ใหกบ border ไดในค าสงประกาศเดยว
border-width 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
Property Description Values
margin-top ใชก าหนดระยะหางระหวางขอบของวตถดานบน กบวตถอนๆ auto
length
เชน 5px,
5pt,5cm
margin-bottom ใชก าหนดระยะหางระหวางขอบของวตถดานลาง กบวตถ
อนๆ
margin-left ใชก าหนดระยะหางระหวางขอบของวตถดานซาย กบวตถ
อนๆ
margin-right ใชก าหนดระยะหางระหวางขอบของวตถดานขวา กบวตถ
อนๆ
margin ใชก าหนดระยะหางระหวางขอบของวตถทตองการ ทง 4 ดาน
กบวตถอน ๆ ในค าสงเดยว
padding-top ใชก าหนดระยะหางระหวางขอบของวตถดานในเสนบน กบ
ขอความทอยในกรอบ
padding-bottom ใชก าหนดระยะหางระหวางขอบของวตถดานในเสนลาง กบ
ขอความทอยในกรอบ
padding-left ใชก าหนดระยะหางระหวางขอบของวตถดานในเสนซาย กบ
ขอความทอยในกรอบ
padding-right ใชก าหนดระยะหางระหวางขอบของวตถดานในเสนขวา กบ
ขอความทอยในกรอบ
padding ใชก าหนดระยะหางระหวางขอบของวตถดานใน กบ ขอความ
ทอยในกรอบ (ไมเกยวของกบวตถดานนอก)
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>
ขอความขางนอกตรงนหางจากขอบดานนอกของ block 20x นคอ margin ดานลาง
OUTPUT
ขอความขางนอกตรงนหางจากขอบดานนอกของ block 20x นคอ margin ดานบน
block นม Border สน าเงน ขนาด 20px
ม Padding ระยะหางระหวางขอบดานใน กบ ขอความใน block 20px
และม Margin ระยะหางระหวางขอบดานนอก กบ ขอความทอยขางนอก 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>
ขอความขางนอกตรงนหางจากขอบดานนอกของ 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 30px 40px; border:2px solid #009999">
block นม Border สเขยว ขนาด 2px <br />
ม Padding ระยะหางระหวางขอบดานใน กบ ขอความใน block 10px 20px 30px 40px ซงเปน pading ของ
ดานบน ขวา ลาง ซาย ตามล าดบ
และม Margin ระยะหางระหวางขอบดานนอก กบ ขอความทอยขางนอก block 20px ทง 4 ดาน
</div>
ขอความขางนอกตรงนหางจากขอบดานนอกของ block 20x นคอ margin ดานลาง
OUTPUT
ความขางนอกตรงนหางจากขอบดานนอกของ block 20x นคอ margin ดานบน
block นม Border สเขยว ขนาด 2px
ม Padding ระยะหางระหวางขอบดานใน กบ ขอความใน block 10px 20px 30px 40px ซงเปน pading ของ
ดานบน ขวา ลาง ซาย ตามล าดบ และม Margin ระยะหางระหวางขอบดานนอก กบ ขอความทอยขางนอก
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>
<style type="text/css">
.mixcode {
font: normal small-caps bold 16px Arial, Helvetica, sans-serif;
color:#FF0033;
text-align:center;
text-decoration:underline;
word-spacing:0.5em;
background-color:#FBEFFC;
border:2px dotted #FF6699;
margin:20px;
padding:20px
</style>
</head>
<body>
Hello all,
<div class="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
Property Description Values
list-style-type ใชก าหนดลกษณะทใชน าหนาแตละรายการยอย
none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha
disc
o circle
square
1. decimal
decimal-leading-zero
i. lower-roman
I. upper-roman
a. lower-alpha
A. upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
georgian
cjk-ideographic
hiragana
hiragana-iroha
katakana-iroha
list-style-position ใชการก าหนดลกษณะการปดขนบรรทดใหมของขอความ กรณทมความยาวเกน 1 บรรทด * ถาไมก าหนดจะเปนแบบ outside
inside outside
จดใหตรงแนวกบสญลกษณ จดใหตรงแนวกบขอความแถวแรก
list-style-image ใชการก าหนดรปภาพเพอน ามาเปนสญลกษณรายการยอย
url ของรปภาพ
list-style สามารถก าหนด property ใหกบ list ไดในค าสงประกาศเดยว
list-style-type 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 Enjoyday.net - Web builder Tutorial
HTML CSS XHTML JavaScript SQL
EXAMPLE Enjoyday.net - Web builder Tutorial <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 Enjoyday.net - Web builder Tutorial
o HTML CSS XHTML 4. JavaScript
V. SQL
EXAMPLE Enjoyday.net - Web builder Tutorial <ul style="list-style-image:url(images/list.gif)"> <li>HTML</li> <li>CSS</li> <li>XHTML</li> <li>JavaScript</li>
<li>SQL</li> </ul>
OUTPUT Enjoyday.net - Web builder Tutorial
HTML CSS XHTML JavaScript SQL
EXAMPLE ประโยชนของ CSS <ul style="list-style-type:circle; list-style-position:inside"> <li>การใช css ในการจดรปแบบการแสดงผล จะชวยลดการใชภาษา HTML ในการตกแตงเอกสารเวบเพจ ท าให code ภายในเอกสาร HTML เหลอเพยงสวนเนอหา ท าใหเขาใจงายขน การแกไขเอกสารท าไดงายและรวดเรว</li> <li>เมอ code ภายในเอกสาร HTML ลดลง ท าใหขนาดไฟลเลกลง จงดาวนโหลดไดเรว</li> <li>สามารถก าหนดรปแบบการแสดงผลจากค าสง style sheet ชดเดยวกน ใหมผลกบเอกสาร HTML ทงหนา หรอทกหนาได ท าใหเวลาแกไขหรอปรบปรงท าไดงาย ไมตองไลตามแกท HTML Tag ตางๆ ทวทงเอกสาร</li> </ul>
OUTPUT ประโยชนของ CSS
o การใช css ในการจดรปแบบการแสดงผล จะชวยลดการใชภาษา HTML ในการตกแตงเอกสารเวบเพจ ท าให code ภายในเอกสาร HTML เหลอเพยงสวนเนอหา ท าใหเขาใจงายขน การแกไขเอกสารท าไดงายและรวดเรว
o เมอ code ภายในเอกสาร HTML ลดลง ท าใหขนาดไฟลเลกลง จงดาวนโหลดไดเรว o สามารถก าหนดรปแบบการแสดงผลจากค าสง style sheet ชดเดยวกน ใหมผลกบเอกสาร HTML
ทงหนา หรอทกหนาได ท าใหเวลาแกไขหรอปรบปรงท าไดงาย ไมตองไลตามแกท HTML Tag ตางๆ ทวทงเอกสาร
EXAMPLE ประโยชนของ 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
o การใช css ในการจดรปแบบการแสดงผล จะชวยลดการใชภาษา HTML ในการตกแตงเอกสารเวบเพจ ท าให code ภายในเอกสาร HTML เหลอเพยงสวนเนอหา ท าใหเขาใจงายขน การแกไขเอกสารท าไดงายและรวดเรว
o เมอ code ภายในเอกสาร HTML ลดลง ท าใหขนาดไฟลเลกลง จงดาวนโหลดไดเรว o สามารถก าหนดรปแบบการแสดงผลจากค าสง style sheet ชดเดยวกน ใหมผลกบเอกสาร HTML
ทงหนา หรอทกหนาได ท าใหเวลาแกไขหรอปรบปรงท าไดงาย ไมตองไลตามแกท HTML Tag ตางๆ ทวทงเอกสาร
EXAMPLE ก าหนด property ใหกบ list ไดในค าสงประกาศเดยว ประโยชนของ CSS <ul style="list-style:decimal inside"> <li>การใช css ในการจดรปแบบการแสดงผล จะชวยลดการใชภาษา HTML ในการตกแตงเอกสารเวบเพจ ท าให code ภายในเอกสาร HTML เหลอเพยงสวนเนอหา ท าใหเขาใจงายขน การแกไขเอกสารท าไดงายและรวดเรว</li> <li>เมอ code ภายในเอกสาร HTML ลดลง ท าใหขนาดไฟลเลกลง จงดาวนโหลดไดเรว</li> <li>สามารถก าหนดรปแบบการแสดงผลจากค าสง style sheet ชดเดยวกน ใหมผลกบเอกสาร HTML ทงหนา หรอทกหนาได ท าใหเวลาแกไขหรอปรบปรงท าไดงาย ไมตองไลตามแกท HTML Tag ตางๆ ทวทง
เอกสาร</li> </ul>
OUTPUT ประโยชนของ CSS
1. การใช css ในการจดรปแบบการแสดงผล จะชวยลดการใชภาษา HTML ในการตกแตงเอกสารเวบเพจ ท าให code ภายในเอกสาร HTML เหลอเพยงสวนเนอหา ท าใหเขาใจงายขน การแกไขเอกสารท าไดงายและรวดเรว
2. เมอ code ภายในเอกสาร HTML ลดลง ท าใหขนาดไฟลเลกลง จงดาวนโหลดไดเรว 3. สามารถก าหนดรปแบบการแสดงผลจากค าสง style sheet ชดเดยวกน ใหมผลกบเอกสาร HTML
ทงหนา หรอทกหนาได ท าใหเวลาแกไขหรอปรบปรงท าไดงาย ไมตองไลตามแกท HTML Tag ตางๆ ทวทงเอกสาร
Table
ตองใชกบเวบเบราเซอรรนใหมๆ เชน IE6 เปนตนไป *บาง property เมอทดสอบแลวไมเหนผล
Property Description Values
table-layout ใชก าหนดความกวางของตารางและคอลมน
automatic fixed
Default กวางตามทก าหนดเทานน
caption-side ใชก าหนดต าแหนงของชอตาราง
top bottom left right
Default
empty-cells ใชก าหนดวาจะแสดง/ไมแสดง เสนขอบ เมอ cell นนไมมขอความ (empty)
hide show
Default
border-spacing ใชก าหนดระยะระหวางตาราง และขอบ แนวนอน และแนวตง
length length เชน 2px 5px
border-collapse ใชก าหนดลกษณะเสนขอบ separate collapse
Default แยกเปน 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
ตารางแสดงตวเลข
1000000000000000000000000000 10000000
ตารางแสดงตวเลข
1000000000000000000000000000 10000000
สงเกต ตารางทสอง จะ fix ความกวางของชองตารางไว ท าใหแสดงขอความไมพอ นอกจากนมการก าหนด cell วางใหแสดงดวย และใหแสดงเสนขอบรวมเปนเสนเดยว EXAMPLEลองจดรปแบบอนๆ ใหกบตาราง โดยใช CSS บททผานๆ มา ดคะ <html> <head> <style type="text/css"> 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> <td align="right">25,000</td> </tr> <tr> <td>03</td> <td>วระ</td> <td align="right">20,000</td> </tr> </table>
</body> </html>
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> <a href="css_chapter02.html">Chapter2</a> <a href="css_chapter03.html">Chapter3</a> <a href="css_chapter04.html">Chapter4</a> <a href="css_chapter05.html">Chapter5</a> </div> <body> </html>
OUTPUT
Chapter1 Chapter2 Chapter3 Chapter4 Chapter5
EXAMPLE <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: 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">‹ 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 ›</a> <a href="css_chapter25.html">Last »</a> </div> <body> </html>
OUTPUT
Page : « First ‹ Prev 1 2 3 Next ›
Classification
การแสดงผลวตถวาจะแสดงอยางไร ทไหน
Property Description Values
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-group The element will be displayed as a group of one or more
rows (like <tbody>)
table-header-group The element will be displayed as a group of one or more
rows (like <thead>)
table-footer-group The element will be displayed as a group of one or more
rows (like <tfoot>)
table-row The element will be displayed as a table row (like <tr>)
table-column-group The element will be displayed as a group of one or more
columns (like <colgroup>)
table-column The element will be displayed as a column of cells (like
<col>)
table-cell The element will be displayed as a table cell (like <td>
and <th>)
table-caption The element will be displayed as a table caption (like
<caption>
Clear ใชยกเลกการจดวางวตถกบขอความ left
right
both
none
visibility ก าหนดใหมการแสดง หรอซอน วตถ
และขอความทตองการ
visible
hidden
collapse
EXAMPLE float
<html> <head> <style type="text/css"> .img1 { float:right; width:120px; margin:0 0 15px 20px; padding:15px; border:1px solid black; text-align:center; } </style> </head>
<body>
<div class="img1">
<img src="../images/tea.jpg" /><br />Green Tea
</div>
<p> มอาหารหรอเครองดมอะไรทจะดตอสขภาพเทาชาเขยวบาง ชาวจนรเรองประโยชนทางยาของชาเขยว
มาตงแตครงโบราณ โดยใชชาเขยวในการรกษาตงแตโรคปวดศรษะไปจนถงโรคซมเศรา ในหนงสอเรอง
ไขความลบธรรมชาตสสขภาพทดกวา นาดน เทยเลอร กลาววา มการใชชาเขยวเปนยาในประเทศจนเปน
เวลานานอยางนอย 4,000 ปมาแลว </p>
<p>ปจจบน การวจยทางวทยาศาสตรทงในโลกตะวนตกและตะวนออกพบวา การดมชาเขยวมผลอยาง
ชดเจนตอสขภาพ เชน ในป 1994 วารสารของสถาบนมะเรงแหงชาต ตพมพผลการศกษาทแสดงวา การดม
ชาเขยวชวยลดอตราการเสยงของโรคมะเรงหลอดอาหาร ในหมชาวจนทงหญงชาย ไดถง เกอบ 60% เมอไม
นานมาน นกวจยจากมหาวทยาลยปรด สรปวา สารประกอบในชาเขยว ชวยยบยงอตราการเตบโตของเซล
มะเรงได นอกจากนน ยงมการวจยทแสดงวา การดมชาเขยวชวยลดระดบคลอเรสเตอรอลโดยรวมได และยง
ชวยปรบอตรา HDL ใหเปน LDL</p>
</body>
<html>
OUTPUT
Green Tea
มอาหารหรอเครองดมอะไรทจะดตอสขภาพเทาชาเขยวบาง ชาวจนรเรองประโยชนทางยาของชาเขยวมาตงแตครงโบราณ โดยใชชาเขยวในการรกษาตงแตโรคปวดศรษะไปจนถงโรคซมเศรา ในหนงสอเรอง ไขความลบธรรมชาตสสขภาพทดกวา นาดน เทยเลอร กลาววา มการใชชาเขยวเปนยาในประเทศจนเปนเวลานานอยางนอย 4,000 ปมาแลว ปจจบน การวจยทางวทยาศาสตรทงในโลกตะวนตกและตะวนออกพบวา การดมชาเขยวมผลอยางชดเจนตอสขภาพ เชน ในป 1994 วารสารของสถาบนมะเรงแหงชาต ตพมพผลการศกษาทแสดงวา การดม ชาเขยวชวยลดอตราการเสยงของโรคมะเรงหลอดอาหาร ในหมชาวจนทงหญงชาย ไดถง เกอบ 60% เมอไมนานมาน นกวจยจากมหาวทยาลยปรด สรปวา สารประกอบในชาเขยว ชวยยบยงอตราการเตบโตของเซลมะเรงได นอกจากนน ยงมการวจยทแสดงวา การดมชาเขยวชวยลดระดบ
คลอเรสเตอรอลโดยรวมได และยงชวยปรบอตรา HDL ใหเปน LDL
EXAMPLE display:inline ท าให <p> ไมมการตดบรรทดใหม (<p>
ปกตจะตดบรรทดใหม)
<h4>กรณไมมการจดรปแบบ</h4>
<p>มอาหารหรอเครองดมอะไรทจะดตอสขภาพเทาชาเขยวบาง ชาวจนรเรองประโยชนทางยาของชาเขยว
มาตงแตครงโบราณ โดยใชชาเขยวในการรกษาตงแตโรคปวดศรษะไปจนถงโรคซมเศรา </p>
<p>ในหนงสอเรอง ไขความลบธรรมชาตสสขภาพทดกวา นาดน เทยเลอร กลาววา มการใชชาเขยวเปนยา
ในประเทศจนเปนเวลานานอยางนอย 4,000 ปมาแลว </p><br />
<h4>กรณก าหนดให display แบบ inline</h4>
<p style="display:inline">มอาหารหรอเครองดมอะไรทจะดตอสขภาพเทาชาเขยวบาง ชาวจนรเรอง
ประโยชนทางยาของชาเขยวมาตงแตครงโบราณ โดยใชชาเขยวในการรกษาตงแตโรคปวดศรษะไปจนถง
โรคซมเศรา </p>
<p style="display:inline">ในหนงสอเรอง ไขความลบธรรมชาตสสขภาพทดกวา นาดน เทยเลอร กลาววา ม
การใชชาเขยวเปนยาในประเทศจนเปนเวลานานอยางนอย 4,000 ปมาแลว </p>
OUTPUT
กรณไมมการจดรปแบบ
มอาหารหรอเครองดมอะไรทจะดตอสขภาพเทาชาเขยวบาง ชาวจนรเรองประโยชนทางยาของชาเขยวมา
ตงแตครงโบราณ โดยใชชาเขยวในการรกษาตงแตโรคปวดศรษะไปจนถงโรคซมเศรา ในหนงสอเรอง ไข
ความลบธรรมชาตสสขภาพทดกวา นาดน เทยเลอร กลาววา มการใชชาเขยวเปนยาในประเทศจนเปน
เวลานานอยางนอย 4,000 ปมาแลว
กรณก าหนดให display แบบ inline
มอาหารหรอเครองดมอะไรทจะดตอสขภาพเทาชาเขยวบาง ชาวจนรเรองประโยชนทางยาของชาเขยวมาตงแตครงโบราณ โดยใชชาเขยวในการรกษาตงแตโรคปวดศรษะไปจนถงโรคซมเศรา
ในหนงสอเรอง ไขความลบธรรมชาตสสขภาพทดกวา นาดน เทยเลอร กลาววา มการใชชาเขยวเปนยาในประเทศจนเปนเวลานานอยางนอย 4,000 ปมาแลว
EXAMPLE display:block (<span> ปกตจะไมบรรทดใหม)
<h4>กรณไมมการจดรปแบบ</h4> <span>มอาหารหรอเครองดมอะไรทจะดตอสขภาพเทาชาเขยวบาง ชาวจนรเรองประโยชนทางยาของชาเขยวมาตงแตครงโบราณ โดยใชชาเขยวในการรกษาตงแตโรคปวดศรษะไปจนถงโรคซมเศรา </span> <span>ในหนงสอเรอง ไขความลบธรรมชาตสสขภาพทดกวา นาดน เทยเลอร กลาววา มการใชชาเขยวเปนยาในประเทศจนเปนเวลานานอยางนอย 4,000 ปมาแลว </span><br />
<h4>กรณก าหนดให display แบบ block</h4> <span style="display:block">มอาหารหรอเครองดมอะไรทจะดตอสขภาพเทาชาเขยวบาง ชาวจนรเรองประโยชนทางยาของชาเขยวมาตงแตครงโบราณ โดยใชชาเขยวในการรกษาตงแตโรคปวดศรษะไปจนถงโรคซมเศรา </span> <span style="display:block">ในหนงสอเรอง ไขความลบธรรมชาตสสขภาพทดกวา นาดน เทยเลอร กลาววา มการใชชาเขยวเปนยาในประเทศจนเปนเวลานานอยางนอย 4,000 ปมาแลว </span>
OUTPUT
กรณไมมการจดรปแบบ
มอาหารหรอเครองดมอะไรทจะดตอสขภาพเทาชาเขยวบาง ชาวจนรเรองประโยชนทางยาของชาเขยวมา
ตงแตครงโบราณ โดยใชชาเขยวในการรกษาตงแตโรคปวดศรษะไปจนถงโรคซมเศรา ในหนงสอเรอง ไข
ความลบธรรมชาตสสขภาพทดกวา นาดน เทยเลอร กลาววา มการใชชาเขยวเปนยาในประเทศจนเปน
เวลานานอยางนอย 4,000 ปมาแลว
กรณก าหนดให display แบบ block
มอาหารหรอเครองดมอะไรทจะดตอสขภาพเทาชาเขยวบาง ชาวจนรเรองประโยชนทางยาของชาเขยวมา
ตงแตครงโบราณ โดยใชชาเขยวในการรกษาตงแตโรคปวดศรษะไปจนถงโรคซมเศรา ในหนงสอเรอง ไข
ความลบธรรมชาตสสขภาพทดกวา นาดน เทยเลอร กลาววา มการใชชาเขยวเปนยาในประเทศจนเปน
เวลานานอยางนอย 4,000 ปมาแลว
EXAMPLE
<font style="display:list-item">Jack</font>
<font style="display:list-item">Kate</font>
OUTPUT
Jack Kate
EXAMPLEclear:left
<p><h4>กรณไมมการจดรปแบบ</h4>
<img src="../images/tea.jpg">
มอาหารหรอเครองดมอะไรทจะดตอสขภาพเทาชาเขยวบาง ชาวจนรเรองประโยชนทางยาของชาเขยวมา
ตงแตครงโบราณ โดยใชชาเขยวในการรกษาตงแตโรคปวดศรษะไปจนถงโรคซมเศรา ในหนงสอเรอง ไข
ความลบธรรมชาตสสขภาพทดกวา นาดน เทยเลอร กลาววา มการใชชาเขยวเปนยาในประเทศจนเปน
เวลานานอยางนอย 4,000 ปมาแลว</p>
<p><h4>จดใหรปชดซาย</h4>
<img src="../images/tea.jpg" style="float:left">
มอาหารหรอเครองดมอะไรทจะดตอสขภาพเทาชาเขยวบาง ชาวจนรเรองประโยชนทางยาของชาเขยวมา
ตงแตครงโบราณ โดยใชชาเขยวในการรกษาตงแตโรคปวดศรษะไปจนถงโรคซมเศรา ในหนงสอเรอง ไข
ความลบธรรมชาตสสขภาพทดกวา นาดน เทยเลอร กลาววา มการใชชาเขยวเปนยาในประเทศจนเปน
เวลานานอยางนอย 4,000 ปมาแลว
</p>
<p><h4>จดใหรปชดซาย และใหขอความทอนหลงขนตนใหม ใตรป (clear:left)</h4>
<img src="../images/tea.jpg" style="float:left">
มอาหารหรอเครองดมอะไรทจะดตอสขภาพเทาชาเขยวบาง ชาวจนรเรองประโยชนทางยาของชาเขยวมา
ตงแตครงโบราณ โดยใชชาเขยวในการรกษาตงแตโรคปวดศรษะไปจนถงโรคซมเศรา
<p style="clear:left">ในหนงสอเรอง ไขความลบธรรมชาตสสขภาพทดกวา นาดน เทยเลอร กลาววา มการ
ใชชาเขยวเปนยาในประเทศจนเปนเวลานานอยางนอย 4,000 ปมาแลว</p>
</p>
OUTPUT
กรณไมมการจดรปแบบ
มอาหารหรอเครองดมอะไรทจะดตอสขภาพเทาชาเขยวบาง ชาวจนรเรองประโยชน
ทางยาของชาเขยวมาตงแตครงโบราณ โดยใชชาเขยวในการรกษาตงแตโรคปวดศรษะ
ไปจนถงโรคซมเศรา ในหนงสอเรอง ไขความลบธรรมชาตสสขภาพทดกวา นาดน เทย
เลอร กลาววา มการใชชาเขยวเปนยาในประเทศจนเปนเวลานานอยางนอย 4,000 ป
มาแลว
จดใหรปชดซาย
มอาหารหรอเครองดมอะไรทจะดตอสขภาพเทาชาเขยวบาง ชาวจนรเรองประโยชนทางยา
ของชาเขยวมาตงแตครงโบราณ โดยใชชาเขยวในการรกษาตงแตโรคปวดศรษะไปจนถงโรค
ซมเศรา ในหนงสอเรอง ไขความลบธรรมชาตสสขภาพทดกวา นาดน เทยเลอร กลาววา มการ
ใชชาเขยวเปนยาในประเทศจนเปนเวลานานอยางนอย 4,000 ปมาแลว
จดใหรปชดซาย และใหขอความทอนหลงขนตนใหม ใตรป (clear:left)
มอาหารหรอเครองดมอะไรทจะดตอสขภาพเทาชาเขยวบาง ชาวจนรเรองประโยชนทางยา
ของชาเขยวมาตงแตครงโบราณ โดยใชชาเขยวในการรกษาตงแตโรคปวดศรษะไปจนถงโรค
ซมเศรา ในหนงสอเรอง ไขความลบธรรมชาตสสขภาพทดกวา นาดน เทยเลอร กลาววา ม
การใชชาเขยวเปนยาในประเทศจนเปนเวลานานอยางนอย 4,000 ปมาแลว
EXAMPLEclear:right
<p><h4>จดใหรปชดขวา</h4> <img src="../images/tea2.jpg" style="float:right"> มอาหารหรอเครองดมอะไรทจะดตอสขภาพเทาชาเขยวบาง ชาวจนรเรองประโยชนทางยาของชาเขยวมาตงแตครงโบราณ โดยใชชาเขยวในการรกษาตงแตโรคปวดศรษะไปจนถงโรคซมเศรา ในหนงสอเรอง ไขความลบธรรมชาตสสขภาพทดกวา นาดน เทยเลอร กลาววา มการใชชาเขยวเปนยาในประเทศจนเปนเวลานานอยางนอย 4,000 ปมาแลว </p>
<p><h4>จดใหรปชดขวา และใหขอความทอนหลงขนตนใหม ใตรป (clear:right)</h4> <img src="../images/tea2.jpg" style="float:right"> มอาหารหรอเครองดมอะไรทจะดตอสขภาพเทาชาเขยวบาง ชาวจนรเรองประโยชนทางยาของชาเขยวมาตงแตครงโบราณ โดยใชชาเขยวในการรกษาตงแตโรคปวดศรษะไปจนถงโรคซมเศรา <p style="clear:right">ในหนงสอเรอง ไขความลบธรรมชาตสสขภาพทดกวา นาดน เทยเลอร กลาววา มการใชชาเขยวเปนยาในประเทศจนเปนเวลานานอยางนอย 4,000 ปมาแลว</p> </p>
OUTPUT
จดใหรปชดขวา
มอาหารหรอเครองดมอะไรทจะดตอสขภาพเทาชาเขยวบาง ชาวจนรเรองประโยชน
ทางยาของชาเขยวมาตงแตครงโบราณ โดยใชชาเขยวในการรกษาตงแตโรคปวด
ศรษะไปจนถงโรคซมเศรา ในหนงสอเรอง ไขความลบธรรมชาตสสขภาพทดกวา นา
ดน เทยเลอร กลาววา มการใชชาเขยวเปนยาในประเทศจนเปนเวลานานอยางนอย
4,000 ปมาแลว
จดใหรปชดขวา และใหขอความทอนหลงขนตนใหม ใตรป (clear:right)
มอาหารหรอเครองดมอะไรทจะดตอสขภาพเทาชาเขยวบาง ชาวจนรเรองประโยชนทางยาของชาเขยวมา
ตงแตครงโบราณ โดยใชชาเขยวในการรกษาตงแตโรคปวดศรษะไปจนถงโรคซมเศรา ในหนงสอเรอง ไข
ความลบธรรมชาตสสขภาพทดกวา นาดน เทยเลอร กลาววา มการใชชาเขยวเปนยาในประเทศจนเปน
เวลานานอยางนอย 4,000 ปมาแลว
EXAMPLEclear:both
<p><h4>จดใหมรปชดขวาและซาย</h4>
<img src="../images/tea.jpg" style="float:left">
<img src="../images/tea2.jpg" style="float:right">
มอาหารหรอเครองดมอะไรทจะดตอสขภาพเทาชาเขยวบาง ชาวจนรเรองประโยชนทางยาของชาเขยวมา
ตงแตครงโบราณ โดยใชชาเขยวในการรกษาตงแตโรคปวดศรษะไปจนถงโรคซมเศรา ในหนงสอเรอง ไข
ความลบธรรมชาตสสขภาพทดกวา นาดน เทยเลอร กลาววา มการใชชาเขยวเปนยาในประเทศจนเปน
เวลานานอยางนอย 4,000 ปมาแลว
</p>
<p><h4>จดใหมรปชดขวาและซาย และใหขอความทอนหลงขนตนใหม ใตรป</h4> (clear:left ไดแครปดานซาย)<br /> <img src="../images/tea.jpg" style="float:left"> <img src="../images/tea2.jpg" style="float:right"> มอาหารหรอเครองดมอะไรทจะดตอสขภาพเทาชาเขยวบาง ชาวจนรเรองประโยชนทางยาของชาเขยวมาตงแตครงโบราณ โดยใชชาเขยวในการรกษาตงแตโรคปวดศรษะไปจนถงโรคซมเศรา
<p style="clear:left">ในหนงสอเรอง ไขความลบธรรมชาตสสขภาพทดกวา นาดน เทยเลอร กลาววา มการใชชาเขยวเปนยาในประเทศจนเปนเวลานานอยางนอย 4,000 ปมาแลว</p> </p> <p><h4>จดใหมรปชดขวาและซาย และใหขอความทอนหลงขนตนใหม ใตรปทงสองดาน (clear:both)</h4> (ตอง clear:right เพราะรปดานขวาสงกวารปดานซาย หรอ clear:boht)<br /><br /> <img src="../images/tea.jpg" style="float:left"> <img src="../images/tea2.jpg" style="float:right"> มอาหารหรอเครองดมอะไรทจะดตอสขภาพเทาชาเขยวบาง ชาวจนรเรองประโยชนทางยาของชาเขยวมาตงแตครงโบราณ โดยใชชาเขยวในการรกษาตงแตโรคปวดศรษะไปจนถงโรคซมเศรา <p style="clear:both">ในหนงสอเรอง ไขความลบธรรมชาตสสขภาพทดกวา นาดน เทยเลอร กลาววา มการใชชาเขยวเปนยาในประเทศจนเปนเวลานานอยางนอย 4,000 ปมาแลว</p> </p>
OUTPUT
จดใหมรปชดขวาและซาย
มอาหารหรอเครองดมอะไรทจะดตอสขภาพเทาชาเขยวบาง
ชาวจนรเรองประโยชนทางยาของชาเขยวมาตงแตครงโบราณ
โดยใชชาเขยวในการรกษาตงแตโรคปวดศรษะไปจนถงโรค
ซมเศรา ในหนงสอเรอง ไขความลบธรรมชาตสสขภาพท
ดกวา นาดน เทยเลอร กลาววา มการใชชาเขยวเปนยาใน
ประเทศจนเปนเวลานานอยางนอย 4,000 ปมาแลว
จดใหมรปชดขวาและซาย และใหขอความทอนหลงขนตนใหม ใตรป
(clear:left ไดแครปดานซาย)
มอาหารหรอเครองดมอะไรทจะดตอสขภาพเทาชาเขยวบาง ชาวจนร
เรองประโยชนทางยาของชาเขยวมาตงแตครงโบราณ โดยใชชาเขยวใน
การรกษาตงแตโรคปวดศรษะไปจนถงโรคซมเศรา ในหนงสอเรอง ไข
ความลบธรรมชาตสสขภาพทดกวา นาดน เทยเลอร กลาววา มการใช
ชาเขยวเปนยาในประเทศจนเปนเวลานานอยางนอย 4,000 ปมาแลว
จดใหมรปชดขวาและซาย และใหขอความทอนหลงขนตนใหม ใตรปทงสองดาน
(clear:both)(ตอง clear:right เพราะรปดานขวาสงกวารปดานซาย หรอ clear:boht)
มอาหารหรอเครองดมอะไรทจะ
ดตอสขภาพเทาชาเขยวบาง ชาวจนรเรองประโยชนทางยของชาเขยวมาตงแตครงโบราณ โดย
ใชชาเขยวในการรกษาตงแตโรคปวดศรษะไปจนถงโรคซมเศรา
ในหนงสอเรอง ไขความลบธรรมชาตสสขภาพทดกวา นาดน เทยเลอร กลาววา มการใชชาเขยวเปนยาในประเทศจนเปนเวลานานอยางนอย 4,000 ปมาแลว
EXAMPLEvisibility
<h2 style="visibility:visible">Enjoyday.net</h2>
<h2 style="visibility:hidden">Enjoyday.net</h2>
OUTPUT สงเกต enjoyday.net บรรทดท 2 จะมองไมเหน
Enjoyday.net
Positioning
การจดวางต าแหนงวตถ
Property Description Values
top ใชก าหนดระยะของวตถ วาใหอยเหนอ หรอ ลาง ขอบดานบน
auto % length
bottom ใชก าหนดระยะของวตถ วาใหอยเหนอ หรอ ลาง ขอบดานลาง
auto % length
left ใชก าหนดระยะของวตถ วาใหอยขวา หรอ ซาย ของขอบดานซาย
auto % length
right ใชก าหนดระยะของวตถ วาใหอยขวา หรอ ซาย ของขอบดานซาย
auto % length
position ใชก าหนดรปแบบการจดวางวตถในลกษณะตางๆ ทง relative absolute และ fixed ก าหนดต าแหนงดวยการใช property left, top, right, และ bottom
static relative absolute fixed
Default
value Description
static การจดวางตามปกตทเปน default
relative การจดวางใหอยเหนอ หรอซอนบนวตถอนๆในเวบเพจ โดยวตถทถกก าหนดขนมากอนจะอยดานลาง และวตถทก าหนดทหลงจะอยดานบน และจะก าหนดต าแหนงโดยนบจากจดทวตถนนๆอย
absolute การจดวางใหอยเหนอ หรอซอนบนวตถอนๆในเวบเพจ โดยวตถทถกก าหนดขนมากอนจะอยดานลาง และวตถทก าหนดทหลงจะอยดานบน และจะก าหนดต าแหนงจากขอบของ container ทบรรจ วตถนนๆ
fixed การจดวางทก าหนดต าแหนงจากขอบของ Window นนๆ * ตองก าหนดต าแหนงทงในแนวตง และแนวนอน * ถงแมเมอเลอน scroll bar วตถจะยงอยในต าแหนงทก าหนด (IE7)
clip ใชก าหนดการตดสวนตางๆของวตถทไมตองการออกไป rect (top, right, bottom, left)
auto shape
Default
overflow ใชก าหนดวาถาขอมลเกนขอบเขตทก าหนดไว จะใหมการจดการอยางไร
visible hidden scroll auto
Default ไมแสดง ม scroll bar เลอนดได จะม scroll bar เลอนดได
vertical-align ใชก าหนดการจดวางแนวตง
value Description
baseline Default. The element is placed on the baseline of the parent element
sub ตวหอย
super ตวยก
top The top of the element is aligned with the top of the tallest element on the line
text-top The top of the element is aligned with the top of the parent element's font
middle The element is placed in the middle of the parent element
bottom The bottom of the element is aligned with the lowest element on the line
text-bottom The bottom of the element is aligned with the bottom of the parent element's font
length
% Aligns the element in a % value of the "line-height" property. Negative values are allowed
z-index ใชก าหนดล าดบของวตถ Default z-index คอ 0 ถาตองการใหอยดานลางกวา ก าหนดเปน -1 ถาตองการใหอยดานบนกวา ก าหนดเปน 1
auto number
Default
EXAMPLEposition:relative นเปนขอความจดวางตามปกต<br /> <font style="position:relative; left:-50px">เลอนไปทางซาย 50px</font><br /> <font style="position:relative; right:50px;">เลอนไปทางซาย 50px</font><br> <font style="position:relative; left:50px;">เลอนไปทางขวา 50px</font><br> <font style="position:relative; right:-50px;">เลอนไปทางขวา 50px</font><br> <font style="position:relative; left:50px; color:blue">เลอนไปทางขวา 50px </font> <font style="position:relative; left:20px; color:red">เลอนไปทางขวา 20px</font> <font style="position:relative; top:-5px; color:green">เลอนไปขนบน 5px</font>
OUTPUT นเปนขอความจดวางตามปกต เลอนไปทางซาย 50px เลอนไปทางซาย 50px เลอนไปทางขวา 50px เลอนไปทางขวา 50px
เลอนไปทางขวา 50px เลอนไปทางขวา 20px เลอนไปขนบน 5px EXAMPLEposition:absolute นเปนขอความจดวางตามปกต<br /> <font style="position:absolute;left:200px; color:blue;background-color:#D5FFFF">จดใหหางจากขอบซาย 200px (ขอความนจดแบบ Absolute)</font> <font style="position:absolute; right:200px;color:red; background-color:#FFE1F0">จดใหหางจากขอบขวา 200px (ขอความนจดแบบ Absolute)</font>
OUTPUT นเปนขอความจดวางตามปกต จดใหหางจากขอบซาย 200px (ขอความนจดแบบ Absolute) จดใหหางจากขอบขวา 200px (ขอความนจดแบบ Absolute) EXAMPLEposition:fixed นเปนขอความจดวางตามปกต<br /> <font style="position:fixed; bottom:20px;left:200px; color:blue; background-color:#D5FFFF">จดใหหางจากขอบซาย 200px (ขอความนจดแบบ Fixed)</font> <font style="position:fixed; bottom:20px; right:200px; color:red; background-color:#FFE1F0">จดใหหางจากขอบขวา 200px (ขอความนจดแบบ Fixed)</font>
OUTPUT นเปนขอความจดวางตามปกต จดใหหางจากขอบซาย 200px (ขอความนจดแบบ Fixed) จดใหหางจากขอบขวา 200px (ขอความนจดแบบ Fixed) EXAMPLEclip <img src="../images/tea.jpg" /> <img src="../images/tea.jpg" style="position:absolute; clip:rect(0px 80px 80px 0px)" />
OUTPUT EXAMPLEใส scrollbar ให <div> ดวย overflow
<div style="width:200px; height:80px; background-color:#C1E0FF;">บทเรยน online<br /> 1. HTML<br />2. CSS<br />
3. XHTML<br /> 4. JavaScript<br /> 5. SQL </div> <br /> <br /> <div style="width:200px; height:80px; background-color:#C1E0FF; overflow:scroll">บทเรยน online<br /> 1. HTML<br /> 2. CSS<br /> 3. XHTML<br /> 4. JavaScript<br /> 5. SQL </div> <br /> <br /> <div style="width:200px; height:180px; background-color:#C1E0FF; overflow:scroll">บทเรยน online<br /> 1. HTML<br /> 2. CSS<br /> 3. XHTML<br /> 4. JavaScript<br /> 5. SQL </div> <br /> <br /> <div style="width:200px; height:80px; background-color:#C1E0FF; overflow:hidden">บทเรยน online<br /> 1. HTML<br /> 2. CSS<br /> 3. XHTML<br /> 4. JavaScript<br />
5. SQL </div>
OUTPUT บทเรยน online 1. HTML 2. CSS 3. XHTML 4. JavaScript 5. SQL
บทเรยน online 1. HTML 2. CSS 3. XHTML 4. JavaScript 5. SQL
บทเรยน online 1. HTML 2. CSS 3. XHTML 4. JavaScript 5. SQL
บทเรยน online 1. HTML 2. CSS 3. XHTML 4. JavaScript 5. SQL
EXAMPLEvertical-align
ดมชาเขยว<img src="../images/tea.jpg" />เพอสขภาพ (Default = baseline) ดมชาเขยว<img src="../images/tea.jpg" style="vertical-align:baseline" />เพอสขภาพ (baseline) ดมชาเขยว<img src="../images/tea.jpg" style="vertical-align:text-top" />เพอสขภาพ (text-top) ดมชาเขยว<img src="../images/tea.jpg" style="vertical-align:text-bottom" />เพอสขภาพ (text-bottom) ดมชาเขยว<img src="../images/tea.jpg" style="vertical-align:top" />เพอสขภาพ (top) ดมชาเขยว<img src="../images/tea.jpg" style="vertical-align:middle" />เพอสขภาพ (middle) ดมชาเขยว<img src="../images/tea.jpg" style="vertical-align:bottom" />เพอสขภาพ (bottom) H<span style="vertical-align:sub">2</span>O 4<span style="vertical-align:super">2</span> = 16
OUTPUT ดมชาเขยวเพอสขภาพ (Default = baseline) ดมชาเขยวเพอสขภาพ (baseline)
ดมชาเขยว เพอสขภาพ (text-top)
ดมชาเขยว เพอสขภาพ (text-bottom)
ดมชาเขยว เพอสขภาพ (top)
ดมชาเขยว เพอสขภาพ (middle)
ดมชาเขยว เพอสขภาพ (bottom) H2O 42 = 16
EXAMPLE
<html> <head> </head> <h2 style="color:#00FFFF">ดมชาเขยวเพอสขภาพ</h2> <img src="../images/tea2.jpg" style="position:absolute;left:0px;top:0px;z-index:-1" /> <body> </body> </html>
OUTPUT
Image
เราสามารถตกแตงภาพดวย border และใช filter ใหภาพดโปรงใส (Transparent)ส าหรบ browser IE จะใช propety filter:alpha(opacity=0-100) สวน Firefox จะใช property opacity:0.0-1.0 ตวเลขยงนอย ยงดโปรงใสEXAMPLE
<html>
<body>
ภาพปกต<br />
<img src="../images/lotus.jpg" /><br />
ภาพโปรงใส 50%<br />
<img src="../images/lotus.jpg" style="filter:alpha(opacity=50); opacity:.50" />
<body>
</html>
OUTPUT
ภาพปกต
ภาพโปรงใส 50%
เพมลกเลนดวย javascript (IE ใช this.filters.alpha.opacity=100 สวน Firefox ใช this.style.opacity=1)
EXAMPLE
<html>
<body>
<img src="../images/lotus.jpg"style="opacity:0.5;filter:alpha(opacity=50)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" />
<body>
</html>
OUTPUTลองเอา mouse เลอนบนภาพขางลางนดคะ
EXAMPLE
<div style="margin:auto">
<div style="width:300px;height:240px;background:url(../images/lotus_big.jpg) repeat;border:1px solid
white;">
<div style="width:280px;height:220px;border:10px solid white;filter:alpha (opacity=50);-moz-
opacity:.50;opacity:.50;-khtml-opacity: 0.5;">
</div>
</div>
</div>
OUTPUT Opacity Border เราสามารถทจะน า style ไปสรางเปน class เพอจะไดเรยกใชงานซ าไดอยาง
งายดาย เชน class ทจดรปใหมกรอบสเทา และจดชดซาย เพอใหเราสามารถทจะใสขอความบรรยายดานขาง
ได
EXAMPLE
<html>
<head>
<style type="text/css">
.imgstyle {
float:left;
border:solid 1px #CCCCCC;
padding:5px;
margin-right:10px;
}
</style>
</head>
<body>
<div style="margin:5px"><img src="../images/jusmine.jpg" class="imgstyle" /><em>มะล</em> เปนไม
ดอกสขาวทมกลนหอม สามารถน ามาใชประโยชนไดหลายอยาง เชน เกบดอกมารอยเปนพวงมาลย ท าเปน
ดอกไมแหง หรอน ามาสกดท าน ามนหอมระเหย
</div>
<div style="clear:both;"></div>
<div style="margin:5px"><img src="../images/rose.jpg" class="imgstyle" /><em>กหลาบ</em> นบวา
เปนไมดอกทมความงามยากทไมดอกอนจะเทยบเทา จนไดรบชอวาเปน "ราชนแหงดอกไม" (Queen of
flower) กหลาบมมานานประมาณ 30 ลานปมาแลว
</div>
<div style="clear:both;"></div>
</body>
<html>
OUTPUT
มะล เปนไมดอกสขาวทมกลนหอม สามารถน ามาใชประโยชนไดหลายอยาง เชน
เกบดอกมารอยเปนพวงมาลย ท าเปนดอกไมแหง หรอน ามาสกดท าน ามนหอม
ระเหย
กหลาบ นบวาเปนไมดอกทมความงามยากทไมดอกอนจะเทยบเทา จนไดรบชอวา
เปน "ราชนแหงดอกไม" (Queen of flower) กหลาบมมานานประมาณ 30 ลานป
มาแลว
Learn more in mandarindesign Blog Trashed by Mandarin
Form
เรองของ CSS ทเกยวกบ Form ม 2 สวนทอยากจะพดถงคะ สวนแรก คอ การตกแตง Form Elements ดวย style sheet และสวนทสอง คอ การท า Form โดยไมใช Table หรอเรยกวา Tableless Form Form Elements เราสามารถตกแตง สวนประกอบของ Form ไดแก inputbox, textarea, 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 sans Serif";
font-size:12px;
color:#0033CC;
background-image: url(../images/mail.gif);
background-repeat:no-repeat;
background-position:left;
border: 1px solid #3366CC;
padding-left:16px;
}
</style>
</head>
<body>
<input type="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>
<input type="text" size="30" class="textbox_image" value="enjoyday.net" />
<br><br>
<input type="text" size="30" class="textbox_imgside" value="[email protected]" />
</body>
</html>
OUTPUT
enjoyday.net
enjoyday.net
enjoyday.net
enjoyday.net
การตกแตง Scroll bar ดวย CSS จะพดถงในบทท 20
EXAMPLE - TEXTAREA
<html> <head> <style type="text/css"> .textarea1 { scrollbar-arrow-color:#000; scrollbar-face-color:#face00; scrollbar-highlight-color:#fff; scrollbar-3dlight-color:#000; scrollbar-track-color:#fff; scrollbar-shadow-color:#face00; scrollbar-darkshadow-color:#000; border:1px solid #000; font-size:12px } .textarea2 {
scrollbar-arrow-color:#000; scrollbar-face-color:#fff; scrollbar-highlight-color:#fff; scrollbar-3dlight-color:#000; scrollbar-track-color:#fff; scrollbar-shadow-color:#fff; scrollbar-darkshadow-color:#000; color:#000; border:1px solid #000000; font-size:12px } .textarea3 { scrollbar-arrow-color:#add8e6; scrollbar-face-color:#fff; scrollbar-highlight-color:#fff; scrollbar-3dlight-color:#add8e6; scrollbar-track-color:#fff; scrollbar-shadow-color:#fff; scrollbar-darkshadow-color:#add8e6; color:#197bff; border:1px solid #add8e6; font-size:12px } .textarea4 { scrollbar-arrow-color:#ffb090; scrollbar-face-color:#fff; scrollbar-highlight-color:#fff; scrollbar-3dlight-color:#ffb090; scrollbar-track-color:#fff; scrollbar-shadow-color:#fff;
scrollbar-darkshadow-color:#ffb090; color:#ff4a19; border:1px solid #ffb090; font-size:12px } </style> </head> <body> <textarea rows="4" cols="20" class="textarea1"> ขอความของคณคะ . . . . </textarea>
<textarea rows="4" cols="20" class="textarea2"> ขอความของคณคะ . . . . </textarea>
<br />
<textarea rows="4" cols="20" class="textarea3"> ขอความของคณคะ . . . . </textarea>
<textarea rows="4" cols="20" class="textarea4"> ขอความของคณคะ . . . . </textarea>
</body> </html>
OUTPUT
ขอความของคณคะ
.
.
.
ขอความของคณคะ
.
.
.
ขอความของคณคะ
.
.
.
ขอความของคณคะ
.
.
.
EXAMPLE - 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 } .textarea_b { width:300px; scrollbar-arrow-color:#000; scrollbar-face-color:#fff; scrollbar-highlight-color:#fff; scrollbar-3dlight-color:#fff; scrollbar-track-color:#fff; scrollbar-shadow-color:#fff; scrollbar-darkshadow-color:#fff; color:#000; border-width:0; font-size:12px } .textarea_c { width:300px; scrollbar-arrow-color:#ff6699; scrollbar-face-color:#fff; scrollbar-highlight-color:#fff; scrollbar-3dlight-color:#fff; scrollbar-track-color:#fff; scrollbar-shadow-color:#fff; scrollbar-darkshadow-color:#fff;
color:#ff6699; border-width:0; font-size:12px } </head> <body> <div style="border:1px solid #000; background:#add8e6; padding:5px; width:310px"> <textarea rows="4" class="textarea_a"> ขอความของคณคะ . . . . </textarea> </div>
<br />
<div style="border:1px solid #000;background:#fff;padding:4px; width:320px"> <div style="border:1px solid #000;margin-bottom:4px"> <div style="border-width:1px;border-style:solid;border-color:#fff #98cee0 #98cee0 #fff;background:#add8e6;color:#000;text-align:center;font-size:12px;padding:4px">หวขอ</div> </div> <textarea rows="5" class="textarea_b"> ขอความของคณคะ . . . . </textarea> </div>
<br />
<div style="border:1px solid #ff6699; width:320px"> <div style="border-width:1px;border-style:solid;border-color:#fff #ffbbbb #ffbbbb #fff;background:#ffcccc;padding:4px"> <div style="border-width:1px;border-style:solid;border-color:#ffbbbb #fff #fff #ffbbbb"> <div style="border:1px solid #ff6699;background:#fff;padding:2px"> <textarea rows="5" class="textarea_c"> ขอความของคณคะ . . . . </textarea> </div> </div> </div> </div>
</body> </html>
OUTPUT
ขอความของคณคะ
.
.
.
หวขอ
ขอความของคณคะ
.
.
.
.
ขอความของคณคะ
.
.
.
.
EXAMPLE - BUTTON
<html> <head> <style type="text/css"> .button_gray { font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#333333; background-color:#F7F7F7; border: 1px solid #000000; padding: 1px 0; } .button_image { font-family:Arial, Helvetica, sans-serif; color:#333333; background: url(images/button_bg.gif) repeat-x; border: 1px solid #000000; padding: 1px 0; } </style>
</head> <body> <input type="button" value="Submit" class="button_gray"> <input type="button" value="Submit" class="button_image"> </body> </html> OUTPUT
รปทใชท าปม
Tableless Form เราสามารถก าหนด Form เปน 2 column โดยไมตองใช Table ได โดยก าหนดความกวางของ column แรกโดยใช tag <label> และ colunm ทสอง จะเปนพวก text box ทวางตอจาก column แรก credit to : http://www.dynamicdrive.com/style/csslibrary/item/css-tableless-form/ ลองน า code ไปปรบปรงเปลยนแปลงตอไดคะ EXAMPLE
<html> <head> <style type="text/css">
.cssform p{ width: 300px; clear: left; margin: 0; padding: 5px 0 8px 0; padding-left: 155px; /*width of left 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/threepxtest.html */
* html .threepxfix{ margin-left: 3px; }
</style> </head>
<body> <form id="myform" class="cssform" action="">
<p> <label for="user">Name</label>
<input type="text" id="user" value="" /> </p>
<p> <label for="emailaddress">Email Address:</label> <input type="text" id="emailaddress" value="" /> </p>
<p> <label for="comments">Feedback:</label> <textarea id="comments" rows="5" cols="25"></textarea> </p>
<p> <label for="comments">Sex:</label> Male: <input type="radio" name="sex" /> Female: <input type="radio" name="sex" /><br /> </p>
<p> <label for="comments">Hobbies:</label> <input type="checkbox" name="hobby" /> Tennis<br /> <input type="checkbox" name="hobby" 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?
Submit reset
อกตวอยาง สวยๆ คะ
Credit to : http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html
EXAMPLE
<html> <head> <style type="text/css">
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:#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>
<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
Media Types
ในการก าหนดการแสดงผลหนาตาเวบเพจ บนสอประเภทตางๆ เราสามารถก าหนด style ใหแตกตางกนได เชน ตอนทเราเหนบนหนาจอ (screen) กบตอนทสงพมพออกกระดาษ (print) ใหแสดงผลไมเหมอนกน แลวประเภทของสอมอะไรบาง ...Media Type
1. all - ใชในอปกรณทกชนด 2. aural - แสดงผลออกทางระบบชวยอานออกเสยง 3. braille - แสดงผลออกทางเครองชวยอานส าหรบคนตาบอด 4. embossed - แสดงผลออกทางเครองพมพส าหรบคนตาบอด 5. handheld - แสดงผลออกทางจอภาพของเครองคอมพวเตอรชนดพกพา (handheld) ซงมขนาดเลก
ไมสามารถแสดงสได (monochrome) และมประสทธภาพในการรบสงขอมลต า 6. print - แสดงผลออกทางเครองพมพ 7. projection - แสดงผลออกทางจอภาพทมความตางส(contrast) และความสวาง(brightness) ต า เชน
จอภาพ LCD, การแสดงผลผานเครอง projector 8. screen - แสดงผลออกทางจอภาพของเครองคอมพวเตอร 9. tty - แสดงผลออกทางเทอรมนลชนดตวอกษรเทานน เชน โปรแกรม Lynx, เครองโทรพมพ 10. tv - แสดงผลออกทางจอภาพของเครองโทรทศน
หากมมากกวา 1 media ใหใช comma คน มาดตวอยางการใชงานกนคะ ใหตอนทเราเหนเวบเพจบนหนาจอ ตวอกษรมขนาด 12px แตตอนทเราสงพมพใหมขนาด 50px และมเสนขดคราตรงกลาง โดยทงตอนทเหนบนหนาจอและเมอสงพมพใหเปนตวหนาทงค เขยน style sheet ก าหนดไดดงน EXAMPLE <html> <head> <style> @media screen { p.special {font-family:Verdana,sans-serif; font-size:12px} } @media print { p.special {font-family:Arial, Helvetica; font-size:50px; text-decoration:line-through} } @media screen,print { p.special {font-weight:bold}
} </style> </head> <body> <p class="special">Enjoyday.net</p> </body> </html>
OUTPUTลองเลอกเมน File > Print Preview ... ดวา Enjoyday.net ดานลางนจะเปลยนไปอยางไร
Enjoyday.netอกตวอยางหนงใชส าหรบตอนสงพมพคะ อาจจะมบางสวนของเวบเพจ เชน banner และโฆษณาตางๆ ทเราไมตองการใหพมพออกมา เพอประหยดหมกพมพ เรากสามารถก าหนดได EXAMPLE
<html> <head> <style type="text/css"> @media print { .noprint {visibility:hidden;} } </style> </head> <body> <p>ขอความตรงนพมพออกมาตามปกต</p> <p class="noprint">ขอความตรงนไมตองพมพออกมา</p> </body> </html>
เราสามารถ copy ค าสง style sheet แลวบนทกเปนไฟล .css จากนนจงเรยกใชจากภายนอกกได (External Style Sheet) file print.css .noprint {visibility:hidden;}
file testnoprint.html <html> <head> <link rel="stylesheet" type="text/css" href="css/print.css" media="print" /> </head> <body> <p>ขอความตรงนพมพออกมาตามปกต</p> <p class="noprint">ขอความตรงนไมตองพมพออกมา</p> </body> </html>
OUTPUTลองเลอกเมน File > Print Preview ... ดวา ขอความขางลางนหายไปหรอไม
ขอความตรงนพมพออกมาตามปกต
ขอความตรงนไมตองพมพออกมา
Scroll bar
การก าหนด style ใหกบ Scroll bar ใชงานไดเฉพาะ IE5.5+ ไมสามารถใชไดกบ Firefox
Property Value
scrollbar-face-color color สแถบทเลอน
scrollbar-highlight-color color สขอบดานบน และดานซาย ดานใน
scrollbar-shadow-color color สขอบดานลาง และดานขวา ดานใน
scrollbar-3dlight-color color สขอบดานบน และดานซาย ดานนอก
scrollbar-darkshadow-color color สขอบดานลาง และดานขวา ดานนอก
scrollbar-arrow-color color สลกศร
scrollbar-track-color color สพนดานลาง
EXAMPLE <html> <head> <style type="text/css"> html { /*ทเลอน*/ scrollbar-face-color: #DAE8F7; /*สขอบดานบน และดานซาย ดานใน*/ scrollbar-highlight-color: #ffffff; /*สขอบดานลาง และดานขวา ดานใน*/ scrollbar-shadow-color: #ffffff; /*สขอบดานบน และดานซาย ดานนอก*/ scrollbar-3dlight-color: #5F9FE0; /*สขอบดานลาง และดานขวา ดานนอก*/ scrollbar-darkshadow-color: #5F9FE0; /*ลกศร*/ scrollbar-arrow-color: #5F9FE0; /*พนดานลาง*/ scrollbar-track-color: #ffffff; } </style> <head>
<body> 1. HTNL<br /> 2. CSS<br /> 3. XHTML<br /> 4. JavaScript<br /> 5. SQL </body> <html>
OUTPUT ดผลท Scroll bar ดานขวาของหนาตาง IE window หนาน จะเปนสน าเงนออน
สวนไหนเปนตรงไหน มาดกนชดๆ อกท ทตวอยางน
EXAMPLE <html> <head> <style type="text/css"> .divbar { width:200px; height:100px; overflow:scroll; /*ทเลอน*/ scrollbar-face-color:green; /*สขอบดานบน และดานซาย ดานใน*/ scrollbar-highlight-color:white; /*สขอบดานลาง และดานขวา ดานใน*/ scrollbar-shadow-color:white; /*สขอบดานบน และดานซาย ดานนอก*/ scrollbar-3dlight-color:red; /*สขอบดานลาง และดานขวา ดานนอก*/ scrollbar-darkshadow-color:black; /*ลกศร*/ scrollbar-arrow-color:yellow; /*พนดานลาง*/
scrollbar-track-color:gray; } </style> <head> <body> <div class="divbar"> 1. HTNL<br /> 2. CSS<br /> 3. XHTML<br /> 4. JavaScript<br /> 5. SQL<br /><br /><br /> </div> </body> <html>
OUTPUT
1. HTNL 2. CSS 3. XHTML 4. JavaScript 5. SQL OUTPUT scrollbar-face-color:#ff9999; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:#FFFFFF; scrollbar-3dlight-color:#ff6666; scrollbar-darkshadow-color:#ff6666; scrollbar-arrow-color:#ffffff; scrollbar-track-color:#ffcccc;
OUTPUT
scrollbar-face-color: #6586B1; scrollbar-highlight-color: #E8EFF2; scrollbar-shadow-color: #E8EFF2; scrollbar-3dlight-color: #6586B1; scrollbar-darkshadow-color: #6586B1; scrollbar-track-color: #6586B1; scrollbar-arrow-color: #E8EFF2;
EXAMPLE <html> <head> <style type="text/css"> .bar3 { width:200px; height:100px; background-color:#FCF1D8; scrollbar-face-color: #FBB917; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #F88017; scrollbar-3dlight-color: #FDD017; scrollbar-darkshadow-color: #F87217; scrollbar-arrow-color: #FFFFFF; scrollbar-track-color: #FDD017; } </style> <head> <body> <textarea class="bar3"> 1. HTNL 2. CSS 3. XHTML 4. JavaScript 5. SQL 1. HTNL
2. CSS 3. XHTML 4. JavaScript 5. SQL </textarea> </body> <html>
OUTPUT 1. HTNL
2. CSS
3. XHTML
4. JavaScript
Mouse cursor
การก าหนด style ใหกบ Mouse cursor หากคณใช browser Firefox ลกษณะของ Cursor ทเหนจะไมเหมอนกบของ IE (ลองเอาเมาสเลอนทคา value ตางๆ ดคะ)
Property Value Cursor IE FF
Cursor Default
4+ 2+
Crosshair
4+ 2+
Hand
4+
Pointer
4+ 2+
Move
4+ 2+
Text
4+ 2+
Wait
4+ 2+
help
4+ 2+
n-resize
4+ 2+
ne-resize
4+ 2+
e-resize
4+ 2+
se-resize
4+ 2+
s-resize
4+ 2+
sw-resize
4+ 2+
w-resize
4+ 2+
nw-resize
4+ 2+
progress
6+ 2+
not-allowed
6+ 2+
no-drop
6+ 2+
vertical-text
6+ 2+
all-scroll
6+ 2+
col-resize
6+ 2+
row-resize
6+ 2+
url(yourcursor.cur)
6+ 2+
EXAMPLE
<a href="" style="cursor:help">Help</a><br />
<a href="" style="cursor:url(images/cur002.cur)">My kitty cursor (ส าหรบ IE) </a><br />
<a href="" style="cursor:url('images/cur002.cur'),auto">My kitty cursor (ส าหรบ Firefox, IE กยงใชได)
</a>
OUTPUTลองเอาเมาสเลอนทขอความดานลางดคะ
Help
My kitty cursor (ส าหรบ IE)
My kitty cursor (ส าหรบ Firefox, IE กยงใชได)
Layout
ในหนาเวบเพจหนงประกอบไปดวยสวนหวเวบ (Page Header), สวนเนอหา และการเชอมโยง (Page Body), และสวนทาย (Page Footer) การจดสรรพนทของหนาเวบเพจเพอแสดงสวนประกอบเหลาน ท าไดหลายรปแบบ เชน แบงแบบอสระ แบงแบบ 2 คอลมน และ 3 คอลมน ตามทไดพดถงในเรองการออกแบบเวบไซต (ถาจ าไมไดคลกทนเพออาน)
ในการลงมอเขยนเวบเพจจรง การจดรปหนาเวบ (Layout) สามารถใช Table หรอ ใช Div ในการจดวางสวนประกอบของหนาเวบแตการใช <table> ในการวาง Layout หนาเวบเพจ ออกจะผดวตถประสงคในการใชงานของ <table> อยบาง เนองจากทจรง <table> นนใชในการแสดงขอมลในรปตาราง ปจจบนเวบไซตตางๆ เปลยนจากการใช Table จดวาง Layout ใหหนาเวบเพจ มาเปนแบบ Tableless โดยใช <div> และใช CSS ในการจดต าแหนง ขนาด และส ใหกบ tag <div> แทน เพราะมขอดกวาการใช Table การใช Table จะตองรอใหโหลดขอมลภายใน Table ทงหมดกอน แลวจงแสดงผลขอมลทงหมดออกมาในคราวเดยว ท าใหตองรอนาน ไมเหมอนกบการใช Div ทเมอโหลดเสรจสวนไหนกอน กแสดงผลสวนนนออกมาเลย การใช Div ยง ท าใหสามารถเปลยนแปลง CSS ไดงายกวา และไมเยนเยอเหมอน Table นอกจากนยงเพมความสามารถในการเขาถงขอมลใหกบคนพการทางสายตา ซงจะอาศยโปรแกรม Screen Readers อานเนอหาในเวบใหฟง การใช Table ซอน Table อาจท าให Screen Readers อานขอความผดพลาดได แตหากใช CSS เปนตวก าหนดรปแบบ และ ก าหนดเนอหาตวหนงสอใน HTML เมอถอดตว CSS ออกจาก HTML เอกสารกจะแสดงผลไมตางกบ Microsoft Word ทอานงายขน และถกตองยงขน
EXAMPLEการจด Layout Page ดวย Table แบบแบงเปน 2 คอลมน
<table style="width:100%">
<tr>
<td colspan="2" style="background-color:#09f; color:#fff">
<h1>Web builder Tutorials</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#93C9FF; width:20%;text-align:top; ">
<b>Main Menu</b><br />
HTML<br />
CSS<br />
XHTML<br />
JavaScript
</td>
<td style="height:200px; text-align:top;">
แนะน าการสรางเวบไซต ตงแตพนฐาน สอนเขยนเวบเพจดวย HTML, จดตกแตงรปแบบการแสดงผลดวย
CSS และกาวสการสรางเวบไซตแบบมาตรฐานดวย XHTML สดทายเพมลกเลนใหเวบไซตของเราดวย
JavaScript
</td>
</tr>
<tr>
<td colspan="2" style="background-color:#09f; text-align:center; color:#fff">
Copyright © 2009 enjoyday.net
</td>
</tr>
</table>
OUTPUT
Web builder Tutorials
Main Menu
HTML
CSS
XHTML
JavaScript
แนะน าการสรางเวบไซต ตงแตพนฐาน สอนเขยนเวบเพจดวย HTML, จดตกแตง
รปแบบการแสดงผลดวย CSS และกาวสการสรางเวบไซตแบบมาตรฐานดวย
XHTML สดทายเพมลกเลนใหเวบไซตของเราดวย JavaScript
Copyright © 2009 enjoyday.net
EXAMPLEการจด Layout Page ดวย Table แบบแบงเปน 3 คอลมน
<table style="width:100%">
<tr>
<td colspan="3" style="background-color:#09f; color:#fff">
<h1>Web builder Tutorials</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#93C9FF; width:20%;text-align:top; ">
<b>Main Menu</b><br />
HTML<br />
CSS<br />
XHTML<br />
JavaScript
</td>
<td style="height:200px; text-align:top;">แนะน าการสรางเวบไซต ตงแตพนฐาน สอนเขยนเวบเพจดวย
HTML, จดตกแตงรปแบบการแสดงผลดวย CSS และกาวสการสรางเวบไซตแบบมาตรฐานดวย XHTML
สดทายเพมลกเลนใหเวบไซตของเราดวย JavaScript
</td>
<td style="background-color:#ffc; width:20%;text-align:top; ">
<b>Advertisment</b>
</td>
</tr>
<tr>
<td colspan="3" style="background-color:#09f; text-align:center; color:#fff">
Copyright © 2009 enjoyday.net
</td>
</tr>
</table>
OUTPUT
Web builder Tutorials
Main Menu
HTML
CSS
XHTML
JavaScript
แนะน าการสรางเวบไซต ตงแตพนฐาน สอนเขยนเวบเพจดวย
HTML, จดตกแตงรปแบบการแสดงผลดวย CSS และกาวสการ
สรางเวบไซตแบบมาตรฐานดวย XHTML สดทายเพมลกเลนให
เวบไซตของเราดวย JavaScript
Advertisment
Copyright © 2009 enjoyday.net
การจด Layout ดวย CSS (Div)
แบงเปน 4 แบบ คอ
1. Fixed Layout จะก าหนดขนาดความกวาง และต าแหนงของสวนตางๆ เปน pixel ท าใหก าหนดขนาด และต าแหนงของสวนตางๆ ไดตามตองการ ไมผดเพยนไปตามขนาดหนาจอ และเมอยอขยายหนาตางเวบเบราเซอร (IE, Firefox) แลว ต าแหนงของสวนตางๆในหนาเวบจะยงคงเดม ถาเรายอขนาดเบราเซอรลงจะเกดเปน scrollbar เพอเลอนดเนอหาทมองไมเหน แตมขอเสยคอไมสามารถใชพนทหนาจอไดอยางเตมท เนองจากผใชแตละคนมการก าหนดความละเอยดของหนาจอแตกตางกนไป เชน 800x600, 1024x780 (มผใชมากทสด), 1280x800, 1280x960, 1280x1024 pixelเวบสวนใหญจะออกแบบเพอรองรบความละเอยดหนาจอท
800x600 เปนหลก โดยก าหนดความกวางของเนอหาอยท 780 pixel และจะจดวางเนอหาอยกงกลางหนาจอ ท าให ผใชงานทความละเอยดหนาจอ 800x600 จะเหนหนาเวบเพจเตมพอด สวนผทใชความละเอยดหนาจอ 1024x780 จะเหนเนอหาอยกงกลางหนาจอ พนทดานขางทเหลอจะเปนพนหลงทเปนสหรอรปภาพแตถาเราออกแบบใหผทใชความละเอยดหนาจอ 1024x780 มองเหนหนาเวบเตมพอด เมอผทใชความละเอยดหนาจอ 800x600 ดหนาเวบ หนาเวบจะเกนหนาจอ เกดเปน scrollbar แนวนอน ตองเลอนไปทางขวาจงจะมองเนอหาทงหมดได แตปจจบน (2009) สวนใหญมากกวา 60% แลวผใชจะใชความละเอยดหนาจอท 1024x780
2. Liquid Layout จะก าหนดขนาดความกวางของสวนตางๆ เปนเปอรเซนต เมอเรายอหรอขยายขนาดของเวบเบราเซอร ขนาดของสวนตางๆ จะยอขยายตามขอด คอ ท าใหไดใชพนทในหนาจอไดอยางมประสทธภาพ และท าใหแสดงผลบนอปกรณอนๆ เชน มอถอ ไดดขอเสย คอ การจดวางองคประกอบตางๆ นนท าไดคอนขางยาก เพราะขนาดไมแนนอน
3. Elastic Layout จะก าหนดขนาดของสวนตาง ๆ เปน em ท าใหสวนตางๆ ยอหรอขยาย ตามการก าหนดคา Text size ของเบราเซอรขอด คอ เมอเพมหรอลดขนาดของตวอกษรแลว ยงสามารถคงรปแบบการจดวางสวนตางๆ ไวไดอยางดขอเสย คอ การจดท ายงยาก
4. Hybrid Layout เปนการใชแบบตางๆ มาผสมกน เชน Sidebar ดานขาง ทง 2 ดานเปน Elastic Layout สวนเนอหาเปน Liquid Layout เปนตน
เมอเขาใจเรองการจดวาง Layout แบบตางๆ แลว ทนมาดการเขยน code กนตอคะ วธการไมยากแคเพยงใชโปรแกรม Dreamweaver เทานน เวลาทเรา New เอกสารใหมขนมา จะมใหเราเลอกวาอยากจะได Layout แบบไหน จะแบงกคอลมน ตองการสวน Header และ Footer หรอไม และเลอกไดวาจะใหสวน style sheet ฝงอยในหนาเอกสารนนเลย (Add to Head) หรอวาแยกเปนอกไฟลตางหาก (Create New File) หรอจะใหใส style sheet รวมไปในไฟล style sheet ทเรามอยแลว (Link to Existing File) กไดคะ
EXAMPLEFixed Layout thrColFixHdr.css
body { font: 100% Verdana, Arial, Helvetica, sans-serif; background: #666666; margin: 0; padding: 0; text-align: center; color: #000000; } /* สวน Page Header */ .thrColFixHdr #header { background: #DDDDDD; padding: 0 10px 0 20px; } /* สวน Page Body ทบรรจเนอหา */ .thrColFixHdr #container { width: 780px;
background: #FFFFFF; margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */ border: 1px solid #000000; text-align: left; /* this overrides the text-align: center on the body element. */ } /* สวน คอลมนดานซาย */ .thrColFixHdr #sidebar1 { float: left; width: 150px; background: #EBEBEB; padding: 15px 10px 15px 20px; } /* สวน คอลมนดานขวา */ .thrColFixHdr #sidebar2 { float: right; width: 160px; background: #EBEBEB; padding: 15px 10px 15px 20px; } /* สวนเนอหา อยระหวาง sidebar */ .thrColFixHdr #mainContent { margin: 0 200px; padding: 0 10px; } /* สวน Page Footer */ .thrColFixHdr #footer { padding: 0 10px 0 20px; background:#DDDDDD;
} .clearfloat { clear:both; }
fixedlayout.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="thrColFixHdr.css" rel="stylesheet" type="text/css"> </head>
<body class="thrColFixHdr">
<div id="container">
<div id="header"> <h1>Header</h1> <!-- end #header --></div>
<div id="sidebar1"> <h3>Sidebar1 Content</h3> <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content. </p> <!-- end #sidebar1 --></div>
<div id="sidebar2"> <h3>Sidebar2 Content</h3>
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. </p> <!-- end #sidebar2 --></div>
<div id="mainContent"> <h1> การจด Layout </h1> <p>ในหนาเวบเพจหนงประกอบไปดวยสวนหวเวบ (Page Header), สวนเนอหา และการเชอมโยง (Page Body), และสวนทาย (Page Footer) จดสรรพนทของหนาเวบเพจเพอแสดงสวนประกอบเหลาน ท าไดหลายรปแบบ เชน แบงแบบอสระ แบงแบบ 2 คอลมน และ 3 คอลมน </p> <p> ในการลงมอเขยนเวบเพจ ปจจบนนยมใช Div ในการจด Layout ม 3 รปแบบดงน</p>
<h2>1. Fixed Layout </h2> <p>จะก าหนดขนาดความกวาง และต าแหนงของสวนตางๆ เปน pixel ท าใหก าหนดขนาด และต าแหนงของสวนตางๆ ไดตามตองการ ไมผดเพยนไปตามขนาดหนาจอ และเมอยอขยายหนาตางเวบเบราเซอร (IE, Firefox) แลว ต าแหนงของสวนตางๆในหนาเวบจะยงคงเดม </p>
<h2>2. Liquid Layout</h2> <p>จะก าหนดขนาดความกวางของสวนตางๆ เปนเปอรเซนต เมอเรายอหรอขยายขนาดของเวบเบราเซอร ขนาดของสวนตางๆ จะยอขยายตาม</p>
<h2>3. Elastic Layout</h2> <p>จะก าหนดขนาดของสวนตาง ๆ เปน em ท าใหสวนตางๆ ยอหรอขยาย ตามการก าหนดคา Text size ของเบราเซอร เมอเพมหรอลดขนาดของตวอกษรแลว ยงสามารถคงรปแบบการจดวางสวนตางๆ ไวไดอยางด</p>
<!-- end #mainContent --></div>
<br class="clearfloat" />
<div id="footer"> <p>Footer<br/><br /></p> <!-- end #footer --></div>
<!-- end #container --></div>
</body> </html>
แบบ Fixed Layout น สงเกตไดวา เวลายอขยายหนาตางเบราเซอรจะไมมผลตอการจดวางสวนประกอบตางๆ แตจะเกดเปน scroll bar แทน สวนการจด Layout แบบอนๆ ลองดจากไฟลเหลาน หรอลองเลนดในโปรแกรม Dreamweaver ได
Pseudo-classes
เปน selector กลมทนาสนใจทจดรปแบบการแสดงผลโดยขนกบสถานะ หรอเงอนไข เชน link เมอถกคลกจะเปลยนส เปนตน
selector:pseudo-class {property: value} selector.css-class:pseudo-class {property: value}
Pseudo-class Purpose
:link ก าหนด style ใหกบ link ปกตทยงไมเคยถก click
:visited ก าหนด style ใหกบ link ทเคยถกคลกแลว
:hover ก าหนด style ใหกบ link เมอเลอนเมาสไปอยเหนอ link
:active ก าหนด style ใหกบ link ขณะถกคลก
:focus ก าหนด style ใหกบ element ขณะถก focus
:first-child ก าหนด style ใหกบ element ทเปน first child ของ element อนๆ
:lang Allows the author to specify a language to use in a specified element
Anchor Pseudo-classes link ทมสถานะ active, visited, unvisited, หรอเมอน าเมาสวางบน link เราสามารถก าหนดรปแบบใหแตกตางกนได EXAMPLE a:link {color: #FF0000} /* unvisited link สแดง*/ a:visited {color: #00FF00} /* visited link สเขยว*/ a:hover {color: #FF00FF} /* mouse over link สชมพ */ a:active {color: #0000FF} /* selected link สน าเงน*/ <a href="css_chapter24.html">Chapter24</a> <a href="css_chapter25.html">Chapter25</a>
OUTPUT Chapter24 Chapter25 หรอ จะเขยน Pseudo-classes กบ CSS Classes กได ถาตองการระบใหเฉพาะบาง link เทานนทแสดงผลตางจะ link อน เขยนไดดงน
a.special:hover {color: #FF0000; background-color:#CCFF99} /* mouse over link สแดง พนเขยว */
<a class="special" href="css_chapter22.html">Chapter22</a> <a class="special" href="css_chapter23.html">Chapter23</a> <a href="css_chapter24.html">Chapter24</a> <a href="css_chapter25.html">Chapter25</a>
OUTPUT Chapter22 Chapter23 Chapter24 Chapter25 CSS2 - The :first-child Pseudo-class จะจดรปแบบการแสดงผลใหกบ element ทพบอนแรกเทานน ส าหรบ web browser IE จะตองประกาศ <!DOCTYPE> ดวย
EXAMPLE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> p:first-child { color:blue } </style> </head>
<body> <p> วนนอากาศแจมใส </p> <p> วนนอากาศแจมใส </p>
<p><b>Note:</b> For :first-child to work in IE a DOCTYPE must be declared.</p> </body>
</html>
OUTPUT เฉพาะขอความใน <p> อนแรกเทานนทเปนสน าเงน
วนนอากาศแจมใส
วนนอากาศแจมใส< br /> Match the first <i> element in all <p> elements
ตวอยางนซบซอนขน โดยจดรปแบบการแสดงผลให selector <i> ทพบอนแรก ใน <p> elements ทกๆ อน
EXAMPLE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> p > i:first-child { color:blue } </style> </head>
<body> <p>วนนอากาศ <i>แจมใส</i> วนนอากาศ <i>แจมใส</i></p> <p>วนนอากาศ <i>แจมใส</i> วนนอากาศ <i>แจมใส</i></p>
<p><b>Note:</b> For :first-child to work in IE a DOCTYPE must be declared.</p> </body>
</html>
OUTPUT <i>แจมใส</i> ทพบตวแรกใน <p> ทกอน จะเปนสน าเงน
วนนอากาศแจมใส วนนอากาศแจมใส
วนนอากาศแจมใส วนนอากาศแจมใส
Match all <i> elements in all first child <p> elements ตวอยางนสลบกบขางบน โดยจดรปแบบการแสดงผลให selector <i> ทกอน ทพบใน <p> elements อนแรก
EXAMPLE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> p:first-child i { color:blue } </style> </head>
<body> <p>วนนอากาศ <i>แจมใส</i> วนนอากาศ <i>แจมใส</i></p> <p>วนนอากาศ <i>แจมใส</i> วนนอากาศ <i>แจมใส</i></p>
<p><b>Note:</b> For :first-child to work in IE a DOCTYPE must be declared.</p> </body>
</html>
OUTPUT <i>แจมใส</i> ทกอน ทพบใน <p> อนแรก จะเปนสน าเงน
วนนอากาศแจมใส วนนอากาศแจมใส
วนนอากาศแจมใส วนนอากาศแจมใสCSS2 - The :lang Pseudo-class
เราสามารถก าหนด special rules ส าหรบภาษาตางๆ ได แต Pseudo-class *ใชไมไดกบ web browser IE
EXAMPLE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>
<head> <style type="text/css"> q:lang(no) { quotes: "~" "~" } </style> </head> <body> <p>Some text <q lang="no">A quote in a paragraph</q>Some text.</p> </body> </html>
OUTPUT Some text ~A quote in a paragraph~ Some text.
Pseudo-element
เปน selector กลมทนาสนใจทจดรปแบบการแสดงผลโดยขนกบสถานะ หรอเงอนไข เชน เฉพาะอกษรตว
แรกใน <p> เทานนทเปนตวอกษรสแดงตวใหญ เปนตน
selector:pseudo-element {property: value}
selector.class:pseudo-element {property: value}
Pseudo-element Purpose
:first-letter ก าหนด style ใหตวอกษรตวแรกของขอความ
:first-line ก าหนด style ใหกบขอความบรรทดแรก
:before Inserts some content before the content of an element
:after Inserts some content after the content of an element
The :first-letter Pseudo-element
การก าหนดรปแบบใหกบตวอกษรตวแรกของ element
EXAMPLE
<html>
<head>
<style type="text/css">
p:first-letter {color:#ff0000;font-size:xx-large}
</style>
</head>
<body>
<p>Enjoyday.net</p>
</body>
</html>
OUTPUT
Enjoyday.net หรอ จะเขยน Pseudo-element กบ CSS Classes กได ถาตองการระบใหเฉพาะบาง paragraph เทานนทแสดงผล เขยนไดดงน
p.article:first-letter {color:#ff0000}
<p class="article">Enjoyday.net</p>
<p>Enjoyday.net</p>
OUTPUT
Enjoyday.net
Enjoyday.netThe :first-line Pseudo-element
การก าหนดรปแบบใหกบตวอกษรบรรทดแรกของ element
EXAMPLE
<html>
<head>
<style type="text/css">
p:first-line {color:#0000ff}</style>
</head>
<body>
<p>Heath<br>รบประทานอาหารทมประโยชน หมนออกก าลงกาย และพกผอนใหเพยงพอ</p>
</body>
</html>
OUTPUT
Health รบประทานอาหารทมประโยชน หมนออกก าลงกาย และพกผอนใหเพยงพอ
Multiple Pseudo-elements
เราสามารถน าทง 2 แบบมาเขยนผสมกนได
EXAMPLE
<html>
<head>
<style type="text/css">
p:first-letter {color:#ff0000;font-size:xx-large}
p:first-line {color:#0000ff}</style>
</head>
<body>
<p>Heath<br>รบประทานอาหารทมประโยชน หมนออกก าลงกาย และพกผอนใหเพยงพอ</p>
</body>
</html>
OUTPUT
Health รบประทานอาหารทมประโยชน หมนออกก าลงกาย และพกผอนใหเพยงพอ
CSS2 - The :before Pseudo-element
สามารถก าหนดเพม content บางอยาง กอนแสดง content ของ element นนๆ *ใชไมไดกบ web browser IE
EXAMPLE
<html>
<head>
<style type="text/css">
h1:before
{
content: url(../images/star_icons.gif)
}
</style>
</head>
<body>
<h1>This is a header</h1>
</body>
</html>
OUTPUT
This is a header
CSS2 - The :after Pseudo-element
สามารถก าหนดเพม content บางอยาง หลงจากแสดง content ของ element นนๆ *ใชไมไดกบ web browser IE
EXAMPLE
<html>
<head>
<style type="text/css">
h1:after
{
content: url(../images/star_icons.gif)
}
</style>
</head>