HTML - สไตล์ชีต

Cascading Style Sheets (CSS) อธิบายถึงวิธีการนำเสนอเอกสารบนหน้าจอการพิมพ์หรือการออกเสียง W3C ได้ส่งเสริมการใช้สไตล์ชีตบนเว็บอย่างจริงจังตั้งแต่ก่อตั้งสมาคมในปี 1994

Cascading Style Sheets (CSS) เป็นทางเลือกที่ง่ายและมีประสิทธิภาพในการระบุแอตทริบิวต์ต่างๆสำหรับแท็ก HTML เมื่อใช้ CSS คุณสามารถระบุคุณสมบัติสไตล์จำนวนหนึ่งสำหรับองค์ประกอบ HTML ที่กำหนด คุณสมบัติแต่ละรายการมีชื่อและค่าคั่นด้วยเครื่องหมายจุดคู่ (:) การประกาศคุณสมบัติแต่ละรายการจะคั่นด้วยเครื่องหมายอัฒภาค (;)

ตัวอย่าง

ก่อนอื่นให้พิจารณาตัวอย่างของเอกสาร HTML ซึ่งใช้แท็ก <font> และแอตทริบิวต์ที่เกี่ยวข้องเพื่อระบุสีข้อความและขนาดตัวอักษร -

Note- แท็กแบบอักษรเลิกใช้งานแล้วและควรลบออกใน HTML เวอร์ชันอนาคต ดังนั้นจึงไม่ควรใช้ แต่แนะนำให้ใช้สไตล์ CSS เพื่อปรับแต่งฟอนต์ของคุณ แต่เพื่อจุดประสงค์ในการเรียนรู้บทนี้จะทำงานร่วมกับตัวอย่างโดยใช้แท็กแบบอักษร

<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>
	
   <body>
      <p><font color = "green" size = "5">Hello, World!</font></p>
   </body>

</html>

เราสามารถเขียนตัวอย่างด้านบนใหม่ได้โดยใช้ Style Sheet ดังนี้ -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>

   <body>
      <p style = "color:green; font-size:24px;" >Hello, World!</p>
   </body>

</html>

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

คุณสามารถใช้ CSS ได้สามวิธีในเอกสาร HTML ของคุณ -

External Style Sheet - กำหนดกฎสไตล์ชีตในไฟล์. css แยกต่างหากจากนั้นรวมไฟล์นั้นในเอกสาร HTML ของคุณโดยใช้แท็ก HTML <link>
Internal Style Sheet - กำหนดกฎสไตล์ชีตในส่วนหัวของเอกสาร HTML โดยใช้แท็ก <style>
Inline Style Sheet - กำหนดกฎสไตล์ชีตโดยตรงพร้อมกับองค์ประกอบ HTML โดยใช้ style แอตทริบิวต์

ลองดูทั้งสามกรณีทีละตัวอย่างโดยใช้ตัวอย่างที่เหมาะสม

สไตล์ชีตภายนอก

หากคุณจำเป็นต้องใช้สไตล์ชีตของคุณในหน้าต่างๆขอแนะนำให้กำหนดสไตล์ชีตทั่วไปในไฟล์แยกต่างหาก ไฟล์สไตล์ชีตแบบเรียงซ้อนจะมีนามสกุลเป็น.css และจะรวมอยู่ในไฟล์ HTML โดยใช้แท็ก <link>

ตัวอย่าง

พิจารณาว่าเรากำหนดไฟล์สไตล์ชีต style.css ซึ่งมีกฎดังต่อไปนี้ -

.red {
   color: red;
}
.thick {
   font-size:20px;
}
.green {
   color:green;
}

ที่นี่เราได้กำหนดกฎ CSS สามข้อซึ่งจะใช้ได้กับคลาสต่างๆสามคลาสที่กำหนดไว้สำหรับแท็ก HTML ฉันขอแนะนำว่าคุณไม่ควรกังวลเกี่ยวกับการกำหนดกฎเหล่านี้เพราะคุณจะได้เรียนรู้พวกเขาในขณะที่เรียน CSS ตอนนี้เรามาใช้ประโยชน์จากไฟล์ CSS ภายนอกด้านบนในเอกสาร HTML ต่อไปนี้ -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML External CSS</title>
      <link rel = "stylesheet" type = "text/css" href = "/html/style.css">
   </head>

   <body>
      <p class = "red">This is red</p>
      <p class = "thick">This is thick</p>
      <p class = "green">This is green</p>
      <p class = "thick green">This is thick and green</p>
   </body>

</html>

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

สไตล์ชีตภายใน

หากคุณต้องการใช้กฎสไตล์ชีตกับเอกสารเดียวเท่านั้นคุณสามารถรวมกฎเหล่านั้นไว้ในส่วนหัวของเอกสาร HTML โดยใช้แท็ก <style>

กฎที่กำหนดไว้ในสไตล์ชีตภายในจะลบล้างกฎที่กำหนดไว้ในไฟล์ CSS ภายนอก

ตัวอย่าง

ลองเขียนตัวอย่างข้างบนอีกครั้ง แต่ที่นี่เราจะเขียนกฎสไตล์ชีตในเอกสาร HTML เดียวกันโดยใช้แท็ก <style> -

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Internal CSS</title> 
      
      <style type = "text/css"> 
         .red { 
            color: red; 
         } 
         .thick{ 
            font-size:20px; 
         } 
         .green { 
            color:green; 
         } 
      </style> 
   </head>
	
   <body> 
      <p class = "red">This is red</p>  
      <p class = "thick">This is thick</p>  
      <p class = "green">This is green</p>  
      <p class = "thick green">This is thick and green</p> 
   </body>
	
</html>

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

สไตล์ชีตแบบอินไลน์

คุณสามารถใช้กฎสไตล์ชีตกับองค์ประกอบ HTML ได้โดยตรงโดยใช้ styleแอตทริบิวต์ของแท็กที่เกี่ยวข้อง สิ่งนี้ควรทำก็ต่อเมื่อคุณสนใจที่จะทำการเปลี่ยนแปลงเฉพาะในองค์ประกอบ HTML ใด ๆ เท่านั้น

กฎที่กำหนดไว้ในบรรทัดเดียวกับองค์ประกอบจะลบล้างกฎที่กำหนดไว้ในไฟล์ CSS ภายนอกเช่นเดียวกับกฎที่กำหนดไว้ในองค์ประกอบ <style>

ตัวอย่าง

ลองเขียนตัวอย่างข้างต้นอีกครั้ง แต่ที่นี่เราจะเขียนกฎสไตล์ชีตพร้อมกับองค์ประกอบ HTML โดยใช้ style คุณลักษณะขององค์ประกอบเหล่านั้น

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Inline CSS</title> 
   </head>
 
   <body> 
      <p style = "color:red;">This is red</p>  
      <p style = "font-size:20px;">This is thick</p>  
      <p style = "color:green;">This is green</p>  
      <p style = "color:green;font-size:20px;">This is thick and green</p> 
   </body>
 
</html>

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