ตัวอย่าง
การใช้งานของ class แอตทริบิวต์ในเอกสาร HTML:
<html>
<head>
<style>
h1.intro {
color: blue;
}
p.important {
color: green;
}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Note that this is an important paragraph. :)</p>
</body>
</html>
ลองตัวเอง» เพิ่มเติม "ลองตัวเอง" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
class แอตทริบิวต์ระบุหนึ่งหรือมากกว่า classnames สำหรับองค์ประกอบ
class แอตทริบิวต์ส่วนใหญ่จะใช้ในการชี้ไปที่ระดับในสไตล์ชี แต่ก็ยังสามารถนำมาใช้โดย JavaScript (ผ่าน DOM HTML) เพื่อทำการเปลี่ยนแปลงองค์ประกอบ HTML กับคลาสที่ระบุ
สนับสนุนเบราว์เซอร์
คุณลักษณะ | |||||
---|---|---|---|---|---|
class | ใช่ | ใช่ | ใช่ | ใช่ | ใช่ |
ความแตกต่างระหว่าง HTML 4.01 และ HTML5
ใน HTML5 ที่ class แอตทริบิวต์ที่สามารถใช้กับองค์ประกอบ HTMLใด ๆ (มันจะตรวจสอบในองค์ประกอบ HTML ใด ๆ . แต่ก็ไม่จำเป็นต้องมีประโยชน์)
ใน HTML 4.01 ที่ class แอตทริบิวต์ไม่สามารถใช้กับ: <base>, <head>, <html>, <meta>, <param>, <script>, <style> และ <title>
วากยสัมพันธ์
<elementclass="classname">
ค่าแอตทริบิวต์
ความคุ้มค่า | ลักษณะ |
---|---|
classname | ระบุหนึ่งหรือมากกว่าหนึ่งชื่อชั้นสำหรับองค์ประกอบ เพื่อระบุหลายชั้นเรียนแยกชื่อชั้นที่มีพื้นที่เช่น <span class="left important"> นี้จะช่วยให้คุณสามารถรวมคลาส CSS หลายองค์ประกอบหนึ่ง HTML กฎการตั้งชื่อ:
|
ตัวอย่างเพิ่มเติม
ตัวอย่าง
เพิ่มชั้นเรียนหลายองค์ประกอบ HTML ที่หนึ่ง:
<!DOCTYPE html>
<html>
<head>
<style>
h1.intro {
color: blue;
text-align: center;
}
.important {
background-color: yellow;
}
</style>
</head>
<body>
<h1 class="intro
important">Header 1</h1>
<p>A paragraph.</p>
</body>
</html>
ลองตัวเอง» หน้าเว็บที่เกี่ยวข้อง
HTML Tutorial: HTML คุณสมบัติ
สอน CSS: CSS Selectors
CSS อ้างอิง: CSS .class เลือก
HTML DOM อ้างอิง: HTML DOM getElementsByClassName() วิธี
HTML DOM อ้างอิง: HTML DOM className ทรัพย์สิน
HTML DOM อ้างอิง: HTML DOM classList ทรัพย์สิน
HTML DOM อ้างอิง: HTML DOM สไตล์วัตถุ