กำหนดรูปแบบการแสดงผล HTML Elements ด้วย CSS

CSS ย่อมาจาก Cascading Style Sheets ใช้สำหรับกำหนดว่าอีลิเมนต์ของ HTML แต่ละอีลิเมนต์ จะแสดงผลอย่างไรบนหน้าจอหรือสื่ออื่น ๆ อีกทั้งยังช่วยย่นระยะเวลาในการตกแต่งอีลิเมนต์ต่าง ๆ ได้อย่างมาก เพราะเราสามมรถใช้ CSS ตกแต่งอีลิเมนต์ในหลาย ๆ เว็บเพจได้จากที่เดียว หรือการเขียนโค้ดเพียงครั้งเดียว

เราสามารถใช้งาน CSS ใน HTML ได้ 3 ทาง ดังนี้

  • Inline คือ การใช้งานแอททริบิวต์ CSS ภายในอีลิเมนต์ HTML แต่ละอีลิเมนต์ได้เลย
  • Internal คือ การใช้งาน CSS ในหน้าเว็บหนึ่ง ๆ โดยการเขียน CSS ไว้ในส่วนหัวของเว็บเพจ ภายในอีลิเมนต์ <style></style>
  • External คือ การเขียน CSS ไว้ในไฟล์อื่น แล้วเรียกเข้ามาใช้งานภายในเว็บเพจอีกที

โดยวิธีที่นิยมที่สุดคือวิธีที่ 3 คือแบบ External เขียน CSS ไว้ในไฟล์อื่นแยกต่างหาก แล้วค่อยนำเข้ามาใช้ในหน้าเว็บเพจแต่ละหน้า จะทำให้เกิดความสะดวกสบาย เพราะเราสามารถเขียนโค้ด CSS เพียงครั้งเดียว แต่สามารถนำไปใช้งานได้หลายที่

Inline CSS

Inline CSS ใช้สำหรับกำหนดสไตล์ให้กับอีลิเมนต์แต่ละตัว โดยไม่มีผลกับอีลิเมนต์ตัวอื่น ๆ เช่น

<h1 style="color:red;">This is a Red Heading</h1>

Internal CSS

Internal CSS ใช้สำหรับเขียน CSS เพื่อใช้งานในหน้าเว็บเพจหนึ่ง ๆ โดยจะเขียนไว้ในส่วน <head></head> ของหน้าเว็บเพจนั้น ๆ โดยโค้ด CSS จะต้องอยู่ภายในแท็ก <style></style> อีกที เช่น

<!DOCTYPE html>
<html>
<head>
    <style>
        body {background-color: powderblue;}
        h1   {color: blue;}
        p    {color: red;}
    </style>
</head>
<body>

<h1>นี่คือส่วนหัว</h1>
<p>นี่คือพารากราฟ</p>

</body>
</html>

บรรทัดที่ 4-8 เป็นการเขียน CSS ไว้ในเว็บเพจ

CSS ที่เขียนไว้ในหน้าเว็บเพจลักษณะนี้ จะมีผลต่ออีลิเมนต์ในหน้าเว็บเพจนั้นเท่านั้น

External CSS

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

โดยการใช้งาน External CSS นั้น เราต้องเพิ่มแท็ก <link> เข้าไปยังส่วน <head></head> ของเว็บเพจ แล้วอ้างอิงไปยังไฟล์ CSS ที่ต้องการใช้งาน ดังตัวอย่าง

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

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

บรรทัดที่ 4 เป็นการอ้างอิงไฟล์ CSS จากภายนอก

ไฟล์ CSS ที่สร้างขึ้น สามารถเขียนด้วยโค้ด CSS ได้เลย โดยไม่ต้องมีโค้ด HTML ใด ๆ ทั้งสิ้น และต้องบันทึกเป็นรูปแบบไฟล์ CSS คือไฟล์จะมีนามสกุลเป็น .css ซึ่งลักษณะของโค้ด CSS จะเป็นดังนี้

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

CSS Fonts

เมื่อต้องการกำหนดรูปแบบอักษร Fonts ให้กับอีลิเมนต์ใด ๆ เราสามารถใช้พร็อพเพอร์ตี้ ดังนี้

  • color ใช้กำหนดสีฟ้อนต์
  • font-family ใช้กำหนดรูปแบบฟอนต์
  • font-size ใช้กำหนดขนาดฟอนต์

