قالب وردپرس پوسته وردپرس قالب فروشگاهی وردپس
خانه / آموزش css / ساختار اصلی و اساسی آموزش css

ساختار اصلی و اساسی آموزش css

در این مقاله از آموزش CSS به ساخت یک  Tooltipدر CSS می پردازیم.می دانیم که  Tooltip برای نمایش یک پیام خاص به کاربر مورد استفاده قرار می گیرد.

نحوه ساخت Tooltip در CSS

برای ساخت یک Tooltip  لازم است مقاله مربوط به آشنایی با position ها در CSS را بخوانید.این مقاله مثالی کاربردی  برای تمرین بیشتر در آموزش CSS خواهد بود که به شما کمک می کند دستورات آموزش داده شده را بهتر مسلط شوید و عمیق تر درک نمایید.

<style>
/* Tooltip container */
.tooltip {
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
    position: relative;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

/* Tooltip text */
.tooltip .tooltiptext {
width: 120px;
    visibility: hidden;
    background-color: brown;
    color: #fff;
    padding: 7px 0;
    border-radius: 8px;
    text-align: center;
    position: absolute;
    z-index: 2;
}



</style>

<div class="tooltip">mouse hover here
  <span class="tooltiptext">Tooltip text is here.</span>
</div>

کدهای بالا نحوه ساخت یک tooltip را در CSS آموزش می دهد.در مثال بالا با استفاده از یک تگ div و کلاس اختصاص داده شده به ان،این tooltip ساخته شده است.در مورد استفاده از کلاس ها در CSS در مقالات گذشته توضیح داده شد.خاصیت border-radius در CSS وظیفه انحنا بخشیدن به اطراف عنصر را دارد.از اینرو جهت زیبایی ظاهری خروجی کار، به اندازه کمی border-radius اختصاص داده شده است.عرض یا width این tooltip را برابر با ۱۲۰ پیکسل قرار داده ایم.در مورد اینکه چرا برای ساخت این tooltip از پوزیشن absolute استفاده شده ،به مقاله مربوطه آموزش انواع پوزیشن ها در CSS مراجعه نمایید.همانطور که مطرح شده بود ،پوزیشن absolute یکی از پرکاربردترین نوع پوزیشن ها در CSS محسوب می شود.لذا لازم است با کاربرد آن بیشتر آشنا شویم.دستور border-bottom  جهت ایجاد کادر در پایین اضافه شده است.در این دستور CSS ،توجه نمایید که به صورت مخفف ، ضخامت و رنگ بندی و نوع کادر (dotted) مشخص شده است که کادر را به صورت نقطه نقطه در پایین این عنصر قرار می دهد.می توانید از این کد برای ایجاد tooltip استفاده نمایید.توجه کنید که برای ایجاد یک tootip واقعی بهتر است از جاوااسکریپت هم استفاده نمایید.هرچند با استفاده از CSS می توان این tooltip را ایجاد کرد اما با استفاده از جاوااسکریپت ابزارها و امکانات نسبتا بیشتری برای ساخت tootip در css در اختیار ما قرار خواهد گرفت.طی چندین مقاله قصد داریم آموزش مقدماتی و پیشرفته CSS را دنبال کنیم.در صورتی که به آموزش جوملاعلاقه مند هستید کلیک کنید.

 

سايت بزرگ کليک سايت،بهترين مرجع در ضمينه آموزش طراحي سايت و آموزش html و آموزش css ميباشد.تمامي فيلم هاي آموزشي اين سايت توسط استادان کاردان و بسيار با تجربه تهيه شده که تضميني بر کيفيت بالاي تمامي آن ها است.قيمت محصولات نيز کاملا رقابتي بوده و با مقايسه آن با ساير سايت ها ميتوان به خوبي متوجه اين موضوع شد.

درباره ی admin

مطلب پیشنهادی

پازیشن های مختلف

پس از اینکه طی چندین مقاله با  برخی دستورات CSS آشنا دشمی اکنون نوبت به …

پاسخ دهید

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

قالب وردپرس پوسته وردپرس قالب فروشگاهی وردپس