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

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

thitikorn_lp
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 677
ลงทะเบียนเมื่อ: 28/07/2014 10:24 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย thitikorn_lp »

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

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

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

โค้ด: เลือกทั้งหมด

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

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

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

โค้ด: เลือกทั้งหมด

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

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

โค้ด: เลือกทั้งหมด

<!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 1064 times
รูปภาพ
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: Majestic-12 [Bot] และบุคลทั่วไป 69