Page 1 of 1

CSS การใช้งาน Selectors (Grouping Selectors) เลือกกรอบขอบเขตหลายๆตัว

Posted: 11/02/2015 3:17 pm
by thitikorn_lp
CSS การเรียกใช้งาน Grouping Selectors

Selector จะทำให้เราสามารถเลือกได้ว่าต้องการจะจัดการกับองค์ประกอบในหน้า HTML ของเราได้อย่างไร ต้องการกำหนดรูปแบบที่ตรงไหน ในตอนนี้จะเป็นการกำหนด selector โดยจัดเป็น group

กำหนดโดยใช้ "group" รวมกลุ่มของลักษณะที่มีรูปแบบเหมือนกัน (Grouping Selectors)
การใช้ Grouping Selectors ก็ต่อเมื่อมี element หลายๆ ตัว ที่มีรูปแบบเหมือนกัน เช่น ตำแหน่งเหมือนกัน, สีเหมือนกัน เป็นต้น

Code: Select all

h1 {
    text-align: center;
    color: blue;
}

h2 {
    text-align: center;
    color: blue;
}

p {
    text-align: center;
    color: blue;
}
เราสามารถรวมกลุ่มของ element เหล่านี้ได้ โดยการรวมกลุ่มให้มัน โดยใช้เครื่องหมายจุลภาค ( , ) คั่น

Code: Select all

h1, h2, p {
         text-align: center;
         color: blue;
         }

การเรียกใช้ก็เรียกใช้ปกติ เช่น <p> ข้อความ </p>

Code: Select all

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
    text-align: center;
    color: blue;
}
</style>
</head>
<body>

<h1>Hello MindPHP!</h1>
<h2>MindPHP!</h2>
<p>www.mimdphp.com</p>

</body>
</html>
ผลที่ได้
2015-02-11_15-15-12.png
2015-02-11_15-15-12.png (17.2 KiB) Viewed 418 times