การเขียน Webpage ด้วย CSS

รับสมัครนักโพสมือใหม่ สำหรับผู้ทีรักการเขียน

2013-10-05T06:45:00.001-07:00

เว็บตีพิมพ์วารสารบทความ แผนการสอนทุกระดับ

เว็บใหม่ครับ เปิดให้บริการสำหรับนักโพสบทความ นักเขียนบทความ สามารถนำยืความมาเขียน หรือ นักเขียนนิยาย หรือ เรื่องสั้น ที่ไม่มีที่ลงประกาศให้อ่าน หรือ มีบล็อกอยู่แล้ว แต่อย่างหาคนเพิ่มเข้าบล็อกคนตนเอง หรืออยากจะโฆษณา แนะนำสินค้า เผยแแพร่บทความทางวิชาการ หรือที่ต้องการ แจก ๆ โอ้ย+ เยอะครับ ให้อยากจะมาทำอะไรโพสอะไร ๆ ก็โพสได้ตามสะบายเลย แต่ผมมีกฎกติกาอยู่ 3 ข้อคือ

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

ขอแค่นี่ละครับ นอกนักโพสได้ตามสบายเลย ไม่ห่วงห้ามเลยคัรบ

เว็บที่ใช้โพสก็ชื่อเว็บ เว็บตีพิมพ์วารสารบทความ แผนการสอนทุกระดับ ครับ

สร้าง Link ด้วย CSS

2013-04-22T09:56:00.000-07:00

เว็บที่ใช้แสดงผล http://www.kroovit.com/ ครูวิทย์สอนวิทยาศาสตร์

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

แต่ว่าวันที่ก็เอา โค้ดที่ตัวเองเขียนมาเพื่อมาเผยแพร่เป็นวิทยาทานให้แก่ชาวโปรแกรมเมอร์ เว็บโปรแกรมเมอร์ทั้งหลาย ท่านที่ชำนาญก็สามารถติชมผมมาได้นะครับ ที่เมล์ผมเลย อิอิ ไม่อยากให้ติชมในนี้ ประจานความโง่เขลาของผมเอง 555 ส่วนเว็บโปรแกรมเมอร์มือใหม่ ก็สามารถ คัดลอก โค้ดไปศึกษาเนื้อหาได้เลยนะครับ ไม่หวงห้าม อีกอย่าง ถ้าต้องการดูตัวอย่างให้ไปดูได้ที่เว็บ ครูวิทย์สอนวิทยาศาสตร์ นะครับ หน้าแรกเลย ตัวอย่างเป็นอย่างนั้น ๆ แหละ ครับ

โปรแกรมมเมอร์สามารถปรับเปลี่ยนเนื้อหาสามารถคลิกไปคลิกมาได้นะครับ ลองดูละกัน ครับ

ผมเอาโค้ดเค้ามาก้ลองเปลี่ยนค่าดู และ ลอง แสดงผลตัวอย่างดูเอา เปลี่ยนค่าไปเรื่อย ๆ หลาย ๆ ตัว จนได้เว็บเพจมาได้อย่างพอใจ เลยได้อย่างที่เห็ฯในเว็บตัวอย่างนี่แหละครับ

Code CSS

ที่ผมเขียนตอนนั้นผมเขียนโดยใช้ โปรแกรมดรีมเอเวอร์ 8 แต่ตอนนี้มาแก้ไขด้วยเวอร์ชั้น CS6 ก็ไม่ต้องกลัวอะไรนะครับ เพราะใช้ได้เหมือนกัน แล้วก็ไฟล์ที่ทำสำเร็จก็ไม่เปลี่ยนแปลงอะไร

เอาแหละ ร่ำเพ่อ พรรณนามามากพอสมควรแล้ว เอาโค้ดไปดุกันเลยนะครับ

#tables a {

display: block;

border-top-width: 0px;

border-right-width: 0px;

border-bottom-width: 0px;

border-left-width: 0px;

border-top-style: none;

border-right-style: none;

border-bottom-style: none;

border-left-style: none;

margin: 0px;

padding: 0px;

font-size: 12pt;

text-decoration: none;

}

#tables a:hover{

padding: 20px;

list-style-position: outside;

color: #009;

text-align: center;

font-size: 12pt;

text-decoration: blink;

font-weight: bold;

background-color: #9F9;

letter-spacing: normal;

word-spacing: normal;

border-top-style: groove;

border-right-style: groove;

border-bottom-style: groove;

border-left-style: groove;

}

ตัวอย่างที่เว็บ ครูวิทย์สอนวิทยาศาสตร์ ครับ

ประวัติของ CSS

2013-04-18T07:34:00.004-07:00

จะเล่าเอาโดยสำคัญเท่านั้น จะได้ไม่เรื้อรังครับ

ประวัติของ CSS

CSS เริ่มต้นมาตั้งแต่ปี พ.ศ. 2513 แต่อย่างไรก็ดีการแสดงผลของ CSS นั้นขึ้นอยู่กับคนเขียนเว็บ, web browser ที่ตอนนั้นคนรู้จักยังน้อย คนใช้น้อย และยังยากทำให้ไม่ได้รับความชื่นชอบเท่าไร

แล้วก็ผ่านการพัฒนามาอย่างต่อเนื่องหลากหลายแบบ หลายวิธีการทำ และใช้งาน และแสดงผล จนกระทั่ง 2539 CSS ก็ถูกประกาศใช้อย่างเป็นทางการ โดย CSS1 เสร็จในธันวาคมปีนั้นเอง

จากนั้น ก็ได้ตามล่าการใช้งาน CSS1 มาระยะนึงแล้วพัฒนาแก้ไขกันจนกระทั่งได้สร้างออกมาเป็น CSS2 ในวันที่ 4 พฤศจิกายน 2540 และถูกเผยแพร่ โดย W3C เมื่อ 12 พฤษภาคม 2541 นั่นเอง โดย CSS3 ก็เริ่มพัฒนาในปี 2541 และก็ยังพัฒนากันจนถึงปี 2552

ในปี 2548 กลุ่มที่ดูแล CSS ได้ทำการปรับปรุง CSS ให้มีหลักเกณฑ์ที่เจาะจงมากขึ้น ดังนั้นเลยทำให้ กฏเกณฑ์ที่ประกาศไปแล้วก็คือ CSS 2.1 และ CSS 3 Selector และ CSS 3 Text ถูกเปลี่ยนจาก Candidate Recommendation กลับไปเป็น Working Draft อีกครั้งหนึ่ง

CSS 1

CSS level 1 ที่ประกาศออกมาตั้งแต่ ธันวาคม 2539 นั้นรองรับดังนี้

Font property เช่นประเภทของ font และ ตัวเอียง สีของ ตัวหนังสือ, พื้น,และส่วนอื่นๆ
การแสดงผลของส่วนต่างๆ เช่นพวกช่องว่าง ของข้อความ ตัวหนังสือ บรรทัด
การจัดเรียงของย่อหน้า เช่นชิดซ้าย ขวา , รูปภาพ ตาราง และส่วนอื่นๆ
การเว้นระยะ, เส้นขอบ, เว้นย่อหน้า, และการจัดตำแหน่งของ element

ปัจจุบัน W3C ไม่มีการปรับปรุงมาตรฐานใด ๆ ของ CSS1

CSS 2

CSS level 2 ประกาศใช้เมื่อ 2541 โดยมีการรวมเข้ามาจาก CSS 1 และเพิ่มใหม่อีกหลายอย่าง เช่น absolute, relative และ fixed ตำแหน่งของ element รวมไปถึง z-index การรองรับ bidirectional text รวมทั้งค่า property ใหม่ของตัวหนังสือเช่น shadows
CSS level 2 revision 1 หรือ CSS 2.1 ได้แก้ error ต่างๆใน CSS2 โดยลบลูกเล่นต่างๆที่ไม่จำเป็น รวมทั้งปรับข้อกำหนดของมาตรฐาน web browser ใหม่ โดยประกาศใช้จริงอย่างเป็นทางการเมื่อ กรกฎาคม 2550

CSS 3

CSS level 3 ปัจจุบันยังอยู่ระหว่างการพัฒนา ตั้งแต่ 15 ธันวาคม 2548 โดยมีหลายส่วนก็เริ่มเอามาใช้จริงบ้างแล้ว
สรุป เทคโนโลยีที่กำลังมาก็คือ CSS3 แต่ก็ยังไม่เหมาะเอามาทำงาน production เพราะว่าหลาย browser ยังใช้งานได้ไม่เต็มขนาดเป็นเพราะว่า มาตรฐานที่ยังไม่หยุดนิ่งเองด้วยส่วนหนึ่ง ดังนั้น ช่วงปีนี้ ให้ศึกษา CSS 2 (รวมถึง 2.1) ให้เก่งก่อนจะดีกว่า เพราะว่าถึงเป็น CSS 3 แต่การเขียนก็เหมือนเดิมเกือบทั้งหมดครับ

สรุป การใช้งาน ตอนนี้เราจะใช้งานที่ CSS 2.1 กันอยู่ ส่วนคนที่ใช้ CSS 3 ก็มีบ้างแล้วเช่นกัน แต่ต้องเป็นพวกไม่แคร์สื่อ (web browser) ก็คือไม่สนใจว่าใครจะได้หน้าตาไม่เหมือนตามที่ตั้งใจไว้ ฉันจะใช้ ประมาณนั้น แต่อย่างไรก็ดีหลายส่วนก็เอามาใช้จริง ๆ ได้แล้วครับ แต่กลุ่มที่จะประสบปัญหาดูแล้วได้หน้าตาไม่เหมือนที่อื่นก็คือ internet explorer เลยครับ ต้องรอ internet explorer 9 ล่ะครับ

ตัวอย่างการสร้างเว็บเพจด้วย CSS layout

2012-12-11T08:16:00.002-08:00

ในบทความนี้จะเป็นเนื้อหาการสร้างเว็บเพจด้วย CSS layout โดยจะมีขั้นตอนดังนี้

1.ออกแบบโครงสร้างหลักๆของหน้าเว็บเพจก่อน ดังรูปด้านล่าง

จากรูปจะเห็นว่าเราได้แบ่งส่วนต่างๆของหน้าเว็บเพจออกเป็น 4 ส่วนคือ

1.1.ส่วนแสดงสัญลักษณ์ของเว็บไซต์ ส่วนนี้เราจะให้แสดงรูปภาพและสัญลักษณ์ของเว็บไซต์

