تگِ link یکی دیگر از المان های خالی ماست که در فصل دو به طور مفصل در رابطه با آن ها صحبت کردیم؛ این المان نیز تگ های شروع و پایان ندارد. Link نیز به خودی خود یک المان کامل است و توسط یک فاصله و >/ بسته می شود.
حالا که با هم یاد گرفتیم چگونه فایل CSS خود را در سایت خود لینک کنیم بیایید تغییرات جدیدمان را در پروژه وارد کنیم.
1. فایلِ هر کدام از صفحات سایت خود را —فایل های index.html، about.html و contact.html—در برنامه ویرایش متن تان باز کنید و خط زیر را قبل از تگِ بسته </head> قرار دهید.
2. مطمئن شوید که هر سه فایل را ذخیره کرده باشید و سپس آن ها را ببندید. بعد از این کار هر کدام از آن ها را در مرورگر خود باز کرده و تغییرات را بررسی کنید.
تمام پاراگراف های شما باید به صورت آبی رنگ و bold نشان داده شوند. اگر اینگونه بود به شما تبریک می گوییم—شما با موفقیت توانستید style sheet ساخته شده را به هر سه صفحه خود لینک کنید، حالا اگر برای مثال در فایل CSS خود رنگ آبی را به قرمز تغییر دهید این تغییر در هر سه صفحه طراحی شده تان اعمال می شود.
مشاهده آبی و bold بودن پاراگراف ها نشانه ای از درست اجرا شدن style sheet ما در هر سه صفحه سایت می باشد اما ما این تغییر را نمی خواهیم و آن را تنها برای تست کار اعمال کردیم. تگِ p را از style sheet برداشته و کامنت را بدون تغییر بگذارید. بیایید به صورت جدی style sheet خود را طراحی کنیم.
طراحی style sheet مورد نظر برای استفاده در سایت
Style sheet ما آماده استفاده می باشد و هر سه صفحه سایت ما با موفقیت به آن لینک شده اند، تمام کاری که باید انجام دهیم طراحی style مورد نظر برای اجرا در سایت است.
یکی از اولین تغییراتی که طراحان سایت در طراحی style سایت خود انجام می دهند مشخص کردن فونت استفاده شده در سایتشان است. در ویندوز اکثر مرورگرها Times New Roman را استفاده می کنند، این فونت شاید برای خیلی ها خوشایند نباشد از آنجا که بسیار رایج است و همه از آن استفاده می کنند، در واقع فونت خاص و متفاوتی برای کار ما به حساب نمیاید. برای تغییر فونت در فایل CSS ما بهترین جا درون تگِ head می باشد؛
/*
CSS for Bubble Under site
*/
body {
font-family: Verdana;
}
در اینجا ما فونت Verdana را انتخاب کردیم. این فونت در تگِ body ما اعمال شد از آنجا که تمامی پاراگراف ها و عناوین سایت ما درون تگِ body قرار گرفته اند و CSS این تغییر را به تمامی المان های موجود در body اعمال می کند (مگر اینکه فونتی دیگر را به المانی دیگر اختصاص داده و در CSS خود جایگذاری کرده باشیم—در این رابطه بعدها بیشتر صحبت می کنیم).
خوب پس فونت مورد نظر ما Verdana شد! اما اگر در سیستم بازدید کننده سایت ما این فونت موجود نبود چه اتفاقی میافتد؟! جواب این است که مرورگر فونتی را انتخاب کرده و به جای فونت مورد نظر ما به کاربر نشان می دهد، اما نمی خواهیم این اتفاق بیافتد؛ در اینجا از یکی از قابلیت های بسیار زیبای CSS استفاده می کنیم به این صورت که فونت های مورد نظر خود را به ترتیب اولویت روبه روی font-family در فایل CSS خود ردیف می کنیم؛
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
}
ترجمه خط بالا برای مرورگر کاربر اینگونه می شود: «لطفاً تمامی المان های موجود در body را با فونت Verdana به کاربر نشان بده، اگر چنین فونتی نبود از Helvetica استفاده کن، اگر نبود از Arial و باز هم اگر موجود نبود از sans-serif استفاده کن».
ترتیب بندی فونت ها در سایت غواصی ما اینگونه در نظر گرفته شد که در بالا دیدیم. حالا فایل CSS را باز کرده و style sheet را اینگونه می نویسیم.
1. کد بالا را در فایل style1.css وارد کنید.
2. فایل CSS را ذخیره کنید و در مرورگر خود صفحه index.html را باز کنید.
اگر تمام تغییرات شما با موفقیت صورت گرفت باید هر سه صفحه سایت با تغییرات کوچکی نسبت به قبل در مرورگر شما نمایش داده شوند. در عکس 3.4 نتیجه حاصل را مشاهده کنید.
Style دادن به عناوین (H)
اولین المانی که style آن را تغییر می دهیم عنوان نوع اول ما می باشد—h1. در برنامه ویرایش متن خود دستور زیر را به فایل CSS اضافه کنید؛
h1 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
فایل CSS را ذخیره کرده و در مرورگر خود صفحه خانه سایت را مشاهده کنید. مشاهده می شود که عنوان نوع اول ما با فونتِ Trebuchet MS نشان داده شده در حالی که باقی سایت با همان فونت قبلی، یعنی Verdana نمایش داده می شود.
عکس 3.6: در این تصویر مشاهده می کنیم که تمامی مطالب سایت با فونتِ Verdana نمایش داده شده اما عنوان ما همانطور که برای سایت تعریف کردیم با فونتِ Trebuchet MS به نمایش درآمده است.
بعضی فونت ها را باید با علامت های “…” جداسازی کرد.
در مثال بالا فونت Trebuchet MS را بین دو علامت Quote قرار دادیم، دلیل هم این است؛ در واقع فونت های چند کلمه ای که بین کلمات آن ها فاصله وجود دارد باید بین این دو نشانه قرار بگیرند، توجه داشته باشید که تنها آن هایی که از چند کلمه تشکیل شده اند، پس فونت هایی مثل Arial یا Verdana نیازی به این جداسازی ندارند.
تمامی صفحات سایت را بررسی کنید تا اطمینان یابید که تغییرات صورت گرفته به تمامی آن ها اعمال شده است.
هیچ تغییری ایجاد نشد؟!
اگر مرورگر خود را رفرش کرده و تغییرات اعمالی بر روی فایل CSS را مشاهده نکردید قدم اول برای شما بررسی کردن دوباره فایل CSS می باشد، ببینید که فایل را پس از اعمال تغییرات بیان شده ذخیره کرده اید یا نه. اگر ذخیره کرده بودید اشکال از اینجا نیست و احتمال دیگری برای بروز خطا در بارگذاری سایتتان وجود دارد.
مرورگرها امکانی را در خود جای داده اند به نامِ cache. با استفاده از این قابلیت مرورگر برای سرعت بخشیدن به بارگذاری سایت نیازی ندارد که هر دفعه تمامی فایل ها را دانلود کند و در واقع بخشی از اطلاعات و فایل های سایت را درون حافظه هارد شما کپی کرده تا مجبور نباشد هربار تمامی فایل ها را دانلود کند. متاسفانه اطلاعاتِ ذخیره شده در cache گاهی قدیمی شده و اینچنین مشکلاتی رخ می دهند. این اتفاق معمولاً برای عکس های سایت رخ می دهد اما گاهی برای اطلاعات ذخیره شده در فایل CSS نیز ایجاد می شوند. کاری که باید انجام دهید این است که در تنظیمات مرورگر خود به دنبال cache یا Temporary Internet Files بگردید و آن را پاک کنید یا اینکه فضای ذخیره سازی این قسمت را تغییر دهید. ممکن است کاربران زیادی علاقه نداشته باشند تنظیمات پیش فرض مرورگر خود را تغییر دهند در این صورت کار ساده ای که باید انجام دهید فشردن دکمه shift و همزمان رفرش کردن سایت است، با این کار مرورگر فایل CSS را نیز از نو بارگذاری کرده و از اطلاعات cache برای این کار استفاده نمی کند.
