مقدمه‌ای بر CSS جلسه اول معرفی CSS و تاریخچه آن تاریخچه CSS اهمیت CSS در طراحی وب و نحوه ارتباط آن با HTML اهمیت CSS در طراحی وب چیست

1. استفاده از Inline Styles استفاده از ویژگی style در تگ‌ها 2. استفاده از Internal Styles با استفاده از تگ

اجزای اصلی یک دستور CSS ) Selector انتخابگر ( ) Property ویژگی( Value مقدار نحوه نوشتن یک دستور CSS مثال‌های عملی از قوانین CSS تنظیم استایل برای یک عنصر با ID خاص نکات و جزئیات تکمیلی تمرین پیشنهادی فایل CSS (style.css) فایل HTML (index.html)

انتخابگرهای ترکیبی (Combinator Selectors) : الف) انتخابگر (Selector) فرزند مستقیم (>) : ب) انتخابگر ج) انتخابگر (Selector) مجاور (+) : سلکتور استار "universal selector" ویژگی direction در CSS ویژگی direction در CSS برای تعیین جهت متن و عناصر در یک صفحه استفاده می‌شود. این ویژگی به خصوص در زبان‌هایی مانند فارسی و عربی که از راست به چپ نوشته می‌شوند، بسیار کاربردی است. ________________________________________ مقادیر ویژگی direction ltr (Left to Right): متن و عناصر از چپ به راست نمایش داده می‌شوند. این مقدار پیش‌فرض (default) در اکثر زبان‌ها مانند انگلیسی است. rtl (Right to Left): متن و عناصر از راست به چپ نمایش داده می‌شوند. مناسب برای زبان‌هایی مانند فارسی، عربی و عبری. ________________________________________ نحوه استفاده body { direction: rtl; } این ویژگی تمام محتوای موجود در صفحه را از راست به چپ نمایش می‌دهد. می‌توان آن را به صورت محلی (روی یک عنصر خاص) نیز اعمال کرد. ________________________________________ رنگ‌ها در CSS نام رنگ‌ها (Color Names) HEX (هگزادسیمال) HSL (Hue, Saturation, Lightness) استفاده از شفافیت با() rgba منابع معتبر برای انتخاب رنگ

