آموزش طراحی سایتآموزش HTML

معرفی صفت های عمومی در HTML بخش دوم

صفت style چیست ؟ چگونه از صفت style در html استفاده نماییم ؟ صفت عمومی title چیست ؟ صفت title در html چه کاربردی دارد ؟ از صفت hidden در html چه استفاده می شود ؟ اگر به دنبال یافتن پاسخ این سوالات هستید این مقاله آموزشی را به هیچ عنوان از دست ندهید.

آموزش صفات عمومی contenteditable ، title ، style و صفت hidden

در جلسه گذشته به معرفی تعدادی از صفت‌های عمومی در HTML پرداختیم در این جلسه قصد داریم به ادامه ی مبحث صفت‌های عمومی در HTML بپردازیم. در جلسه گذشته با صفت های عمومی dir ، class، id، و lang در HTML آشنا شدیم حال می خواهیم مابقی صفت‌های عمومی در HTML را به شما عزیزان آموزش دهیم.

صفت های عمومی در HTML

  • صفت title:

    زمانی که بخواهیم درباره ی یک المان یا عنصر توضیحاتی را ذکر کنیم تا هنگامی که کاربر اشاره گر موس خود را بر روی آن عنصر قرار داد این توضیحات به او نشان داده شود از صفت title درون تگ های HTML استفاده می‌کنیم به مثال زیر دقت کنید :

    <p title="آموزش طراحی سایت">Mizfa.com</p>
    صفت های عمومی - نتیجه کد 1
    نتیجه کد بالا
  • صفت style :

    با استفاده از صفت style می‌توانیم چندین ویژگی CSS را بر روی تگ های HTML اعمال نماییم این صفت ، ویژگی های CSS و مقدارشان را به عنوان مقدار می پذیرد در صورتی که بخواهیم از چندین ویژگی CSS در صفت style استفاده نماییم ویژگی های CSS باید با علامت سیمی کالن (;) از هم جدا شوند به مثال های زیر توجه کنید :

    در مثال ۲ دو ویژگی color و text-align با سیمی کالن از هم جدا شده‌اند.

    <p style="color:red"> این یک پاراگراف است </p>
    
    <h1 style="color:blue;text-align:center"> این یک پاراگراف است </h1>
صفت های عمومی - نتیجه کد
نتیجه کد بالا
  • صفت hidden:

    با استفاده از صفت hidden می‌توان عناصر را از دید کاربر مخفی کرد این صفت دو مقدار true و false را به عنوان مقدار می پذیرد زمانی که مقدار صفت hidden برابر با true باشد عنصر یا المان مخفی می شود و زمانی که مقدارش برابر false است المان به کاربر نشان داده می‌شود درصورتی که صفت hidden را همانند مثال ۲ بدون مقداردهی استفاده کنیم مقدار آن به صورت پیش فرض true در نظر گرفته می‌شود . به مثال های زیر توجه کنید :

    <p hidden='true'> این پاراگراف مخفی است </p>
    
    <p hidden> این پاراگراف مخفی است </p>
  • صفت contenteditable:

    با استفاده از صفت contenteditable می‌توانیم محتوای یک پاراگراف را برای کاربر قابل ویرایش نماییم این صفت دو مقدار true و false را به عنوان مقدار می‌پذیرد زمانی که مقدار contenteditable برابر true است متن پاراگراف برای کاربر قابل ویرایش می‌شود و وقتی که مقدارش برابر false باشد محتوای پاراگراف غیر قابل ویرایش است درصورتی که صفت contenteditable را همانند مثال ۲ بدون مقداردهی استفاده کنیم مقدار آن به صورت پیش فرض true در نظر گرفته می‌شود . به مثال زیر توجه کنید :

     <p contenteditable='true'> این پاراگراف قابل ویرایش است </p>
    
    <p contenteditable> این پاراگراف قابل ویرایش است </p>
    
    <p contenteditable='false'> این پاراگراف قابل ویرایش است </p>

     

    صفت های عمومی - نتیجه کد
    نتیجه کد بالا

توجه :

  • صفت hidden در مرورگر Internet Explorer ورژن 10 و پایین تر پشتیبانی نمی شود .
  • برای استایل دهی عناصر و تگ های HTML از زبان CSS استفاده می‌شود .

خب به پایان این جلسه آموزشی رسیدیم در جلسه آینده به معرفی تگ های قالب بندی متن در HTML می‌پردازیم.

برچسب ها

علی اسمعیلی

درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم...

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر
دوره سئو، رایگان شد.
یک چیز متفاوت تجربه کنید
کاراکتر اشاره گر