เรียน...พี่น้องชาว Dexmore
สือเนื่องจากกระทู้
การประกาศ CSS ในเอกสารแบบต่างๆ เราได้ทำความรู้จักในเรื่องของการประกาศ css ทั้ง 3 แบบ คือ Inline, Embedded, และ External เป็นที่เรียบร้อยแล้ว ในกระทู้นี้เราจะมาศึกษาเกี่ยวกับลำดับความสำคัญ พร้อมทั้งการแก้ปัญหากันบ้าง
ลำดับความสำคัญInline > Embedded > External (Link > Import)
ทดสอบปัญหาขั้นแรกสร้างไฟล์ "dexmore.css" โดยมีโค๊ดคำสั่งดังนี้
p { font-family : Ms sans serif; font-size : 14; color : red; }
span { font-family : Ms sans serif; font-size : 14; color : blue; }
สร้างไฟล์เอกสาร .html ชื่อ "dexmore.html" จากนั้นใช้วิธีประกาศ css แบบ Link
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><title>DexMore</title>
<link rel = "stylesheet" href = "dexmore.css" type = "text/css" />
</head>
<body>
<center>
<p>ยินดีต้อนรับเข้าสู่เด็กมอร์ : <span>ขอบคุณสำหรับน้ำใจที่แบ่งปัน</span></p>
</center>
</body>
</html>
จะเห็นว่าตัวอักษรที่อยู่ในแท๊ก <p> </p> จะเป็นสีแดง อยู่ในแท๊ก <span> </span> จะเป็นสีน้ำเงิน ตามที่เรากำหนดไว้ในไฟล์ "dexmore.css" จากนั้นทดลองประกาศแบบ Embebded ในไฟล์ "dexmore.html" โดยจะกำหนดเฉพาะแท๊ก <span> ให้เป็นสีดำ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><title>DexMore</title>
<link rel = "stylesheet" href = "dexmore.css" type = "text/css" />
<style type = "text/css">
<!--
span { font-family : Ms sans serif; font-size : 14; color : black; }
-->
</style>
</head>
<body>
<center>
<p>ยินดีต้อนรับเข้าสู่เด็กมอร์ : <span>ขอบคุณสำหรับน้ำใจที่แบ่งปัน</span></p>
</center>
</body>
</html>
เมื่อเปิดไฟล์ "dexmore.html" อีกครั้งจะพบว่าข้อความในส่วนของ <span> ได้กลายเป็นสีดำแล้ว
จากนั้นทดลองประกาศ css แบบ Inline ให้กับแท๊ก <span> โดยกำหนดข้อความให้เป็นสีเขียว
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><title>DexMore</title>
<link rel = "stylesheet" href = "dexmore.css" type = "text/css" />
<style type = "text/css">
<!--
span { font-family : Ms sans serif; font-size : 14; color : black; }
-->
</style>
</head>
<body>
<center>
<p>ยินดีต้อนรับเข้าสู่เด็กมอร์ : <span style = "color : green;">ขอบคุณสำหรับน้ำใจที่แบ่งปัน</span></p>
</center>
</body>
</html>
เมื่อเปิดไฟล์ "dexmore.html" อีกครั้งจะพบว่าข้อความในแท๊ก <span> เป็นสีเขียวแล้ว
การใช้งาน !importantคำสั่ง !important จะใช้สำหรับกำหนดสิ่งที่ตายตัว ซึ่งมีรูปแบบดังนี้
html tag {Property : Value !important;}
ตัวอย่างปรับตัวอักษรในแท๊ก <span> ให้มีขนาด 20 เท่านั้น
ไฟล์ dexmore.css
span { font-family : Ms sans serif; font-size : 20 !important; color : pink; }
ไฟล์ dexmore.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><title>DexMore</title>
<link rel = "stylesheet" href = "dexmore.css" type = "text/css" />
<style type = "text/css">
<!--
span { font-family : Ms sans serif; font-size : 14; color : black; }
-->
</style>
</head>
<body>
<center>
<p>ยินดีต้อนรับเข้าสู่เด็กมอร์ : <span style = "color : green;">ขอบคุณสำหรับน้ำใจที่แบ่งปัน</span></p>
</center>
</body>
</html>
จะพบว่าขนาดความสูงของตัวอักษรจะมีขนาด 20 ตามที่เรากำหนดเอาไว้ ถึงแม้จะแก้ขนาดใหม่โดยใช้ Inline แต่ตัวอักษรก็จะมีขนาด 20 เหมือนเดิม
เจ้าของบทความโดย : Dexmore
ลิงค์หัวข้อ:
http://dexmore.com/topic/724 
Web Achieve 
หน้า: 1 
Powered by 