Skip to main content

วิธีการสร้างสไตล์ชีต CSS ภายใน

Anonim

สไตล์ชีตภายในคืออะไร

สไตล์ชีตภายในเป็นสไตล์ที่อยู่ในเอกสาร HTML ลักษณะเหล่านี้ส่งผลต่อเฉพาะเอกสารที่มีอยู่และไม่สามารถอ้างอิงได้จากเอกสารเว็บอื่น ๆ

ข้อดีของสไตล์ชีตภายใน

  • สไตล์ชีตภายในมีผลต่อเฉพาะเพจที่เปิดอยู่เท่านั้น
    • หากคุณกำลังทำงานในไซต์ขนาดใหญ่และต้องการทดสอบสไตล์ก่อนโหลดลงในไซต์โดยรวมสไตล์ชีตภายในอาจเป็นเครื่องมือที่ยอดเยี่ยม พวกเขาช่วยให้คุณสามารถทดสอบรูปแบบต่างๆในบริบทของไซต์ทั้งไซต์โดยไม่ทำลายหน้าใด ๆ แต่เป็นส่วนที่คุณกำลังทดสอบ
  • สไตล์ชีตภายในสามารถใช้คลาสและรหัส
    • สไตล์ชีตภายในยังไม่สามารถใช้ประโยชน์ได้จากชั้นเรียน ID พี่น้องและความสัมพันธ์ขององค์ประกอบอื่น ๆ
  • สไตล์ชีตภายในไม่จำเป็นต้องให้คุณอัปโหลดไฟล์หลายไฟล์
    • นี่เป็นประโยชน์อย่างยิ่งเมื่อคุณทำงานกับสิ่งต่างๆเช่นอีเมลหรือซุ้มที่คุณมีไฟล์ HTML เดียวที่สามารถแก้ไขได้ ฉันมักใช้รูปแบบอินไลน์เมื่อฉันไม่แน่ใจว่า URL จะเป็นสไตล์ชีตที่โหลดลงใน CMS อย่างไรการรักษาสไตล์ด้วยเอกสารหมายความว่าฉันรู้ว่ารูปแบบใดส่งผลต่อเอกสารดังกล่าว
  • สไตล์ภายในอาจมีลำดับความสำคัญสูงกว่าสไตล์ชีตภายนอก
    • นี่กำหนดโดยลำดับที่โหลดสไตล์ชีตภายนอก นักพัฒนาเว็บของเพจสามารถควบคุมตำแหน่งของสไตล์ภายในที่อยู่ในส่วนหัวของเอกสารได้ หากวางไว้หลังจากลิงก์ไปยังสไตล์ภายนอกแล้วจะมีลำดับความสำคัญสูงกว่าในน้ำตกและใช้สไตล์ชีทภายนอกมากกว่า

ข้อเสียของสไตล์ชีตภายใน

  • มีผลกับหน้าเว็บที่ใช้เท่านั้น
    • หากคุณต้องการใช้สไตล์เดียวกันในเอกสารหลายรายการคุณต้องทำซ้ำในทุกๆหน้า (หรือเชื่อมโยงไปยังสไตล์ชีตภายนอก)
  • สไตล์ชีตภายในเพิ่มเวลาในการโหลดหน้าเว็บ
    • ทุกๆเพจที่มีสไตล์ชีตภายในต้องโหลดและแยกวิเคราะห์ข้อมูลสไตล์ชีตทุกครั้งที่โหลดหน้าเว็บ สไตล์ชีตภายนอกจะถูกแคชโดยเบราว์เซอร์ซึ่งจะช่วยเพิ่มเวลาในการโหลดสำหรับทุกๆหน้าหลังจากที่โหลดครั้งแรก

วิธีการเขียนสไตล์ชีตภายใน

ธาตุ:

  1. เปิดเอกสาร HTML ใน Web editor ของคุณ
  2. เพิ่มข้อมูลต่อไปนี้ภายใน

สไตล์ชีตภายในแบบสมบูรณ์จะมีลักษณะดังนี้: