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

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

Property

Description

Values

float

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

left
right
none

display

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

value

description

none

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

block

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

inline

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

list-item

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

run-in

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

compact

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

marker

table

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

inline-table

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

table-row-group

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

table-header-group

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

table-footer-group

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

table-row

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

table-column-group

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

table-column

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

table-cell

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

table-caption

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

clear

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

left
right
both
none

visibility

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

visible
hidden
collapse

ตัวอย่าง

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 จะมองไม่เห็น

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

ads by google

วันอาทิตย์ที่ 5 สิงหาคม พ.ศ. 2555

Classification

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

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

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

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

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

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

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

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

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

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

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

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

Enjoyday.net