پس‌زمینه‌ها (Backgrounds) در CSS تنظیم پس‌زمینه با رنگ‌ها background-color تنظیم پس‌زمینه با تصاویر background-image ویژگی‌های پیشرفته پس‌زمینه‌ها ویژگی background-size 1. مقدار cover 2. مقدار contain 3. مقدار) auto پیش‌فرض( 4. مقادیر دقیق (Custom Values)

مقدار inherit مقدار unset استفاده از calc در background-size ویژگی background-position نحوه مقداردهی ویژگی background-position 1. مقدارهای پیش‌فرض و نامی (Keywords) 2. مقادیر عددی (Lengths) 3. مقادیر درصدی (%) 4. مختلط (Combination) 5. مقدارهای خاص و نحوه استفاده ویژگی background-attachment ویژگی background-repeat ویژگی background-origin ویژگی background-clip ویژگی background-blend-mode مثال‌های کاربردی

حاشیه ها (Borders) ویژگی‌های حاشیه: border-style مقادیر border-width مقادیر: border-color border-radius مثال‌ها برای حاشیه ها Outline ویژگی‌های Outline مثال برای Outline تفاوت بین Border و Outline ترکیب Border و Outline

تفاوت Margin و Padding : Margin حاشیه : Padding فاصله داخلی: استفاده از مقادیر مطلق و نسبی: مقادیر مطلق (Absolute Values) واحدهای رایج: مقادیر نسبی (Relative Values) واحدهای رایج: مقایسه بین مقادیر مطلق و نسبی مثال برای Margin مثال برای Padding مثال پیشرفته با مقادیر نسبی و مطلق استفاده از سلکتور ستاره (*) مثال جامع با استفاده از سلکتور ستاره (*)

مقادیر مختلف width و height : ویژگی‌های max-width، min-height، max-height

اجزای Box Model مثال ساده چرا Border-Box مهم است؟ تأثیر Box Model بر اندازه المان‌ها ویژگی Box Sizing تنظیمات متن در CSS استایل‌دهی به متن (Text Styling)

1. تزئین متن (Text Decoration) مقادیر ویژگی text-decoration استفاده ترکیبی با سایر ویژگی‌های مرتبط 2. سایه متن (Text Shadow) 3. مثال جامع برای تنظیمات متن

ویژگی‌های فونت در CSS 1. font-family 2. font-size 3. font-weight 4. font-style 5. line-height اضافه کردن فونت‌های سفارشی با @font-face یک مثال عملی: نکات اضافی: مثال HTML (index.html): فایل CSS (style.css):

مفهوم display و کاربرد آن انواع مقادیر display 1. Block 2. inline 3. inline-block 4. none ویژگی‌های پیشرفته display 1. flex

1. flex-direction 2. justify-content 3. align-items 4. flex-wrap 5. align-content مثال‌های کامل Flexbox

2. grid ویژگی‌های اصلی Grid 1. grid-template-rows و grid-template-columns 2. grid-column & grid-row 3. gap 4. grid-area 5. justify-items و align-items 6. grid-template-areas مثال 1: چیدمان ساده با Grid مثال 2: چیدمان با Grid برای ردیف‌ها و ستون‌های متفاوت مثال 3: استفاده از grid-template-areas برای چیدمان پیچیده‌تر مقایسه مقادیر پرکاربرد display چرا flex و grid مهم هستند؟ تفاوت بین Flex و Grid مثال کامل برای display در CSS

مقادیر اصلی ویژگی position : static پیش‌فرض مثال برای static : relative نسبی مثال برای relative : absolute مطلق

sticky چسبان ویژگی‌های مرتبط با Positioning جدول مقایسه ویژگی‌های Position مثال جامع برای ویژگی position در CSS ویژگی Float و Clear در CSS

ویژگی float مقادیر اصلی Float : left : Float و Clear 1. Box 1 (Float Left): 2. Box 2 (Float Right): 3. Clear: 4. Box 3 (No Float): کاربرد عملی Float و Clear : چیدمان تصاویر: قراردادن متن در کنار تصاویر. پاکسازی فلوت‌ها: ویژگی Z-Index و Overflow در CSS visible : hidden : scroll : auto : مثال برای ویژگی Overflow مثال ترکیبی ویژگی Z-Index و Overflow

انتقال‌ افکتها (Transitions) ویژگی transition در CSS اجزای ویژگی transition transition: [property] [duration] [timing-function] [delay]; property : ویژگی CSS که می‌خواهید انتقال دهید مثلاً background-color یا transform) . duration : مدت زمان اجرای انتقال مثلاً 1s یا 500ms) . timing-function : تعیین نحوه حرکت انتقال. مقادیر رایج شامل: • ease : شروع آرام، شتاب گرفتن و پایان آرام. • linear : حرکت یکنواخت بدون تغییر سرعت. • ease-in : شروع آرام و شتاب گرفتن در پایان. • ease-out : شروع سریع و پایان آرام. delay : مدت زمانی که انتقال قبل از اجرا صبر می‌کند (مثلاً 0.5s . مثال ساده انتقال افکت

ویژگی @keyframes اجزای ویژگی animation animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction]; name : نام انیمیشنی که با @keyframes تعریف شده است. duration : مدت زمان انیمیشن timing-function : مشابه ویژگی انتقال، نحوه حرکت انیمیشن را تعیین می‌کند. delay : مدت زمانی که انیمیشن قبل از شروع صبر می‌کند. iteration-count : تعداد دفعات اجرای انیمیشن. مقادیر شامل: • infinite : انیمیشن دائماً تکرار می‌شود. • عدد مشخص مثلاً 3 بار. direction : جهت حرکت انیمیشن. مقادیر شامل: • normal : انیمیشن هر بار از ابتدا اجرا می‌شود. • alternate : انیمیشن به صورت رفت‌وبرگشتی اجرا می‌شود. مثال انیمیشن انتقال‌ افکتها (Transitions) ویژگی transition اجزای ویژگی transition transition: [property] [duration] [timing-function] [delay]; property : ویژگی CSS که می‌خواهید انتقال دهید مثلاً background-color یا transform) . duration : مدت زمان اجرای انتقال مثلاً 1s timing-function : تعیین نحوه حرکت انتقال. مقادیر رایج شامل: • ease : شروع آرام، شتاب گرفتن و پایان آرام. • linear : حرکت یکنواخت بدون تغییر سرعت. • ease-in : شروع آرام و شتاب گرفتن در پایان. • ease-out : شروع سریع و پایان آرام. delay : مدت زمانی که انتقال قبل از اجرا صبر می‌کند مثال ساده انتقال افکت

ویژگی Transform انواع تغییرات با Transform : 1. translate(x, y) جابجایی المان در محورهای X و Y . transform: translate(50px, 100px); 2. rotate(deg) چرخاندن المان بر اساس درجه. transform: rotate(45deg); 3. scale(x, y) تغییر اندازه المان در محورهای X و Y . transform: scale(1.5, 2); 4. skew(x, y) کج کردن المان در محورهای X و Y. transform: skew(20deg, 10deg); matrix(a, b, c, d, e, f) یک تغییر پیچیده که ترکیبی از translate، scale، skew و rotate را انجام می‌دهد. ویژگی‌های مرتبط با Transform transform-origin : تعیین نقطه‌ای که تغییرات Transform نسبت به آن اعمال می‌شوند. perspective : تنظیم عمق دید برای جلوه‌های سه‌بعدی. ویژگی Object-fit مقادیر مهم Object-fit : fill (پیش‌فرض): تصویر یا ویدئوبه گونه‌ای تغییر اندازه می‌دهد که کل فضا را پر کند contain : cover : none : scale-down : ویژگی‌های مرتبط با Object-fit object-position : تعیین موقعیت تصویر یا ویدیو در ظرف. مثال: object-position: center; یا object-position: 50% 50%; مثال برای ویژگی‌های Transform و Object-fit : مثال جامع و کامل برای ویژگی‌های Transform و Object-fit