1.2.ส่วนแสดง Navigation ของเว็บไซต์ ส่วนนี้จะแสดงลิงค์ไปยังหน้าต่างของเว็บไซต์

1.3.ส่วนแสดงเนื้อหา จะแสดงเนื้อหาและรูปภาพ

1.4.ส่วนท้ายสุดของหน้า จะแสดงลิงค์ไปยังหน้าหลักๆของเว็บไซต์

การออกแบบโครงสร้างหลักของเว็บเพจนั้นมีความจำเป็นมาก เพราะหน้าเว็บเพจของเรามีค่ามาก การออกแบบตำแหน่งต่างของเว็บเพจไว้ก่อน จะทำให้การใช้พื้นที่ในหน้าเว็บเพจของเรามีประสิทธิภาพมากที่สุด

2.ออกแบบหน้าตาของเว็บเพจ

หลักจากที่เราได้โครงสร้างหลักๆของเว็บเพจแล้ว เราก็จะออกแบบหน้าตาของเว็บเพจกัน โดยใช้โปรแกรมกราฟิกต่างๆ เช่น Photoshop , Firework , Illustrator แล้วแต่ถนัด โดยในตัวอย่างจะออกแบบโดยใช้โปรแกรม Illustrator

หลังจากที่เราออกแบบเว็บเพจเรียบร้อยแล้ว ในบทต่อไปจะเริ่มสร้างเว็บเพจกัน

เพื่อความเข้าใจที่ง่ายขี้น

คลิกที่นี่เพื่อดูตัวอย่างเว็บเพจที่เสร็จแล้ว

คลิกที่นี่เพื่อดาว์นโหลดตัวอย่างเว็บเพจที่เสร็จแล้ว

การเพิ่ม NAVIGATION BAR

2012-12-11T08:15:00.001-08:00

รายชื่อในส่วนบนของหน้า HTML ตั้งใจจะใช้เป็นเมนู navigation เวบไซด์หลายเวบมีการใช้เมนูวางเรียงไว้ด้านบนหรือไว้ด้านข้างของ หน้าและหน้านี้ก็ควรมีเช่นกันซึ่งเราจะวางไว้ด้านซ้ายเนื่องจากดูแล้วน่าแล้วน่าสนใจกว่าวางไว้ด้านบน

เมนูดังกล่าวนี้มีอยู่ในหน้า HTML แล้วโดยใช้ <ul>แสดงรายการไว้ด้านบนลิงค์ยังไม่สามารถใช้ได้เนื่องเวบไซด์ของเราในขณะนี้มี เพียงหน้าเดียวแต่ในขณะนี้เรื่องนั้นไม่สำคัญ แต่แน่นอนว่าสำหรับเวบไซด์จริงๆแล้วไม่ควรจะมีลิงค์ที่ใช้งานไม่ได้

ดังนั้นเราจะต้องย้ายรายชื่อลงมาอยู่ด้านซ้ายและย้ายข้อความที่เหลือทั้งหมดมาทางด้านขวาเล็กน้อยเพื่อให้มีพื้นที่ CSS property ที่เราใช้คือ 'padding-left' (สำหรับย้ายข้อความในส่วน body) และ 'position' 'left' และ 'top' (เพื่อย้ายเมนู)

ยังมีวิธีอื่นๆที่สามารถทำได้หากคุณดูในส่วน “column” หรือ “layout” ในหน้า Learning CSS (เรียนรู้ CSS)คุณจะเจอเทมเพลตที่ใช้ได้เลยหลายอันแต่ อันนี้ก็ใช้ได้เหมาะสมกับจุดประสงค์ของเรา

ในหน้าโปรแกรมแก้ไข ให้เพิ่มบรรทัดต่อไปนี้เขาไปในไฟล์ HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[etc.]

หากคุณเซฟไฟล์อีกครั้งและ reload ในบราวเซอร์ทีนี้คุณก็จะได้รายชื่อลิงค์ที่อยู่ทางด้านซ้ายของข้อความหลัก ซึ่งตอนนี้หน้าเวบนี้ก็ ดูน่าสนใจขึ้น

ข้อความหลักย้ายไปอยู่ที่ด้านขวาและตอนนี้รายชื่อลิงค์ย้ายไปอยู่ที่ด้านซ้ายแล้วแทนที่จะอยู่ด้านบน

การใส่ 'position: absolute' เป็นการบอกว่า element ul ถูกวางไว้แยกออกจากข้อความที่มาก่อนหรือหลังภายในเอกสารและการใช้ 'left' และ 'top' ก็เพื่อแสดงให้รู้ว่าอยู่ในตำแหน่งใด ในกรณีนี้ คือ 2em จากด้านบนและ 1em จากด้านซ้ายของหน้าต่าง

'2em' หมายถึง 2 เท่าของขนาดฟอนท์ปัจจุบันเช่น ถ้าเมนูใช้ฟอนท์ขนาด 12 point ดังนั้น '2em' จะเท่ากับ 24 point 'em' เป็นหน่วย การวัดประเภทหนึ่งที่มีประโยชน์ในการใช้ CSS เนื่องจากสามารถนำมาใช้กับฟอนท์ที่ผู่อ่านมักจะใช้ได้โดยอัตโนมัติ บราวเซอร์ส่วนใหญ่ มีเมนูที่ไว้เพิ่มหรือลดขนาดของฟอนท์คุณจะเห็นได้ว่าขนาดของเมนูจะเพิ่มเมื่อขนาดของฟอนท์เพิ่มซึ่งจะไม่เป็นไปตามนั้นหากในกรณี ที่เราใช้หน่วยเป็นพิกเซลแทน

I started something I couldnt finish...: THings I think I think Vol 6

2012-08-06T07:49:00.001-07:00

I started something I couldnt finish...: THings I think I think Vol 6: Whats up bizznitches. Its me, Jokey Jokemaker. This week I had these thoughts: 1) Ismael Julio Lopez's attempt to take the blog and put...

Pseudo-element

2012-08-05T04:09:00.004-07:00

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

ตัวอย่าง

<html>
<head>
<style type="text/css">
p:first-letter {color:#ff0000;font-size:xx-large}
</style>
</head>
<body>
<p>Enjoyday.net</p>
</body>
</html>

ผลลัพธ์

Enjoyday.net

หรือ จะเขียน Pseudo-element กับ CSS Classes ก็ได้
ถ้าต้องการระบุให้เฉพาะบาง paragraph เท่านั้นที่แสดงผล เขียนได้ดังนี้

p.article:first-letter {color:#ff0000}

<p class="article">Enjoyday.net</p>
<p>Enjoyday.net</p> 

ผลลัพธ์

Enjoyday.net
Enjoyday.net

The :first-line Pseudo-element

การกำหนดรูปแบบให้กับตัวอักษรบรรทัดแรกของ element

ผลลัพธ์

<html>
<head>
<style type="text/css">
p:first-line {color:#0000ff}</style>
</head>

<body>
<p>Heath<br>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p>
</body>
</html>

ผลลัพธ์

Health
รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ

Multiple Pseudo-elements

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

ตัวอย่าง

<html>
<head>
<style type="text/css">
p:first-letter {color:#ff0000;font-size:xx-large}
p:first-line {color:#0000ff}</style>
</head>

<body>
<p>Heath<br>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p>
</body>
</html>

ผลลัพธ์

Health
รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ

CSS2 - The :before Pseudo-element

สามารถกำหนดเพิ่ม content บางอย่าง ก่อนแสดง content ของ element นั้นๆ *ใช้ไม่ได้กับ web browser IE

ตัวอย่าง

<html>
<head>
<style type="text/css">
h1:before
{
content: url(../images/star_icons.gif)
}
</style>

</head>
<body>
<h1>This is a header</h1>
</body>
</html>

ผลลัพธ์

This is a header

CSS2 - The :after Pseudo-element

สามารถกำหนดเพิ่ม content บางอย่าง หลังจากแสดง content ของ element นั้นๆ *ใช้ไม่ได้กับ web browser IE

ตัวอย่าง

<html>
<head>
<style type="text/css">
h1:after
{
content: url(../images/star_icons.gif)
}
</style>
</head>

<body>
<h1>This is a header</h1>
</body>
</html>

ผลลัพธ์

This is a header

Pseudo-classes

2012-08-05T04:06:00.002-07:00

เป็น selector กลุ่มที่น่าสนใจที่จัดรูปแบบการแสดงผลโดยขึ้นกับสถานะ หรือเงื่อนไข เช่น link เมื่อถูกคลิกจะเปลี่ยนสี เป็นต้น

selector:pseudo-class {property: value}

selector.css-class:pseudo-class {property: value}

Pseudo-class Purpose

:link กำหนด style ให้กับ link ปกติที่ยังไม่เคยถูก click

:visited กำหนด style ให้กับ link ที่เคยถูกคลิกแล้ว

:hover กำหนด style ให้กับ link เมื่อเลื่อนเมาส์ไปอยู่เหนือ link

:active กำหนด style ให้กับ link ขณะถูกคลิก

:focus กำหนด style ให้กับ element ขณะถูก focus

:first-child กำหนด style ให้กับ element ที่เป็น first child ของ element อื่นๆ

:lang Allows the author to specify a language to use in a specified element

Anchor Pseudo-classes
link ที่มีสถานะ active, visited, unvisited, หรือเมื่อนำเมาส์วางบน link เราสามารถกำหนดรูปแบบให้แตกต่างกันได้
ตัวอย่าง
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>
ผลลัพธ์
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>
ผลลัพธ์
Chapter22 Chapter23 Chapter24 Chapter25

CSS2 - The :first-child Pseudo-class
จะจัดรูปแบบการแสดงผลให้กับ element ที่พบอันแรกเท่านั้น สำหรับ web browser IE จะ้ต้องประกาศ <!DOCTYPE> ด้วย
ตัวอย่าง
<!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>
ผลลีัพธ์ เฉพาะข้อความใน <p> อันแรกเท่านั้นที่เป็นสีน้ำเงิน

วันนี้อากาศแจ่มใส
วันนี้อากาศแจ่มใส

< br /> Match the first <i> element in all <p> elements
ตัวอย่างนี้ซับซ้อนขึ้น โดยจัดรูปแบบการแสดงผลให้ selector <i> ที่พบอันแรก ใน <p> elements ทุกๆ อัน
ตัวอย่าง
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
p > i:first-child
{
color:blue
}
</style>
</head>
<body>
<p>วันนี้อากาศ <i>แจ่มใส</i> วันนี้อากาศ <i>แจ่มใส</i></p>
<p>วันนี้อากาศ <i>แจ่มใส</i> วันนี้อากาศ <i>แจ่มใส</i></p>
<p><b>Note:</b> For :first-child to work in IE a DOCTYPE must be declared.</p>
</body>
</html>
ผลลัพธ์ <i>แจ่มใส</i> ที่พบตัวแรกใน <p> ทุกอัน จะี่เป็นสีน้ำเงิน
วันนี้อากาศแจ่มใส* วันนี้อากาศแจ่มใส
วันนี้อากาศแจ่มใส วันนี้อากาศแจ่มใส

Match all <i> elements in all first child <p> elements
ตัวอย่างนี้สลับกับข้างบน โดยจัดรูปแบบการแสดงผลให้ selector <i> ทุกอัน ที่พบใน <p> elements อันแรก
Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
p:first-child i
{
color:blue
}
</style>
</head>
<body>
<p>วันนี้อากาศ <i>แจ่มใส</i> วันนี้อากาศ <i>แจ่มใส</i></p>
<p>วันนี้อากาศ <i>แจ่มใส</i> วันนี้อากาศ <i>แจ่มใส</i></p>
<p><b>Note:</b> For :first-child to work in IE a DOCTYPE must be declared.</p>
</body>
</html>
Output <i>แจ่มใส</i> ทุกอัน ที่พบใน <p> อันแรก จะเป็นสีน้ำเงิน
วันนี้อากาศแจ่มใส วันนี้อากาศแจ่มใส
วันนี้อากาศแจ่มใส วันนี้อากาศแจ่มใส

CSS2 - The :lang Pseudo-class
เราสามารถกำหนด special rules สำหรับภาษาต่างๆ ได้ แต่ Pseudo-class *ใช้ไม่ได้กับ web browser IE
Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>

<body>
<p>Some text <q lang="no">A quote in a paragraph</q>Some text.</p>
</body>
</html>
Output
Some text ~A quote in a paragraph~ Some text.

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

การจัด Layout ด้วย CSS (Div)

2012-08-05T04:02:00.001-07:00

แบ่งเป็น 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) ก็ได้

ตัวอย่างFixed Layout

thrColFixHdr.css

body  {
      font: 100% Verdana, Arial, Helvetica, sans-serif;
      background: #666666;
      margin: 0; 
      padding: 0;
      text-align: center;
      color: #000000;
} 

/* ส่วน Page Header */
.thrColFixHdr #header { 
      background: #DDDDDD; 
      padding: 0 10px 0 20px;  
} 

/* ส่วน Page Body  ที่บรรจุเนื้อหา */
.thrColFixHdr #container { 
      width: 780px;  
      background: #FFFFFF;
      margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
      border: 1px solid #000000;
      text-align: left; /* this overrides the text-align: center on the body element. */
} 
 
/* ส่วน คอลัมน์ด้านซ้าย */
.thrColFixHdr #sidebar1 {
      float: left; 
      width: 150px;
      background: #EBEBEB; 
      padding: 15px 10px 15px 20px; 
}

/* ส่วน คอลัมน์ด้านขวา */
.thrColFixHdr #sidebar2 {
      float: right; 
      width: 160px; 
      background: #EBEBEB; 
      padding: 15px 10px 15px 20px;
}

/* ส่วนเนื้อหา อยู่ระหว่าง sidebar */
.thrColFixHdr #mainContent { 
      margin: 0 200px; 
      padding: 0 10px; 
} 
 
/* ส่วน Page Footer */
.thrColFixHdr #footer { 
      padding: 0 10px 0 20px; 
      background:#DDDDDD;
} 
 
.clearfloat { 
      clear:both;
}

fixedlayout.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="thrColFixHdr.css" rel="stylesheet" type="text/css">
</head>

<body class="thrColFixHdr">

<div id="container">

  <div id="header">
    <h1>Header</h1>
    <!-- end #header --></div>   

  <div id="sidebar1">
  <h3>Sidebar1 Content</h3>
  <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content. </p>
  <!-- end #sidebar1 --></div> 

  <div id="sidebar2">
    <h3>Sidebar2 Content</h3>
    <p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. </p>
  <!-- end #sidebar2 --></div> 

  <div id="mainContent">
    <h1> การจัด Layout </h1>
    <p>ในหน้าเว็บเพจหนึ่งประกอบไปด้วยส่วนหัวเว็บ  (Page Header), ส่วนเนื้อหา และการเชื่อมโยง (Page  Body), และส่วนท้าย (Page  Footer) จัดสรรพื้นที่ของหน้าเว็บเพจเพื่อแสดงส่วนประกอบเหล่านี้  ทำได้หลายรูปแบบ เช่น แบ่งแบบอิสระ แบ่งแบบ 2 คอลัมน์ และ 3 คอลัมน์   </p>
    <p> ในการลงมือเขียนเว็บเพจ ปัจจุบันนิยมใช้ Div ในการจัด Layout มี 3 รูปแบบดังนี้</p>

    <h2>1. Fixed Layout  </h2>
    <p>จะกำหนดขนาดความกว้าง และตำแหน่งของส่วนต่างๆ เป็น pixel  ทำให้กำหนดขนาด และตำแหน่งของส่วนต่างๆ ได้ตามต้องการ  ไม่ผิดเพี้ยนไปตามขนาดหน้าจอ  และเมื่อย่อขยายหน้าต่างเว็บเบราเซอร์ (IE, Firefox) แล้ว ตำแหน่งของส่วนต่างๆในหน้าเว็บจะยังคงเดิม  </p>   

    <h2>2. Liquid Layout</h2>
    <p>จะกำหนดขนาดความกว้างของส่วนต่างๆ เป็นเปอร์เซ็นต์   เมื่อเราย่อหรือขยายขนาดของเว็บเบราเซอร์  ขนาดของส่วนต่างๆ จะย่อขยายตาม</p>      

    <h2>3. Elastic Layout</h2>
    <p>จะกำหนดขนาดของส่วนต่าง ๆ เป็น em  ทำให้ส่วนต่างๆ ย่อหรือขยาย ตามการกำหนดค่า Text size ของเบราเซอร์ เมื่อเพิ่มหรือลดขนาดของตัวอักษรแล้ว  ยังสามารถคงรูปแบบการจัดวางส่วนต่างๆ ไว้ได้อย่างดี</p>  

  <!-- end #mainContent --></div>   

  <br class="clearfloat" /> 

  <div id="footer">
    <p>Footer<br/><br /></p>
  <!-- end #footer --></div> 

<!-- end #container --></div>

</body>
</html>

แบบ Fixed Layout นี้ สังเกตได้ว่า เวลาย่อขยายหน้าต่างเบราเซอร์จะไม่มีผลต่อการจัดวางส่วนประกอบต่างๆ แต่จะเกิดเป็น scroll bar แทน

ส่วนการจัด Layout แบบอื่นๆ ลองดูจากไฟล์เหล่านี้ หรือลองเล่นดูในโปรแกรม Dreamweaver ได้ค่ะ

Layout

2012-08-05T03:59:00.006-07:00

ในหน้าเว็บเพจหนึ่งประกอบไปด้วยส่วนหัวเว็บ (Page Header), ส่วนเนื้อหา และการเชื่อมโยง (Page Body), และส่วนท้าย (Page Footer) การจัดสรรพื้นที่ของหน้าเว็บเพจเพื่อแสดงส่วนประกอบเหล่านี้ ทำได้หลายรูปแบบ เช่น แบ่งแบบอิสระ แบ่งแบบ 2 คอลัมน์ และ 3 คอลัมน์ ตามที่ได้พูดถึงในเรื่องการออกแบบเว็บไซต์ (ถ้าจำไม่ได้คลิกที่นี่เพื่ออ่าน)

ในการลงมือเขียนเว็บเพจจริง การจัดรูปหน้าเว็บ (Layout) สามารถใช้ Table หรือ ใช้ Div ในการจัดวางส่วนประกอบของหน้าเว็บ

แต่การใช้ <table> ในการวาง Layout หน้าเว็บเพจ ออกจะผิดวัตถุประสงค์ในการใช้งานของ <table> อยู่บ้าง เนื่องจากที่จริง <table> นั้นใช้ในการแสดงข้อมูลในรูปตาราง

ปัจจุบันเว็บไซต์ต่างๆ เปลี่ยนจากการใช้ Table จัดวาง Layout ให้หน้าเ็ว็บเพจ มาเป็นแบบ Tableless โดยใช้ <div> และใช้ CSS ในการจัดตำแหน่ง ขนาด และสี ให้กับ tag <div> แทน เพราะมีข้อดีกว่าการใช้ Table

การใช้ Table จะต้องรอให้โหลดข้อมูลภายใน Table ทั้งหมดก่อน แล้วจึงแสดงผลข้อมูลทั้งหมดออกมาในคราวเดียว ทำให้ต้องรอนาน ไม่เหมือนกับการใช้ Div ที่เมื่อโหลดเสร็จส่วนไหนก่อน ก็แสดงผลส่วนนั้นออกมาเลย

การใช้ Div ยัง ทำให้สามารถเปลี่ยนแปลง CSS ได้ง่ายกว่า และไม่เยิ่นเย้อเหมือน Table

นอกจากนี้ยังเพิ่มความสามารถในการเข้าถึงข้อมูลให้กับคนพิการทางสายตา ซึ่งจะอาศัยโปรแกรม Screen Readers อ่านเนื้อหาในเว็บให้ฟัง การใช้ Table ซ้อน Table อาจทำให้ Screen Readers อ่านข้อความผิดพลาดได้ แต่หากใช้ CSS เป็นตัวกำหนดรูปแบบ และ กำหนดเนื้อหาตัวหนังสือใน HTML เมื่อถอดตัว CSS ออกจาก HTML เอกสารก็จะแสดงผลไม่ต่างกับ Microsoft Word ที่อ่านง่ายขึ้น และถูกต้องยิ่งขึ้น

ตัวอย่างการจัด 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>

ผลลัพธ์

