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

Post a reply

Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies
BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON
Topic review
   

Expand view Topic review: CSS การใช้งาน Selectors (class Selector)

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

by thitikorn_lp » 11/02/2015 3:15 pm

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 688 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 688 times

Top