รับทำเว็บไซต์ครบวงจร
เลือกภาษา Thai English     facebook
รายการหลัก



บทความ


Page Ranking Tool

Pseudo-element


สอน CSS
> Pseudo-element


บทความ CSS เกือบทั้งหมดได้นำมาจาก http://www.enjoyday.net/webtutorial/css

เป็น selector กลุ่มที่น่าสนใจที่จัดรูปแบบการแสดงผลโดยขึ้นกับสถานะ หรือเงื่อนไข เช่น เฉพาะอักษรตัวแรกใน <p> เท่านั้นที่เป็นตัวอักษรสีแดงตัวใหญ่ เป็นต้น 

selector:pseudo-element {property: value}

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

Pseudo-elementPurpose
:first-letterกำหนด style ให้ตัวอักษรตัวแรกของข้อความ
:first-lineกำหนด style ให้กับข้อความบรรทัดแรก
:beforeInserts some content before the content of an element
:afterInserts some content after the content of an element



The :first-letter Pseudo-element

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

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

Enjoyday.net


หรือ จะเขียน Pseudo-element กับ CSS Classes ก็ได้ 
ถ้าต้องการระบุให้เฉพาะบาง paragraph เท่านั้นที่แสดงผล เขียนได้ดังนี้
p.article:first-letter {color:#ff0000}

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

Enjoyday.net

Enjoyday.net





The :first-line Pseudo-element

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

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

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

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




Multiple Pseudo-elements

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

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

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




CSS2 - The :before Pseudo-element

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

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

This is a header




CSS2 - The :after Pseudo-element

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

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

This is a header




Short URL click!
<< กลับคืน : เข้าชม 8,223 ครั้ง : ขึ้นไปด้านบน

รับทำเว็บไซต์ รับสร้างเว็บไซต์ รับออกแบบเว็บ รับเขียนเว็บ รับสอนทำเว็บ รับเช่า hosting รับเช่าพื้นที่เว็บไซต์ จดชื่อเว็บ รับโปรโมทเว็บไซต์ รับดูแลเว็บ SiteMap
สปริงเกอร์http://www.xn--22c2c4blb9n.xn--o3cw4h/