روش‌های استایل‌دهی به عناصر
همانطور که در مقدمه‌ی درس گفته شد، سه روش برای اعمال کدهای CSS روی یک سند HTML وجود دارد: روش خارجی
(external)، روش داخلی (internal) و روش درون‌خطی (inline).
- در روش خارجی (external)، استایل‌های مورد نظر را در یک یا چند استایل‌شیت خارجی نوشته و
آنها را به
صفحه یا صفحات وب مورد نظر لینک می‌کنیم. پس، در این روش، استایل‌دهی در سطح وبسایت (website-level) انجام
می‌شود.
- در روش داخلی (internal)، استایل‌های مربوط به یک صفحه را درون عنصر style همان صفحه
می‌نویسیم.
بنابراین، این روش، استایل‌دهی را در سطح صفحه (page-level) انجام می‌دهد.
- در روش درون‌خطی (inline)، استایل‌های مورد نظر را با استفاده از صفت عمومی style
مستقیماً روی عنصر
مورد نظر می‌نویسیم. بنابراین، در این روش، استایل‌دهی در سطح عنصر (element-level) انجام می‌شود.
در ادامه، در مورد جزئیات این سه روش و مزایا و معایب هر یک صحبت می‌کنیم و خواهیم دید که هر یک از این
روش‌ها برای چه موقعیت‌هایی مناسب است.
روش استایل‌شیت خارجی یا External
مرسوم‌ترین روش برای اعمال کدهای CSS روی صفحات وب، استفاده از استایلشیتهای خارجی (external
stylesheets) است. در این روش، کدهای CSS در یک یا چند فایل مجزا با پسوند .css نوشته می‌شود و
سپس، این استایلشیتهای خارجی با استفاده از یک یا چند عنصر link که در قسمت head صفحه یا سند وب قرار
می‌گیرند، به صفحه لینک می‌شوند.
از آنجایی که عنصر link می‌تواند برای ارجاع به انواع مختلفی از اسناد استفاده شود، لذا باید از یک صفت با
نام rel که نشانگر رابطه‌ی (relationship) بین سند جاری و فایل خارجی است، استفاده کرد و مقدار stylesheet
را به آن اختصاص داد. علاوه بر این، آدرس استایل‌شیت خارجی به عنوان مقدار صفت href وارد می‌شود. همچنین،
نوع مدیا یا MIME Type سند لینک‌شده را نیز می‌توان با استفاده از صفت type اعلام کرد که البته در استاندارد
فعلی HTML، به‌کارگیری این صفت برای استایلشیتهای خارجی، اختیاری است.
برای مثال، کدهای زیر را درون یک استایل‌شیت خارجی با نام style.css ذخیره می‌کنیم. این استایل‌شیت، از دو
قاعده (rule) تشکیل شده که اولی شامل دو استایل برای اعمال روی عنصر body و دومی شامل یک استایل برای اعمال
روی عناصر h1 موجود در صفحه است:
body{
font-family: arial;
background-color: pink;
}
h1{
color: green;
}
حالا با استفاده از یک عنصر link، فایل استایل‌شیت خارجی style.css را به صفحه معرفی می‌کنیم:
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Using External CSS</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h1>Golden Secret</h1>
<p>
It is our choices that show what we truly are,
far more than our abilities.
</p>
</body>
</html>
در مورد تعداد استایلشیتهای خارجی لینک‌شده به یک صفحه، محدودیتی وجود ندارد و یک سند وب می‌تواند از
چندین استایل‌شیت خارجی استفاده کند؛ برای این منظور، باید به ازای هر فایل استایل‌شیت، یک عنصر link تنظیم
شود. برای نمونه، بعضی از برنامه‌نویسان وب ترجیح می‌دهند از یک استایل‌شیت برای استایل‌های مربوط به
presentation (مواردی ماننند رنگ و فونت و غیره) و از یک استایل‌شیت دیگر برای استایل‌های مربوط به layout
(طرح‌بندی صفحه و چیدمان عناصر صفحه) استفاده کنند:
<link rel="stylesheet" href="styles/presentation.css">
<link rel="stylesheet" href="styles/layout.css">
روش استایل‌شیت داخلی یا Internal
روش دیگری که می‌توان آن را برای استایل‌دهی به صفحات وب به کار گرفت، روش استایل‌شیت داخلی (internal
stylesheet) است. در این روش، استایل‌های مربوط به یک صفحه درون عنصر style آن صفحه قرار می‌گیرند. در
حقیقت، در این روش، عنصر style حکم یک ظرف (container) را برای استایل‌های صفحه دارد و بهتر است از یک صفت
type با مقدار text/css برای این عنصر استفاده کنیم.
در مثال زیر، از روش استایل‌شیت داخلی برای اعمال استایل‌های مورد نظر روی تعدادی از عناصر صفحه استفاده
شده است. همانطور که می‌بینید، عنصر style شامل دو قاعده است که اولی دو استایل را برای عنصر body و دومی یک
استایل را برای عنصر h1 تنظیم می‌کند:
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Using Internal CSS</title>
<style>
body{
font-family: arial;
background-color: pink;
}
h1{
color: red;
}
</style>
</head>
<body>
<h1>Golden Secret</h1>
<p>
It is our choices that show what we truly are,
far more than our abilities.
</p>
</body>
</html>
روش داخلی را روش استایل‌های جاسازی‌شده (embedded styles) نیز می‌نامند؛ چون در این روش، استایل‌ها درون
صفحه جاسازی می‌شوند. اگرچه عنصر style معمولاً درون عنصر head دیده می‌شود اما بد نیست بدانید که اجباری
برای این کار نیست و امکان قرار دادن این عنصر درون عنصر body نیز وجود دارد. در واقع، گاهی به دلایل مربوط
به performance، این عنصر را در انتهای body قرار می‌دهند؛ البته انجام این کار اصلاً توصیه نمی‌شود.
روش استایل‌های درون‌خطی یا Inline
سومین و کم‌کاربردترین روش اعمال کدهای CSS روی صفحات وب، روش استایل‌های درون‌خطی (inline styles) نام
دارد. در این روش، استایل‌های مورد نظر را به عنوان مقدار صفت style برای عنصر مورد نظر، تنظیم می‌کنیم.
استایل‌ها یا همان جفت‌های property و value با استفاده از سمی‌کالن (;) از هم جدا می‌شوند. همانطور که
می‌دانید، style یک صفت عمومی (global) است و لذا در دسترس همه‌ی عناصر HTML قرار دارد.
در مثال زیر، استایل‌های مورد نظر به صورت inline برای دو عنصر h1 و p تنظیم شده‌اند:
CSS
<!doctype html
<html>
<head>
<meta charset="utf-8">
<title>Using Inline CSS</title>
</head>
<body>
<h1 style="color: blue; text-align: center">This is a heading</h1>
<p style="color: green">Color text</p>
</body>
</html>
کدام روش بهتر است؟
با سه روش اعمال کدهای CSS روی عناصر وب آشنا شدیم و حالا این سؤال پیش می‌آید که: کدام‌یک از این روش‌ها
بهتر است؟ به این سؤال نمی‌توان یک پاسخ قطعی و مطلق داد. اگرچه روش خارجی به خاطر مزایای غیرقابل‌انکاری که
دارد، بیش از دو روش دیگر به کار گرفته می‌شود، اما روش‌های داخلی و درون‌خطی هم کاربردهای خاص خودشان را
دارند. در اغلب موارد، بهتر است از ترکیبی از این روش‌ها استفاده شود. به این صورت که:
- استایل‌هایی را که در سطح وبسایت (website-level) هستند؛ یعنی بین چند صفحه از وبسایت، مشترک هستند و به
عبارت دیگر، بیش از یک صفحه از آنها استفاده می‌کنند، درون یک استایل‌شیت external قرار می‌دهیم. به این
ترتیب، این استایل‌ها تنها یک بار نوشته می‌شوند و به هر تعداد صفحه که لازم باشد، لینک می‌شوند. این کار
از تکرار بی‌مورد کدها در صفحات مختلف جلوگیری می‌کند و به‌روزرسانی کدها را سادهءتر می‌کند.
- استایل‌هایی را که در سطح صفحه (page-level) هستند؛ یعنی استایل‌های اختصاصی هر صفحه را به صورت
internal درون عنصر style هر صفحه جاسازی می‌کنیم. گاهی اوقات هم چاره‌ای جز استفاده از روش internal
نداریم. برای نمونه، وقتی از یک سیستم مدیریت محتوا (Content Management System) یا CMS استفاده می‌کنیم و
امکان ویرایش مستقیم استایلشیتهای خارجی را نداریم، باید از روش internal استفاده کنیم.
- از استایل‌های inline بهتر است حتی‌المقدور استفاده نکنیم. چون این روش، کار نگهداری را واقعاً سخت
می‌کند و برای اعمال تغییرات، باید جاهای مختلف صفحات مختلف یک وبسایت را ویرایش کنیم. علاوه بر اینها،
این روش باعث مخلوط شدن کدهای HTML و CSS می‌شود و خوانایی کدها را کاهش می‌دهد. البته این روش با همه‌ی
ایراداتی که دارد، یک کاربرد ویژه دارد و آن زمانی است که بخواهیم نتیجه‌ی اعمال یک استایل را روی یک عنصر
ببینیم. به عبارت دیگر، این روش برای اهداف آزمایشی مناسب است و امکان آزمایش سریع یک استایل را به ما
می‌دهد.
مطلب پایانی در ارتباط با روش‌های اعمال کدهای CSS، به کارایی (performance) روش‌های فوق مربوط است. در
اینجا کارایی را می‌توان به عنوان سرعت بارگذاری صفحات وب تعبیر کرد. پس، مسئله این است که کدام‌یک از این
روش‌ها از نظر سرعت بارگذاری صفحات، وضعیت بهتری دارند. دو فاکتور تأثیرگذار بر روی سرعت بارگذاری صفحات
وجود دارد که برای یکی از این فاکتورها، روش خارجی بهتر عمل می‌کند و برای فاکتور دوم، روش داخلی عملکرد
بهتری دارد. این فاکتورها عبارتند از: حافظه‌ی کش (cache memory) و تعداد درخواست‌های HTTP.
استایلشیتهای خارجی لینک‌شده به یک صفحه، در اولین بازدید یک کاربر، دانلود شده و در حافظه‌ی cache
مرورگر نگهداری می‌شوند و در بازدیدهای بعدی یا در بازدید او از سایر صفحات وبسایت، نیازی به دانلود مجدد
آنها نیست و این امر به منزله‌ی افزایش سرعت بارگذاری صفحات سایت است. از طرف دیگر، استفاده از
استایلشیتهای داخلی از آنجایی که با ایجاد فایل جدیدی همراه نیست، با کاهش تعداد درخواست و پاسخ‌های HTTP
رد و بدل شده بین مرورگر و سرور همراه است و از این طریق، باعث افزایش سرعت بارگذاری صفحه می‌شود. البته با
گسترش روزافزون استفاده از HTTP/2 و اخیراً HTTP/3 به جای HTTP/1.1، اهمیت این موضوع روز به روز کمتر
می‌شود؛ چون HTTP/2 مجهز به متدی به نام multiplexing است که امکان ارسال چندین جریان داده (data stream) را
به طور همزمان و موازی و در قالب تنها یک اتصال TCP ممکن می‌کند. این به این معناست که نیازی نیست برای
درخواست هر فایل، یک اتصال جداگانه ایجاد شود.
در مجموع، می‌توان گفت که استایلشیتهای خارجی از نظر performance وضعیت بهتری دارند اما به شرطی که از
تکه‌تکه کردن بی‌رویه‌ی استایل‌شیت‌ها و افزایش تعداد فایل‌ها خودداری کنیم.