css table design 13 - pongnapa.files.wordpress.com · ในไฟล์ html...

รายงาน

เรอง CSS Table Design

จดท าโดย

นาวสาว ผองนภา มณธร

เลขท 13

ชนมธยมศกษาปท 4

เสนอ

อ. ฐตพร ไหวด

โรงเรยนทองสวสดวทยาคาร

ส านกงานเขตพนทประศกษา เขต 2

http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-2609983008235166&output=html&h=90&slotname=2772861129&w=160&lmt=1290862046&flash=10.0.12.36&url=http%3A%2F%2Fwww.enjoyday.net%2Fwebtutorial%2Fcss%2Findex.html&dt=1296726321993&shv=r20101117&jsv=r20110120&saldr=1&correlator=1296726322053&frm=0&adk=2508041336&ga_vid=1906521392.1295417932&ga_sid=1296726323&ga_hid=1140677229&ga_fc=1&u_tz=420&u_his=2&u_java=1&u_h=768&u_w=1366&u_ah=728&u_aw=1366&u_cd=32&u_nplug=0&u_nmime=0&biw=1362&bih=560&eid=30143207&fu=0&ifi=1&dtd=1040&xpc=36Dh2j840U&p=http%3A//www.enjoyday.net&rl_rc=true&adsense_enabled=true&ad_type=text_image&oe=utf8&height=90&width=160&format=fp_al_lp&f=arial&kw_type=radlink&prev_fmts=160x90_0ads_al&rt=ChBNSnk4AA8jJwocJoHSSX-REhBDU1MgVGFibGUgRGVzaWduGgjshEEa7S-1CygBUhMI4e3PgdrrpgIVRgkcCh0gNQcL&hl=th&kw0=%E0%B8%AA%E0%B8%AD%E0%B8%99&kw1=CSS+Table+Design&kw2=CSS&kw3=CSS+Font+HTML&okw=CSS+Table+Design

ค าน า

รายงานเลมนจดท าขนเพอเปนสอการเรยนการสอนใหแกนองๆเพอพๆทกคน

มเนอหาในเรองนเกยวกบการสอนวธใช CSS Table Design มเนอหาบอกเลา

ถงวธการใชงานหรอการเตยมตวกอนเรมเรยน CSS วาจะตองมพนฐานในการใช

HTML มากอนตองขอขอบพระคณอ.ทปรกษา อ.ฐตพร ไหวด เปนอยางสง

ทใหค าแนะน าและค าตชมมาอยางด สดทายนรายงานเลมนหวงวาคงจะเปนประโยชน

กบเพอนๆ พๆ นองๆ ไมมากกนอยหากผดพลาดประการใดตองขออภยมา ณ ทนดวย

จดท าโดย

นางสาว ผองนภา มณธร เลขท13 ม.4

http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-2609983008235166&output=html&h=90&slotname=2772861129&w=160&lmt=1290862046&flash=10.0.12.36&url=http%3A%2F%2Fwww.enjoyday.net%2Fwebtutorial%2Fcss%2Findex.html&dt=1296726321993&shv=r20101117&jsv=r20110120&saldr=1&correlator=1296726322053&frm=0&adk=2508041336&ga_vid=1906521392.1295417932&ga_sid=1296726323&ga_hid=1140677229&ga_fc=1&u_tz=420&u_his=2&u_java=1&u_h=768&u_w=1366&u_ah=728&u_aw=1366&u_cd=32&u_nplug=0&u_nmime=0&biw=1362&bih=560&eid=30143207&fu=0&ifi=1&dtd=1040&xpc=36Dh2j840U&p=http%3A//www.enjoyday.net&rl_rc=true&adsense_enabled=true&ad_type=text_image&oe=utf8&height=90&width=160&format=fp_al_lp&f=arial&kw_type=radlink&prev_fmts=160x90_0ads_al&rt=ChBNSnk4AA8jJwocJoHSSX-REhBDU1MgVGFibGUgRGVzaWduGgjshEEa7S-1CygBUhMI4e3PgdrrpgIVRgkcCh0gNQcL&hl=th&kw0=%E0%B8%AA%E0%B8%AD%E0%B8%99&kw1=CSS+Table+Design&kw2=CSS&kw3=CSS+Font+HTML&okw=CSS+Table+Design

สารบญ

เรอง หนา

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

http://www.enjoyday.net/webtutorial/ex/tryit.php?myFile=ex_css_chapter05_1

--> </style>

EXAMPLE <html> <body> <head> <style type="text/css">  </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">  </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">  </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

http://www.enjoyday.net/webtutorial/html/index.html

http://www.enjoyday.net/webtutorial/css/index.html

http://www.enjoyday.net/webtutorial/xhtml/index.html

http://www.enjoyday.net/webtutorial/javascript/index.html


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

http://www.enjoyday.net/webtutorial/ex/tryit.php?myFile=ex_css_chapter08

Form

