home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

วิธีใช้ HTML Element

เรียนรู้วิธีใช้ HTML <link> ธาตุ

HTML <link> องค์ประกอบส่วนใหญ่จะใช้เพื่อนำเข้าไฟล์ CSS ภายนอกที่เพิ่มสไตล์ให้กับเว็บไซต์ของคุณ

<link> องค์ประกอบอยู่ภายใน <head> และยอมรับแอตทริบิวต์หลายประเภท:

<!DOCTYPE html>
<html>
  <head>
    <title>Document title</title>
    <link href="/styles/main.css" rel="stylesheet" />
  </head>
  <body></body>
</html>

<link> . ที่พบบ่อยที่สุด คุณลักษณะขององค์ประกอบคือสองอย่างที่คุณเห็นด้านบน href และ rel :

  • href ระบุตำแหน่งของไฟล์ที่เชื่อมโยง ในกรณีนี้ สไตล์ชีตชื่อ main.css
  • rel ย่อมาจากความสัมพันธ์ และระบุความสัมพันธ์ระหว่างเอกสารที่อยู่ภายในและไฟล์ CSS ที่เชื่อมโยง

อีกวิธีหนึ่งในการจัดรูปแบบเว็บไซต์ของคุณคือการใช้ <style> ซึ่งช่วยให้คุณฝังสไตล์ CSS ได้โดยตรงในเอกสารของคุณ (เรียกอีกอย่างว่า inline CSS )

อย่างไรก็ตาม รูปแบบเว็บไซต์ที่ทันสมัยคือการใช้ <link> เพื่อนำเข้ารูปแบบจากโฟลเดอร์โครงการของคุณเอง your-project/styles/main.css หรือจากผู้ให้บริการภายนอก (ในโดเมนอื่น)

นานาน่ารู้:

หากคุณใช้ทั้ง <style> และ <link> องค์ประกอบที่จะจัดรูปแบบในเอกสารเดียวกัน ง่ายต่อการแทนที่รูปแบบโดยไม่ได้ตั้งใจ

ตัวอย่างเช่น ดูตัวอย่างต่อไปนี้ซึ่งใช้การจัดสไตล์ทั้งสองแบบ:

<!DOCTYPE html>
<html>
  <head>
    <!-- Embedded (internal) styles -->
    <style>
      h1 {
        color: red;
      }
      p {
        color: green;
      }
    </style>
    <!-- Import external style sheet -->
    <link href="/styles/main.css" rel="stylesheet" />
  </head>
  <body>
    <h1>This is a red heading</h1>
    <p>This is a green paragraph</p>
  </body>
</html>

ตัวอย่างเช่น ถ้า ภายนอก สไตล์ชีตกำหนดค่าคุณสมบัติสีบน h1 และ p ตัวเลือก เช่น โดยกำหนดให้เป็น blue ค่าสี ตามด้วย red และ green จะถูกเขียนทับเพราะว่า <link> องค์ประกอบมาหลังจาก <style> องค์ประกอบในตัวอย่างมาร์กอัปด้านบน

มันง่ายมากที่จะผสมสิ่งนี้ ดังนั้นฉันแนะนำให้คุณใช้ <link> องค์ประกอบที่จะนำเข้ารูปแบบ — และใช้เฉพาะ <style> องค์ประกอบสำหรับกรณีการใช้งานที่เฉพาะเจาะจงมาก