HTML CSS

CSS มาจากคำว่า Cascading  style sheets สามารถใช้ในการควบคุมและจัดการรูปแบบการแสดงผลเว็บเพจหลายหน้าได้ ซึ่ง CSS สามารถจัดการในเรื่องของสี ตัวหนังสือ ขนาดของตัวหนังสือ ระยะห่างระหว่างแต่ละ element จัดตำแหน่ง element พื้นหลัง จัดการในเรื่องการแสดงผลเว็บเพจของอุปกรณ์ที่หลากหลาย และอื่นๆอีกมากมาย ซึ่งสามารถศึกษาเนื้อหาเกี่ยวกับ CSS อย่างลึกซึ้งในบทที่ 4

การใช้งาน CSS แบ่งออกเป็น 3 รูปแบบดังนี้

  1. Inline เป็นการใช้งาน CSS โดยเพิ่มคุณสมบัติ style ภายในแท็ก HTML (HTML Elements)
  2. Internal เป็นการเพิ่มแท็ก <style> ในส่วนของ <head> 
  3. External เป็นการเรียกใช้ style จากไฟล์อื่นที่แยกออกไป (เชื่อมโยงกับไฟล์ภายนอก)

 

แบบที่ 1 Inline CSS

จากเนื้อหาที่ผ่านมาการใช้งาน css แบบ inline จะพบบ่อยมาก ยกตัวอย่างเช่นเนื้อหา CSS Colors 

Inline CSS คือการจัดรูปแบบ HTML แบบเจาะจงซึ่งหมายความว่า เลือกใช้กับ element เพียงตัวเดียว ดังตัวอย่างต่อไปนี้

ข้อดีของ Inline CSS 

  • สามารถจัดรูปแบบด้วย CSS อย่างเฉพาะเจาะจง

 

ตัวอย่างการใช้งาน CSS แบบ Inline

<html>
 <body>
  <!-- inline 1 -->
  <h1 style="color:red;">หัวข้อ</h1>
  
  <!-- inline 2 -->
  <p style="font-weight:bold;">เนื้อหา</p>

  <!-- inline 3 -->
  <a href="https://www.narasak.com/บทที่-3-html/" target="_blank" style="text-decoration:none;">Hyperlnk</a>

<p>เนื้อหาที่ 2</p> </body> </html>

จากตัวอย่างการใช้งาน CSS แบบ Inline จะสังเกตได้ว่าใน inline ที่ 1-3 มีการเพิ่มคุณสมบัติ style ให้กับทุก element อย่างเฉพาะเจาะจงซึ่งสอดคล้องกับคำอธิบายด้านบน 

 

แบบที่ 2 Internal CSS

Internal CSS การใช้งาน CSS ในรูปแบบนี้ต้องทำการเพิ่มแท็ก หรือ element<style> ไว้ภายในแท็ก <head> 

ข้อดีของ Internal CSS 

  •  สามารถจัดรูปแบบของ element ทั้งหมดภายในไฟล์

 

ตัวอย่างการใช้ CSS แบบ Internal

<html>
 <head>
  <style>
  *{
  	padding: 10px;
    margin: 8px;
  }
  h1{
  	text-align:center;
    color: green;
  }
  h2{
  	color:lightgreen;
  }
  p{
  	color: red;
  }
  a{
  	text-decoration:none;
    color:brown;
    font-weight:bolder;
  }
  a:hover{
  	color:red;
  }
  div{
  	border:1px dotted blue;
  }
  </style>
 </head>
 
 <body>
  <div>
 	<h1>ตัวอย่างการใช้งาน Internal CSS</h1>

    <h2>Internal CSS</h2>
    
    <p>เนื้อหาที่ 1</p>
    
    <a href="https://www.narasak.com/บทที่-3-html/" target="_blank">บทความเรื่อง HTML</a>

    
    <p>เนื้อหาที่ 2</p>
   </div>
 </body>
</html>

 

แบบที่ 3 External CSS

External CSS เป็นการเรียกใช้ style จากไฟล์อื่น โดยใช้คุณสมบัติ href เครื่องหมาย = จากนั้นตามด้วยที่อยู่ของไฟล์ style ที่ต้องการ

ข้อดีของ External CSS

  • สามารถจัดรูปแบบเอกสาร HTML ได้หลายหน้า 

ตัวอย่างการใช้ style จากไฟล์อื่น (ไฟล์ภายนอก) 

ภายในตัวอย่างนี้จะทำการสร้างไฟล์ html กับ css แยกกัน จากนั้นก็ทำการเชื่อมโยง หรือเรียกใช้ไฟล์ css ที่เขียนแยกไว้

 

1.สร้างไฟล์ style.css (สังเกตว่านามสกุลไฟล์คือ .css) 

*{
  	padding: 10px;
    margin: 8px;
  }
  h1{
  	text-align:center;
    color: green;
  }
  h2{
  	color:lightgreen;
  }
  p{
  	color: red;
  }
  a{
  	text-decoration:none;
    color:brown;
    font-weight:bolder;
  }
  a:hover{
  	color:red;
  }
  div{
  	border:1px dotted blue;
  }

ไฟล์ที่ 1 style.css

 

2.สร้างไฟล์ html เพื่อแสดงผลลัพธ์

<html>
 <head>
  <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 
 <body>
  <div>
 	<h1>ตัวอย่างการใช้งาน Internal CSS</h1>

    <h2>Internal CSS</h2>
    
    <p>เนื้อหาที่ 1</p>
    
    <a href="https://www.narasak.com/บทที่-3-html/" target="_blank">บทความเรื่อง HTML</a>

    
    <p>เนื้อหาที่ 2</p>
   </div>
 </body>
</html>

ไฟล์ที่ 2 index.html

อธิบายไฟล์ที่ 2 ในบรรทัดที่ 3 เป็นการเรียกใช้ไฟล์ style.css ที่สร้างแยกไว้ 

เพียงเท่านี้ก็สามารถเรียกใช้ style ได้ทุกๆไฟล์ ซึ่งทำให้สะดวกในการใช้งาน และแก้ไขได้ง่าย เหมาะสำหรับเว็บเพจทีี่ต้องการรูปแบบที่เป็นอันหนึ่งอันเดียวกัน  

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

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

Spelling error report

The following text will be sent to our editors: