โครงสร้างของ CSS (เขียนไว้กันลืม)
class ใช้จุด . / ID ใช้ #
selector {property :value; property:value …}
เช่น p {color;red;text-align:center;padding:10px;}
อธิบายได้ว่า p คือ selector // ใน HTML ค่านี้จะทำงานที่ tag p
color คือ property หรือ attribute
red คือ value
การกำหนด css แบบ internal style
การกำหนด CSS แบบ ID
#msg { color:green;
text-align:center;
padding:10px;
}
#msg หมายถึงการใช้งานในรูปแบบ ID
เมื่อกำหนด css แบบid ชื่อว่า #msg แล้วก็สามารถเรียกใช้ได้ดังนี้
<p id=”msg“> เราสามารถเขียนข้อความในนี้ </p>
การกำหนด CSS ให้เรียกใช้ได้แบบหลากหลาย
.title, #msg, #box { color:green;
text-align:center;
padding:10px;
}
.title, #msg, #box หมายถึง การกำหนดให้มีหลายชื่อ สามารถเรียกใช้ได้หลายรูปแบบ ใช้ได้เหมือนกันไม่ต้องกำหนดทีละตัว
การกำหนด CSS (tag+class)
p.red{
color:red;}
p.green{
color:green;}
วิธีใช้
<p class=”red”> ข้อความที่อยู่ในแทก p และมีคลาส red จะทำงาน </p>
<p class=”green”> ข้อความที่อยู่ในแทก p และมีคลาส green จะทำงาน </p>
ก็หมายถึง css ที่กำหนดให้มองหา HTML ที่มี class ชื่อตามระบุไว้เช่น
มองหาแทก p ที่มี class =”red” cssที่เราเขียนไว้ p.red ก็จะทำงานนั่นเอง
Universal Selector
กำหนด style sheet ที่มีผลต่อทุกแท็กของเว็บเพจ โดยใช้เครื่องหมาย *
*{
color:red;
}
แบ่งปันกัน เราอยู่กันไม่เกิน 100 ปีหรอกครับ
สุดท้ายก็ทิ้งไว้ที่โลก จะคงเหลือไว้แต่คุณงามความดีที่ให้ระลึกถึงกันครับ
Follow Us / Thanat Sirikitphattana
นายช่างโยธา ศูนย์ก่อสร้างและบูรณะถนน 3 ส่วนก่อสร้างและบูรณะ 2 สำนักการโยธา
