آموزش راهنمایی های CSS

معرفی Introduction

• CSS خود را افزایش دهید Supercharge your CSS

• فایل های ورزشی Exercise files

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

• آیا باید CSS من را عادی یا بازنشانی کنم؟ Should I normalize or reset my CSS?

• CSS بهتر را با Stylelint بنویسید Write better CSS with stylelint

2. راهنمایی کانتینر 2. Container Tips

• واحد VW کمی از برکت مخلوط است The vw unit is a bit of a mixed blessing

• اندازه سازگار با جعبه اندازه: Border-Box Consistent sizing with box-sizing: border-box

• خواص جعبه منطقی به جای بالا، راست، پایین، سمت چپ Logical box properties instead of top, right, bottom, left

• حالت نوشتن Writing modes

• هماهنگی افقی و عمودی در هر ظرف Horizontal and vertical alignment in any container

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

• چگونه ملک روشن کار می کند How the clear property works

• حرکت بیش از ClearFix: پاک کردن با ریشه جریان Move over clearfix: Clearing with flow-root

3. تایپوگرافی 3. Typography

• PX، EM، و REM واحدهای توضیح داده شده است px, em, and rem units explained

• طول خط طبیعی را با واحد CH تنظیم کنید Set natural line lengths with the ch unit

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

• یک کلاه قطره را به متن خود اضافه کنید Add a drop cap to your text

• طول متن کوتاه و تعداد خطوط متن را کوتاه کنید Truncate text length and number of lines of text

• انتخاب متن سبک و برجسته Style text selection and highlighting

• حس کردن اموال ارتفاع ارتفاع Making sense of the line-height property

4. خواص سفارشی 4. Custom Properties

• خواص سفارشی با مقادیر پیش فرض Custom properties with default values

• خواص سفارشی برای ایجاد توابع Nesting custom properties to create functions

• ایجاد حالت نور یا تاریک با خواص سفارشی Create light or dark mode with custom properties

• نوار کناری: رنگ HSLA () فقط بهتر است Sidebar: hsla() colors are just better

5. طرح بندی 5. Layout

• آیا شما باید از شبکه، فلکس یا شناور استفاده کنید؟ Should you use grid, flex, or float?

• اضافه کردن شکاف ها و زهکشی به شبکه و انعطاف پذیری Add gaps and gutters to grid and flex

• شبه عناصر واقعی شبکه های واقعی و انعطاف پذیر هستند Pseudo-elements are true grid and flex items

• قرار دادن همه چیز در بالای یکدیگر با استفاده از شبکه Putting things on top of one another using grid

• عناصر ثابت و چسبنده Fixed and sticky elements

نتیجه Conclusion

• با تشکر Thanks