การเพิ่มลูกเล่นพิเศษ
คือการแสดงผลแท็กที่มีลักษณะที่แตกต่างออกไปจากรูปแบบธรรมดา
หรือซ่อนแท็ก หรือเปลี่ยนตัวชี้เมาส์แท็ก
display:
กำหนดรูปแบบการแสดงผล
ค่าที่กำหนดได้มีดังนี้
ค่า
|
ความหมาย
|
none
|
ซ่อนแท็กนั้น
|
block
|
แสดงแท็กแบบเป็นบล็อก
คือจะขึ้นบรรทัดใหม่ทั้งก่อนเริ่มแท็กและหลังจบแท็ก
|
inline
|
แสดงแท็กเหมือนอยู่ในบรรทัดเดียวกัน
คือ ไม่มีการขึ้นบรรทัดใหม่ทั้งก่อนเริ่มแท็กและหลังจบแท็ก
|
list-item
|
แสดงแท็กเป็นรายการ
คือเปลี่ยนแท็กให้แสดงผลเหมือนแท็ก <il>
|
run-in
|
แสดงแท็กแบบ
block
หรือ in-line
ขึ้นกับสภาพแวดล้อม
|
compact
|
แสดงแท็กแบบ block หรือ in-line ขึ้นกับสภาพแวดล้อม
|
table
|
แสดงแท็กแบบเป็นตาราง คือเปลี่ยนแท็กให้แสดงผลเหมือนแท็ก <table>
|
inline-table
|
แสดงแท็กนั้นแบบเป็นเป็นตาราง คือเปลี่ยนแท็กนั้นให้แสดงผลเป็นแบบตาราง แต่ไม่มีการขึ้นบรรทัดใหม่ทั้งก่อนเริ่มแท็กและหลังจบแท็ก
|
table-row-group
|
เปลี่ยนแท็กให้แสดงผลเหมือนแท็ก <tbody>
|
table-header-group
|
เปลี่ยนแท็กให้แสดงผลเหมือนแท็ก <thead>
|
table-footer-group
|
เปลี่ยนแท็กให้แสดงผลเหมือนแท็ก <tfoot>
|
table-row
|
เปลี่ยนแท็กให้แสดงผลเหมือนแท็ก
<tr>
|
table-column-group
|
เปลี่ยนแท็กให้แสดงผลเหมือนแท็ก
<colgroup>
|
table-column
|
เปลี่ยนแท็กให้แสดงผลเหมือนแท็ก
<col>
|
table-cell
|
เปลี่ยนแท็กให้แสดงผลเหมือนแท็ก
<td>
และ <th>
|
table-caption
|
เปลี่ยนแท็กให้แสดงผลเหมือนแท็ก
<caption>
|
specific01.htm
<html><head>
<style type="text/css">
p
{ display:inline }
div { display:none }
li { display:inline }
a
{ width:6em; padding:0.2em 0.6em; text-decoration:none; color:white;
background-color:purple; border-right;1px solid white }
a:hover {background-color:#ff3300}
</style></head>
<body>
<p>A display property </p>
<p>with a value of "inline".</p>
<div>A display property with a value of
"none".</div>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
</body></html>
จากภาพ สีที่แตกต่างคือสีที่เอาเมาส์ไปวางค่ะ ^^
float:
ใช้กำหนดข้อความหรือภาพให้ลอยอยู่เหนือวัตถุอื่น
โดยวัตถุจะลอยไม่บังข้อมูลที่ด้านล่าง
เพราะข้อมูลเมื่อถึงขอบเขตพื้นที่วัตถุลอยอยู่ จะเลี่ยงขึ้นบรรทัดใหม่ทันที
ค่าที่กำหนดได้ คือ left (ให้วัตถุลอยไปทางซ้าย), right (ให้วัตถุลอยอยู่ข้างขวา), none (วัตถุไม่ลอยเลย ให้แสดงผลก่อนหลังเหมือนปกติ)
specific02.htm
<html><head>
<style type="text/css">
div {
float:right; margin:0px 0px 20px 20px; padding:15px; border:1px solid black;
text-align:center;}
</style></head>
<body>
<div>
<img scr="picture/img003.gif" width="100"
height="80"><br>Thailand</div>
<p>
Thailand is so beautiful. Thailand is so beautiful. Thailand is so
beautiful.
Thailand is so beautiful. Thailand is so
beautiful. Thailand is so beautiful.
Thailand is so beautiful. Thailand
is so beautiful. Thailand is so beautiful.
Thailand is so beautiful. Thailand
is so beautiful. Thailand is so beautiful.
Thailand is so beautiful. Thailand
is so beautiful. Thailand is so beautiful.
Thailand is so beautiful. Thailand
is so beautiful. Thailand is so beautiful.
Thailand is so beautiful. Thailand
is so beautiful. Thailand is so beautiful.
Thailand is so beautiful. Thailand
is so beautiful. Thailand is so beautiful.
</p>
</body></html>
clear:
เป็นคุณสมบัติไม่ให้วัตถุลอย
(floating
element) กำหนดค่าได้ดังนี้ left
(ไม่อนุญาติให้ลอยทางด้านซ้าย),
right (ไม่อนุญาติลอยทางด้านขวา),
both (ไม่อนุญาติให้ลอยทั้ง 2 ด้าน) และ none (อนุญาติให้ลอยได้ทั้ง 2 ด้าน)
specific03.htm
<html><head>
<style type="text/css">
span {float:left; width:0.7em; font-size:400%; font-family:algerian,
courier;}
</style>
</head><body>
<span>T</span><p>hailand is so beautiful. Thailand is
so beautiful.
Thailand is so
beautiful. Thailand is so beautiful. Thailand is so beautiful.
Thailand is so beautiful. Thailand is so
beautiful. Thailand is so beautiful.
Thailand is so beautiful. Thailand is so
beautiful. Thailand is so beautiful.
Thailand is so beautiful. Thailand is so
beautiful. Thailand is so beautiful.
Thailand is so beautiful.
</p>
<span>T</span><p
style="clear:left">hailand is so beautiful.
Thailand is so beautiful. Thailand is so
beautiful. Thailand is
so beautiful. Thailand is so beautiful. Thailand is so
beautiful.
</p>
</body></html>
visibility:
ใช้ซ่อนหรือแสดงข้อมูล
ค่าที่เป็นไปได้คือ visible (แสดงข้อมูลปกติ), hidden (ซ่อนข้อมูล ต่างจาก display:none คือ display:none จะไม่แสดงแท็กนั้นเลย แต่ visibility:hidden จะแสดงแท็กนั้น แต่เราจะเห็นเป็นพื้นที่ว่าง),
collapse (ยุบข้อมูล
จะใช้กับแถวหรือคอลัมน์ในตาราง คือถ้าแถวหรือคอลัมน์ไม่มีข้อมูล ก็จะถูกยุบหายไป
แต่ถ้ามีข้อมูลก็จะแสดงผลปกติ
specific04.htm
<table><col
width="130">
<tr><td colspan="2">Choose
"display:none"</td></tr>
<tr
style="display:none"><td>none</td><td>none</td></tr>
<tr><td colspan="2">Choose
"visibility:hidden"</td></tr>
<tr
style="visibility:hidden"><td>hidden</td><td>hidden</td></tr>
<tr><td colspan="2">Choose
"visibility:collapse"</td></tr>
<tr
style="visibility:collapse"><td></td><td></td></tr>
<tr
style="visibility:collapse"><td></td><td>collapse</td></tr>
<tr
style="visibility:collapse"><td>collapse</td><td>collapse</td></tr>
</table>
จากตัวอย่าง
บรรทัดที่หายไป ใช้ display:none ถ้าใช้ "visibility:hidden" จะยังเห็นแถวแต่ไม่เห็นข้อมูล ถ้าใช้ "visibility:collapse"
ใน 3 แถวสุดท้ายจะเพียงแถวเดียวที่หายไป คือแถวที่ไม่มีข้อมูล
cursor:
ใช้เปลียนตัวชี้เมาส์ให้เป็นรูปต่างๆ
ดังนี้คือ default, auto, crosshair, pointer, move, e-resize,
ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text,
wait และ help
specific05.htm
<span
style="cursor:auto">Auto</span><br>
<span
style="cursor:crosshair">Crosshair</span><br>
<span
style="cursor:default">Default</span><br>
<span
style="cursor:pointer">Pointrt</span><br>
<span
style="cursor:move">Move</span><br>
<span
style="cursor:e-resize">e-resize</span><br>
<span
style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span
style="cursor:n-resize">n-resize</span><br>
<span
style="cursor:se-resize">se-resize</span><br>
<span
style="cursor:sw-resize">sw-resize</span><br>
<span
style="cursor:s-resize">s-resize</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span
style="cursor:text">text</span><br>
<span
style="cursor:wait">wait</span><br>
<span
style="cursor:help">help</span><br>
จากภาพหากเอาเมาส์ไปวางตามตัวอักษรข้างบน รูปของเมาส์ก็จะเปลี่ยนไปตามความหมายของแต่ละคำค่ะ ^^
ไม่มีความคิดเห็น:
แสดงความคิดเห็น