[CSS] พื้นฐานการเรียกใช้งาน CSS

เขียนเกี่ยวกับ CSS มาเยอะแยะ คราวนี้ขอย้อนกลับไกลหน่อย ย้อนกลับมาถึงการเรียกใช้งาน CSS ซึ่งการเรียกใช้งาน CSS นั้นก็มีอยู่ในหลาย ๆ รูปแบบ

พื้นฐานการเรียกใช้งาน CSS

เรามาดูการเรียกใช้งานแบบหลัก ๆ ที่เห็นกันบ่อย ๆ นะครับ ก็จะมี Inline style, เขียนใน >head< หรือเขียนเรียกจาก >link<

Inline style

ก็คือการเขียนลงไปในตัว tag HTML เลย โดยเรียกใช้ด้วย style="xxx" อย่างเช่น

<h1 style="font-size:32px;color:#FF0000;">Kwon Yuri</h1>

รูปแบบนี้คือการใช้งานแบบ Inline style เป็นการกำหนดให้เฉพาะตัวนี้ มีคุณสมบัติดังที่เรากำหนดให้

เขียนลงไปใน <head>

ก็คือการกำหนดคุณสมบัติให้ element ตัวไหน มีคุณสมบัติตามที่เรากำหนด โดยคลุมด้วย <style></style>

อย่างเช่น

<head>
  <style> h1 { font-size:32px; color:#FF0000; } </style>
</head>

ให้สร้าง file css ขึ้นมา ในนั้นก็เขียน CSS กำหนดคุณสมบัติให้ตัว element ต่าง ๆ ตามที่เราต้องการ แล้วก็ใช้ >link< เพื่อเรียก file CSS ที่เราสร้างขึ้นมาใช้งาน อย่างเช่น ผมสร้าง style.css แล้ววางไว้ในตำแหน่งชั้นเดียวกับตัว index.html ของเรา ก็เรียกโดย

<head>
  <link rel="stylesheet" href="style.css" />
</head>

แต่ก่อนจะทำความเข้าใจเรื่องการเรียกใช้งานมากขึ้นกว่านี้ แนะนำให้ไปอ่านหัวข้อ CSS : ลำดับความสำคัญของ style ใน CSS ก่อนเพื่อทำความเข้าใจเรื่อง ID และ Class ใน tag HTML

หลังจากที่เรียนรู้เรื่องเกี่ยวกับ ID และ Class เสร็จแล้ว คราวนี้เรามาดูกันนะครับ ว่าจะนำไปใช้กับ CSS ได้อย่างไรบ้าง

<h1 id="heading1" class="title1">Kwon Yuri</h1>

ถ้าเรามี element ที่มี ID และ Class แบบนี้ เราสามารถกำหนดคุณสมบัติให้ได้แบบนี้ครับ

// ใช้ชื่อ Tag HTML
h1 {
  font-size: 32px;
  color: #FF0000;
}
// ใช้ชื่อ ID
#heading1 {
  font-size: 32px;
  color: #FF0000;
}
// ใช้ชื่อ Class
.title1 {
  font-size: 32px;
  color: #FF0000;
}

ซึ่งจากบทความที่ให้ไปอ่านมาก่อนนั้น เราก็จะเข้าใจอยู่แล้ว ในแต่ละแบบมันต่างกันอย่างไร ตัวไหนสำคัญกว่ากัน


Posted

in

by

Tags:

Comments

One response to “[CSS] พื้นฐานการเรียกใช้งาน CSS”

  1. disqus_g0mpW0emNb Avatar
    disqus_g0mpW0emNb

    gghh

Leave a Reply

Your email address will not be published. Required fields are marked *