2.ชีทรูปแบบ

จงกำหนดชีทรูปแบบ เพื่อแสดงเอกสาร HTML ให้ได้ผลตามโจทย์ ดังนี้

1. ข้อความ 1 จงกำหนดโดยใช้ชีทรูปแบบ (CSS)
2. ข้อความ 2 จงกำหนดโดยใช้คำสั่งจาวาสคริปต์
3. ข้อความ 3 และ 4 จงกำหนดโดยใช้คำสั่งเจคิวรี

<div id='tc' feature='bk'>ข้อความ 1 มีรูปแบบดังนี้ การขีดเส้นข้อความ เป็นขีดเส้นเหนือข้อความ ระยะเยื้องบรรทัดแรก 35.08 px ระยะห่างระหว่างคำ 1.13 in</div><hr>

<p class='gp' title='xe'>ข้อความ 2 มีรูปแบบดังนี้ รูปแบบเส้นขอบด้านขวา เป็นไข่ปลา (dotted) สี ชมพู ขนาด 2 พิกเซล สีตัวอักษร เป็นสี Salmon ความหนาตัวอักษร เป็นตัวปกติ</p><hr>

<span feature='bk' title='xe'>ข้อความ 3 มีรูปแบบดังนี้ เว้นระยะเสริมเต็มด้านซ้าย 17 พิกเซล ระยะห่างระหว่างตัวอักษร 0.66 em สีพื้นหลัง เป็นสี #D3D3D3</span><hr>

<div class='gp' id='tc'>ข้อความ 4 มีรูปแบบดังนี้ ขนาดตัวอักษร 1.20 cm เว้นระยะขอบด้านบน 5 พิกเซล รูปแบบตัวอักษร (ปกติ, ตัวเอียง) เป็นตัวเอียง</div><hr>

1. <style>
2. /*ข้อความ 1 */
3. div#tc[feature='bk'] {
4. text-decoration : overline;
5. text-indent : 35.08px;
6. word-spacing : 1.13in;
7. }
8. </style>
9. <script>
10. /*ข้อความ 2 */
11. var a = document.querySelector("p.gp[title='xe']");
12. a.style.borderRight = "2px dotted pink";
13. a.style.color = "Salmon";
14. a.style.fontWeight = "normal";
15. </script>
16. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
17. <script>
18. /*ข้อความ 3 */
19. var b = $("span[feature='bk'][title='xe']");
20. b.css("padding-left", "17px");
21. b.css("letter-spacing", "0.66em");
22. b.css("background-color", "#D3D3D3");
23. //b.css("display", "block");
24. </script>
25. <script>
26. /*ข้อความ 4 */
27. var b = $("div.gp#tc");
28. b.css("font-size", "1.2cm");
29. b.css("margin-top", "5px");
30. b.css("font-style", "italic");
31. </script>

• ข้อสอบปลายภาค
• ตัวอย่าง 2

ขอไว้อาลัยให้กับผู้ที่จากไป

6 เมษายน 2559