Web builder Tutorials
Main Menu HTML CSS XHTML JavaScript	แนะนำการสร้างเว็บไซต์ ตั้งแต่พื้นฐาน สอนเขียนเว็บเพจด้วย HTML, จัดตกแต่งรูปแบบการแสดงผลด้วย CSS และก้าวสู่การสร้างเว็บไซต์แบบมาตรฐานด้วย XHTML สุดท้ายเพิ่มลูกเล่นให้เว็บไซต์ของเราด้วย JavaScript
Copyright © 2009 enjoyday.net

ตังอย่างการจัด Layout Page ด้วย Table แบบแบ่งเป็น 3 คอลัมน์

<table style="width:100%">

<tr>
<td colspan="3" style="background-color:#09f; color:#fff">
<h1>Web builder Tutorials</h1>
</td>
</tr>

<tr valign="top">
<td style="background-color:#93C9FF; width:20%;text-align:top; ">
<b>Main Menu</b><br />
HTML<br />
CSS<br />
XHTML<br />
JavaScript
</td>
<td style="height:200px; text-align:top;">แนะนำการสร้างเว็บไซต์ ตั้งแต่พื้นฐาน สอนเขียนเว็บเพจด้วย HTML, จัดตกแต่งรูปแบบการแสดงผลด้วย CSS และก้าวสู่การสร้างเว็บไซต์แบบมาตรฐานด้วย XHTML สุดท้ายเพิ่มลูกเล่นให้เว็บไซต์ของเราด้วย JavaScript
</td>
<td style="background-color:#ffc; width:20%;text-align:top; ">
<b>Advertisment</b>
</td>
</tr>

<tr>
<td colspan="3" style="background-color:#09f; text-align:center; color:#fff">
Copyright © 2009 enjoyday.net
</td>
</tr>

</table>

ผลลัพธ์

Web builder Tutorials
Main Menu HTML CSS XHTML JavaScript	แนะนำการสร้างเว็บไซต์ ตั้งแต่พื้นฐาน สอนเขียนเว็บเพจด้วย HTML, จัดตกแต่งรูปแบบการแสดงผลด้วย CSS และก้าวสู่การสร้างเว็บไซต์แบบมาตรฐานด้วย XHTML สุดท้ายเพิ่มลูกเล่นให้เว็บไซต์ของเราด้วย JavaScript	Advertisment
Copyright © 2009 enjoyday.net

Media Types

2012-08-05T03:58:00.001-07:00

ในการกำหนดการแสดงผลหน้าตาเว็บเพจ บนสื่อประเภทต่างๆ เราสามารถกำหนด style ให้แตกต่างกันได้ เช่น ตอนที่เราเห็นบนหน้าจอ (screen) กับตอนที่สั่งพิมพ์ออกกระดาษ (print) ให้แสดงผลไม่เหมือนกัน

แล้วประเภทของสื่อมีอะไรบ้าง ...

Media Type

all - ใช้ในอุปกรณ์ทุกชนิด
aural - แสดงผลออกทางระบบช่วยอ่านออกเสียง
braille - แสดงผลออกทางเครื่องช่วยอ่านสำหรับคนตาบอด
embossed - แสดงผลออกทางเครื่องพิมพ์สำหรับคนตาบอด
handheld - แสดงผลออกทางจอภาพของเครื่องคอมพิวเตอร์ชนิดพกพา (handheld) ซึ่งมีขนาดเล็ก ไม่สามารถแสดงสีได้ (monochrome) และมีประสิทธิภาพในการรับส่งข้อมูลต่ำ
print - แสดงผลออกทางเครื่องพิมพ์
projection - แสดงผลออกทางจอภาพที่มีความต่างสี(contrast) และความสว่าง(brightness) ต่ำ เช่น จอภาพ LCD, การแสดงผลผ่านเครื่อง projector
screen - แสดงผลออกทางจอภาพของเครื่องคอมพิวเตอร์
tty - แสดงผลออกทางเทอร์มินัลชนิดตัวอักษรเท่านั้น เช่น โปรแกรม Lynx, เครื่องโทรพิมพ์
tv - แสดงผลออกทางจอภาพของเครื่องโทรทัศน์

หากมีมากกว่า 1 media ให้ใช้ comma คั่น

มาดูตัวอย่างการใช้งานกันค่ะ ให้ตอนที่เราเห็นเว็บเพจบนหน้าจอ ตัวอักษรมีขนาด 12px แต่ตอนที่เราสั่งพิมพ์ให้มีขนาด 50px และมีเส้นขีดคร่าตรงกลาง โดยทั้งตอนที่เห็นบนหน้าจอและเมื่อสั่งพิมพ์ให้เป็นตัวหนา่ทั้งคู่ เขียน style sheet กำหนดได้ดังนี้

ตัวอย่าง

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

ตัวอย่างลองเลือกเมนู File > Print Preview ... ดูว่า Enjoyday.net ด้านล่างนี้จะเปลี่ยนไปอย่างไร

Enjoyday.net

อีกตัวอย่างหนึ่งใช้สำหรับตอนสั่งพิมพ์ค่ะ อาจจะมีบางส่วนของเว็บเพจ เช่น banner และโฆษณาต่างๆ ที่เราไม่ต้องการให้พิมพ์ออกมา เพื่อประหยัดหมึกพิมพ์ เราก็สามารถกำหนดได้

ตัวอย่าง

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

ผลลัพธ์ลองเลือกเมนู File > Print Preview ... ดูว่า ข้อความข่างล่างนี้หายไปหรือไม่

ข้อความตรงนี้พิมพ์ออกมาตามปกติ

ข้อความตรงนี้ไม่ต้องพิมพ์ออกมา

Mouse cursor

2012-08-05T03:56:00.000-07:00

การกำหนด style ใ้ห้กับ Mouse cursor หากคุณใช้ browser Firefox ลักษณะของ Cursor ที่เห็นจะไม่เหมือนกับของ IE

การกำหนด 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+

ตัวอย่าง

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

ผลลัพธ์ลองเอาเมาส์เลื่อนที่ข้อความด้านล่างดูค่ะ

Help
My kitty cursor (สำหรับ IE)
My kitty cursor (สำหรับ Firefox, IE ก็ยังใช้ได้)

Scroll bar

2012-08-05T03:54:00.001-07:00

การกำหนด 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	สีพื้นด้านล่าง

ตัวอย่าง

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

ผลลัพธ์

ดูผลที่ Scroll bar ด้านขวาของหน้าต่าง IE window หน้านี้ จะเป็นสีน้ำเงินอ่อน

ส่วนไหนเป็นตรงไหน มาดูกันชัดๆ อีกที ที่ตัวอย่างนี้

ตัวอย่าง

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

ผลลัพธ์

1. HTNL
2. CSS
3. XHTML
4. JavaScript
5. SQL

ผลลัพธ์

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;

ผลลัพธ์

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;

ตัวอย่าง

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

ผลลัพธ์

Form

2012-08-05T03:51:00.007-07:00

เรื่องของ CSS ที่เกี่ยวกับ Form มี 2 ส่วน ส่วนแรก คือ การตกแต่ง Form Elements ด้วย style sheet และส่วนที่สอง คือ การทำ Form โดยไม่ใช้ Table หรือเรียกว่า Tableless Form

Form Elements
เราสามารถตกแต่ง ส่วนประกอบของ Form ได้แก่ inputbox, textarea, button เป็นต้น ให้มีสีสันที่สวยงามได้

ตัวอย่าง- Text box

<html>
<head>
<style type="text/css">
.textbox_gray {
color:#55555;
background-color:#FFFFFF;
border:1px solid #999999;
}

.textbox_yellow {
text-align:center;
color:#55555;
background-color:#FAFCD1;
border:1px solid #999999; 
}

.textbox_image{
color:#55555;
background-image: url(../images/bg.png);
border: 1px solid #999999;
}

.textbox_imgside {
font-family: Tahoma, "ms sans Serif";
font-size:12px;
color:#0033CC;
background-image: url(../images/mail.gif);
background-repeat:no-repeat;
background-position:left;
border: 1px solid #3366CC;
padding-left:16px;
}
</style>
</head>

<body>
<input type="text" size="30" value="enjoyday.net" /> <br><br>
<input type="text" size="30" class="textbox_gray" value="enjoyday.net" />
<br><br>
<input type="text" size="30" class="textbox_yellow" value="enjoyday.net" />
<br><br>
<input type="text" size="30" class="textbox_image" value="enjoyday.net" />
<br><br>
<input type="text" size="30" class="textbox_imgside" value="admin@enjoyday.net" />
</body>
</html>

ผลลัพธ์

ตัวอย่าง- Textarea

<html>
<head>
<style type="text/css">

.textarea1 {
scrollbar-arrow-color:#000;
scrollbar-face-color:#face00;
scrollbar-highlight-color:#fff;
scrollbar-3dlight-color:#000;
scrollbar-track-color:#fff;
scrollbar-shadow-color:#face00;
scrollbar-darkshadow-color:#000;
border:1px solid #000;
font-size:12px
}

.textarea2 {
scrollbar-arrow-color:#000;
scrollbar-face-color:#fff;
scrollbar-highlight-color:#fff;
scrollbar-3dlight-color:#000;
scrollbar-track-color:#fff;
scrollbar-shadow-color:#fff;
scrollbar-darkshadow-color:#000;
color:#000;
border:1px solid #000000;
font-size:12px
}

.textarea3 {
scrollbar-arrow-color:#add8e6;
scrollbar-face-color:#fff;
scrollbar-highlight-color:#fff;
scrollbar-3dlight-color:#add8e6;
scrollbar-track-color:#fff;
scrollbar-shadow-color:#fff;
scrollbar-darkshadow-color:#add8e6;
color:#197bff;
border:1px solid #add8e6;
font-size:12px
}

.textarea4 {
scrollbar-arrow-color:#ffb090;
scrollbar-face-color:#fff;
scrollbar-highlight-color:#fff;
scrollbar-3dlight-color:#ffb090;
scrollbar-track-color:#fff;
scrollbar-shadow-color:#fff;
scrollbar-darkshadow-color:#ffb090;
color:#ff4a19;
border:1px solid #ffb090;
font-size:12px
}
</style>
</head>
<body>
<textarea rows="4" cols="20" class="textarea1">
ข้อความของคุณค่ะ
.
.
.
.
</textarea>

<textarea rows="4" cols="20" class="textarea2">
ข้อความของคุณค่ะ
.
.
.
.
</textarea>

<br />

<textarea rows="4" cols="20" class="textarea3">
ข้อความของคุณค่ะ
.
.
.
.
</textarea>

<textarea rows="4" cols="20" class="textarea4">
ข้อความของคุณค่ะ
.
.
.
.
</textarea>


</body>
</html>

ผลลัพธ์

ตัวอย่าง- 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>

ผลลัพธ์

หัวข้อ

ตัวอย่าง- 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 ไปปรับปรุงเปลี่ยนแปลงต่อได้ค่ะ

ตัวอย่าง

<html>
<head>
<style type="text/css">

.cssform p{
width: 300px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px; /*width of left column containing the label elements*/
border-top: 1px dashed gray;
height: 1%;
}

.cssform label{
font-weight: bold;
float: left;
margin-left: -155px; /*width of left column*/
width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
width: 180px;
}

.cssform textarea{
width: 250px;
height: 150px;
}

/*.threepxfix class below:
Targets IE6- ONLY. Adds 3 pixel indent for multi-line form contents.
to account for 3 pixel bug: http://www.positioniseverything.net/explorer/threepxtest.html
*/

* html .threepxfix{
margin-left: 3px;
}

</style>
</head>

<body>
<form id="myform" class="cssform" action="">

<p>
<label for="user">Name</label>
<input type="text" id="user" value="" />
</p>

<p>
<label for="emailaddress">Email Address:</label>
<input type="text" id="emailaddress" value="" />
</p>

<p>
<label for="comments">Feedback:</label>
<textarea id="comments" rows="5" cols="25"></textarea>
</p>

<p>
<label for="comments">Sex:</label>
Male: <input type="radio" name="sex" /> Female: <input type="radio" name="sex" /><br />
</p>

<p>
<label for="comments">Hobbies:</label>
<input type="checkbox" name="hobby" /> Tennis<br />
<input type="checkbox" name="hobby" class="threepxfix" /> Reading <br />
<input type="checkbox" name="hobby" class="threepxfix" /> Basketball <br />
</p>

<p>
<label for="terms">Agree to Terms?</label>
<input type="checkbox" id="terms" class="boxes" />
</p>

<div style="margin-left: 150px;">
<input type="submit" value="Submit" /> <input type="reset" value="reset" />
</div>
</form>

</body>
</html>

ผลลัพธ์

อีกตัวอย่าง สวยๆ ค่ะ

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

ตัวอย่าง

<html>
<head>
<style type="text/css">

body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
width:400px;
padding:14px;
}

/* ----------- stylized ----------- */
#stylized{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}

</style>
</head>

<body>
<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="index.html">
<h1>Sign-up form</h1>
<p>This is the basic look of my form without table</p>

<label>Name
<span class="small">Add your name</span>
</label>
<input type="text" name="name" id="name" />

<label>Email
<span class="small">Add a valid address</span>
</label>
<input type="text" name="email" id="email" />

<label>Password
<span class="small">Min. size 6 chars</span>
</label>
<input type="text" name="password" id="password" />

<button type="submit">Sign-up</button>
<div class="spacer"></div>

</form>
</div>

</body>
</html>

ผลลัพธ์

Image

2012-08-05T03:47:00.011-07:00

เราสามารถตกแต่งภาพด้วย border และใช้ filter ให้ภาพดูโปร่งใส (Transparent)

สำหรับ browser IE จะใช้ propety filter:alpha(opacity=0-100)
ส่วน Firefox จะใช้ property opacity:0.0-1.0
ตัวเลขยิ่งน้อย ยิ่งดูโปร่งใส

ตัวอย่าง

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

ผลลัพธ์

ภาพปกติ

ภาพโปร่งใส 50%

เพิ่มลูกเล่นด้วย javascript (IE ใช้ this.filters.alpha.opacity=100 ส่วน Firefox ใช้ this.style.opacity=1)

ตัวอย่าง

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

ผลลัพธ์ลองเอา mouse เลื่อนบนภาพข้างล่างนี้

ตัวอย่าง

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

ผลลัพธ์ Opacity Border

เราสามารถที่จะนำ style ไปสร้างเป็น class เพื่อจะได้เรียกใช้งานซ้ำได้อย่างง่ายดาย เช่น class ที่จัดรูปให้่มีกรอบสีเทา และจัดชิดซ้าย เพื่อให้เราสามารถที่จะใส่ข้อความบรรยายด้านข้างได้

ตัวอย่าง

<html>
<head>
<style type="text/css">
.imgstyle {
float:left;
border:solid 1px #CCCCCC;
padding:5px;
margin-right:10px;
}
</style>
</head>

<body>
<div style="margin:5px"><img src="../images/jusmine.jpg" class="imgstyle" /><em>มะลิ</em> เป็นไม้ดอกสีขาวที่มีกลิ่นหอม สามารถนำมาใช้ประโยชน์ได้หลายอย่าง เช่น เก็บดอกมาร้อยเป็นพวงมาลัย ทำเป็นดอกไม้แห้ง หรือนำมาสกัดทำน้ำมันหอมระเหย
</div>
<div style="clear:both;"></div>

<div style="margin:5px"><img src="../images/rose.jpg" class="imgstyle" /><em>กุหลาบ</em> นับว่าเป็นไม้ดอกที่มีความงามยากที่ไม้ดอกอื่นจะเทียบเท่า จนได้รับชื่อว่าเป็น "ราชินีแห่งดอกไม้" (Queen of flower) กุหลาบมีมานานประมาณ 30 ล้านปีมาแล้ว
</div>
<div style="clear:both;"></div>
</body>
<html>

ผลลัพธ์

มะลิ เป็นไม้ดอกสีขาวที่มีกลิ่นหอม สามารถนำมาใช้ประโยชน์ได้หลายอย่าง เช่น เก็บดอกมาร้อยเป็นพวงมาลัย ทำเป็นดอกไม้แห้ง หรือนำมาสกัดทำน้ำมันหอมระเหย

กุหลาบ นับว่าเป็นไม้ดอกที่มีความงามยากที่ไม้ดอกอื่นจะเทียบเท่า จนได้รับชื่อว่าเป็น "ราชินีแห่งดอกไม้" (Queen of flower) กุหลาบมีมานานประมาณ 30 ล้านปีมาแล้ว

Positioning

2012-08-05T03:43:00.006-07:00

การจัดวางตำแหน่งวัตถุ

Property

Description

Values

top

ใช้กำหนดระยะของวัตถุ ว่าให้อยู่เหนือ หรือ ล่าง ขอบด้านบน

auto
%
length

bottom

ใช้กำหนดระยะของวัตถุ ว่าให้อยู่เหนือ หรือ ล่าง ขอบด้านล่าง

auto
%
length

left

ใช้กำหนดระยะของวัตถุ ว่าให้อยู่ขวา หรือ ซ้าย ของขอบด้านซ้าย

auto
%
length

right

ใช้กำหนดระยะของวัตถุ ว่าให้อยู่ขวา หรือ ซ้าย ของขอบด้านซ้าย

auto
%
length

position

ใช้กำหนดรูปแบบการจัดวางวัตถุในลักษณะต่างๆ

ทั้ง relative absolute และ fixed กำหนดตำแหน่งด้วยการใช้ property left, top, right, และ bottom

static
relative
absolute
fixed

Default

value	description
static	การจัดวางตามปกติที่เป็น default
relative	การจัดวางให้อยู่เหนือ หรือซ้อนบนวัตถุอื่นๆในเว็บเพจ โดยวัตถุที่ถูกกำหนดขึ้นมาก่อนจะอยู่ด้านล่าง และวัตถุที่กำหนดทีหลังจะอยู่ด้านบน และจะกำหนดตำแหน่งโดยนับจากจุดที่วัตถุนั้นๆอยู่
absolute	การจัดวางให้อยู่เหนือ หรือซ้อนบนวัตถุอื่นๆในเว็บเพจ โดยวัตถุที่ถูกกำหนดขึ้นมาก่อนจะอยู่ด้านล่าง และวัตถุที่กำหนดทีหลังจะอยู่ด้านบน และ่จะกำหนดตำแหน่งจากขอบของ container ที่บรรจุ วัตถุนั้นๆ
fixed	การจัดวางที่กำหนดตำแหน่งจากขอบของ Window นั้นๆ * ต้องกำหนดตำแหน่งทั้งในแนวตั้ง และแนวนอน * ถึงแม้เมื่อเลื่อน scroll bar วัตถุจะยังอยู่ในตำแหน่งที่กำหนด (IE7)

clip

ใช้กำหนดการตัดส่วนต่างๆของวัตถุที่ไม่ต้องการออกไป
rect (top, right, bottom, left)

auto
shape

Default

overflow

ใช้กำหนดว่าถ้าข้อมูลเกินขอบเขตที่กำหนดไว้ จะให้มีการจัดการอย่างไร

visible
hidden
scroll
auto

Default
ไม่แสดง
มี scroll bar เลื่อนดูได้
จะมี scroll bar เลื่อนดูได้

vertical-align

ใช้กำหนดการจัดวางแนวตั้ง

value	description
baseline	Default. The element is placed on the baseline of the parent element
sub	ตัวห้อย
super	ตัวยก
top	The top of the element is aligned with the top of the tallest element on the line
text-top	The top of the element is aligned with the top of the parent element's font
middle	The element is placed in the middle of the parent element
bottom	The bottom of the element is aligned with the lowest element on the line
text-bottom	The bottom of the element is aligned with the bottom of the parent element's font
length
%	Aligns the element in a % value of the "line-height" property. Negative values are allowed

z-index

ใช้กำหนดลำดับของวัตถุ Default z-index คือ 0
ถ้าต้องการให้อยู่ด้านล่างกว่า กำหนดเป็น -1
ถ้าต้องการให้อยู่ด้านบนกว่า กำหนดเป็น 1

auto
number

Default

ตัวอย่างposition: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>

ผลลัพธ์
นี่เป็นข้อความจัดวางตามปกติ
เลื่อนไปทางซ้าย 50px
เลื่อนไปทางซ้าย 50px
เลื่อนไปทางขวา 50px
เลื่อนไปทางขวา 50px
เลื่อนไปทางขวา 50px เลื่อนไปทางขวา 20px เลื่อนไปขึ้นบน 5px

ตัวอย่างposition: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>

ผลลัพธ์
นี่เป็นข้อความจัดวางตามปกติ
จัดให้ห่างจากขอบซ้าย 200px (ข้อความนี้จัดแบบ Absolute)จัดให้ห่างจากขอบขวา 200px (ข้อความนี้จัดแบบ Absolute)

