کلاس - Class در HTML

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

کلاس   Class در HTMLمقاله قبلی با عنوان Block در HTML در سایت فعال شده است .در این مقاله میخواهم آموزش استفاده از صفت کلاس - Class را توضیح بدهم . با استفاده از کلاس ها شما می توانید چند استایل خارجی را به یک تگ HTML وصل کنید. برای مثال فکر کنید که شما چند متن دارید که یکی به رنگ آبی ، یکی تو پر و دیگری به صورت ایتالیک نوشته شده که با استفاده از استایل خارجی طراحی گردیده اند و شما می خواهید آنها را با هم ترکیب کنید و در متن چهارم تمام صفات سه متن قبلی را در آن قرار دهید. در این صورت باید نام کلاس های هر کدام که فقط می تواند یک کلمه باشد و در آنها نباید از فاصله و یا اعداد استفاده کرد را در سه متن بالا استفاده شده با فاصله در کنار هم قرار دهیم. به طور کلی از صفت class می توان چندین بار استفاده کرد و تگ ها با خصوصیت آن باشند.می توان چند عنصر با کلاس یکسان تعریف کرد.

در توضیحات بالا با کاربرد کلاس آشنا شدید اما اجازه بدهید به صورت تجربی کاربرد Class را توضیح بدهم .  با استفاده از کلاس می توانیم برای یک تگ HTML استایلهای متفاوتی را تعریف کنیم. برای نمونه فرض کنیم می خواهیم در صفحه دو نوع پاراگراف داشته باشیم: یکی با متن مشکی و دیگری با متن قرمز. برای مشخص کردن این دو نوع پاراگراف می توانیم از سلکتور کلاس استفاده کنیم. ابتدا استایل را به صورت زیر می نویسیم:

 

p.black {color: black}
p.red {color:red}

 

در مرحله بعد باید برای هر پاراگرافی که می خواهیم به رنگ مشکی باشد از شناسه "class="black در تگ <p> استفاده کنیم و برای پاراگراف قرمز از شناسه "class="red. البته نام کلاسها اختیاری است ولی بهتر است آنها را طوری انتخاب کنید که مفهوم داشته باشند تا وقتی که حجم استایل شما بیشتر شد گنگ نباشد. در مثال زیر می توانید کد مربوط به نوشتن دو پاراگراف بالا را در متن HTML ملاحظه کنید . همچنین شما می توانید بیش از یک کلاس برای یک تگ HTML تعریف کنید اما برای این کار نباید دو بار از شناسه class استفاده کرد. بلکه باید در یک شناسه class نام دو کلاس مورد نظر را با یک فاصله بین آنها وارد کرد

 

 

<p class="black">این متنی است که به رنگ مشکی نمایش داده می شود</p>
<p class="red">این متن به رنگ قرمز نمایش داده می شود.</p>

 

برای درک بهتر کد زیر را در یک فایل ذخیره کرده و در مرورگر مشاهده کنید .

 

<!DOCTYPE html>
<html>
<head>
<style>
          .cities {
                     background-color:black;
                     color:white;
                     margin:20px;
                     padding:20px;
                     }
</style>
</head>
<body>
         <div class="cities">
<h2>London</h2>
<p>
London is the capital city of England.
</p>
</div>
</body>
</html>

 



آخرین بروز رسانیچهارشنبه, 18 شهریور 1394 10:03
مجموعه های بیشتر: « Layouts در HTML Block در HTML »

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا