کتاب صوتی CSS for Strategic Planning

📚 کتاب آموزشی جامع

📚 اطلاعات کتاب

عنوان کتاب: کتاب CSS for Strategic Planning

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

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

📋 سرفصل‌های کتاب (100 موضوع)

• 1. مقدمه: CSS چیست و اهمیت آن در طراحی وب
• 2. نحوه اتصال CSS به HTML: Inline, Internal, External
• 3. سینتکس CSS: انتخابگر، ویژگی و مقدار
• 4. آشنایی با ابزارهای توسعه‌دهنده مرورگر (DevTools)
• 5. انتخابگرهای پایه: نوع، کلاس، شناسه و انتخابگر جهانی
• 6. مفهوم Cascade، Specificity و Inheritance در CSS
• 7. اولویت (Specificity) انتخابگرها و قوانین آن
• 8. واحد‌های اندازه‌گیری در CSS: پیکسل، EM، REM و درصد
• 9. واحدهای Viewport: vw, vh, vmin, vmax
• 10. کار با رنگ‌ها در CSS: Hex, RGB, RGBA, HSL, HSLA
• 11. مدیریت کد CSS: کامنت‌گذاری و سازماندهی فایل‌ها
• 12. مدل جعبه‌ای (Box Model): Content, Padding, Border, Margin
• 13. `box-sizing`: تفاوت `content-box` و `border-box`
• 14. انواع نمایش (Display Property): `block`, `inline`, `inline-block`
• 15. کنترل ابعاد عناصر: `width`, `height`, `max-width`, `min-width`
• 16. مدیریت محتوای اضافی: `overflow` (hidden, scroll, auto)
• 17. مفهوم `float` و `clear`: طرح‌بندی‌های سنتی
• 18. موقعیت‌دهی (Positioning): `static`, `relative`, `absolute`
• 19. `position: fixed` برای عناصر ثابت
• 20. `position: sticky` برای عناصر چسبنده
• 21. کنترل ترتیب لایه‌ها: `z-index`
• 22. چینش افقی عناصر با `margin: auto`
• 23. ویژگی‌های فونت: `font-family`, `font-size`, `font-weight`, `font-style`
• 24. `line-height` و `letter-spacing`: تنظیمات فاصله
• 25. `text-align`, `text-indent`, `text-decoration`
• 26. `text-transform`, `white-space` و `word-wrap`
• 27. استایل‌دهی به لیست‌ها: `list-style-type`, `list-style-image`, `list-style-position`
• 28. استایل‌دهی به لینک‌ها: `:link`, `:visited`, `:hover`, `:active`, `:focus`
• 29. استفاده از @font-face برای فونت‌های سفارشی
• 30. آیکون‌ها با استفاده از فونت یا SVG در CSS
• 31. `background-color` و `background-image`
• 32. `background-repeat`, `background-position`, `background-size`
• 33. `background-attachment` و `background-origin`, `background-clip`
• 34. استفاده از `background` shorthand
• 35. گرادیان‌های خطی (Linear Gradients)
• 36. گرادیان‌های شعاعی (Radial Gradients)
• 37. ویژگی‌های Border: `width`, `style`, `color` و shorthand `border`
• 38. `border-radius`: ایجاد گوشه‌های گرد
• 39. `box-shadow` و `text-shadow`: سایه‌های پیشرفته
• 40. معرفی Flexbox: مفهوم Container و Items
• 41. `display: flex`: فعال‌سازی Flexbox
• 42. `flex-direction`: جهت‌دهی به آیتم‌ها (row, column)
• 43. `flex-wrap`: کنترل شکست خط آیتم‌ها
• 44. `justify-content`: تراز افقی آیتم‌ها
• 45. `align-items`: تراز عمودی آیتم‌ها
• 46. `align-content`: تراز خطوط آیتم‌ها در صورت `flex-wrap`
• 47. `gap`, `row-gap`, `column-gap` در Flexbox
• 48. `flex-grow`, `flex-shrink`, `flex-basis` برای آیتم‌ها
• 49. `order` و `align-self`: کنترل آیتم‌های تکی
• 50. معرفی CSS Grid: طرح‌بندی‌های دو بعدی
• 51. `display: grid`: فعال‌سازی Grid Layout
• 52. `grid-template-columns` و `grid-template-rows`: تعریف ساختار گرید
• 53. واحد `fr` و توابع `repeat()`, `minmax()`
• 54. `grid-template-areas`: نام‌گذاری و چیدمان نواحی گرید
• 55. `grid-column` و `grid-row`: موقعیت‌دهی آیتم‌ها بر اساس خطوط
• 56. `grid-area`: موقعیت‌دهی آیتم‌ها بر اساس نواحی
• 57. `gap` در CSS Grid
• 58. `justify-items`, `align-items`, `place-items`
• 59. `justify-content`, `align-content`, `place-content`
• 60. ترکیب Flexbox و Grid برای طرح‌بندی‌های پیچیده
• 61. مبانی طراحی واکنش‌گرا (RWD) و اهمیت آن
• 62. متا تگ `viewport` و تنظیمات اولیه
• 63. Media Queries: ساختار و کاربرد
• 64. تعریف Breakpoints و رویکرد Mobile-First
• 65. تصاویر واکنش‌گرا: `max-width: 100%`, `object-fit`, `srcset`, `picture`
• 66. تایپوگرافی واکنش‌گرا: `font-size` با واحدهای نسبی و تابع `clamp()`
• 67. Video ها و Iframes واکنش‌گرا
• 68. `prefers-color-scheme`: پیاده‌سازی Dark Mode
• 69. `prefers-reduced-motion`: کاهش انیمیشن برای دسترسی‌پذیری
• 70. استایل‌دهی برای چاپ: `@media print`
• 71. معرفی Transition ها: حرکت‌های نرم
• 72. `transition-property`, `transition-duration`
• 73. `transition-timing-function`, `transition-delay`
• 74. استفاده از shorthand `transition`
• 75. تبدیل‌های 2D: `translate`, `rotate`, `scale`, `skew`
• 76. تبدیل‌های 3D: `perspective`, `rotateX`, `rotateY`, `translateZ`
• 77. `transform-origin` و `backface-visibility`
• 78. انیمیشن‌ها با `@keyframes`
• 79. ویژگی‌های `animation`: `name`, `duration`, `timing-function`, `delay`
• 80. `animation-iteration-count`, `animation-direction`, `animation-fill-mode`
• 81. انتخابگرهای ترکیبی: فرزند مستقیم، خواهر و برادر مجاور و عمومی
• 82. انتخابگرهای صفت (Attribute Selectors): `[attr]`, `[attr="val"]`, `[attr^="val"]`, `[attr$="val"]`
• 83. شبه‌کلاس‌ها رایج: `:hover`, `:focus`, `:active`, `:visited`
• 84. شبه‌کلاس‌های ساختاری: `:first-child`, `:last-child`, `:nth-child()`
• 85. شبه‌کلاس‌های ساختاری پیشرفته: `:nth-of-type()`, `:only-child`, `:root`
• 86. شبه‌کلاس‌های کاربردی: `:not()`, `:empty`, `:target`, `:checked`, `:disabled`
• 87. شبه‌عناصر (Pseudo-elements): `::before` و `::after`
• 88. کاربرد `::before` و `::after` برای محتوای تولید شده و تزئینات
• 89. شبه‌عناصر متنی: `::first-line`, `::first-letter`, `::selection`
• 90. انتخابگرهای پیشرفته برای بهبود Specificity و سازماندهی
• 91. معماری CSS: سازماندهی کد برای پروژه‌های بزرگ
• 92. متدولوژی‌های CSS: OOCSS, SMACSS, BEM و Atomic CSS (معرفی)
• 93. Custom Properties (CSS Variables): مدیریت تم و مقادیر سراسری
• 94. معرفی پیش‌پردازنده‌های CSS: Sass/Less (مزایا و ساختار پایه)
• 95. طراحی سیستم‌ها (Design Systems) و نقش CSS در آن‌ها
• 96. بهینه‌سازی عملکرد CSS: Critical CSS, Tree Shaking, Minification
• 97. مباحث عملکردی مرورگر: Reflow, Repaint و Compositing
• 98. قابلیت دسترسی (Accessibility - A11y) با CSS: کنتراست، فوکوس و ترتیب عناصر
• 99. ابزارهای Linting و Formatting برای حفظ کیفیت و یکپارچگی کد
• 100. آینده CSS: Container Queries, Cascade Layers و قابلیت‌های جدید