ใช้ class แอตทริบิวต์
ใช้ HTML class แอตทริบิวต์ทำให้มันเป็นไปได้ที่จะกำหนดรูปแบบที่เท่าเทียมกันสำหรับองค์ประกอบที่มีชื่อชั้นเดียวกัน
ที่นี่เรามีสาม <div> องค์ประกอบที่ชี้ไปที่ชื่อชั้นเดียวกัน
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
div.cities {
background-color: black;
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital of England. It is the most
populous city in the United Kingdom, with a metropolitan area of over 13
million inhabitants.</p>
</div>
<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of
France.</p>
</div>
<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the
Greater Tokyo Area,
and the most populous metropolitan area in the
world.</p>
</div>
</body>
</html> ลองตัวเอง» กรุงลอนดอน
ลอนดอนเป็นเมืองหลวงของประเทศอังกฤษ มันเป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักรมีพื้นที่เมืองหลวงของกว่า 13 ล้านคนอาศัยอยู่
ยืนอยู่บนแม่น้ำเทมส์ในกรุงลอนดอนได้รับการตั้งถิ่นฐานที่สำคัญสำหรับสองพันปีประวัติศาสตร์จะกลับไปที่ก่อตั้งโดยชาวโรมันที่ตั้งชื่อมัน Londinium
ปารีส
ปารีสเป็นเมืองหลวงและมีประชากรมากที่สุดเมืองของฝรั่งเศส
ตั้งอยู่บนแม่น้ำแซนก็เป็นหัวใจสำคัญของภูมิภาค Ile-de-France ยังเป็นที่รู้จัก Parisienne ภูมิภาค
ภายในพื้นที่นครบาลเป็นหนึ่งในที่ใหญ่ที่สุดศูนย์ประชากรในยุโรปที่มีมากกว่า 12 ล้านคนที่อาศัยอยู่
โตเกียว
โตเกียวเป็นเมืองหลวงของประเทศญี่ปุ่นซึ่งเป็นศูนย์กลางของมหานครโตเกียวพื้นที่และพื้นที่มหานครที่มีประชากรมากที่สุดในโลก
มันเป็นที่นั่งของรัฐบาลญี่ปุ่นและพระราชวังอิมพีเรียลและบ้านของราชวงศ์ญี่ปุ่น
จังหวัดโตเกียวเป็นส่วนหนึ่งของเขตเมืองที่มีประชากรมากที่สุดในโลก 38 ล้านคนและเศรษฐกิจเมืองที่ใหญ่ที่สุดของโลก
ใช้ class แอตทริบิวต์ใน Inline องค์ประกอบ
แอตทริบิวต์ชั้น HTML นอกจากนี้ยังสามารถนำมาใช้สำหรับองค์ประกอบแบบอินไลน์:
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
span.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span
class="note">Important</span> Heading</h1>
<p>This
is some <span
class="note">important</span> text.</p>
</body>
</html> ลองตัวเอง» ทดสอบตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ใช้สิทธิ 2 » ออกกำลังกาย 3 »