CSS
Selector แบบ Class และ Id
จากตวั อย่างก่อนหนา้ น้ี เราไดก้ าหนด Selector เป็ น
h1 ซ่ึงเราเรยี กการเขียนแบบน้ีว่า “Tag Selector”
คอื จะสง่ ผลไปยงั ทกุ ๆ HTML Element ท่ีเป็ น h1
เลย ในบางครง้ั การเขียน selector แบบน้ี อาจดูกวา้ งเกนิ ไป
ใหเ้ ราแกไ้ ขไดโ้ ดยการเขียน Selector แบบ Class หรอื
Id แทน
Class
การเขียน Selector แบบน้ี จะเป็ นการระบุ HTML
Element โดยอาศยั Attribute ท่ีมีช่ือว่า “class”
เช่น <h1 class=“red-text”>หวั ขอ้ สแี ดง
</h1> เป็ นตน้
การเขยี น CSS ของ Class
เราจะทาการตง้ั ช่ือ class โดยใสจ่ ุด(.) ไวท้ ่ีดา้ นหนา้ ของ
ช่ือ Class เช่น
.red-text {
color : red;
}
Id
การเขียน Selector แบบน้ี จะเป็ นการระบุ HTML
Element โดยอาศยั Attribute ท่ีมีช่ือว่า “id”
เช่น <h1 id=“slogan”>สโลแกน</h1> เป็ นตน้
การเขยี น CSS ของ Id
เราจะทาการตง้ั ช่ือ id โดยใส่ # ไวท้ ่ีดา้ นหนา้ ของช่ือ id เช่น
#slogan {
color : red;
}
<html> ตงั้ โฟลเดอรใ์ หมว่ า่ ชอ่ื -เลขท-่ี work2
<body> Save as วา่ CSS2.html
<h1>หวั ข้อสีแดง</h1>
<h1>หวั ข้อสีแดง</h1>
<link rel="stylesheet" type="text/css" href="style2.css">
<h1>หวั ข้อสีน้ำเงิน</h1>
<h1>หวั ข้อสีน้ำเงิน</h1>
</body>
</html>
Save as วา่ style2.css
h1{
color : yellow;
}
<html>
<body>
<h1>หวั ข้อสีแดง</h1>
<h1>หวั ขอ้ สีแดง</h1>
<link rel="stylesheet" type="text/css" href="style2.css">
<h1>หวั ขอ้ สีน้ำเงิน</h1>
<h1>หวั ข้อสีน้ำเงิน</h1>
</body>
</html>
h1{
color : yellow;
}
.red-text{
color : red;
}
.blue-text{
color : blue;
}
<h1 class=“red-text”>หวั ขอ้ สีแดง</h1>
<h1 class=“red-text” >หวั ข้อสีแดง</h1>
<h1 class=“blue-text” >หวั ข้อสีน้ำเงิน</h1>
<h1 class=“blue-text” >หวั ขอ้ สีน้ำเงิน</h1>
<h1>สโลแกน</h1>
<h1>หวั ข้อ</h1>
<h1>หวั ขอ้ </h1>
<h1>หวั ขอ้ </h1>
#slogan{
color : red;
}
<h1 id=“slogan”>สโลแกน</h1>
<h1>หวั ข้อ</h1>
<h1>หวั ข้อ</h1>
<h1>หวั ข้อ</h1>
The words you are searching are inside this book. To get more targeted content, please make full-text search by clicking here.
CSS-2 selector
Discover the best professional documents and content resources in AnyFlip Document Base.
Search
CSS-2 selector
- 1 - 14
Pages: