آموزش مجموعه ابزارهای CSS: نکات و تکنیک‌های صفحه‌آرایی و استایل‌دهی - آخرین آپدیت

مقدمه Introduction

• آنچه باید بدانید What you should know

• استفاده از GitHub Codespaces در این دوره Using GitHub Codespaces with this course

• تکنیک‌های قدرتمند CSS CSS power techniques

1. کار با CSS 1. Working with CSS

• نوشتن CSS بهتر با Stylelint Writing better CSS with stylelint

• آیا باید از Normalize، Reset یا روش‌های دیگر استفاده کرد؟ Should you use normalize, reset, or another approach?

2. کار با کانتینرها 2. Working with Containers

• حفظ نسبت ابعاد در کانتینرها و تصاویر Maintaining aspect ratio in containers and images

• مرکز کردن المان‌های مجازی (Pseudo elements) با Absolute Positioning Centering psuedo-elements with absolute positioning

• تغییر حالت نوشتار (Writing Mode) Changing writing mode

• پیچاندن متن دور اشکال سفارشی با Shape Outside Wrap text around custom shapes with shape-outside

• اندازه‌گیری یکسان با Box Sizing: Border Box Consistent sizing with box-sizing: border-box

• واحد vw و مشکل کلاسیک اسکرول‌بار The vw unit and the classic scrollbar problem

• تراز کردن المان‌ها به صورت افقی و عمودی در هر کانتینری Align elements horizontally and vertically in any container

• استفاده از ویژگی‌های Logical Box در مقابل Top, Right, Bottom, Left Using logical box properties vs. top, right, bottom, left

• استفاده از Float و Clear در CSS مدرن Using float and clear in modern CSS

3. تایپوگرافی و افکت‌های متنی 3. Typography and Text Effects

• درک صحیح ویژگی Line Height Making sense of the line-height property

• آشنایی با واحدهای px, em و rem Understanding px, em, and rem units

• محدود کردن طول متن و تعداد خطوط Truncating text length and number of lines of text

• تعیین طول خط بهینه با واحد ch Setting optimal line lengths with the ch unit

• استایل‌دهی به انتخاب متن و هایلایت کردن Style text selection and highlighting

• پر کردن متن با گرادینت یا تصویر Filling text with a gradient or image

• اندازه‌گیری ریسپانسیو با min(), max() و clamp() Responsive sizing with min(), max(), and clamp()

• بهبود خوانایی با مدیریت شکستن خطوط متن Balancing text wrapping for better readability

4. رنگ‌ها و ویژگی‌های سفارشی 4. Colors and Custom Properties

• ایجاد حالت روشن یا تاریک (Light/Dark Mode) با Custom Properties Creating light or dark mode with custom properties

• چرا رنگ‌های hsla() انتخاب بهتری هستند Why hsla() colors are just better

• تودرتو کردن ویژگی‌های سفارشی برای ایجاد توابع Nesting custom properties to create functions

• استفاده از مقادیر جایگزین (Fallback) در Custom Properties Using fallback values with custom properties

5. صفحه‌آرایی و موقعیت‌یابی 5. Layout and Positioning

• افزودن Gap و Gutter به Grid و Flex Adding gaps and gutters to grid and flex

• آیا باید از Grid، Flex یا Flow استفاده کنید؟ Should you use grid, flex, or flow?

• چیدمان المان‌ها با استفاده از Grid Stacking elements using grid

• تودرتو کردن آیتم‌های گرید با Subgrid Nesting grid items with subgrid

• افزودن المان‌های Fixed و Sticky Adding fixed and sticky elements

• المان‌های مجازی به عنوان آیتم‌های واقعی Grid و Flex Pseudo-elements are true grid and flex items

جمع‌بندی Conclusion

• گام‌های بعدی Next steps