آشنایی با صفت class در HTML

با استفاده از صفت class در HTML میتوان استایلی معادل برای همه عناصری که نام class یکسانی دارند تعریف کرد. در این فصل به آموزش صفت کلاس میپردازیم.


استفاده از صفت class

با استفاده از صفت 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>
خودتان امتحان کنید

استفاده از صفت class در عناصر Inline

صفت class را میتوان برای عناصر inline نیز مورد استفاده قرار داد :

<!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>
خودتان امتحان کنید

 

منتشر شده در ۱۲ خرداد ۱۳۹۶ حمید رضا ملکی ۱۱۶۵ بازدید
دیدگاه ها

هنوز دیدگاهی ثبت نشده

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید