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

Example float
<html>
<head>
<style type=”text/css”>
.img1 {
float:right;
width:120px;
margin:0 0 15px 20px;
padding:15px;
border:1px solid black;
text-align:center;
}
</style>
</head>

<body>
<div class=”img1″>
<img src=”../images/tea.jpg” /><br />Green Tea
</div>
<p> มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่าชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยาของชาเขียวมาตั้งแต่ครั้งโบราณ โดยใช้ชาเขียวในการรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า ในหนังสือเรื่อง ไขความลับธรรมชาติสู่สุขภาพที่ดีกว่า นาดีน เทย์เลอร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว </p>
<p>ปัจจุบัน การวิจัยทางวิทยาศาสตร์ทั้งในโลกตะวันตกและตะวันออกพบว่า การดื่มชาเขียวมีผลอย่างชัดเจนต่อสุขภาพ เช่น ในปี 1994 วารสารของสถาบันมะเร็งแห่งชาติ ตีพิมพ์ผลการศึกษาที่แสดงว่า การดื่ม ชาเขียวช่วยลดอัตราการเสี่ยงของโรคมะเร็งหลอดอาหาร ในหมู่ชาวจีนทั้งหญิงชาย ได้ถึง เกือบ 60% เมื่อไม่นานมานี้ นักวิจัยจากมหาวิทยาลัยปูร์ดู สรุปว่า สารประกอบในชาเขียว ช่วยยับยั้งอัตราการเติบโตของเซลมะเร็งได้ นอกจากนั้น ยังมีการวิจัยที่แสดงว่า การดื่มชาเขียวช่วยลดระดับคลอเรสเตอรอลโดยรวมได้ และยังช่วยปรับอัตรา HDL ให้เป็น LDL</p>
</body>
<html>
Output

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

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

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

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

มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่าชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยาของชาเขียวมาตั้งแต่ครั้งโบราณ โดยใช้ชาเขียวในการรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า ในหนังสือเรื่อง ไขความลับธรรมชาติสู่สุขภาพที่ดีกว่า นาดีน เทย์เลอร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว
Example display:block (<span> ปกติจะไม่บรรทัดใหม่)
<h4>กรณีไม่มีการจัดรูปแบบ</h4>
<span>มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่าชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยาของชาเขียวมาตั้งแต่ครั้งโบราณ โดยใช้ชาเขียวในการรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า </span>
<span>ในหนังสือเรื่อง ไขความลับธรรมชาติสู่สุขภาพที่ดีกว่า นาดีน เทย์เลอร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว </span><br />

<h4>กรณีกำหนดให้ display แบบ block</h4>
<span style=”display:block”>มีอาหารหรือเครื่องดื่มอะไรที่จะดีต่อสุขภาพเท่าชาเขียวบ้าง ชาวจีนรู้เรื่องประโยชน์ทางยาของชาเขียวมาตั้งแต่ครั้งโบราณ โดยใช้ชาเขียวในการรักษาตั้งแต่โรคปวดศีรษะไปจนถึงโรคซึมเศร้า </span>
<span style=”display:block”>ในหนังสือเรื่อง ไขความลับธรรมชาติสู่สุขภาพที่ดีกว่า นาดีน เทย์เลอร์ กล่าวว่า มีการใช้ชาเขียวเป็นยาในประเทศจีนเป็นเวลานานอย่างน้อย 4,000 ปีมาแล้ว </span>
Output
กรณีไม่มีการจัดรูปแบบ

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

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

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

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

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

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

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

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

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

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

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

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

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

Examplevisibility
<h2 style=”visibility:visible”>Enjoyday.net</h2>
<h2 style=”visibility:hidden”>Enjoyday.net</h2>
Output สังเกตุ enjoyday.net บรรทัดที่ 2 จะมองไม่เห็น
Enjoyday.net

หน้าแรก » ข่าวสาร » กำหนด Classification ใน CSS

เรามีทีมงานผู้เชี่ยวชาญที่มีประสบการณ์ด้านเว็บไซต์

Call

E-mail

Location