ตัวอย่างposition: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> 

ผลลัพธ์
นี่เป็นข้อความจัดวางตามปกติ
จัดให้ห่างจากขอบซ้าย 200px (ข้อความนี้จัดแบบ Fixed)จัดให้ห่างจากขอบขวา 200px (ข้อความนี้จัดแบบ Fixed)

ตัวอย่งclip

<img src="../images/tea.jpg" />
<img src="../images/tea.jpg" style="position:absolute; clip:rect(0px 80px 80px 0px)" />

ผลลัพธ์

ตัวอย่างใส่ 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>

ผลลัพธ์

บทเรียน online
1. HTML
2. CSS
3. XHTML
4. JavaScript
5. SQL

ตัวอย่างvertical-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

ผลลัพํธ์

ดื่มชาเขียวเพื่อสุขภาพ (Default = baseline)

ดื่มชาเขียวเพื่อสุขภาพ (baseline)

ดื่มชาเขียวเพื่อสุขภาพ (text-top)

ดื่มชาเขียวเพื่อสุขภาพ (text-bottom)

ดื่มชาเขียวเพื่อสุขภาพ (top)

ดื่มชาเขียวเพื่อสุขภาพ (middle)

ดื่มชาเขียวเพื่อสุขภาพ (bottom)

H2O

42 = 16

ตัวอย่าง

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

ผลลัพธ์

Classification

2012-08-05T03:37:00.004-07:00

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

Property

Description

Values

float

ใช้กำหนดการจัดวางรูปภาพ หรือวัตถุที่ต้องการ ว่าจะให้อยู่ทางด้านใดของข้อความที่มีอยู่

left
right
none

display

ใช้กำหนดรูปแบบการแสดงของวัตถุ

value

description

none

ไม่แสดงวัตถุนั้น

block

แสดงเป็น block โดยขึ้นบรรทัดใหม่ก่อน

inline

เป็นค่า Default โดย element จะแสดงแบบ inline ไม่มีการขึ้นบรรทัดใหม่

list-item

แสดงเป็นลิสต์รายการ

run-in

The element will be displayed as block-level or inline element depending on context

compact

The element will be displayed as block-level or inline element depending on context

marker

table

The element will be displayed as a block table (like <table>), with a line break before and after the table

inline-table

The element will be displayed as an inline table (like <table>), with no line break before or after the table

table-row-group

The element will be displayed as a group of one or more rows (like <tbody>)

table-header-group

The element will be displayed as a group of one or more rows (like <thead>)

table-footer-group

The element will be displayed as a group of one or more rows (like <tfoot>)

table-row

The element will be displayed as a table row (like <tr>)

table-column-group

The element will be displayed as a group of one or more columns (like <colgroup>)

table-column

The element will be displayed as a column of cells (like <col>)

table-cell

The element will be displayed as a table cell (like <td> and <th>)

table-caption

