صفحه کاربری
آکادمی بنو
نویسنده: بهنام نوبخت
آموزش‌های جامع و کاربردی برنامه‌نویسی، طراحی سایت، توسعه اپلیکیشن موبایل و مهندسی نرم‌افزار؛ از مباحث پایه تا پیشرفته، همراه با آموزش‌های پروژه‌محور برای یادگیری اصولی و کسب مهارت‌های تخصصی.
آموزش CSS
۲۷ مقاله
مقدمه‌ای بر CSS
تا اینجا یاد گرفتیم چگونه با HTML ساختار یک صفحه وب را ایجاد کنیم؛ عنوان‌ها، متن‌ها، تصاویر، لینک‌ها، فرم‌ها، جدول‌ها و عناصر مختلف HTML5 را در جای مناسب قرار دهیم. اما اگر یکی از صفحات HTML خود را در مرورگر باز کرده باشید، احتمالاً متوجه شده‌اید که ظاهر آن بسیار ساده است. رنگ‌بندی، فاصله‌ها، اندازه فونت‌ها، پس‌زمینه‌ها، کادرها و چیدمان حرفه‌ای عناصر هنوز وجود ندارند. اینجا جایی است که CSS وارد می‌شود. CSS یا Cascading Style Sheets زبانی برای تعیین ظاهر و نحوه نمایش عناصر HTML است. با CSS می‌توانیم مشخص کنیم یک عنوان چه رنگ و اندازه‌ای داشته باشد، یک دکمه چگونه دیده شود، فاصله بین بخش‌های مختلف چقدر باشد و در مراحل بعدی حتی Layoutهای پیچیده و طراحی Responsive ایجاد کنیم. در این مقاله از صفر با CSS آشنا می‌شویم و اولین قدم‌های خود را برای تبدیل یک HTML ساده به یک صفحه زیباتر برمی‌داریم.
Selectorها در CSS
تا اینجا یاد گرفتیم که CSS برای تغییر ظاهر عناصر HTML استفاده می‌شود؛ اما یک سؤال بسیار مهم باقی می‌ماند: CSS از کجا می‌فهمد کدام عنصر HTML را باید تغییر دهد؟ پاسخ این سؤال در مفهوم Selector یا «انتخاب‌گر» قرار دارد. Selector به مرورگر می‌گوید یک قانون CSS باید روی کدام عنصر یا مجموعه‌ای از عناصر اعمال شود. برای مثال، وقتی می‌نویسیم p ، مرورگر تمام عناصر <p> را هدف قرار می‌دهد و وقتی .title را می‌نویسیم، عناصری را انتخاب می‌کند که کلاس title دارند. Selectorها یکی از پایه‌ای‌ترین مفاهیم CSS هستند و تقریباً تمام مباحث بعدی CSS، از طراحی ساده گرفته تا ساخت رابط‌های کاربری پیچیده، به آن‌ها وابسته است.
رنگ‌ها، پس‌زمینه‌ها و تصاویر پس‌زمینه در CSS
یکی از اولین چیزهایی که بعد از اضافه کردن CSS به یک صفحه وب متوجه می‌شوید، تغییر ظاهر و رنگ عناصر است. یک صفحه ساده HTML می‌تواند با چند خط CSS کاملاً متفاوت به نظر برسد؛ اما استفاده از رنگ‌ها فقط به انتخاب یک رنگ زیبا محدود نمی‌شود. باید بدانیم چگونه رنگ متن و پس‌زمینه را کنترل کنیم، چگونه یک تصویر را به عنوان پس‌زمینه قرار دهیم، چگونه اندازه و موقعیت آن را تنظیم کنیم و چطور مطمئن شویم متن روی پس‌زمینه خوانا باقی می‌ماند. در این مقاله با انواع روش‌های تعریف رنگ در CSS، ویژگی‌های مربوط به پس‌زمینه، تصاویر پس‌زمینه و مهم‌ترین تنظیمات آن‌ها آشنا می‌شویم. در پایان نیز یک پروژه کوچک طراحی می‌کنیم تا این مفاهیم را در یک مثال واقعی به کار ببریم.
فونت‌ها و متن‌ها در CSS
متن تقریباً در تمام صفحات وب وجود دارد؛ از عنوان اصلی و منوی سایت گرفته تا توضیحات محصولات، مقالات، فرم‌ها و دکمه‌ها. به همین دلیل، انتخاب فونت و نحوه نمایش متن فقط یک موضوع ظاهری نیست، بلکه مستقیماً روی خوانایی و تجربه کاربر تأثیر می‌گذارد. یک متن با فونت نامناسب، اندازه کوچک یا فاصله خطوط کم می‌تواند حتی در یک طراحی زیبا نیز خواندن صفحه را دشوار کند. CSS ابزارهای مختلفی برای کنترل ظاهر متن در اختیار ما قرار می‌دهد. با استفاده از ویژگی‌هایی مانند font-family ، font-size ، font-weight ، font-style ، line-height ، text-align ، text-decoration و letter-spacing می‌توانیم ظاهر نوشته‌ها را دقیق‌تر کنترل کنیم. در این مقاله این ویژگی‌ها را از پایه یاد می‌گیریم و در پایان یک بخش متنی واقعی برای یک صفحه وب طراحی می‌کنیم.
واحدهای اندازه‌گیری در CSS
وقتی در CSS می‌نویسیم یک عنصر 300px عرض داشته باشد یا فاصله داخلی آن 20px باشد، در واقع داریم اندازه‌ای را برای مرورگر مشخص می‌کنیم. اما CSS فقط به px محدود نمی‌شود. واحدهایی مانند % ، em ، rem ، vw و vh به ما اجازه می‌دهند اندازه‌ها را نسبت به عنصر والد، اندازه فونت یا ابعاد صفحه تعیین کنیم. انتخاب درست واحد می‌تواند باعث شود طراحی ما انعطاف‌پذیرتر، خواناتر و آماده‌تر برای نمایش در اندازه‌های مختلف صفحه باشد. در این مقاله ابتدا با مفهوم واحد اندازه‌گیری در CSS آشنا می‌شویم، سپس واحدهای مطلق و نسبی را بررسی می‌کنیم و تفاوت px ، % ، em ، rem ، vw و vh را با مثال‌های ساده یاد می‌گیریم. در پایان نیز یک پروژه کوچک طراحی می‌کنیم تا کاربرد این واحدها را در یک صفحه واقعی ببینیم.
Box Model، Margin، Padding، Border و Outline در CSS
وقتی با CSS شروع به طراحی صفحات وب می‌کنید، خیلی زود با یک سؤال مهم روبه‌رو می‌شوید: چرا یک عنصر با وجود اینکه برای آن width مشخص کرده‌ایم، بزرگ‌تر از چیزی است که انتظار داشتیم؟ چرا فاصله بین دو عنصر ایجاد شده؟ چرا متن داخل یک کارت به لبه‌های آن چسبیده است؟ و چرا اضافه کردن یک border باعث می‌شود اندازه ظاهری عنصر تغییر کند؟ پاسخ بسیاری از این سؤال‌ها در مفهومی به نام CSS Box Model قرار دارد. تقریباً هر عنصر قابل مشاهده در صفحه وب را می‌توان مانند یک جعبه در نظر گرفت. این جعبه از قسمت‌های مختلفی تشکیل شده است: محتوا، Padding، Border و Margin . شناخت درست این چهار بخش به شما کمک می‌کند اندازه و فاصله عناصر را دقیق‌تر کنترل کنید و مشکلات رایج طراحی صفحات را راحت‌تر پیدا کنید. در این مقاله ابتدا Box Model را به‌صورت ساده یاد می‌گیریم، سپس با padding ، border ، margin و outline کار می‌کنیم و در نهایت با box-sizing یاد می‌گیریم چگونه اندازه عناصر را قابل پیش‌بینی‌تر کنیم.
Width، Height و مدیریت اندازه عناصر در CSS
بعد از یادگیری Box Model، یکی از اولین نیازهای ما در طراحی صفحات وب این است که بتوانیم اندازه عناصر را کنترل کنیم. مثلاً ممکن است بخواهیم یک کارت دقیقاً ۳۰۰ پیکسل عرض داشته باشد، یک تصویر بیشتر از عرض صفحه نشود، یک بخش حداقل ۲۰۰ پیکسل ارتفاع داشته باشد یا یک محتوای متنی بیش از حد عریض نشود. CSS برای انجام این کار مجموعه‌ای از ویژگی‌های مربوط به اندازه دارد که مهم‌ترین آن‌ها width ، height ، min-width ، max-width ، min-height و max-height هستند. در مقاله قبلی با Box Model آشنا شدیم و دیدیم که اندازه یک عنصر فقط به width و height محدود نمی‌شود و Padding و Border نیز می‌توانند روی اندازه نهایی آن تأثیر بگذارند. حالا می‌خواهیم دقیق‌تر یاد بگیریم که چطور اندازه عناصر را تعیین و محدود کنیم و چرا در طراحی صفحات وب معمولاً نباید همه چیز را با یک اندازه ثابت طراحی کنیم.
Display، Visibility و Opacity در CSS
تا اینجا با مفاهیمی مثل رنگ، فونت، اندازه، Box Model، فاصله‌ها، عرض و ارتفاع عناصر آشنا شدیم. اما هنوز یک سؤال مهم باقی مانده است: CSS چگونه مشخص می‌کند یک عنصر در صفحه چگونه قرار بگیرد یا حتی نمایش داده شود؟ برای مثال ممکن است بخواهیم چند عنصر را در یک خط قرار دهیم، یک عنصر را از صفحه حذف کنیم، بدون حذف فضای آن را پنهان کنیم، یا فقط شفافیت آن را کاهش دهیم.
Position و Z-Index در CSS
تا اینجا بیشتر با عناصری کار کردیم که طبق جریان عادی صفحه در کنار یا زیر یکدیگر قرار می‌گرفتند. اما در طراحی واقعی وب، همیشه نمی‌خواهیم عناصر فقط در همان جای طبیعی خود قرار بگیرند. گاهی لازم است یک آیکون را گوشه یک کارت قرار دهیم، یک دکمه را در گوشه تصویر قرار دهیم، یک نوار را هنگام اسکرول در بالای صفحه نگه داریم یا یک عنصر را روی عنصر دیگری نمایش دهیم. برای انجام این کارها، CSS ابزار بسیار مهمی به نام position در اختیار ما قرار می‌دهد. با position می‌توانیم روش قرارگیری یک عنصر در صفحه را تغییر دهیم و با ویژگی‌هایی مانند top ، right ، bottom و left موقعیت آن را کنترل کنیم. همچنین با z-index می‌توانیم مشخص کنیم هنگام روی‌هم قرار گرفتن چند عنصر، کدام عنصر بالاتر نمایش داده شود. در این مقاله ابتدا مفهوم Position را یاد می‌گیریم و سپس با z-index به سراغ مدیریت لایه‌های عناصر می‌رویم.
Float، Clear و Overflow در CSS
تا اینجا با بخش‌های مهمی از CSS مانند Box Model، اندازه عناصر، display و position آشنا شدیم. حالا می‌خواهیم با سه مفهوم مهم دیگر یعنی float ، clear و overflow آشنا شویم. این سه ویژگی در نسخه‌های قدیمی‌تر CSS نقش بسیار مهمی در ساخت Layout صفحات داشتند و هنوز هم در بسیاری از پروژه‌های قدیمی، کدهای موجود و بعضی کاربردهای خاص دیده می‌شوند. ممکن است هنگام کار با CSS با شرایطی مواجه شوید که بخواهید یک تصویر در کنار متن قرار بگیرد، یک عنصر شناور باشد، محتوای یک جعبه از محدوده آن خارج شود یا لازم باشد عنصری بعد از یک عنصر شناور قرار بگیرد. در چنین شرایطی درک درست float ، clear و overflow بسیار مفید است.