CSS การใช้งาน Selectors (class Selector)

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

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

thitikorn_lp
PHP Super Hero Member
PHP Super Hero Member
Posts: 680
Joined: 28/07/2014 10:24 am

CSS การใช้งาน Selectors (class Selector)

Post by thitikorn_lp »

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

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

กำหนดโดยใช้ "คลาส" (class Selector)

Code: Select all

.class_name{
           text-align: center;
           color: blue;
           } 
- การกำหนดโดยใช้ class ใน CSS จะเริ่มต้นด้วยสัญญลักษณ์ . แล้วตามด้วยชื่อ class ที่เราต้องการ
- สามารถเรียกใช้ class ได้ด้วย elements แล้วตามด้วย class
- การเรียกใช้ class="class_name"

Code: Select all

<!DOCTYPE html>
<html>
<head>
<style>
.class_name{
           text-align: center;
           color: red;
           }
</style>
</head>
<body>

<h1 class="class_name">MindPHP with Tag h1 </h1>
<p class="class_name">MindPHP with Tag p</p> 

</body>
</html>
ไม่ว่าจะใช้ elements ตัวไหน เมื่อใส่ class="class_name" ก็จะได้รูปแบบตามที่กำหนดไว้ คือข้อความอยู่ตรงกลาง และตัวหนังสือมีสีฟ้า
** ข้อห้าม : ห้ามขึ้นต้น class ด้วยตัวเลขเด็ดขาด
ผลที่ได้
2015-02-11_14-30-55.png
2015-02-11_14-30-55.png (16.44 KiB) Viewed 694 times
หรือจะกำหนด class ให้กับตัว element เผื่อเรียกใช้ก็ได้ โดยตัว element อื่นจะไม่สามารถเรียกใช้ได้

Code: Select all

p.class_name {
             text-align: center;
             color: blue;
             } 
ตัวที่สามารถเรียกใช้ class="class_name" ได้คือ <p> เท่านั้น

Code: Select all

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

<h1 class="class_name">MindPHP</h1>
<p class="class_name">www.mindphp.com</p> 

</body>
</html>
<p class="class_name"> เท่านั้นที่สามารถเรียกใช้รูปแบบได้
<h1 class="class_name"> จะไม่สามารถเรียกใช้ได้
** ข้อห้าม : ห้ามขึ้นต้น class ด้วยตัวเลขเด็ดขาด
ผลที่ได้
2015-02-11_15-08-33.png
2015-02-11_15-08-33.png (14.56 KiB) Viewed 694 times
Image
  • Similar Topics
    Replies
    Views
    Last post

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 3 guests