ชั้น 29 ออฟฟิศเศส แอท เซ็นทรัลเวิลด์

999/9 พระราม 1 กรุงเทพฯ 10330

บริการตลอด 24 ชั่วโมง

ทุกวัน ไม่เว้นวันหยุด

0-2107-3466

โทรเลยดิจะรออะไร

Facebook-f Twitter Youtube
Home » HTML » HTML Styles – CSS

HTML Styles – CSS

CSS (Cascading Style Sheets) สำหรับ HTML จะใช้ในการตกแต่งเอกสารให้มีสีสัน ระยะห่าง พื้นหลัง เส้นขอบ และอื่นๆ ให้มีรูปแบบและหน้าตาตามที่ต้องการ ซึ่ง CSS จะช่วยประหยัดเวลา ในการทำงาน เพราะเพียงแค่ออกแบบเพียงครั้งเดียวสามารถนำไปใช้ในหน้าเพจได้หลายๆ หน้าได้

CSS คืออะไร

Cascading Style Sheets (CSS) ใช้จัดรูปแบบเค้าโครงของเว็บไซต์ ซึ่ง CSS จะใช้ในการจัดการรูปแบบสี, ตัวอักษร, ขนาดของข้อความ, ระยะห่างระหว่าง Elements, การจัดวางตำแหน่งและองค์ประกอบของ Elements, ภาพพื้นหลังหรือสีพื้นหลังที่ใช้, การแสดงผลบนอุปกรณ์ต่างๆ และอื่นๆอีกมากมาย

การใช้งาน CSS

วิธีการใช้งาน CSS ใน HTML มี 3 วิธี
  • Inline – โดยใช้รูปแบบของ Attribute ภายใน Elements HTML
  • Internal – โดยใช้ Tag Element <style> ในส่วน <head>
  • External – โดยใช้ Tag Elements <link> เพื่อเชื่อมต่อไฟล์ CSS จากที่อื่น
ซึ่งโดยส่วนใหญ่จะใข้วิธีการเรียก CSS จากไฟล์ที่อยู่ภายนอก หรือวิธีที่ 3 แต่อย่างไรก็ตาม ในบทเรียนนี้จะใช้วิธีที่ 1 และ 2 เพราะง่ายต่อการอธิบายให้ผู้เรียนเข้าใจ

Inline CSS

Inline CSS คือการกำหนดสไตล์ให้กับ Tag หรือ Element HTML เฉพาะตัว โดยใช้แอตทริบิวต์ style ภายในแท็กนั้นโดยตรง เช่น ตั้งค่าสีตัวอักษรใน <h1> เป็นสีน้ำเงิน และข้อความใน <p> เป็นสีแดง 
				
					<h1 style="color:blue;">สีน้ำเงินคือหัวข้อ</h1>

<p style="color:red;">สีแดงคือข้อความ</p>
ดูผลลัพธ์

Internal CSS

Internal CSS ใช้สำหรับกำหนดรูปแบบให้กับหน้า HTML เพียงหน้าเดียว โดยเขียนไว้ในส่วน <head> ของหน้าเพจ ภายใต้ Element <style> เช่น ในตัวอย่างนี้ จะตั้งค่าสีข้อความใน <h1> เป็นสีน้ำเงิน, ข้อความใน <p> เป็นสีแดง และกำหนดสีพื้นหลังของหน้าเพจเป็นสีฟ้า (powderblue) 
				
					<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>นี่คือหัวข้อ</h1>
<p>นี่คือข้อความ</p>

</body>
</html>
ดูผลลัพธ์

External CSS

External CSS ใช้กำหนดรูปแบบให้กับ HTML หลายหน้า โดยเพิ่มแท็ก <link> ในส่วน <head> ของแต่ละหน้าเพจ เพื่อเชื่อมโยงกับไฟล์ CSS ภายนอก 
				
					<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>นี่คือหัวข้อ</h1>
<p>นี่คือข้อความ</p>

</body>
</html>
ดูผลลัพธ์

External Style Sheet สามารถเขียนในโปรแกรม Text Editor ใดก็ได้ แต่ต้องไม่มีโค้ด HTML และต้องบันทึกไฟล์ด้วยนามสกุล .css ยกตัวอย่างเช่นไฟล์ styles.css

				
					body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

CSS Colors, Fonts และ Sizes

คุณสมบัติต่าง ๆ ของ CSS ที่ใช้กันโดยทั่วไป ในส่วนนี้จะได้เรียนรู้ภายหลัง แต่ตอนนี้จะอธิบายเฉพาะคุณสมบัติที่เกี่ยวกับ สี, รูปแบบของตัวอักษร, และ ขนาดของตัวอักษร
  • 🎨 color  ใช้กำหนดสีของตัวอักษร
  • ✍️ font-family  ใช้กำหนดรูปแบบของตัวอักษรที่ใช้
  • 🔠 font-size  ใช้กำหนดขนาดของตัวอักษร
				
					<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: kanit;
  font-size: 300%;

}
p  {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1>นี่คือหัวข้อ</h1>
<p>นี่คือข้อความ</p>

</body>
</html>
ดูผลลัพธ์

CSS Border

CSS border จะใช้สำหรับกำหนด เส้นขอบรอบ ๆ Elements ของ HTML 
				
					p {
  border: 2px solid powderblue;
}
ดูผลลัพธ์

CSS Padding

CSS padding จะใช้กำหนดระยะห่างระหว่าง ข้อความ (หรือเนื้อหา) กับ ขอบของ Element 
				
					p {
  border: 2px solid powderblue;
  padding: 30px;
}
ดูผลลัพธ์

CSS Margin

CSS margin จะใช้กำหนดระยะห่าง ภายนอกขอบ (outer space) ของ Element 
				
					p {
  border: 2px solid powderblue;
  margin: 50px;
}
ดูผลลัพธ์

Link to External CSS

External Style Sheets จะเป็นการอ้างอิง URL แบบเต็ม หรือเส้นทางที่เกี่ยวข้องกับหน้าเพจปัจจุบัน
Link ไปยัง Style Sheet โดยใช้ URL แบบเต็ม 
				
					<link rel="stylesheet" href="https://kb.hostatom.com/lesson/html/styles.css">
ดูผลลัพธ์
Link ไปยัง Style Sheet ที่อยู่ใน Folder HTML เดียวกับเว็บไซต์ปัจจุบัน 
				
					<link rel="stylesheet" href="/lesson/html/styles.css">
ดูผลลัพธ์
Link ไปยัง Style Sheet ที่อยู่ใน Folder เดียวกับหน้าเพจปัจจุบัน 
				
					<link rel="stylesheet" href="styles.css">
ดูผลลัพธ์

สรุป

  • HTML style ใช้สำหรับการกำหนด Inline CSS
  • HTML <style> ใช้สำหรับการกำหนด CSS แบบ Internal
  • HTML <link> ใช้สำหรับอ้างอิงไฟล์ CSS จากภายนอก (External CSS)
  • HTML <head> ใช้เพื่อเก็บ <style> และ <link>
  • CSS color ใช้กำหนด สีของข้อความ
  • CSS font-family ใช้กำหนด รูปแบบตัวอักษรของข้อความ
  • CSS font-size ใช้กำหนด ขนาดของตัวอักษร
  • CSS border ใช้เพื่อกำหนด ขอบขององค์ประกอบ (Element border)
  • CSS padding ใช้เพื่อกำหนด ระยะห่างของข้อความกับขอบ (inner space)
  • CSS margin ใช้กำหนด ระยะห่างภายนอกขอบ (outer space)
Categories