طراحی سایت ساناتک
سه شنبه 14 شهريور 1396
0
style دهی به تگ های block level و inline

تگ‌های Inline محدودیت‌هایی در زمینه style-دهی به ما می‌دهند:

  1.  رنگ‌ها (شامل متن و پس‌زمینه آن)
  2.  تنظیمات مربوط به font (size، font family، و سایر تنظیمات مربوط به این دسته از جمله خط زیر متن و ... .)

این در حالی است که با در برخورد با تگ block-level دست ما بسیار بازتر خواهد بود:

  1.  مشخص کردن عرض و ارتفاعی مشخص به block تعریف شده برای یک بخش
  2.  قرار دادن افکت padding برای جلوگیری از برخورد متن با کناره‌های block تعریف شده
  3.  منتقل کردن یک block به هر کجای صفحه وب که در نظر داریم، فارغ از جا و مکان مشخص شده برای آن در markup ما

در آغاز نگاهی می‌اندازیم به چگونگی تغییر حالت و اندازه یک block در بر دارنده محتوا. بهتر است بدانید به صورت پیش‌فرض یک تگِ block-level تمامی عرض و ارتفاع در دسترس را اشغال می‌کند و مهم نیست اندازه تگِ دربر دارنده آن چگونه تنظیم شده باشد. در صورت تمایل می‌توانیم این تنظیم پیش‌فرض را تغییر دهیم.

تعیین عرضِ فضای در دسترس برای محتوا

تصور کنید محتوای شما از تعداد زیادی پاراگراف تشکیل شده باشد و می‌خواهید نگاه کاربر را به بخش مهمی از آن‌ها جذب کنید. می‌توان از تغییر font و افزودن حالت bold نیز استفاده کرد اما تغییر عرض نیز گزینه‌ای دیگر برای شما خواهد بود، در این صورت شما می‌توانید حالت پیش‌فرض را تغییر دهید.

.attentiongrab {

width: 50%;

font-weight: bold;

}

در این‌جا از یک class selector استفاده کردیم، در فصل قبل به تفصیل در این رابطه صحبت کرده بودیم، اگر به خاطر داشته باشید با استفاده از آن از این تنظیمات جدید می‌توان به هر تعدادی که در نظر داریم استفاده کنیم. CSS بالا را در مثال HTML پایین به خوبی خواهید دید:

<p>We've stayed in quite a few caravan parks and camp sites over

the last couple of months, and I've started to notice a few

things that seem to suggest that there are some unwritten

rules of staying at these places. Unwritten until now, that

is.</p>

<p>Everyone else on site will be better prepared and better

equipped than you. It's a fact. No matter what extras you

might carry, someone a couple of plots down will still have

more. Utensil envy is rife.</p>

<p class="attentiongrab">When you first park, the distance

between the power supply and your van's power socket will be

precisely 2 inches longer than the inadequate power lead that

you own.</p>

<p>On the hottest evenings, you will be parked next to someone

with a very flashy van that's equipped with an air-con unit.

It will be facing you, blowing out hot air and taunting you

with its efficient hum.</p>

عکس 4.2 به خوبی نحوه نمایش کد بالا را به صورت کاهش عرض یک پاراگراف به میزان 50% نسبت به پاراگراف‌های دیگر نشان می‌دهد.

تعداد بازدید: 92
مطالب دیگر آموزش طراحی سایت
تغییرات فرمت عکس به وسیله CSSآرشیو تصاویر در سایتافزودن گالری تصاویر به سایتفرمت های مختلف تصاویرمزایای خصوصیت alt تصاویر
 
@

با عضویت در خبرنامه در جریان آخرین اخبار و مطالب سایت قرار بگیرید