این ماژول از همان جایی ادامه می‌یابد که اولین گام‌های CSS متوقف شده است ! حالا که با زبان و نحو آن آشنا شدید ، وقت آن است که کمی عمیق‌تر شوید. این ماژول به بلوک های ساختمان CSS که شامل آبشار و وراثت، تمام انواع انتخابگرهای موجود، واحدها، اندازه، پس‌زمینه‌ها و حاشیه‌ها، اشکال‌زدایی و بسیاری موارد دیگر نگاه می‌کند .
هدف در اینجا این است که یک جعبه ابزار برای نوشتن CSS مناسب در اختیار شما قرار دهیم و به شما کمک کنیم تا تمام تئوری های ضروری را درک کنید، قبل از اینکه به رشته های خاص تر مانند استایل متن و چیدمان CSS بروید.
پیش نیازها:
قبل از شروع ماژول بلوک های ساختمان CSS، باید موارد زیر را داشته باشید :
- آشنایی اولیه با استفاده از رایانه و استفاده غیرفعال از وب (یعنی فقط نگاه کردن به آن، مصرف محتوا)
- یک محیط کار پایه که به شرح جزئیات در نصب نرم افزار پایه تنظیم شده است، و درک نحوه ایجاد و مدیریت فایل ها، همانطور که در Dealing with files توضیح داده شده است
- آشنایی اولیه با HTML همانطور که در مقدمه ماژول HTML بحث شد
توجه : اگر روی رایانه/تبلت/دستگاه دیگری کار می‌کنید که در آن توانایی ایجاد فایل‌های خود را ندارید، می‌توانید (بیشتر) نمونه‌های کد را در یک برنامه کدگذاری آنلاین مانند JSBin یا Glitch امتحان کنید .
راهنماها:
این ماژول حاوی مقالات زیر است که ضروری ترین بخش های زبان CSS را پوشش می دهد. در طول راه با تمرین های زیادی روبرو خواهید شد که به شما امکان می دهد درک خود را آزمایش کنید.
انتخابگرهای CSS :
طیف گسترده‌ای از انتخاب‌کننده‌های CSS در دسترس هستند، که امکان دقت دقیق را هنگام انتخاب عناصر برای استایل فراهم می‌کنند. در این مقاله و مقالات فرعی آن، انواع مختلف را با جزئیات کامل بررسی خواهیم کرد و نحوه عملکرد آنها را مشاهده خواهیم کرد. مواد فرعی به شرح زیر است:
- انتخابگرهای Type و class و ID
- انتخابگرهای صفت
- شبه طبقات و شبه عناصر
- ترکیب کننده ها
آبشار، ویژگی و وراثت :
هدف این درس توسعه درک شما از برخی از اساسی ترین مفاهیم CSS – آبشار، ویژگی و وراثت – است که نحوه اعمال CSS در HTML و شحل تضادها را کنترل می کند .
لایه های آبشاری :
این درس قصد دارد شما را با لایه‌های آبشاری آشنا کند، یک ویژگی پیشرفته‌تر که بر پایه مفاهیم اساسی آبشار CSS و ویژگی‌های CSS است .مدل جعبه :
هر چیزی در CSS یک کادر در اطراف خود دارد و درک این کادرها برای ایجاد طرح‌بندی با CSS یا تراز کردن آیتم‌ها با موارد دیگر کلیدی است . در این درس، نگاهی مناسب به مدل جعبه CSS خواهیم داشت تا بتوانید با درک نحوه عملکرد و اصطلاحات مربوط به آن، به کارهای طرح بندی پیچیده تر بروید .
پس زمینه ها و مرزها :
در این درس به برخی از کارهای خلاقانه ای که می توانید با پس زمینه ها و حاشیه های CSS انجام دهید نگاهی خواهیم انداخت. از اضافه کردن گرادینت، تصاویر پس‌زمینه، و گوشه‌های گرد، پس‌زمینه‌ها و حاشیه‌ها پاسخ بسیاری از سؤالات استایل‌سازی در CSS هستند .مدیریت جهت های متنی مختلف :
در سال‌های اخیر، CSS به منظور پشتیبانی بهتر جهت‌گیری‌های مختلف محتوا، از جمله محتوای راست به چپ و همچنین محتوای بالا به پایین (مانند ژاپنی) تکامل یافته است . این جهت‌گیری‌های مختلف حالت‌های نوشتن نامیده می‌شوند. همانطور که در مطالعه خود پیشرفت می کنید و شروع به کار با چیدمان می کنید، درک حالت های نوشتن برای شما بسیار مفید خواهد بود، بنابراین در این مقاله به معرفی آنها می پردازیم .محتوای سرریز :
در این درس به مفهوم مهم دیگری در CSS خواهیم پرداخت . سرریز زمانی اتفاق می افتد که محتوا بیش از حدی باشد که به راحتی در یک جعبه باشد . در این راهنما، یاد خواهید گرفت که چیست و چگونه آن را مدیریت کنید .مقادیر و واحدهای CSS :
هر ویژگی مورد استفاده در CSS دارای یک مقدار یا مجموعه ای از مقادیر است که برای آن ویژگی مجاز است. در این درس، نگاهی به برخی از رایج ترین مقادیر و واحدهای در حال استفاده خواهیم انداخت .اندازه اقلام در CSS :
در درس‌های مختلف تاکنون با روش‌های مختلفی برای اندازه‌گیری آیتم‌ها در یک صفحه وب با استفاده از CSS مواجه شده‌اید. درک اینکه ویژگی‌های مختلف در طراحی شما چقدر بزرگ خواهند بود مهم است. در این درس، روش‌های مختلف اندازه‌گیری عناصر از طریق CSS و چند اصطلاح را در مورد اندازه تعریف می‌کنیم.تصاویر، رسانه ها و عناصر فرم :
در این درس نگاهی خواهیم داشت به نحوه برخورد با عناصر خاص در CSS. تصاویر، و عناصر فرم از نظر توانایی شما در استایل دادن به آنها با CSS کمی متفاوت از جعبه های معمولی رفتار می کنند. درک اینکه چه چیزی ممکن است و چه چیزی ممکن نیست می تواند تا حدودی از ناامیدی نجات پیدا کند، و این درس برخی از چیزهای اصلی را که باید بدانید برجسته می کند .میزهای شیک :
این مقاله برای خوب جلوه دادن جداول HTML با برخی از تکنیک های خاص راهنمایی هایی ارائه می کند.اشکال زدایی CSS :
گاهی اوقات هنگام نوشتن CSS با مشکلی مواجه می شوید که به نظر می رسد CSS شما آن چیزی را که شما انتظار دارید انجام نمی دهد. این مقاله به شما راهنمایی می‌کند که چگونه مشکل CSS را اشکال‌زدایی کنید، و به شما نشان می‌دهد که چگونه DevTools موجود در تمام مرورگرهای مدرن می‌تواند به شما کمک کند تا بفهمید چه اتفاقی در حال رخ دادن است .
سازماندهی CSS خود :
همانطور که شروع به کار روی شیوه نامه های بزرگتر و پروژه های بزرگ می کنید، متوجه خواهید شد که نگهداری یک فایل CSS بزرگ می تواند چالش برانگیز باشد. در این مقاله، ما نگاهی کوتاه به برخی از بهترین روش‌ها برای نوشتن CSS شما می‌اندازیم تا به راحتی قابل نگهداری باشد، و برخی از راه‌حل‌هایی که توسط دیگران برای کمک به بهبود قابلیت نگهداری از آنها استفاده می‌شود .
ارزیابی ها :
درک اساسی CSS :
این ارزیابی درک شما از نحو اولیه، انتخابگرها، ویژگی، مدل جعبه و موارد دیگر را آزمایش می کند .ایجاد کاغذ سربرگ فانتزی :
اگر می‌خواهید برداشت درستی داشته باشید، نوشتن نامه روی کاغذ سربرگ زیبا می‌تواند شروع خوبی باشد. در این ارزیابی، ما شما را برای ایجاد یک الگوی آنلاین برای دستیابی به چنین ظاهری به چالش خواهیم کشید .یک جعبه با ظاهر جذاب :
در اینجا در استفاده از استایل پس زمینه و حاشیه برای ایجاد یک جعبه چشم نواز تمرین خواهید کرد .
در ادامه
همچنین در آینده نزدیک مقاله زیر را می بینید: جلوه های یک ظاهر طراحی پیشرفته این مقاله به عنوان جعبه ای از ترفندها عمل می کند و مقدمه ای بر برخی از ویژگی های استایل پیشرفته جالب مانند سایه های جعبه، حالت های ترکیبی و فیلترها ارائه می دهد. در این مقاله فقط به شما گفتیم که مسیر آینده ی آموزش CSS از این به بعد چگونه خواهد بود و چه چیز هایی را قرار است یاد بگیرید. حالا که آماده شده اید، هرچه سریع تر به مقاله بعدی بروید و آموزش بلوک های ساختمان CSS را شروع کنید.
سپاسگزاریم که تا اینجا در کنار هستید و امیدواریم خانواده کیهان وب به لطف شما گسترش یابد.