کلاس‌های HTML

HTML را دسته‌بندی کنید (با استفاده از کلاس)، تا بتوانیم استایل‌های CSS برای کلاس عناصر تعریف کنیم.

یا برای کلاس‌های مشابه، استایل‌های مشابه تنظیم کنید، یا برای کلاس‌های مختلف، استایل‌های مختلف تنظیم کنید.

مثال

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>
<body>
<div class="cities">
<h2>لندن</h2>
<p>
لندن پایتخت انگلستان است. 
این پر جمعیت‌ترین شهر در بریتانیا است, 
با منطقه شهری بیش از ۱۳ میلیون ساکن.
</p>
</div> 
</body>
</html>

تست کنید

عناصر بلوکی دسته‌بندی شده

عنصر <div> HTMLعناصر بلوکیو می‌تواند به عنوان محیط برای سایر عناصر HTML استفاده شود.

تعیین نوع <div> با استفاده از کلاس، به ما اجازه می‌دهد تا کلاس‌های مشابه برای عناصر <div> مشابه تنظیم کنیم:

مثال

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>
<body>
<div class="cities">
<h2>لندن</h2>
<p>لندن پایتخت انگلستان است. 
این پر جمعیت‌ترین شهر در بریتانیا است, 
با منطقه شهری بیش از ۱۳ میلیون ساکن.</p>
</div>
<div class="cities">
<h2>پاریس</h2>
<p>پاریس پایتخت و پر جمعیت‌ترین شهر فرانسه است.</p>
</div>
<div class="cities">
<h2>توکیو</h2>
<p>توکیو پایتخت ژاپن و مرکز منطقه بزرگ توکیو است,</p>
و پر جمعیت‌ترین منطقه شهری در جهان است.</p>
</div>
</body>
</html>

تست کنید

عنصر‌های درون‌خط دسته‌بندی‌شده

عنصر <span> یک عنصر درون‌خط است که می‌تواند به عنوان حاوی متن استفاده شود.

تنظیم <span> به عنوان کلاس، امکان تنظیم استایل مشابه برای <span>‌های مشابه را فراهم می‌کند.

مثال

<!DOCTYPE html>
<html>
<head>
<style>
  span.red {color:red;}
</style>
</head>
<body>
<h1>My <span class="red">Important</span> Heading</h1>
</body>
</html>

تست کنید