เรองของ CSS ทเกยวกบ Form ม 2 สวนทอยากจะพดถงคะ สวนแรก คอ การตกแตง Form Elements ดวย style sheet และสวนทสอง คอ การท า Form โดยไมใช Table หรอเรยกวา Tableless Form Form Elements เราสามารถตกแตง สวนประกอบของ Form ไดแก inputbox, textarea, button เปนตน ใหมสสนทสวยงามได ไปดตวอยางกนคะ

EXAMPLE - TEXT BOX

<html>

<head>


.textbox_gray {

color:#55555;

background-color:#FFFFFF;

border:1px solid #999999;

}

.textbox_yellow {

text-align:center;

color:#55555;

background-color:#FAFCD1;


}

.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

[email protected]

การตกแตง 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 />



</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%; }

http://www.dynamicdrive.com/style/csslibrary/item/css-tableless-form/

.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


http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html

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> เปนตน


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> เปนตน


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


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 คอสวนไหนกนแลว


ถายงงงๆ วาตรงไหนคอ 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>


OUTPUT

ความขางนอกตรงนหางจากขอบดานนอกของ block 10x นคอ margin ดานบน

block นม Border สสม ขนาด 2px

ม Padding ระยะหางระหวางขอบดานใน กบ ขอความใน block 20px ทง 4 ดาน และม Margin ระยะหาง

ระหวางขอบดานนอก กบ ขอความทอยขางนอก block 10px 20px 30px 40px ซงเปน margin ของดานบน

ขวา ลาง ซาย ตามล าดบ ขอความขางนอกตรงนหางจากขอบดานนอกของ block 30x นคอ margin ดานลาง

EXAMPLEการใชงาน padding ทแตละดานไมเทากน


<div style="margin:20px; padding:10px 20px 30px 40px; border:2px solid #009999">

block นม Border สเขยว ขนาด 2px <br />


ดานบน ขวา ลาง ซาย ตามล าดบ

และม Margin ระยะหางระหวางขอบดานนอก กบ ขอความทอยขางนอก block 20px ทง 4 ดาน

</div>


OUTPUT


block นม Border สเขยว ขนาด 2px


ดานบน ขวา ลาง ซาย ตามล าดบ และม Margin ระยะหางระหวางขอบดานนอก กบ ขอความทอยขางนอก

block 20px ทง 4 ดาน


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>


.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


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>


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>


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>


o การใช css ในการจดรปแบบการแสดงผล จะชวยลดการใชภาษา HTML ในการตกแตงเอกสารเวบเพจ ท าให code ภายในเอกสาร HTML เหลอเพยงสวนเนอหา ท าใหเขาใจงายขน การแกไขเอกสารท าไดงายและรวดเรว

o เมอ code ภายในเอกสาร HTML ลดลง ท าใหขนาดไฟลเลกลง จงดาวนโหลดไดเรว o สามารถก าหนดรปแบบการแสดงผลจากค าสง style sheet ชดเดยวกน ใหมผลกบเอกสาร HTML


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>


1. การใช css ในการจดรปแบบการแสดงผล จะชวยลดการใชภาษา HTML ในการตกแตงเอกสารเวบเพจ ท าให code ภายในเอกสาร HTML เหลอเพยงสวนเนอหา ท าใหเขาใจงายขน การแกไขเอกสารท าไดงายและรวดเรว

2. เมอ code ภายในเอกสาร HTML ลดลง ท าใหขนาดไฟลเลกลง จงดาวนโหลดไดเรว 3. สามารถก าหนดรปแบบการแสดงผลจากค าสง style sheet ชดเดยวกน ใหมผลกบเอกสาร HTML


Table

ตองใชกบเวบเบราเซอรรนใหมๆ เชน IE6 เปนตนไป *บาง property เมอทดสอบแลวไมเหนผล


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>

OUTPUT

รหสพนกงาน ชอ เงนเดอน

01 อ านาจ 30,000

02 สมชาย 25,000

03 วระ 20,000

Link

Property Purpose

a:link ก าหนด style ใหกบ link ปกตทยงไมเคยถก click

a:visited ก าหนด style ใหกบ link ทเคยถกคลกแลว

a:hover ก าหนด style ใหกบ link เมอเลอนเมาสไปอยเหนอ link

a:active ก าหนด style ใหกบ link ขณะถกคลก

EXAMPLE <html> <head> <style type="text/css"> .linkbox a:link {color: #FF0000} /* unvisited link สแดง*/ .linkbox a:visited {color: #00FF00} /* visited link สเขยว*/ .linkbox a:hover {color: #FF00FF} /* mouse over link สชมพ */ .linkbox a:active {color: #0000FF} /* selected link สน าเงน*/ </style> </head> <body> <div class="linkbox"> <a href="css_chapter01.html">Chapter1</a> <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">&lsaquo; Prev</a> <a href="css_chapter01.html">1</a> <a href="css_chapter02.html">2</a>






<a href="css_chapter03.html">3</a> <a href="css_chapter16.html">Next &rsaquo;</a> <a href="css_chapter25.html">Last »</a> </div> <body> </html>

OUTPUT

Page : « First ‹ Prev 1 2 3 Next ›







Classification

การแสดงผลวตถวาจะแสดงอยางไร ทไหน


Float ใชก าหนดการจดวางรปภาพ หรอวตถท

ตองการ วาจะใหอยทางดานใดของ

ขอความทมอย

left

right

none

display ใชก าหนดรปแบบการแสดงของวตถ

value description

none ไมแสดงวตถนน

block แสดงเปน block โดยขนบรรทดใหมกอน

inline เปนคา Default โดย element จะแสดงแบบ inline ไมม

การขนบรรทดใหม

list-item แสดงเปนลสตรายการ

run-in The element will be displayed as block-level or inline

element depending on context

compact The element will be displayed as block-level or inline

element depending on context

marker

table The element will be displayed as a block table (like

<table>), with a line break before and after the table

inline-table The element will be displayed as an inline table (like

<table>), with no line break before or after the table

table-row-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






กรณก าหนดให display แบบ block





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





</p>

<p><h4>จดใหรปชดซาย และใหขอความทอนหลงขนตนใหม ใตรป (clear:left)</h4>



ตงแตครงโบราณ โดยใชชาเขยวในการรกษาตงแตโรคปวดศรษะไปจนถงโรคซมเศรา

<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)





EXAMPLEclear:both

<p><h4>จดใหมรปชดขวาและซาย</h4>


<img src="../images/tea2.jpg" style="float:right">





</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

การจดวางต าแหนงวตถ


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



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>


.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

http://www.mandarindesign.com/boxes.html

http://www.mandarindesign.com/blogger.html

Form

เรองของ CSS ทเกยวกบ Form ม 2 สวนทอยากจะพดถงคะ สวนแรก คอ การตกแตง Form Elements ดวย style sheet และสวนทสอง คอ การท า Form โดยไมใช Table หรอเรยกวา Tableless Form Form Elements เราสามารถตกแตง สวนประกอบของ Form ไดแก inputbox, textarea, button เปนตน ใหมสสนทสวยงามได ไปดตวอยางกนคะ

EXAMPLE - TEXT BOX

<html>

<head>


.textbox_gray {

color:#55555;

background-color:#FFFFFF;


}

.textbox_yellow {

text-align:center;

color:#55555;

background-color:#FAFCD1;


}

.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

[email protected]

การตกแตง 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>


<br />



</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


.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%; }

http://www.dynamicdrive.com/style/csslibrary/item/css-tableless-form/

.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


http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html

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 กยงใชได)

http://www.enjoyday.net/webtutorial/css/



Layout

ในหนาเวบเพจหนงประกอบไปดวยสวนหวเวบ (Page Header), สวนเนอหา และการเชอมโยง (Page Body), และสวนทาย (Page Footer) การจดสรรพนทของหนาเวบเพจเพอแสดงสวนประกอบเหลาน ท าไดหลายรปแบบ เชน แบงแบบอสระ แบงแบบ 2 คอลมน และ 3 คอลมน ตามทไดพดถงในเรองการออกแบบเวบไซต (ถาจ าไมไดคลกทนเพออาน)

http://www.enjoyday.net/2009/05/page-layout-design/

ในการลงมอเขยนเวบเพจจรง การจดรปหนาเวบ (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


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


</td>

</tr>

</table>

OUTPUT

Web builder Tutorials

Main Menu

HTML

CSS

XHTML

JavaScript

แนะน าการสรางเวบไซต ตงแตพนฐาน สอนเขยนเวบเพจดวย

HTML, จดตกแตงรปแบบการแสดงผลดวย CSS และกาวสการ

สรางเวบไซตแบบมาตรฐานดวย XHTML สดทายเพมลกเลนให

เวบไซตของเราดวย JavaScript

Advertisment


การจด 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> </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> </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> </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>

</div>

<br class="clearfloat" />

<div id="footer"> <p>Footer<br/><br /></p> </div>

</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}

http://www.enjoyday.net/webtutorial/ex/ex_css_chapter24.html

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>


</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>


</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>


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>


p:first-line {color:#0000ff}</style>

</head>

<body>

<p>Heath<br>รบประทานอาหารทมประโยชน หมนออกก าลงกาย และพกผอนใหเพยงพอ</p>

</body>

</html>

OUTPUT

Health รบประทานอาหารทมประโยชน หมนออกก าลงกาย และพกผอนใหเพยงพอ

Multiple Pseudo-elements

เราสามารถน าทง 2 แบบมาเขยนผสมกนได

EXAMPLE

<html>

<head>


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>


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>


h1:after

{

content: url(../images/star_icons.gif)

}

</style>

</head>

<body>

<h1>This is a header</h1>

</body>

</html>

OUTPUT

This is a header

css table design 13 - pongnapa.files.wordpress.com · ในไฟล์ html...

Documents