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

April 23, 2012 10:57 am CSS HTML

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

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

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

Inline style

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

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

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

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

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

อย่างเช่น

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

เรียกจาก file โดยใช้ <link>

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

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

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

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

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

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

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

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

  • disqus_g0mpW0emNb

    vvvvv

    • disqus_g0mpW0emNb

      gghh