การแทรก CSS

การเพิ่มหรือการแทรก CSS ที่ใช้ในการจัดรูปแบบเอกสาร HTML นั้นสามารถทำได้ 3 รูปแบบดังนี้

  1. Inline CSS (แทรก style ทุก element)
  2. Internal CSS (แทรก style ไว้ภายในแท็ก <head> เพื่อจัดรูปแบบทั้งหมดภายในไฟล์)
  3. External CSS (แทรก style จากไฟล์ภายนอก)

 

1.Inline CSS

Inline CSS คือการแทรก style ให้กับ element ที่ต้องการทีละหนึ่ง element

ไวยากรณ์

<tagname style="property:value;"></tagname>

 

ตัวอย่างที่ 1.1

<html>
 <body>
  <h1 style="color:blue;text-align:center;">Inline CSS</h1>
  
  <p style="color:grey">1.Excample</p>
<p>Default</p> </body> </html>

ไฟล์ที่ 1 inline_css.html

จากตัวอย่างที่ 1 บรรทัดที่ 3 และ 5 มีการแทรกแอตทริบิวต์ style เพื่อใช้ CSS ในการจัดรูปแบบ แต่บรรทัดที่ 6 ไม่ได้ใช้ style จึงแสดงผลรูปแบบปกติของ HTML

 

2.Internal CSS

Internal CSS เป็นการแทรก style ไว้ภายในแท็ก <head> ซึ่งมีข้อดีดังนี้

  • สามารถจัดรูปแบบภายในไฟล์ได้ทั้งหมด โดยที่ไม่ต้องแทรก style ในทุก element

ตัวอย่างที่ 2.1

<html>
 <head>
  <style>
   h1{
   	color:blue;
    text-align:center;
   }
   p{
   	color:grey;
   }
  </style>
 </head>
 <body>
  <h1>Inline CSS</h1>
  
  <p>1.Excample</p>
  <p>Content</p>
 </body>
</html>

ไฟล์ที่ 2 internal_css.html

จากไฟล์ที่ 2 ได้ทำการแทรก style ไว้ภายใน element <head> และกำหนดรูปแบบของ element <h1>, <p> ซึ่งส่งผลให้การแสดงผลของ element ทั้งหมดที่ระบุ เป็นไปตาม style ที่กำหนดไว้

 

3.External CSS

External CSS คือการเพิ่ม CSS จากไฟล์ภายนอก 

ตัวอย่างที่ 3.1

1.สร้างไฟล์ style.css

h1{
	color:blue;
 text-align:center;
}
p{
	color:grey;
}

ไฟล์ที่ 3 style.css

 

2.ใช้งาน css จากไฟล์ภายนอก

ไวยากรณ์ 

<link rel="stylesheet" href="ระบุที่อยู่ของไฟล์ css">

 

<html>
 <head>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <h1>Inline CSS</h1>
  
  <p>1.Excample</p>
  <p>Content</p>
 </body>
</html>

ไฟล์ที่ 4 ใช้งาน css จากไฟล์ภายนอก

 

 

หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

ไม่สามารถคัดลอกเนื้อหานี้

Spelling error report

The following text will be sent to our editors: