เขียนเกี่ยวกับ 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 โดยใช้ <link>
ให้สร้าง 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;
}ซึ่งจากบทความที่ให้ไปอ่านมาก่อนนั้น เราก็จะเข้าใจอยู่แล้ว ในแต่ละแบบมันต่างกันอย่างไร ตัวไหนสำคัญกว่ากัน
Leave a Reply