استایل ها در HTML – آموزش برنامه نویسی وب درس 9
در این پست قصد دارم که استایل ها در HTML را به شما آموزش دهم. استایل‌ها (Styles) قوانینی هستند که به عناصر HTML دستور می‌دهند که رفتارهای خاصی را از خودشان نشان دهند.
استایل های در HTML
هنگامی که با HTML کار می‌کنیم، امکانات طراحی کمی در اختیار ما قرار می‌دهد. زبان HTML اساسن برای این طراحی شده است که بتواند یک راه ساده برای اسکلت‌بندی کردن اطلاعات نمایشی به ما بدهد. برای آنکه بتوانیم استایل ها در HTML را استفاده کنیم نیازمند زبان دومی هستیم که به آن CSS می‌گوییم. CSS بر گرفته از سر نام کلمه‌های Cascading Style Sheets است. این زبان در سال 1996 توسط کنسرسیوم جهانی وب (W3C) ارائه گردیده است.
با استفاده از CSS کار استایل‌دهی‌ها در HTML بسیار راحت تر انجام می‌گیرد. فعالیت های مانند تعیین نوع فونت، اندازه فونت‌ها، رنگ‌ها، کار با انیمیشن‌ها و بسیار دیگر از کارهایی که در اینجا مجال گفتن آن را ندارم با استفاده از CSS به صورت بسیار راحتی انجام می‌شود. اکنون CSS به عنوان مکملی برای HTML در نظر گرفته می‌شود و کنترل تمامی استایل ها در HTML با استفاده از زبان CSS انجام می‌شود.
اضافه کردن استایل ها در HTML
اطلاعاتی که ما برای استایل ها در HTML به کار می‌بریم می‌تواند به صورت‌های گوناگونی در HTML به کار گرفته شود. در اینجا ما سه راه کلی برای وارد کردن استایل های در HTML داریم که من به آن‌ها اشاره می‌کنم. این سه راه عبارتند از:
- استایل‌دهی در خط: در این شیوه استایل های در HTML دقیقا در کنار همان عنصر و تگی که به کار می‌روند اعلام می‌شوند.
- استایل‌دهی داخلی با استفاده از تگ :
<style>در این شیوه ما در زیر مجموعه تگ<head>یک تگ<style>باز می‌کنیم و اطلاعات خودمان را در آنجا وارد می‌کنیم. - استایل‌دهی با استفاده از فایل مجزا خارجی: این فایل که با پسوند css ساخته می‌شود و به آن Style sheet می‌گوییم، تمای موارد لازم برای استایل دهی HTML را در خود دارد. این فایل با استفاده از تگ <link> به فایل HTML وارد می‌شود و با استفاده از شیوه‌هایی که در ادامه توضیح خواهم داد، تاثیر خودش را بر روی عنصرهای HTML می‌گذارد.
در مجموعه مقالاتی که در اینجا منتشر خواهد شد من درباره تمامی این روش های ایجاد استایل ها در HTML توضیحات بیشتری را به شما ارائه می‌کنم. در دوره آموزشی HTML/CSS/SASS نیز مطالب کاملی را در اختیار شما قرار داده‌ام.
استایل دهی در خط (مستقیم)
استایل‌دهی در خط یا (inline Style) روشی است که ما می‌توانیم به یک عنصر خاص استایل‌هایی را نسبت دهیم. در این روش استایل ما به صورت مستقیم بر روی عنصر مربوطه تاثیر گذار است. استایل‌های در خط باید به تگ ابتدایی هر عنصر داده شوند.
در این روش ایجاد استایل در HTML ما باید هر ویژگی و مقدار آن را با استفاده از یک سمیکلون (;) از دیگر موارد جدا کنیم. برای جدا کردن مقدارها و نام ویژگی‌های مورد نظر هم باید از علامت کلون (:) استفاده کنیم.
در زیر من مثالی را آورده‌ام که می‌تواند بهتر موضوع را برای شما نشان دهد:
<h1 style="color:red; font-size:30px;">This is a heading</h1> <p style="color:green; font-size:18px;">This is a paragraph.</p> <div style="color:green; font-size:18px;">This is some text.</div>
در اینجا من دو ویژگی color و font-size را به چند عنصر داده‌ام. خروجی این کدها به صورت زیر خواهد بود:
یکی از مشکلاتی که این شکل از کد نویسی دارد آن است که کدها بسیار شلوغ می‌شود. برای مثال در یک صفحه وب با هزاران عنصر اگر از استایل‌دهی در خط استفاده شود، حجم صفحه به یکباره چند برابر می‌شود. در عین حال سرعت پردازش نیز پایین می‌آید. و همچنین اصلاح صفحه وب نیز بسیار سخت است.
یکی دیگر از مشکلاتی که استایل دهی در خط دارد آن است که امکان استفاده از سودوالمنت‌ها (Pseudo-elements) وجود ندارد. برای مثال شما نمی‌توانید گرافیک واکنشی (مانند عکس‌العمل نسبت به حرکت ماوس) ایجاد کنید. این روش بیشتر مخصوص زمانی است که ما از جاواسکریپت استفاده می‌کنیم و شکل محدودی از تغییرات را خواستاریم.
استایل دهی داخلی (Embedded Style)
استایل دهی داخلی سبب می‌شود که بتوانیم کنترل بیشتری بر روی عناصر در HTML و استایل‌های آن‌ها داشته باشیم.
برای استایل دهی داخی باید از تگ <style> استفاده کنیم. این تگ باید در زیر مجموعه تگ <head> قرار بگیرد. استفاده از ین روش می‌تواند برای استایل‌دهی به یک صفحه خاص مفید باشد. من در زیر یک مثال از این روش را برایتان آورده‌ام:
<head>
<style>
body { background-color: YellowGreen; }
h1 { color: blue; }
p { color: red; }
</style>
</head>
این روش امکانات بهتری را برای کنترل استایل ها در HTML میسر می‌کند. اما نمی توان از آن در صفحه‌های مختلف HTML که در یک پروژه وجود دارد استفاده کرد. برای مثال اگر ما چند صفحه داشته باشید باید هر بار این استایل‌ها را در آن صفحات تکرار کنیم. این کار علاوه بر وقت گیر بودن، در پروژه های بزرگ بسیار سخت است. در عین حال صفحات وب نیز بسیار سنگین می‌شوند. و بارگیری آن‌ها زمان زیادی می‌برد. انجام هماهنگی بین آن‌ها و زبان جاواسکریپت نیز بسیار سخت است.
استایل دهی با استفاده از فایل خارجی (External Style Sheets)
یکی از بهترین شیوه ها آن است که برای کنترل استایل ها در HTML از یک فایل خارجی استفاده کنیم. این فایل امکان کنترل بیشتر و بهتر بر روی صفحات وب را به ما می‌دهد.
یکی از مزیت‌های استفاده از فایل‌های اکسترنال آن است که امکان استفاده آن برای کل پروژه وجود دارد و فایل های متعدد می‌توانند از این فایل خارجی برای کنترل استایل‌ها در HTML استفاده کنند.
هر فایل خارجی که به عنوان Style Sheet استفاده می‌شود باید با پسوند css ذخیره شود.
برای اتصال فایل های خارجی استایل دهی به یک فایل HTML باید از تگ <link> استفاده کنیم این تگ باید در زیر مجموعه تگ <head> به کار گرفته شود.
برای درک موضوع مثال زیر را ببینید:
<head> <link rel="stylesheet" href="css/style.css"> </head>
در اینجا من یک فایل css را در میان تگ <link> قرار داده‌ام و تگ <link> هم در میانه تگ <head> قرار گرفته است.
دقت کنید که شما می‌توانید چندین فایل استایل‌دهی خارجی را وارد یک فایل HTML کنید. این کار برای پروژه های مختلف که از عناصر استایل‌دهی گوناگونی استفاده می‌کننده بسیار مفید است.
ادغام فایل های استایل دهی خارجی با هم
یکی از مشکلاتی که کار استایل‌دهی دارد، آن است که گاهی فایل‌های بخش‌های مختلف پروژه بسیار بزرگ می‌شود. برای توسعه یک سایت بزرگ برنامه نویسان مختلفی درگیر کار توسعه استایل‌ها می‌شوند. همچنین در پروژه‌های معمول هم کنترل یک کد بلند هم مشکل است. برای رفع این مشکلات برنامه‌نویسان از راهکاری به نام «ادغام فایل‌ها» استفاده می‌کنند.
برای ادغام و یا متصل‌کردن (join) فایل‌های CSS در همدیگر ما از دستور @import استفاده می‌کنیم. این دستور در ابتدای یک فایل CSS وارد می‌شود. و بعد از آن آدرس فایل مورد نظر داده می‌شود.
از این دستور می‌توانید در شیوه استایل‌دهی داخلی هم استفاده کنید. برای درک بهتر موضوع من یک مثال آورده‌ام:
<style>
@import url("css/style.css");
p {
color: blue;
font-size: 16px;
}
</style>
در اینجا ما یک فایل استایل‌دهی را با شیوه استایل‌دهی داخلی به کار برده‌ام. مقدار url("….") آدرس فایل استایل مورد نظر را از من دریافت می‌کند. این آدرس باید یک آدرس نسبی باشد.
در مثال دوم من از دستور @import برای وارد کردن فایل‌های خارجی استایل‌دهی در یک فایل CSS استفاده کرده‌ام:
@import url("css/layout.css");
@import url("css/color.css");
body {
color: blue;
font-size: 14px;
}
همانطور که در کد بالا مشاهده می‌کنید من با همان شیوه دو فایل دیگر را وارد کرده‌ام. استفاده از دستور @import سبب ماژولار شدن کد می‌شود.
نکته: برنامه‌نویسی ماژولار (Modular) به معنای قسمت کردن بخش‌های مختلف یک برنامه در جزء‌های کوچکتر است. این کار سبب کنترل بیشتر بر روی اجرای برنامه را میسر می‌کند و همچنین توسعه کد توسط تیم را بهینه‌تر می‌کند. استفاده از کدنویسی ماژولار را در بخش‌های پیشرفته‌تر برایتان توضیح خواهم داد.
نکته: هنگامی که از دستور @import استفاده می‌کنید، مفسر صفحه ابتدا فایل‌های مربوط به این موارد را بارگذاری می‌کند و بعد به سراغ بقیه کدها می‌رود. ترتیب وارد کردن کدها در این جا مهم است. برای مثال فایل‌های استایل‌دهی برای وارد کردن فونت‌ها باید در ابتدا وارد شود. یا برای مثال بهتر است کدهای مربوط به رنگ‌ها در یک فایل مجزا باشد. درباره این مسائل در آموزش SASS بیشتر برایتان توضیح خواهم داد.
در این آموزش آشنایی ابتدایی با موضوع استایل ها در HTML پیدا کردیم. ما این مبحث را در موضوع CSS و SASS بیشتر بررسی خواهیم کرد. اگر پرسشی در این زمینه داشتید در پایین همین صفحه برای من کامنت بنویسید. همچنین برای آشنایی بیشتر با این موضوع می‌توانید به دور آموزشی من درباره HTML/CSS/SASS مراجعه کنید.
