کدهای این بخش را از اینجا دانلود کنید.
در این دوره قرار است همراه با شما زبان CSS را مرور کنیم. فرض بر این است که شما با HTML و تگ‌های آن آشنایی دارید. مطالب به‌صورت پیوسته ارائه می‌شوند، ودر سه سطح پیش می‌رویم: مقدماتی، متوسط و تکمیلی. در جلسات پایانی وارد مباحث پیشرفته‌تر می‌شویم. برای درک بهتر مفاهیم، در طول دوره پروژه‌های کوچک تعریف خواهیم کرد. این پروژه‌ها بر پایه مطالب جلسات قبلی هستند و کمک می‌کنند تا آموخته‌ها را در عمل تجربه کنید.
نکته مهم این است که یادگیری تنها با مشاهده کافی نیست. شما باید تمرین زیادی انجام دهید، نمونه‌کارها را بررسی کنید و به طراحی سایت‌های مختلف دقت کنید. چراکه با یادگیری CSS، عملاً اولین گام‌های ورود به دنیای برنامه‌نویسی وب را برمی‌دارید.
اهمیت مشاهده و تمرین در یادگیری CSS
یکی از بهترین روش‌ها برای یادگیری CSS، مشاهده و تحلیل نمونه‌کارهای متنوع است. هر زمان که وارد یک وب‌سایت می‌شوید، به جزئیات آن دقت کنید؛ از جمله ترکیب رنگ‌ها، نحوه چیدمان سطر و ستون‌ها و دیگر المان‌های طراحی.
توصیه ما این است که هر ویژگی (Property) جدیدی از CSS را که یاد می‌گیرید، در سایت‌های مختلف جست‌وجو کنید. به طور مثال اگر پراپرتی خاصی را در کلاس یاد گرفته‌اید، هنگام بازدید از یک وب‌سایت سعی کنید آن را شناسایی کنید. به یاد داشته باشید که صرفاً تماشای ویدئوهای آموزشی کافی نیست. یادگیری واقعی زمانی اتفاق می‌افتد که تمرین‌های عملی مداوم انجام دهید.
در طول این دوره برای تمرین بیشتر از سه وب‌سایت مرجع استفاده خواهیم کرد:
ساختار فایل‌های CSS
در این جلسه قصد دارم درباره ساختار فایل‌های CSS صحبت کنم. این موضوع را از دو جنبه بررسی می‌کنیم:
- نحوه ایجاد یک فایل CSS
- روش‌های اضافه کردن استایل‌ها به فایل HTML
روش‌های اصلی استایل‌دهی در CSS
به طور کلی سه روش اصلی برای اضافه کردن CSS به یک صفحه وب وجود دارد:
- روش Inline (درون‌خطی): در این روش، استایل مستقیماً داخل تگ HTML نوشته می‌شود. برای مثال در یک تگ
<p>یا<h1>می‌توان خاصیت style را تعریف کرد. - روش Internal (داخلی): در این روش، کدهای CSS در داخل تگ
<head>قرار می‌گیرند. - روش External (خارجی): در این روش، کدهای CSS در یک فایل جداگانه نوشته می‌شوند.
انتخاب روش استایل‌دهی به شرایط پروژه بستگی دارد. معمولاً در یک پروژه وب می‌توان از ترکیب هر سه روش استفاده کرد. به این ترتیب، طراح می‌تواند به بهترین شکل به طراحی و دیزاین مورد نظر خود دست یابد.
آشنایی با ساختار کدهای CSS
در این بخش یک مثال ساده شش‌خطی از کد CSS بررسی می‌کنیم.
- کامنت (Comment): هر خطی که با فرمت مخصوص کامنت نوشته شود، توسط مرورگر اجرا نمی‌شود و تنها برای توضیح یا یادداشت در کد استفاده می‌شود.
- سلکتور (Selector): سلکتور بخشی از کد است که تعیین می‌کند کدام عنصر HTML هدف قرار بگیرد. سلکتورها می‌توانند بر اساس کلاس (Class)، شناسه (ID) یا حتی نام تگ HTML انتخاب شوند.
- بلاک اعلان (Declaration Block): بخشی است که داخل آن دستورات CSS نوشته می‌شوند. در مثال ما این قسمت به رنگ آبی مشخص شده است.
- اعلان (Declaration): هر خط از کد CSS که شامل یک ویژگی (Property) و یک مقدار (Value) باشد، یک اعلان محسوب می‌شود.
بررسی ساختار CSS در VS Code
در این بخش فایل جلسه اول را در محیط VS Code باز می‌کنیم. در این فایل، دو تگ ساده HTML داریم:
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>با ذخیره فایل و اجرای آن در مرورگر، هر دو تگ به صورت پیش‌فرض نمایش داده می‌شوند.
حالا قصد داریم به کمک CSS استایل آن‌ها را تغییر دهیم.
استایل‌دهی Inline
در این روش، ویژگی‌ها (Properties) مستقیماً داخل تگ HTML نوشته می‌شوند. برای مثال:
<h1 style="color: red;">This is Heading 1</h1>- در این کد، color یک Property است.
- مقدار red یک Value محسوب می‌شود.
- ترکیب Property و Value یک Declaration را تشکیل می‌دهد.
با ذخیره و اجرای کد، متن عنوان به رنگ قرمز نمایش داده می‌شود.
استایل‌دهی Internal
در این روش، کدهای CSS درون تگ <style> و داخل بخش <head> فایل HTML قرار می‌گیرند:
<head>
<style>
h2 {
color: blue;
}
</style>
</head>- در اینجا h2 نقش Selector دارد
- بخش { color: blue; } یک Declaration Block است که شامل دستورات CSS می‌شود.
- هر خط داخل بلاک (مثلاً color: blue;) یک Declaration به شمار می‌رود.
با اجرای این کد، متن عنوان دوم <h2> به رنگ آبی نمایش داده خواهد شد.
استایل‌دهی External
در روش External کدهای CSS در یک فایل جداگانه نوشته می‌شوند و سپس به فایل HTML متصل می‌گردند. این روش یکی از پرکاربردترین روش‌ها در پروژه‌های واقعی است.
مرحله اول ایجاد یک فایل CSS جدید
در محیط VS Code یک فایل جدید ایجاد می‌کنیم و نام آن را styles.css می‌گذاریم. هنگام ساخت فایل، زبان آن را CSS انتخاب می‌کنیم.
مرحله دوم نوشتن استایل در فایل CSS
داخل فایل styles.css کد زیر را می‌نویسیم:
h3 {
color: yellow;
}مرحله سوم لینک کردن فایل CSS به HTML
اکنون باید فایل CSS را به فایل HTML متصل کنیم. این کار در بخش <head> انجام می‌شود
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
</body>- ویژگی "rel="stylesheet مشخص می‌کند که این فایل یک فایل استایل است.
- ویژگی "href="styles.css مسیر فایل CSS را معرفی می‌کند.
پس از ذخیره و اجرای فایل در مرورگر، متن <h3> با رنگ زرد نمایش داده می‌شود. به این ترتیب، سومین روش استایل‌دهی (External) را هم با موفقیت پیاده‌سازی کردیم.
فرض کنید فایل styles.css را داخل یک پوشه‌ی جدید به نام css قرار داده‌اید:
مشکل رایج
اگر مسیر فایل CSS در تگ <link> درست تنظیم نشده باشد، استایل‌ها اعمال نمی‌شوند و مرورگر فایل را پیدا نمی‌کند.
مثال اشتباه:
<link rel="stylesheet" href="styles.css">در این حالت، فایل CSS داخل پوشه است و مسیر اشتباه است، بنابراین استایل‌ها اعمال نمی‌شوند.
- راه‌حل در VS Code
- مسیر اشتباه را پاک کنید.
- شروع به تایپ مسیر صحیح کنید (css/styles.css).
- VS Code معمولاً مسیرها را پیشنهاد می‌دهد (Autocomplete).
- پیشنهاد مناسب را انتخاب کنید و Enter بزنید.
مسیر به‌صورت کامل وارد می‌شود:
<link rel="stylesheet" href="css/styles.css">پس از اصلاح مسیر و رفرش صفحه در مرورگر، استایل‌ها به درستی اعمال می‌شوند. نکته: همیشه پس از جا‌به‌جایی یا تغییر مسیر فایل‌های CSS، مسیر لینک در HTML را بررسی کنید تا استایل‌ها از بین نروند.
روش درست و حرفه‌ای این است که فایل‌های پروژه را به‌صورت دسته‌بندی‌شده نگهداری کنید. این کار باعث می‌شود پروژه‌ی شما مرتب‌تر باشد و مدیریت فایل‌ها در آینده ساده‌تر انجام شود.
تمرین پایانی جلسه
برای تثبیت مطالب جلسه، تمرین زیر را انجام دهید:
- یک فایل HTML ساده ایجاد کنید.
- یک فایل CSS جدید بسازید و آن را به فایل HTML متصل کنید.
- یکی از ویژگی‌هایی (Properties) که تاکنون یاد گرفته‌اید را انتخاب کنید (مثلاً رنگ متن یا اندازه فونت).
- این ویژگی را روی یکی از تگ‌های HTML خود اعمال کنید.
- حتماً فایل‌هایتان را به‌صورت مرتب در پوشه‌های جداگانه سازمان‌دهی کنید.