ขั้นแรก ขอแนะนำสี่วิธีทั่วไปในการเชื่อมโยงเอกสาร HTML กับ CSS:
1. ใช้แท็กลิงก์
| ＜link rel="stylesheet" type="text/css" href="sheet.css" /> |
2. ใช้องค์ประกอบสไตล์
＜style type="text/css">< ร่างกาย{พื้นหลัง:#fff;} h1{ขนาดตัวอักษร:2em;} ＜/สไตล์>< |
3. ใช้คำสั่ง @import
＜style type="text/css">< @ นำเข้า URL (sheet1.css); @นำเข้า "sheet2.css"; ＜/สไตล์>< |
| ＜p style="color:#f00;"><นี่คือข้อความสีแดง</p> |
ในการใช้งานจริง ไม่แนะนำให้ใช้สไตล์อินไลน์โดยใช้แอตทริบิวต์ style XHTML1.1 ทำให้การใช้งานเป็นมาตรฐานตามที่ไม่แนะนำ เหตุผลง่ายๆ นี้ไม่ได้ดีไปกว่าแท็กแบบอักษรและทำให้การควบคุมแบบรวมศูนย์อ่อนแอลง ลักษณะเอกสารทั้งหมดโดยข้อดีของ CSS
สามวิธีแรกใช้แท็กลิงก์และแท็กสไตล์ และมีข้อจำกัดต่อไปนี้ใน IE (รวมถึง IE6, IE7 และ IE8 beta1):
◆ สามารถใช้ได้เฉพาะ CSS ที่เกี่ยวข้องกับลิงก์หรือแท็กสไตล์ 31 ลิงก์แรกในเอกสารเท่านั้น
ตั้งแต่วันที่ 32 เป็นต้นไป CSS ที่เชื่อมโยงกับแท็กจะไม่ถูกต้อง เอกสารอย่างเป็นทางการของ IE แท็กสไตล์ทั้งหมดหลังจากแท็กสไตล์ 30 แท็กแรกบนเพจ HTML จะไม่ถูกนำมาใช้ใน Internet Explorer ยังกล่าวถึงข้อจำกัดนี้ รวมถึงข้อจำกัดนี้ในไฟล์ .xml ที่ใช้ .xsl แต่ดูเหมือนเขียนปริมาณผิด โปรดดูใน IE:
◆ แท็กสไตล์ใช้ได้เฉพาะกับคำสั่ง @import 31 คำสั่งแรกเท่านั้น
ละเว้นโดยเริ่มจากคำสั่ง @import ลำดับที่ 32
◆ เฉพาะคำสั่ง 31 @import แรกของไฟล์ css เท่านั้นที่จะถูกนำมาใช้อย่างมีประสิทธิภาพ
ละเว้นโดยเริ่มจากคำสั่ง @import ครั้งที่ 31
◆ ไฟล์ CSS ต้องมีขนาดไม่เกิน 288kb?
ข่าวนี้มาจากขีดจำกัดขนาดไฟล์ CSS ของ Internet Explorer
ในกรณีส่วนใหญ่ไม่พบข้อจำกัดของ IE ใน CSS แม้ว่าจะพบวิธีแก้ปัญหาที่ดีที่สุด แต่ควรรวมไฟล์ CSS และแท็กตอบกลับด้วยตนเองหรือผ่านโปรแกรมแบ็คเอนด์เพื่อลดจำนวนคำขอ http การเพิ่มประสิทธิภาพการแสดงผลหน้า