دلایل برتری External Style Sheets نسبت به Embedded Styles
یک external style sheet در جایی از سایت ما تعریف می شود که به تمامی صفحات وبسایت اعمال شود، اینجاست که قدرتِ CSS نمایان می گردد، به همین دلیل هم بود که زمان بیشتری بر روی inline styles و embedded styles نگذاشتیم.
روزهای تلخ پیشین
در گذشته طراحان سایت مجبور بودند سایت های خود را بر پایه یک صفحه یک صفحه ای بسازند، بر همین اساس مجور بودند style های خود را نیز به همین صورت به سایت خود اعمال کنند. گاهی اوقات سایت گسترده تر از آن می شد که سازنده خیال پردازی آن را می کرده و با خود فکر می کند "من حتی از مایکروسافت نیز بزرگتر خواهم شد!". چند ماه بعد تصمیم می گیرد که سایت را بازطراحی کند و حالا با بیش از 200 صفحه وب روبه روست که باید تغییرات خود را یکی یکی بر روی آن ها اعمال کند، این کار را نیز می کند اما با توجه به بزرگ بودن سایت در نهایت چندین صفحه دچار اشکال شده و کار نمی کنند. این سایت پر از اشکال بعد از مدت کوتاهی از ارج به فرش رسیده و به طور کلی منحل می شود.
CSS به شما قدرت این را می دهد که تغییرات ظاهری خود را در یک جا وارد کرده و به کل سایت اعمال کنید، زمانی هم که می خواهید تغییرات جدیدی به سایت خود وارد کنید آن ها را تنها در یک قسمت از سایت و فقط یک بار وارد می کنید و این تغییرات به تمام سایتتان اعمال می شوند.
روزهای خوش! CSS اینجاست!
خوشبختانه شمار زیادی از مرورگرهای اینترنت امروز پشتیبانی خوبی از CSS می کنند. با این حال بعضی مرورگرها با قابلیت های پیشرفته CSS هماهنگی بیشتری پیدا می کنند اما شما می توانید با اطمینان خاطر صفحات سایت خود را با CSS ساخته و خیالتان هم راحت باشد که بیش از 99.5% کاربران سایت شما، تمامی سایت را به همان شکلی که در نظر داشته اید خواهند دید.
طراحی یک فایل CSS به صورت External
اگر می خواهید از تمامی امکاناتی که external style sheet در اختیار شما قرار می دهد حداکثر استفاده را ببرید باید اول فایل CSS-ای ساخته که بتواند در بین تمامی صفحات سایت شما به اشتراک گذاشته شود. برنامه ویرایش متن خود را باز کرده و کد زیر را در آن وارد کنید؛
CSS for Bubble Under site
*/
p {
font-weight: bold;
color: blue;
}
فایل خود را در همان پوشه ای که فایل های سایت خود را با فرمت HTML ذخیره کردید ذخیره کنید، نام این فایل جدید را نیز style1.css قرار دهید؛ می بیند که ذخیره یک فایل CSS نیز دقیقاً مشابه فایل های HTML می باشد.
توجه داشته باشید که این خطِ کدهایی که در ابتدای فایل CSS خود نوشتیم کار خاصی انجام نمی دهند، در واقع CSS نیز مانند HTML امکان نوشتن کامنت را در خود دارد اما متاسفانه دستور کامنت در اینجا با HTML تفاوت دارد. در CSS کامنت ها با /* آغاز شده و با */ بسته می شوند؛ همانطور هم که حدس می زنید مرورگر اطلاعات نوشته شده بین این دو علامت را نادیده گرفته و اجرا نمی کند. در مثال بالا درون کامنت مشخص کردیم که فایل CSS مربوط به سایت Bubble Under می باشد. پایین کامنت نیز مشخص کردیم که تمامی پاراگراف های سایت ما به صورت آبی رنگ و bold نمایش داده می شوند.
لینک کردن فایل CSS به سایت
برای اینکه فایل CSS شما درون وبسایت و تمامی صفحات آن فراخوانی شده و اجرا شود باید این فایل را به آن ها لینک کنید. برای اینکار باید تگِ لینک را به تک تکِ صفحات وب خود اضافه کنید. تا این لحظه سایت ما تنها از سه صفحه تشکیل شده است، پس این کار ساده و زود انجام می شود. تگِ لینک فایلی را که در نظر داریم به صفحه سایت ما ضمیمه می کند، در اینجا برای صفحات سایت ما مشخص می کند که دستورات style را از فایل CSS-ای که برای آن تعریف شده است بگیرد.
در کد نوشته شده زیر لینک اتصال فایل CSS را در صفحه خانه سایت خود وارد کرده ایم؛
<title>Bubble Under - The diving club for the south-west
UK</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<link href="style1.css" rel="stylesheet" type="text/css" />
</head>
بیایید تحلیلی کوتاه در رابطه با markup بالا داشته باشیم.
مشخصه href به مرورگر آدرس style sheet ما را می دهد (style1.css)، این مشخصه به روش دیگری نیز استفاده می شود؛ برای مشخص کردن مرجع فایل ما (e.g. <a href="home.htm">Home</a>).
مشخصه های rel="stylesheet" و type="text/css"بخش هایی از تگِ لینک ما هستند که به مرورگر می گویند چه نوع فایلی را لینک می کند، و اینکه مرورگر چگونه باید با محتوای این فایل برخورد کند. یادتان باشد این مشخصه ها بسیار مهم هستند و همیشه باید آن ها را در فایل CSS خود جاسازی کنید.