The element will be displayed as a table caption (like <caption>

clear

ใช้ยกเลิกการจัดวางวัตถุกับข้อความ

left
right
both
none

visibility

กำหนดให้มีการแสดง หรือซ่อน วัตถุและข้อความที่ต้องการ

visible
hidden
collapse

ตัวอย่าง

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> 

ผลลัพธ์

Green Tea

มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่าชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยาของชาเขียวมาตั้งแต่ครั้งโบราณ โดยใช้ชาเขียวในการรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า ในหนังสือเรื่อง ไขความลับธรรมชาติสู่สุขภาพที่ดีกว่า นาดีน เทย์เลอร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว
ปัจจุบัน การวิจัยทางวิทยาศาสตร์ทั้งในโลกตะวันตกและตะวันออกพบว่า การดื่มชาเขียวมีผลอย่างชัดเจนต่อสุขภาพ เช่น ในปี 1994 วารสารของสถาบันมะเร็งแห่งชาติ ตีพิมพ์ผลการศึกษาที่แสดงว่า การดื่ม ชาเขียวช่วยลดอัตราการเสี่ยงของโรคมะเร็งหลอดอาหาร ในหมู่ชาวจีนทั้งหญิงชาย ได้ถึง เกือบ 60% เมื่อไม่นานมานี้ นักวิจัยจากมหาวิทยาลัยปูร์ดู สรุปว่า สารประกอบในชาเขียว ช่วยยับยั้งอัตราการเติบโตของเซลมะเร็งได้ นอกจากนั้น ยังมีการวิจัยที่แสดงว่า การดื่มชาเขียวช่วยลดระดับคลอเรสเตอรอลโดยรวมได้ และยังช่วยปรับอัตรา HDL ให้เป็น LDL

ตัวอย่าง

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> 

ผลลัพธ์

กรณีไม่มีการจัดรูปแบบ

กรณีกำหนดให้ display แบบ inline

ในหนังสือเรื่อง ไขความลับธรรมชาติสู่สุขภาพที่ดีกว่า นาดีน เทย์เลอร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว

ตัวอย่าง

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>

ผลลัพธ์

กรณีไม่มีการจัดรูปแบบ

กรณีกำหนดให้ display แบบ block

ตัวอย่าง

<font style="display:list-item">Jack</font>
<font style="display:list-item">Kate</font>

ผลลัพธ์JackKate

ตัวอย่างclear:left

<p><h4>กรณีไม่มีการจัดรูปแบบ</h4>
<img src="../images/tea.jpg">
มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่าชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยาของชาเขียวมาตั้งแต่ครั้งโบราณ โดยใช้ชาเขียวในการรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า ในหนังสือเรื่อง ไขความลับธรรมชาติสู่สุขภาพที่ดีกว่า นาดีน เทย์เลอร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว</p>

<p><h4>จัดให้รูปชิดซ้าย</h4>
<img src="../images/tea.jpg" style="float:left">
มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่าชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยาของชาเขียวมาตั้งแต่ครั้งโบราณ โดยใช้ชาเขียวในการรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า ในหนังสือเรื่อง ไขความลับธรรมชาติสู่สุขภาพที่ดีกว่า นาดีน เทย์เลอร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว
</p>

<p><h4>จัดให้รูปชิดซ้าย และให้ข้อความท่อนหลังขึ้นต้นใหม่ ใต้รูป (clear:left)</h4>
<img src="../images/tea.jpg" style="float:left">
มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่าชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยาของชาเขียวมาตั้งแต่ครั้งโบราณ โดยใช้ชาเขียวในการรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า 
<p style="clear:left">ในหนังสือเรื่อง ไขความลับธรรมชาติสู่สุขภาพที่ดีกว่า นาดีน เทย์เลอร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว</p>
</p>

ผลลัพธ์

กรณีไม่มีการจัดรูปแบบ

จัดให้รูปชิดซ้าย

จัดให้รูปชิดซ้าย และให้ข้อความท่อนหลังขึ้นต้นใหม่ ใต้รูป (clear:left)

ตัวอย่าง

clear: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>

ผลลัพธ์

จัดให้รูปชิดขวา

จัดให้รูปชิดขวา และให้ข้อความท่อนหลังขึ้นต้นใหม่ ใต้รูป (clear:right)

ตัวอย่าง

clear:both

<p><h4>จัดให้มีรูปชิดขวาและซ้าย</h4>
<img src="../images/tea.jpg" style="float:left">
<img src="../images/tea2.jpg" style="float:right">
มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่าชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยาของชาเขียวมาตั้งแต่ครั้งโบราณ โดยใช้ชาเขียวในการรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า ในหนังสือเรื่อง ไขความลับธรรมชาติสู่สุขภาพที่ดีกว่า นาดีน เทย์เลอร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว
</p>

<p><h4>จัดให้มีรูปชิดขวาและซ้าย และให้ข้อความท่อนหลังขึ้นต้นใหม่ ใต้รูป</h4>
(clear:left ได้แค่รูปด้านซ้าย)<br />
<img src="../images/tea.jpg" style="float:left">
<img src="../images/tea2.jpg" style="float:right">
มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่าชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยาของชาเขียวมาตั้งแต่ครั้งโบราณ โดยใช้ชาเขียวในการรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า
<p style="clear:left">ในหนังสือเรื่อง ไขความลับธรรมชาติสู่สุขภาพที่ดีกว่า นาดีน เทย์เลอร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว</p>
</p>

<p><h4>จัดให้มีรูปชิดขวาและซ้าย และให้ข้อความท่อนหลังขึ้นต้นใหม่ ใต้รูปทั้งสองด้าน (clear:both)</h4>
(ต้อง clear:right เพราะรูปด้านขวาสูงกว่ารูปด้านซ้าย หรือ clear:boht)<br /><br />
<img src="../images/tea.jpg" style="float:left">
<img src="../images/tea2.jpg" style="float:right">
มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่าชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยาของชาเขียวมาตั้งแต่ครั้งโบราณ โดยใช้ชาเขียวในการรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า 
<p style="clear:both">ในหนังสือเรื่อง ไขความลับธรรมชาติสู่สุขภาพที่ดีกว่า นาดีน เทย์เลอร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว</p>
</p>

ผลลัพธ์

จัดให้มีรูปชิดขวาและซ้าย

จัดให้มีรูปชิดขวาและซ้าย และให้ข้อความท่อนหลังขึ้นต้นใหม่ ใต้รูป

(clear:left ได้แค่รูปด้านซ้าย)
มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่าชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยาของชาเขียวมาตั้งแต่ครั้งโบราณ โดยใช้ชาเขียวในการรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า

จัดให้มีรูปชิดขวาและซ้าย และให้ข้อความท่อนหลังขึ้นต้นใหม่ ใต้รูปทั้งสองด้าน (clear:both)

(ต้อง clear:right เพราะรูปด้านขวาสูงกว่ารูปด้านซ้าย หรือ clear:boht)

มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่าชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยาของชาเขียวมาตั้งแต่ครั้งโบราณ โดยใช้ชาเขียวในการรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า

ตัวอย่าง

visibility

<h2 style="visibility:visible">Enjoyday.net</h2>
<h2 style="visibility:hidden">Enjoyday.net</h2>

ผลลัพธ์

สังเกตุ enjoyday.net บรรทัดที่ 2 จะมองไม่เห็น

Enjoyday.net

Link

2012-08-05T03:30:00.000-07:00

Property	Purpose
a:link	กำหนด style ให้กับ link ปกติที่ยังไม่เคยถูก click
a:visited	กำหนด style ให้กับ link ที่เคยถูกคลิกแล้ว
a:hover	กำหนด style ให้กับ link เมื่อเลื่อนเมาส์ไปอยู่เหนือ link
a:active	กำหนด style ให้กับ link ขณะถูกคลิก

ตัวอย่าง

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

ผลลัพธ์

ตัวอย่าง

<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">&laquo; First</a>
<a href="css_chapter14.html">&lsaquo; Prev</a>
<a href="css_chapter01.html">1</a>
<a href="css_chapter02.html">2</a>
<a href="css_chapter03.html">3</a>
<a href="css_chapter16.html">Next &rsaquo;</a>
<a href="css_chapter25.html">Last &raquo;</a>
</div>
<body>
</html>

ผลลัพธ์

Page : « First ‹ Prev 1 2 3 Next › Last »

Table

2012-08-05T03:28:00.003-07:00

ต้องใช้กับเว็บเบราเซอร์รุ่นใหม่ๆ เช่น IE6 เป็นต้นไป

*บาง property เมื่อทดสอบแล้วไม่เห็นผล

Property	Description	Values
table-layout	ใช้กำหนดความกว้างของตารางและคอลัมน์	automatic fixed	Default กว้างตามที่ำกำหนดเท่านั้น
caption-side	ใช้กำหนดตำแหน่งของชื่อตาราง	top bottom left right	Default
empty-cells	ใช้กำหนดว่าจะแสดง/ไม่แสดง เส้นขอบ เมื่อ cell นั้นไม่มีข้อความ (empty)	hide show	Default
border-spacing	ใช้กำหนดระยะระหว่างตาราง และขอบ แนวนอน และแนวตั้ง	length length	เช่น 2px 5px
border-collapse	ใช้กำหนดลักษณะเส้นขอบ	separate collapse	Default แยกเป็น 2 เส้น เป็นเส้นเดียว

ตัวอย่าง

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

ผผลลัพธ์

ตารางแสดงตัวเลข
1000000000000000000000000000	10000000

ตารางแสดงตัวเลข
1000000000000000000000000000	10000000

สังเกต ตารางที่สอง จะ fix ความกว้างของช่องตารางไว้ ทำให้แสดงข้อความไม่พอ นอกจากนี้มีการกำหนด cell ว่างให้แสดงด้วย และให้แสดงเส้นขอบรวมเป็นเส้นเดียว

ตัวอย่าง
ลองจัดรูปแบบอื่นๆ ให้กับตาราง โดยใช้ 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>

ผลลัพธ์

รหัสพนักงาน	ชื่อ	เงินเดือน
01	อำนาจ	30,000
02	สมชาย	25,000
03	วีระ	20,000

List

2012-08-05T03:25:00.005-07:00

Property	Description	Values
list-style-type	ใช้กำหนดลักษณะที่ใช้นำหน้าแต่ละรายการย่อย	none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha	disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha 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

ตัวอย่าง

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>

ผลลัพธ์

Enjoyday.net - Web builder Tutorial

HTML
CSS
XHTML
JavaScript
SQL

ตัวอย่าง

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>

ผลลัพธฺ์

Enjoyday.net - Web builder Tutorial

HTML
CSS
XHTML
JavaScript
SQL

ตัวอย่าง

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>

ลลลัพธ์

Enjoyday.net - Web builder Tutorial

HTML
CSS
XHTML
JavaScript
SQL

ตัววอย่าง

ประโยชน์ของ 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>

ผลลัพธ์

ประโยชน์ของ CSS

การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำได้ง่ายและรวดเร็ว
เมื่อ code ภายในเอกสาร HTML ลดลง ทำให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว
สามารถกำหนดรูปแบบการแสดงผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำให้เวลาแก้ไขหรือปรับปรุงทำได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML Tag ต่างๆ ทั่วทั้งเอกสาร

ตัวอย่าง

ประโยชน์ของ 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>

ผลลัพธ์

ประโยชน์ของ CSS

การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำได้ง่ายและรวดเร็ว
เมื่อ code ภายในเอกสาร HTML ลดลง ทำให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว
สามารถกำหนดรูปแบบการแสดงผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำให้เวลาแก้ไขหรือปรับปรุงทำได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML Tag ต่างๆ ทั่วทั้งเอกสาร

ตัวอย่าง กำหนด 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> 

ผลลัพธ์

ประโยชน์ของ CSS

การใช้ css ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำได้ง่ายและรวดเร็ว
เมื่อ code ภายในเอกสาร HTML ลดลง ทำให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว
สามารถกำหนดรูปแบบการแสดงผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำให้เวลาแก้ไขหรือปรับปรุงทำได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML Tag ต่างๆ ทั่วทั้งเอกสาร

Margin, Padding

2012-08-05T02:53:00.001-07:00

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

ตัวอย่าง

ถ้าไม่ได้ใช้้งาน margin และ padding

ข้อความข้างนอกด้านบน
<div style="border:20px solid #3399CC">
block นี้มี Border สีน้ำเงิน ขนาด 20px
ไม่ใช้งาน Margin และ Padding ลองมาดูกันว่าได้ผลเป็นอย่างไร
</div>
ข้อความข้างนอกด้านล่าง 

ผลลัพธ์

ข้อความข้างนอกด้านบน

block นี้มี Border สีน้ำเงิน ขนาด 20px ไม่ใช้งาน Margin และ Padding ลองมาดูกันว่าได้ผลเป็นอย่างไร

ข้อความข้างนอกด้านล่าง

ลองมาดูต่อว่า... ถ้านำ margin และ padding มาใช้งานจะเป็ฯอย่างไร

ตัวอย่าง

การใช้งาน 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 ด้านล่าง 

ผลลัพธ์

ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านบน

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

ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านล่าง

ถ้ายังงงๆ ว่าตรงไหนคือ margin และ padding อยู่ ให้ดูที่รูปนี้ค่ะ

ตัวอย่าง

การใช้งาน margin ที่แต่ละด้านไม่เท่ากัน

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

ผลลัพธ์

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

block นี้มี Border สีส้ม ขนาด 2px
มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 20px ทั้ง 4 ด้าน และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 10px 20px 30px 40px ซึ่งเป็น margin ของด้านบน ขวา ล่าง ซ้าย ตามลำดับ

ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 30x นี่คือ margin ด้านล่าง

ตัวอย่างการใช้งาน padding ที่แต่ละด้านไม่เท่ากัน

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

ผลลัพธ์

ความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านบน

block นี้มี Border สีเขียว ขนาด 2px
มี Padding ระยะห่างระหว่างขอบด้านใน กับ ข้อความใน block 10px 20px 30px 40px ซึ่งเป็น pading ของด้านบน ขวา ล่าง ซ้าย ตามลำดับ และมี Margin ระยะห่างระหว่างขอบด้านนอก กับ ข้อความที่อยู่ข้างนอก block 20px ทั้ง 4 ด้าน

ข้อความข้างนอกตรงนี้ห่างจากขอบด้านนอกของ block 20x นี่คือ margin ด้านล่าง

พิเศษ+++

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

ตัวอย่าง

การใช้งานตั้งแต่ Font Border Background Text และ Margin Padding

<html>
<head>

<style type="text/css">
.mixcode {
font: normal small-caps bold 16px Arial, Helvetica, sans-serif;
color:#FF0033;
text-align:center;
text-decoration:underline;
word-spacing:0.5em;
background-color:#FBEFFC;
border:2px dotted #FF6699;
margin:20px;
padding:20px
</style>

</head>

<body>
Hello all,
<div class="mixcode">Happy New Year 2009</div>
Hope you enjoy your stay here.
</body>
</html>

ผลลัพธ์

Hello all,

Happy New Year 2009

Hope you enjoy your stay here.

Border

2012-08-05T02:45:00.003-07:00

เราสามารถกำหนดลักษณะเส้นกรอบของ Element ต่างๆ ได้ เช่น <p>, <div> เป็นต้น

Property	Description	Values
border-width	ใช้กำหนดขนาดของกรอบของวัตถุทั้ง 4 ด้าน	thin medium thick length	เช่น 5px, 5pt
border-style	ใช้การกำหนดลักษณะของกรอบของวัตถุทั้ง 4 ด้าน	none hidden dotted dashed solid double groove ridge inset outset	dotted dashed solid double groove ridge inset outset
border-color	ใช้การกำหนดสีกรอบของวัตถุทั้ง 4 ด้าน *ต้องกำหนด style ก่อน	color
border	สามารถกำหนด property ให้กับ border ได้ในคำสั่งประกาศเดียว	border-width border-style border-color
border-top-width border-top-style border-top-color border-top	่ใช้กำหนดคุณสมบัติให้กับกรอบด้านบน
border-bottom-width border-bottom-style border-bottom-color border-bottom	ใช้กำหนดคุณสมบัติให้กับกรอบด้านล่าง
border-left-width border-left-style border-left-color border-left	ใช้กำหนดคุณสมบัติให้กับกรอบด้านซ้าย
border-right-width bordr-right-style border-right-color border-righte	ใช้กำหนดคุณสมบัติให้กับกรอบด้านขวา

ตัวอย่าง

กำหนดขนาด 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> 

ผลลัพธ์

กำหนดขนาดให้เส้นกรอบทั้ง 4 ด้านมีค่า 5px

ตัวลัพธ์

กำหนดขนาด border

<div class="output_box" style="border-width:1px 10px">
<br /><br /><br />
</div>

ผลลัพธ์

กำหนดขนาดให้เส้นกรอบ บน ล่าง เป็น 1px, และขนาดเส้นกรอบ ซ้าย ขวา เป็น 10px

ตัวอย่าง

กำหนดขนาด border

<div class="output_box" style="border-width:1px 10px 20px">
<br /><br /><br />
</div>

ผลลัพธ์

กำหนดขนาดให้เส้นกรอบ บน เป็น 1px, ขนาดเส้นกรอบ ซ้าย ขวา เป็น 10px และขนาดเส้นกรอบ ล่าง เป็น 20px

ตัวอย่าง

กำหนดขนาด 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>

ผลลัพธฺ์

กำหนดขนาดให้เส้นกรอบ 1px 10px 20px 30px เป็นขนาดของเส้นกรอบ บน ขวา ล่าง ซ้าย ตามลำดับ

ตัวอย่าง

ลักษณะ border

<div style="border-style:dashed dotted solid double; border-color:#FF6633">
<br /><br /><br /><br />
</div>

ผลลัพธ์

กำหนดลักษณะให้เส้นกรอบในคำสั่งเดียว dashed dotted solid double เป็นลักษณะของเส้นกรอบ บน ขวา ล่าง ซ้าย ตามลำดับ

ตัวอย่าง

กำหนดสี border

<div style="border-style:solid; border-color:red blue green black">
<br /> <br /> <br />
</div>

ผลลัพธ์

กำหนดสีให้เส้นกรอบในคำสั่งเดียว red blue green black เป็นสีของเส้นกรอบ บน ขวา ล่าง ซ้าย ตามลำดับ

ตัวอย่าง

กำหนด 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>

ผลลัพธ์

กำหนด property ให้กับ border ได้ในคำสั่งประกาศเดียว

Background

2012-08-05T02:38:00.002-07:00

เราสามารถกำหนดลักษณะพื้นหลังของ Element ต่างๆ เช่น <body>, <table>, <p>, <h1>, <h2>, <div> เป็นต้น

Property	Description	Values
background-attachment	ใช้กำหนดว่าต้องการให้ภาพพื้นหลังนั้นอยู่กับที่ หรือว่าเลื่อนไปตาม Scroll Bar	fixed scroll	fix อยู่กับที่ เลื่อนตาม Scroll Bar
background-color	ใช้กำหนดทั้งสี พื้นหลังของเว็บเพจ หรือ ตาราง	color-rgb color-hex color-name transparent	รหัสสี ชื่อสี
background-image	ใช้กำหนดรูปภาพ ให้พื้นหลังของเว็บเพจ หรือตาราง	url ของรูป	เช่น url(images/bg.jpg)
background-position	ใช้กำหนดตำแหน่งการจัดวางรูปภาพพื้นหลัง	top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos
background-repeat	กำหนดรูปภาพพื้นหลังว่าต้องการให้มีการเรียงต่อรูปภาพหรือไม่	repeat repeat-x repeat-y no-repeat	ไม่ให้มีการวางต่อรูปภาพ วางต่อรูปภาพแนวนอน วางต่อรูปภาพแนวตั้ง วางต่อรูปภาพทั้งแนวนอนและตั้ง
background	เราสามารถกำหนด property ให้กับ background ได้ในคำสั่งประกาศเดียว	background-color background-image background-repeat background-attachment background-position

ตัวอย่าง

Background เป็นรูปอยู่ด้านบน ขวา ไม่ repeat

ตัวอย่าง

ตัวอย่าง

Background เป็นรูปอยู่ตรงกลาง ไม่ repeat

<div style="background-attachment:scroll; background-image:url(../images/bg2.gif); background-position:center; background-repeat:no-repeat">

<br /><br /><br /><br />

</div>

ผลลัพธ์

ตัวอย่าง Background เป็นรูปอยู่ตรงกลาง repeart แนวนอน

<div style="background-attachment:scroll; background-image:url(../images/bg2.gif); background-position:center; background-repeat:repeat-x">

<br /><br />Background เป็นรูปอยู่ตรงกลาง repeart แนวนอน<br /><br />

</div> 

ผลลัพธ์

Background เป็นรูปอยู่ตรงกลาง repeart แนวนอน

ตัวอย่าง

Background เป็นรูปอยู่ตรงกลาง repeart แนวตั้ง

<div style="background-attachment:scroll; background-image:url(../images/bg2.gif); background-position:center; background-repeat:repeat-y">

<br /><br />Background เป็นรูปอยู่ตรงกลาง repeart แนวตั้ง<br /><br />

</div>

ผลลัพธ์

Background เป็นรูปอยู่ตรงกลาง repeart แนวตั้ง

ตัวอย่าง

Background เป็นรูป repeart ทั้งแนวนอน และแนวตั้ง

<div style="background-image:url(../images/bg2.gif); background-repeat:repeat">

<br /><br />Enjoyday.net<br /><br />

</div>

ผลลัพธ์

Enjoyday.net

ตัวอย่าง
Background เป็นพื้นสีฟ้า

<div class="output_box" style="background-color:#D7EBFF">

<br /><br />Enjoyday.net<br /><br />

</div>

ผลลัพธ์

Enjoyday.net

ตัวอย่าง
Background เป็นรูป Fix

<textarea style="background-image:url(../images/bg1.gif); background-attachment:fixed; width:300px " rows="3">สวัสดีค่ะ

นี่เป็น Background แบบ Fix

รูปจะไม่เลือนไปตาม Scroll Bar ค่ะ

.

.

.

.

</textarea>

ผลลัพธ์

ตัวอย่าง
Background เป็นรูปไม่ Fix เลื่อนตาม Scroll Bar

<textarea style="background-image:url(../images/bg1.gif); background-attachment:scroll; width:300px" rows="3">สวัสดีค่ะ

นี่เป็น Background แบบไม่ Fix

รูปจะเลือนไปตาม Scroll Bar ค่ะ

.

.

.

.

</textarea>

ผลลัพธ์

Text

2012-08-05T01:55:00.001-07:00

เราสามารถกำหนดรูปแบบให้ข้อความ เช่น ความสูงของบรรทัด, ตำแหน่งการจัดวางข้อความ, การขีดเส้นใต้, การกำหนดตัวพิมพ์เล็กพิมพ์ใหญ่ และอื่นๆ ผ่าน Property ต่างๆ ดังนี้

Property	Description	Values
color	ใช้กำหนดสี	สี	red #000099
direction	ใช้กำหนดทิศทางของ text (IE6)	ltr rtl	ซ้ายไปขวา ขวาไปซ้าย
line-height	ใช้กำหนดความสูงของบรรทัด ซึ่งจะนับรวมขอบด้านบนและล่างของตัวอักษรด้วย	normal number (pt) %	normal ความสูง 15pt ความสูง 150%
letter-spacing	ใช้กำหนดระยะห่าง ระหว่างตัวอักษรแต่ละตัว	normal number (cm)	normal -0.02cm 0.2cm
text-align	ใช้กำหนดรูปแบบการจัดคำ	left center right justify	left center right justify
text-decoration	ใช้กำหนดเส้นให้กับตัวอักษรในลักษณะต่างๆ	none underline overline line-through blink	none ขีดเส้นใต้ เส้นเหนือตัวอักษร ~~เส้นขีดทับตัวอักษร~~ ตัวอักษรกระพริบ *IE ใช้ไม่ได้
text-indent	ใช้กำหนดขนาดของย่อหน้า ในบรรทัดแรกของย่อหน้านั้นๆ	number (in) %	กำหนดขนาดของย่อหน้า 0.3 นิ้ว กำหนดขนาดของย่อหน้า 5% (ถ้ากำหนด 50% จะได้กึ่งกลางหน้าจอพอดี )
text-transform	ใช้แปลงตัวอักษรให้เป็นตัวพิมพ์เล็ก หรือ พิมพ์ใหญ่	uppercase lowercase capitalize	UPPERCASE แปลงเป็นพิมพ์ใหญ่ lowercase แปลงเป็นพิมพ์เล็ก Capitalize แปลงพิมพใหญ่เฉพาะตัวแรกของคำ
white-space	ใช้กำหนดให้ หรือ ไม่ให้มีการขึ้นบรรทัดใหม่	normal nowrap	ให้มีการตัดคำขึ้นบรรทัดใหม่ตามปกติ ไม่ให้มีการตัดคำขึ้นบรรทัดใหม่
word-spacing	ใช้กำหนดกำหนดระยะห่าง ระหว่างแต่ละคำ (IE6)	normal number (em)	normal - Happy new year 1em - Happy new year

จาก Property ต่างๆ ด้านบน ลองนำมาใช้จัดรูปแบบให้กับข้อความกันค่ะ

ตัวอย่าง

<p style="color:green; text-indent:1cm; text-align:justify;">
<span style="text-decoration:underline">CSS</span>
ย่อมาจาก Cascading Style Sheet เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ และถูกกำหนดมาตรฐานโดย W3C (World Wide Web Consortium) เช่นเดียวกับ HTML และ XHTML ใช้สำหรับตกแต่งเอกสาร HTML/ XHTM ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการ ด้วยการกำหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML </p>

ผลลัพธ์

CSS ย่อมาจาก Cascading Style Sheet เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ และถูกกำหนดมาตรฐานโดย W3C (World Wide Web Consortium) เช่นเดียวกับ HTML และ XHTML ใช้สำหรับตกแต่งเอกสาร HTML/ XHTM ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการ ด้วยการกำหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML

ตัวอย่าง

<html>
<head>
<style type="text/css">
.p1 {
color:#FF0033;
line-height:18pt;
letter-spacing:0.05cm;
text-decoration:overline;
text-indent:0.5in;
text-transform:capitalize;
white-space:normal;
word-spacing:0.5em;
}
</style>
</head>
<body>
<p class="p1">good moring teacher, how are you today?</p>
</body>
</html>

ผลลัพธ์

Good Moring Teacher, How Are You Today?

Font

2012-08-05T01:51:00.001-07:00

การกำหนดลักษณะให้ตัวอักษร ใน 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	ใช้กำหนดขนาดของตัวอักษร ที่จะให้แสดงผล	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

ตัวอย่าง

<p style="font-family:AngsanaUPC; font-size:16pt; color:green">
ในแต่ละวันร่างกายของมนุษย์เราต้องการพลังงานจากอาหารเพื่อนำไปใช้ในกิจกรรม
ต่าง ๆ ในปริมาณที่แตกต่างกัน ซึ่งพลังงานที่ใช้ในกิจกรรมแต่ละอย่าง
แตกต่างกันขึ้นอยู่กับเพศ วัย สภาพร่างกาย และกิจกรรมของแต่ละบุคคล
</p>

ผลลัพธ์

ในแต่ละวันร่างกายของมนุษย์เราต้องการพลังงานจากอาหารเพื่อนำไปใช้ในกิจกรรม
ต่าง ๆ ในปริมาณที่แตกต่างกัน ซึ่งพลังงานที่ใช้ในกิจกรรมแต่ละอย่าง
แตกต่างกันขึ้นอยู่กับเพศ วัย สภาพร่างกาย และกิจกรรมของแต่ละบุคคล

ตัวอย่าง

<p style="font: normal small-caps bold 16px sans-serif, Arial; color:#FF0033">Love me Love my dog</p>

ผลลัพธ์

Love me Love my dog