HTML Styles – CSS

< บทเรียนก่อนหน้า
บทเรียนถัดไป >

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

CSS คืออะไร

Cascading Style Sheets (CSS) ใช้จัดรูปแบบเค้าโครงของเว็บไซต์

ซึ่ง CSS จะใช้ในการจัดการรูปแบบสี, ตัวอักษร, ขนาดของข้อความ, ระยะห่างระหว่าง elements, การจัดวางตำแหน่งและองค์ประกอบของ elements, ภาพพื้นหลังหรือสีพื้นหลังที่ใช้, การแสดงผลบนอุปกรณ์ต่างๆ และอื่นๆอีกมากมาย

Tip: คำว่า cascading หมายถึง รูปแบบที่ใช้งานกับ elements หลักซึ่งในที่นี้จะรวมไปถึง elements ย่อยทั้งหมดที่อยู่ภายใต้ elements หลักด้วย ซึ่งสมมติว่าคุณตั้งค่า body ของข้อความเป็น “สีน้ำเงิน” ดังนั้น ข้อความในส่วนของ headings, paragraphs และข้อความอื่นๆมน elements ภายใน body จะเป็นสีเดียวกันทั้งหมด

การใช้งาน 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

inline CSS จะใช้ tag style ใน element HTML

จากตัวอย่างนี้จะตั้งค่าตัวอักษรที่อยู่ใน element <h1> เป็นสีน้ำเงิน และสีของข้อความใน element <p> เป็นสีแดง

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">สีน้ำเงินคือหัวข้อ</h1>

<p style="color:red;">สีแดงคือข้อความ</p>

</body>
</html>

Internal CSS

internal CSS ใช้กำหนดรูปแบบสำหรับ HTML หน้าเดียว

internal CSS จะถูกใช้ในส่วนของ <head> ของหน้าเพจ html ภายใต้ element <style>

จากตัวอย่างด้านล่างนี้ จะตั้งค่าสีของข้อความทั้งหมดภายใน elememt <h1> เป็นสีน้ำเงิน และข้อตวามทั้งหมดภายใน <p> จะเป็นสีแดง นอกจากนี้ สีพื้นหลังของหน้าเพจจะเป็นสีฟ้า (powerblue)

<!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 หลายๆ หน้า

การที่จะใช้งาน External CSS ได้นั้น จะต้องเพิ่ม link ในส่วนของ <head> ในแต่ละหน้าเพจของ html

ตัวอย่างการใช้งาน External 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 และต้อง save ด้วยนามสกุล .css ยกตัวอย่างเช่นไฟล์ “styles.css”

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

Tip: คุณสามารถเปลี่ยนเว็บไซต์ทุกหน้าผ่านทาง External Style Sheet เพียงไฟล์เดียวเท่านั้น!!

CSS Colors, Fonts และ Sizes

คุณสมบัติต่างๆ ของ CSS ที่ใช้กันโดยทั่วไป ในส่วนนี้จะได้เรียนรู้ภายหลัง แต่ในตอนนี้จะอธิบายถึงคุณสมบัติของ CSS เกี่ยวกับ สี, รูปแบบของตัวอักษร และขนาดของตัวอักษร

color ใน CSS จะใช้กำหนดคุณสมบัติสีของตัวอักษร

font-family ใน CSS จะใช้กำหนดคุณสมบัติของตัวอักษรที่ใช้

font-size ใน CSS จะใช้กำหนดขนาดของตัวอักษร

ตัวอย่างการใช้งาน CSS เพื่อกำหนดคุณสมบัติของสี, ตัวอักษร และขนาดตัวอักษร

<!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 ของ

Tip: คุณสามารถกำหนดเส้นกรอบให้กับ element ของ html ดกือบทั้งหมดได้

ตัวอย่างการใช้งาน CSS border

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid powderblue;
}
</style>
</head>
<body>

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

<p>นี่คือข้อความที่ 1</p>
<p>นี่คือข้อความที่ 2</p>
<p>นี่คือข้อความที่ 3</p>

</body>
</html>

CSS Padding

CSS padding จะใช้กำหนดระยะห่างระหว่างข้อความกับขอบ

ตัวอย่างของการใช้งาน CSS Padding

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid powderblue;
  padding: 30px;
}
</style>
</head>
<body>

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

<p>นี่คือข้อความที่ 1</p>
<p>นี่คือข้อความที่ 2</p>
<p>นี่คือข้อความที่ 3</p>

</body>
</html>

CSS Margin

CSS margin จะใช้กำหนดระยะห่างภายนอกขอบ

ตัวอย่างของการใช้งาน CSS Margin

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid powderblue;
  margin: 50px;
}
</style>
</head>
<body>

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

<p>นี่คือข้อความที่ 1</p>
<p>นี่คือข้อความที่ 2</p>
<p>นี่คือข้อความที่ 3</p>

</body>
</html>

External style sheets จะเป็นการอ้างอิง URL แบบเต็ม หรือเส้นทางที่เกี่ยวข้องกับหน้าเพจปัจจุบัน

ตัวอย่างการ link ไปยัง Style Sheet โดยใช้ URL แบบเต็ม

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
</head>
<body>

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

</body>
</html>

ตัวอย่างการ link ไปยัง Style Sheet ที่อยู่ใน Folder html เดียวกับเว็บไซต์ปัจจุบัน

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="/html/styles.css">
</head>
<body>

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

</body>
</html>

ตัวอย่างการ link ไปยัง Style Sheet ที่อยู่ใน Folder เดียวกับหน้าเพจปัจจุบัน

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

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

</body>
</html>

สรุป

  • html style ใช้สำหรับการกำหนด inline
  • html <style> ใช้สำหรับกำหนด CSS internal
  • html <link> ใช้สำหรับอ้างอิงไฟล์ CSS จากภายนอก
  • html <head> ใช้เพื่อเก็บ <style> และ <sheet>
  • CSS color ใช้กำหนดสี
  • CSS font-family ใช้กำหนดรูปแบบตัวอักษรของข้อความ
  • CSS font-size ใช้กำหนดขนาดของตัวอักษร
  • CSS border ใช้เพื่อกำหนดขอบ
  • CSS padding ใช้เพื่อกำหนดระยะห่างของข้อความกับขอบ
  • CSS margin ใช้กำหนดระยะห่างภายนอกขอบ
< บทความก่อนหน้า
บทเรียนถัดไป >