ทำให้รูปลักษณ์ XML ของคุณเป็นอย่างไรด้วย Cascading Style Sheets
การสร้างเอกสาร XML การเขียน DTD และการแยกวิเคราะห์ด้วยเบราว์เซอร์นั้นใช้ได้ทั้งหมด แต่เอกสารจะแสดงผลอย่างไรเมื่อคุณดูเอกสาร XML ไม่ใช่ภาษาในการแสดงผล ในความเป็นจริงเอกสารที่เขียนด้วย XML จะไม่มีการจัดรูปแบบเลย
ดังนั้นฉันจะดู XML ของฉันได้อย่างไร
กุญแจสำคัญในการดู XML ในเบราว์เซอร์คือ Cascading Style Sheets สไตล์ชีตช่วยให้คุณสามารถกำหนดทุกแง่มุมของเอกสาร XML ของคุณได้จากขนาดและสีของข้อความไปยังพื้นหลังและตำแหน่งของวัตถุที่ไม่ใช่ข้อความ
สมมติว่าคุณมีเอกสาร XML:
]>หากคุณต้องการดูเอกสารดังกล่าวในเบราว์เซอร์ที่พร้อมใช้งานแบบ XML เช่น Internet Explorer จะแสดงข้อมูลดังนี้:
Judy Layard เจนนิเฟอร์เบรนแดนแต่ถ้าคุณต้องการแยกความแตกต่างระหว่างองค์ประกอบหลักและองค์ประกอบหลัก หรือแม้แต่ทำให้เห็นความแตกต่างระหว่างองค์ประกอบทั้งหมดในเอกสาร คุณไม่สามารถทำสิ่งนี้ได้ด้วย XML และไม่ใช่ภาษาที่ใช้เพื่อแสดงผล
แต่โชคดีที่คุณสามารถใช้ Cascading Style Sheets หรือ CSS ในเอกสาร XML เพื่อกำหนดวิธีที่คุณต้องการให้เอกสารและแอ็พพลิเคชันเหล่านี้แสดงเมื่อดูในเบราว์เซอร์ สำหรับเอกสารข้างต้นคุณสามารถกำหนดรูปแบบของแต่ละแท็กได้เช่นเดียวกับที่คุณต้องการเป็นเอกสาร HTML
ตัวอย่างเช่นใน HTML คุณอาจต้องการกำหนดข้อความทั้งหมดภายในแท็กย่อหน้า (
) โดยมีหน้าปัด Verdana, Geneva หรือ Helvetica และสีพื้นหลังสีเขียว ในการกำหนดว่าในสไตล์ชีตเพื่อให้ย่อหน้าทั้งหมดเป็นเช่นนั้นคุณจะเขียน:
p (ครอบครัว font: verdana, geneva, helvetica; สีพื้นหลัง: # 00ff00; }กฎเดียวกันทำงานกับเอกสาร XML แต่ละแท็กใน XML สามารถกำหนดได้ในเอกสาร XML:
ครอบครัว {สี: # 000000; } parent {ตระกูลแบบอักษร: Arial Black; สี: # ff0000; ขอบ: แข็ง 5px; ความกว้าง: 300px; } {ครอบครัว font: verdana, helvetica; สี: # cc0000; ขอบ: แข็ง 5px; border-color: # cc0000; }เมื่อคุณมีเอกสาร XML และ สไตล์ชีต ของคุณเขียนแล้วคุณจะต้องนำข้อมูลเหล่านี้เข้าด้วยกัน คล้ายกับคำสั่ง link ใน HTML คุณสามารถวางบรรทัดที่ด้านบนของเอกสาร XML ของคุณ (ด้านล่างของการประกาศ XML) โดยบอก XML parser ที่จะหา stylesheet ตัวอย่างเช่น:
ดังที่ฉันได้กล่าวไว้ข้างต้นบรรทัดนี้ควรอยู่ด้านล่างคำประกาศ แต่ก่อนองค์ประกอบใด ๆ ในเอกสาร XML
วางเอกสารทั้งหมดไว้ด้วยกันเอกสาร XML ของคุณจะอ่านได้:
< ! ELEMENT child (#PCDATA)>]>