รวม CSS ในเอกสาร HTML

หากต้องการรวม CSS ในเอกสาร HTML เราสามารถรวมไว้ภายใน แบบอินไลน์ หรือลิงก์ไฟล์ภายนอกได้

ไวยากรณ์

ไวยากรณ์สำหรับการรวมไฟล์ CSS ใน HTML มีดังต่อไปนี้

/*inline*/
<element style="/*declarations*/"></element>
/*internal*/
<head>
<style>
/*declarations*/
</style>
</head>
/*external*/
<head>
<link rel="stylesheet" href="#location">
</head>

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงการเชื่อมโยงของไฟล์ CSS ในเอกสาร HTML

Inline CSS

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="font-family: Forte;">Demo text</p>
<p style="background-color: lightblue;">This is Demo text</p>
<img src="https://www.tutorialspoint.com/memcached/images/memcached.jpg" style="border: 3px groove orange;">
</body>
</html>

ผลลัพธ์

สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -

รวม CSS ในเอกสาร HTML

ตัวอย่าง

การเชื่อมโยงภายใน

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: auto;
   padding: 15px;
   width: 33%;
   border: 2px solid;
   border-radius: 5%;
}
div > div {
   border-color: transparent;
   box-shadow: inset 0 0 6px red;
}
div > div > div {
   border-color: red;
}
</style>
</head>
<body>
<div>
<div></div>
<div>
<div></div>
</div>
<div></div>
</div>
</body>
</html>

ผลลัพธ์

สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -

รวม CSS ในเอกสาร HTML

ตัวอย่าง

ลิงค์ภายนอก

ใน CSS คุณสามารถรวมไฟล์ css ภายนอกและวางสไตล์ css ลงไปได้ สามารถอ้างอิงได้จากไฟล์ HTML ดังแสดงในตัวอย่างด้านล่าง -

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Demo text</p>
<p>Demo text again</p>
</body>
</html>

ผลลัพธ์

สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -

รวม CSS ในเอกสาร HTML

ต่อไปนี้เป็น style.css -

p {
   text-decoration: overline;
   text-transform: capitalize;
}