فراگیری پباده سازی سایت
h1 , h2 , h3 {
font - family : “ Trebuchet MS ” , Helvetica , Arial , sans - serif;
}
h1 {
font - size : x - large;
background - color : navy;
color : white;
}
h2 {
color : navy;
font - size : 130 % ;
font - weight : normal;
}
design - web - 136 . jpg
ما برای تگ h2 مسافت بین خطوط یا این که به عبارتی line - height را برابر با 130 % تعیین کردیم که می گردد کمی که از سایز large بزرگتر و از x - large کوچکتر است .
نکته از ترجمه کننده :
توجه نمائید همگی این پروسه جز تمرین شما حساب میگردد و می‌توانید روی هر فایلی انجام دهید . یعنی اهمیت ندارد حتماً روی پوشه معرفی شده از کتاب کار نمایید .
اضافه کردن : padding
در صورتیکه نگاهی به بخش heading وب سایت خویش و به بردرهای آن که در قسمت های پیش به بررسی آنان پرداختیم بیاندازید . متوجه می‌شوید در جاهایی که به دور متن‌ها بردر قرار دادیم بردر ها به متن ها چسبیده اند و هیچ مسافت ای فی مابین آن ها نیست . این نوع نمایش متن ها مقداری غیرمناسب به حیث می‌رسد , به لحاظ شما ایطور نیست؟ برای رفع این مورد بیایید تا پاره ای مسافت در بین آن‌ها تولید کنیم , به‌این خواسته از padding استفاده میکنیم .
در ذیل سه روش گوناگون برای اضافه کردن padding به موادسازنده بلاک با واحد های گوناگون em و px و % مستعمل شده‌است :
. pixelpadding {
padding : 30px;
border : 1px dashed gray;
}
. empadding {
padding : 2em;
border : 1px dashed gray;
}
. percentagepadding {
padding : 5 % ;
border : 1px dashed gray;
}
design - web - 138 . jpg
کدام پیمانه دلخواه خیس است؟
در صورتیکه هر سه روش بالا تاثیر یکسانی بر روی پباده سازی تارنما شما می‌گذارند , پس چه چیزی در حین تعیین یکی از طریق هاتوسط شما تاثیر گذار است؟ جواب این است : که شما دوست دارید تارنما شما چه گونه خلق و خوی نماید و نمایش یابد .
نکته فراوان دارای اهمیت :
• در حالتی که شما رغبت دارید که وب سایت شما با تغییر تحول سایز پنجره کوچک و بزرگ شود براین اساس بایستی ازروش درصدی استفاده فرمایید . هر قدر سایز پنجره مرورگر شما بزرگتر شود به به عبارتی نسبت هم میزانpadding داده شده بزرگتر خواهد شد . به عنوان مثال در پباده سازی وبسایت فوق از این روش مستعمل شده‌است .
• اگرکه میخواهید طوری وبسایت خویش را پباده سازی نمایید که با عوض کردن سایز فونت های برگه مسافت هایی که در وب سایت خویش تولید میکنید به به عبارتی نسبت کم و یا این که دوچندان شوند پس در‌این‌حالت شما بایستی از مقیاس em استفاده نمایید . چرا‌که مقدار های مو جود در وبسایت مبنی بر میزان سایز فونتی است که استفاده کننده برای مرورگر خویش تهیه و تنظیم نموده است , درصورتی که یوزرها سایز فونت مرورگر خویش را ارتقا دهند در‌این‌صورت مسافت های با مقیاس em هم به طور همزمان با تغییر تحول سایز فونت مرورگر بسیار خواهند شد .
• اگرکه شما در پباده سازی وبسایت خویش برای عناصری در سایتتان که قرار است سوای در لحاظ به چنگ آوردن سایز فونت ها و هم تغییر تحول سایز پنجره مرورگر همواره یک سایز ثابتی داشته باشند از مقیاس پیکسل بایستی استفاده فرمائید . یک پیکسل نسبتاً برابر با یک نقطه در کاغذ صفحه نمایش شما می‌شود . چرا میگوییم نسبتاً زیرا بیشتر مرورگرهای نو امکان قابلیت بزرگ نمایی کاغذ را برای استفاده کننده دارا‌هستند و همگی عنصرها ورقه را می‌توانند به یک نسبت بزرگ کنند که در‌این در بین یوزرها اقتدار در اختیار گرفتن پاره ای در زمان بزرگ نمایی نسبت به موادسازنده خواهند داشت .
تعریف padding و اضافه کردن آن به وب سایت :
افزودن مسافت بین موادتشکیل دهنده تارنما سبب بهبود دادن ظواهر وبسایت خواهد شد . بیایید تا با نیز این کار را انجام دهیم و تغییراتی را در پروژه خویش اعمال کنیم . یه خرده وقت بگذارید و padding های اضطراری را به به تگ های heading ( رمز تیترها ) در پوشه style1 . css خویش انجام دهید .
به تگ h1 خویش در انتهای استایل های داده شده خطوط پررنگ شده را بیشتر نمائید .
h1 {
font - size : x - large;
background - color : navy;
color : white;
padding - top : 2em;
padding - bottom : . 2em;
padding - left : . 4em;
}
در سطح سپس بیایید و برای تگ h2 خویش هم مقداری مسافت تولید فرمایید .
h2 {
color : navy;
font - size : 130 % ;
font - weight : normal;
padding - top : 15px;
}
در غایت هم tagline p را هم یافته و به آن نیز مقادیر زیر را بدهید :
#tagline p {
font - style : italic;
font - family : Georgia , Times , serif;
background - color : #bed8f3;
border - top : 3px solid #7da5d8;
border - bottom : 3px solid #7da5d8;
padding - top : . 2em;
padding - bottom : . 2em;
padding - left : . 8em;
}
حال فولدر css خویش را ذخیره کرده و پنجره مرورگر خویش را refresh نمایید تا تغییرات را ملاحظه کنید . همان طور که مراعات میکنید تصویر سمت چپ گذشته از اعمال padding به موادتشکیل دهنده تارنما را نمایش می‌دهد و تصویر سمت راست چهره یی است که بعد از انجام تغییرات باید مشاهده نمائید .