ตัวอย่างการใช้ CSS กำหนดฟอนต์

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
        color: blue;
        font-family: verdana;
        font-size: 300%;
        }
        p  {
        color: red;
        font-family: courier;
        font-size: 160%;
        }
    </style>
</head>
<body>

<h1>นี่คือส่วนหัวเรื่อง</h1>
<p>นี่คือส่วนย่อหน้าหรือพารากราฟ</p>

</body>
</html>

CSS Border

เราสามารถกำหนดลักษณะของเส้นขอบให้อีลิเมนต์ได้ โดยใช้พร็อพเพอร์ตี้ border ดังนี้

p {
  border: 1px solid powderblue;
}

CSS Padding

พร็อพเพอร์ตี้ padding ใช้สำหรับกำหนดระยะห่างระหว่างตัวอักษรกับเส้นขอบด้านใน โดยต้องกำหนดเป็นพิกเซล โดยมีการใช้งานดังนี้

p {
  border: 1px solid powderblue;
  padding: 30px;
}

CSS Margin

พร็อพเพอร์ตี้ margin ใช้สำหรับกำหนดระยะห่างระหว่างขอบอีลิเมนต์ด้านนอกกับขอบของอีลิเมนต์อื่น ๆ ดังนี้

p {
  border: 1px solid powderblue;
  margin: 50px;
}

แอททริบิวต์ id

แอททริบิวต์ id ใช้สำหรับระบุรหัสที่เฉพาะเจาะจงสำหรับอีลิเมนต์หนึ่ง ๆ ใน HTML เหมือนเลขประจำตัวประชาชน เช่น

<p id="paragraph1">I am different</p>

จากโค้ด เราได้ระบุ id ให้กับแท็ก p เป็น paragraph1 เมื่อใดก็ตามที่มีการอ้างอิงถึงไอดี paragraph1 ย่อมจะหมายถึงอีลิเมนต์นี้เพียงตัวเดียวเท่านั้น

เมื่อต้องการระบุ CSS ให้กับอีลิเมนต์ที่มีการตั้งค่า id ไว้ สามารถทำได้โดยใช้เครื่องหมาย # ตามด้วย id ของอีลิเมนต์นั้น ๆ เช่น #paragraph1 ดังนี้

#paragraph1 {
  color: blue;
}

จากโค้ดด้านบน จะมีผลกับอีลิเมนต์ที่มี id เป็น paragraph1 เท่านั้น จะไม่มีผลกับอีลิเมนต์อื่น

แอททริบิวต์ class

ใน HTML เราสามารถระบุแอททริบิวต์ class ให้กับอีลิเมนต์ใด ๆ ก็ได้ เพื่อความสะดวกในการตกแต่งด้วย CSS ในภายหลัง และชื่อ class เดียวกัน สามารถกำหนดให้กับอีลิเมนต์มากกว่าหนึ่ง ดังนี้

<p class="redtext">I am HTML</p>
<p class="redtext">I am HTML</p>
<p class="redtext">I am HTML</p>

เมื่อต้องการกำหนด CSS ให้กับอีลิเมนต์ที่มีการระบุคลาดไว้ สามารถทำได้โดยการใช้เครื่องหมาย . ตามด้วยชื่อคลาส ดังนี้

.redtext {
  color: red;
}

โค้ดด้านบน จะมีผลกับอีลิเมนต์ที่มีชื่อคลาสเป็น redtext เท่านั้น

การอ้างอิง CSS จากภายนอก

เราสามารถอ้างอิงไปยังไฟล์ CSS จากภายนอกได้ ไม่ว่าจะเป็น CSS ที่อยู่ในเว็บไซต์อื่น หรือเว็บไซต์เดียวกัน โดยใช้แท็ก <link> ดังนี้

การอ้างอิงค์ CSS จากเว็บไซต์ภายนอก

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

การอ้างอิงไฟล์ CSS ในเว็บไซต์เดียวกัน แต่อยู่นอกเว็บเพจ

<link rel="stylesheet" href="/html/styles.css"> 
หรือ
<link rel="stylesheet" href="styles.css">
Tags

เรื่องที่น่าสนใจ