کتاب صوتی CSS for Green Building

🎓 دوره آموزشی جامع

📚 اطلاعات دوره

عنوان دوره: دوره CSS for Green Building

موضوع کلی: برنامه نویسی

موضوع میانی: CSS

📋 سرفصل‌های دوره

• 1. مقدمه: CSS و نقش آن در وب‌سایت‌های ساختمان سبز
• 2. CSS چیست و چرا اهمیت دارد؟
• 3. ارتباط بین HTML (ساختار) و CSS (طراحی)
• 4. روش‌های افزودن CSS به صفحه: داخلی، خارجی و درون‌خطی
• 5. آشنایی با سینتکس CSS: انتخابگر، خصوصیت و مقدار
• 6. اولین استایل‌دهی: تغییر رنگ و پس‌زمینه
• 7. کامنت‌گذاری در CSS
• 8. انتخابگرهای اصلی: تگ، کلاس و شناسه (ID)
• 9. انتخابگرهای ترکیبی (Combinators)
• 10. انتخابگرهای ویژگی (Attribute Selectors)
• 11. شبه‌کلاس‌ها (Pseudo-classes): :hover, :focus, :active
• 12. شبه‌المان‌ها (Pseudo-elements): ::before, ::after
• 13. اولویت در CSS: مفهوم Specificity
• 14. مفهوم وراثت (Inheritance)
• 15. مقدار !important و خطرات استفاده از آن
• 16. آشنایی با Box Model: محتوا، Padding، Border، Margin
• 17. خصوصیت box-sizing: content-box در مقابل border-box
• 18. تنظیم عرض (width) و ارتفاع (height) المان‌ها
• 19. استفاده از min-width و max-width برای طراحی انعطاف‌پذیر
• 20. کنترل سرریز محتوا با خصوصیت overflow
• 21. واحدهای اندازه‌گیری مطلق: px, pt
• 22. واحدهای اندازه‌گیری نسبی: em, rem
• 23. واحدهای نسبی به Viewport: vw, vh, vmin, vmax
• 24. درصد (%) به عنوان واحد اندازه‌گیری
• 25. استایل‌دهی به حاشیه‌ها (Borders)
• 26. ایجاد گوشه‌های گرد با border-radius
• 27. ایجاد سایه برای جعبه‌ها با box-shadow
• 28. رنگ‌ها در CSS: کلمات کلیدی، HEX، RGB و RGBA
• 29. مدل رنگی HSL و HSLA برای رنگ‌های طبیعی‌تر
• 30. تنظیم رنگ متن (color)
• 31. تنظیم رنگ پس‌زمینه (background-color)
• 32. استفاده از تصویر پس‌زمینه (background-image)
• 33. کنترل تکرار و موقعیت تصویر پس‌زمینه
• 34. تنظیم اندازه تصویر پس‌زمینه با background-size
• 35. ایجاد گرادینت‌های خطی و شعاعی در پس‌زمینه
• 36. مبانی تایپوگرافی در وب
• 37. خصوصیت font-family و فونت‌های امن وب
• 38. افزودن فونت‌های سفارشی با @font-face
• 39. تنظیم اندازه فونت (font-size)
• 40. تنظیم وزن فونت (font-weight)
• 41. استایل‌دهی به متن: font-style و text-decoration
• 42. تنظیمات فاصله‌گذاری متن: line-height و letter-spacing
• 43. تراز کردن متن با text-align
• 44. تغییر حالت حروف با text-transform
• 45. استایل‌دهی به لیست‌های مرتب و نامرتب
• 46. خصوصیت display: block, inline, inline-block
• 47. پنهان کردن المان‌ها با display: none و visibility: hidden
• 48. مفهوم جریان عادی سند (Normal Flow)
• 49. موقعیت‌دهی (Positioning): static و relative
• 50. موقعیت‌دهی مطلق (absolute)
• 51. موقعیت‌دهی ثابت (fixed) و چسبان (sticky)
• 52. کنترل لایه‌ها با z-index
• 53. استفاده از Float برای چیدمان (روش قدیمی)
• 54. پاک‌سازی Float با Clearfix
• 55. مقدمه‌ای بر Flexbox: چیدمان یک‌بعدی مدرن
• 56. ایجاد یک Flex Container: خصوصیت display: flex
• 57. محور اصلی و محور متقاطع در Flexbox
• 58. تنظیم جهت چیدمان با flex-direction
• 59. شکستن خط در Flexbox با flex-wrap
• 60. تراز کردن آیتم‌ها در محور اصلی با justify-content
• 61. تراز کردن آیتم‌ها در محور متقاطع با align-items
• 62. تراز کردن خطوط چندگانه با align-content
• 63. تغییر ترتیب آیتم‌ها با order
• 64. رشد و کوچک شدن آیتم‌ها: flex-grow و flex-shrink
• 65. اندازه پایه آیتم‌ها با flex-basis
• 66. مقدمه‌ای بر Grid: چیدمان دوبعدی قدرتمند
• 67. ایجاد یک Grid Container: خصوصیت display: grid
• 68. تعریف ستون‌ها و ردیف‌ها با grid-template-columns/rows
• 69. واحد fr برای چیدمان انعطاف‌پذیر در Grid
• 70. ایجاد فاصله بین آیتم‌ها با gap
• 71. موقعیت‌دهی آیتم‌ها در Grid با شماره خطوط
• 72. نام‌گذاری خطوط در Grid
• 73. استفاده از grid-template-areas برای چیدمان معنایی
• 74. مفهوم طراحی وب واکنش‌گرا (Responsive Web Design)
• 75. تنظیم Viewport با تگ متا
• 76. معرفی Media Queries
• 77. رویکرد Mobile-First در طراحی واکنش‌گرا
• 78. استفاده از Media Queries برای Breakpoint‌های مختلف
• 79. ایجاد تصاویر واکنش‌گرا
• 80. تایپوگرافی واکنش‌گرا
• 81. مخفی کردن یا نمایش المان‌ها در اندازه‌های مختلف صفحه
• 82. ترکیب Flexbox و Grid برای چیدمان‌های پیچیده واکنش‌گرا
• 83. ایجاد Transition برای انیمیشن‌های نرم
• 84. خصوصیات Transition: property, duration, timing-function, delay
• 85. مفهوم Transform: حرکت، چرخش و تغییر اندازه
• 86. توابع Transform دوبعدی: translate, rotate, scale, skew
• 87. توابع Transform سه‌بعدی
• 88. انیمیشن‌های پیچیده‌تر با @keyframes
• 89. کنترل انیمیشن با خصوصیت animation
• 90. متغیرها در CSS (Custom Properties) برای تم‌سازی
• 91. استفاده از تابع calc() برای محاسبات دینامیک
• 92. انتخابگرهای پیشرفته: nth-child, nth-of-type
• 93. اعمال فیلترهای بصری با خصوصیت filter
• 94. ایجاد افکت شیشه مات با backdrop-filter
• 95. برش المان‌ها به اشکال غیرمستطیلی با clip-path
• 96. کنترل نحوه نمایش تصویر در کادر با object-fit
• 97. ترکیب رنگ لایه‌ها با-blend-mode
• 98. سازماندهی فایل‌های CSS
• 99. معماری CSS: مفاهیم BEM
• 100. مقدمه‌ای بر پیش‌پردازنده‌های CSS مانند Sass/SCSS