CSS مخفف Cascading Style Sheets است و یک زبان استایل‌دهی است که برای تعیین نحوه نمایش و ظاهر محتوای اچ‌تی‌ام‌ال (HTML) در وب استفاده می‌شود. این زبان به طور اساسی برای ایجاد و تغییر سبک، طرح‌بندی و ظاهر وب‌سایت‌ها استفاده می‌شود.
CSS امکانات زیادی برای کنترل نحوه نمایش محتوا فراهم می‌کند، از جمله:
1. تغییر رنگ، فونت، اندازه و نوع فونت متن.
2. اضافه کردن تصاویر به پس‌زمینه وب‌سایت.
3. کنترل اندازه، موقعیت و فاصله بین المان‌ها.
4. ایجاد انیمیشن‌ها و افکت‌های تغییرات.
5. ایجاد و استفاده از شیوه‌های طبقه‌بندی برای استایل‌دهی به المان‌ها.
CSS از مدل “پس‌زمینه، مفهومی” پیروی می‌کند، که به این معنی است که انتخاب‌ها و اعمال استایل‌ها بر روی یک المان به شیوه‌ای ترکیبی و مفهومی از مشخصه‌ها (مانند شناسه، کلاس، تگ و …) اعمال می‌شود.
تاریخچه CSS به سال ۱۹۹۶ بازمی‌گردد که وب‌سایت‌ها شروع به پیچیده‌تر شدن کردند و نیاز به یک سیستم استایل‌دهی مناسب برای مدیریت و کنترل ظاهر آنها داشتند. این زمانی بود که W3C (کارگروه مشترک جهانی وب) تصمیم به توسعه CSS گرفت. نسخه اولیه CSS در سال ۱۹۹۶ منتشر شد و از آن زمان به بعد، CSS به طور پیوسته توسعه یافته و به یک استاندارد برای استایل‌دهی وب‌سایت‌ها تبدیل شده است.
آماده سازی محیط برنامه نویسی
برای شروع برنامه نویسی با CSS لازم است تا فضا را برای کدنویسی و مشاهده خروجی خود آماده کنید، شما می‌توانید با استفاده از لینک زیر نرم‌افزار Visual Studio Code رو به صورت رایگان دانلود و نصب کنید: آموزش نصب Visual Studio Code
پیش نیاز های دوره
پیش نیاز های یادگیری زبان CSS، یادگیری زبان HTML می‌باشد. شما می‌توانید با مراجعه به لینک زیر نگاه کلی به این زبان داشته باشید:
آموزش زبان CSS کاملا رایگان می‌باشد.
این مستند از سایت www.tutorialspoint.com از این لینک ترجمه شده است.
با کلیک برروی هر سرفصل به صفحه آن درس منتقل می‌شوید.
CSS - مقدماتی (Elementary)
- خانه (HOME)
- معرفی (Introduction)
- سینتکس (Syntax)
- انتخابگرها (Selectors)
- نحوه استفاده (How To)
- نظرات (Comments)
- رنگ‌ها (Colors)
- رنگ های RGB (RGB Colors)
- رنگ‌های HEX (HEX Colors)
- رنگ‌های HSL (HSL Colors)
- رنگ پس‌زمینه (Background Color)
- تصویر پس‌زمینه (Background Image)
- تکرار پس‌زمینه (Background Repeat)
- پیوست پس‌زمینه (Background Attachment)
- شورت‌هند پس‌زمینه (Background Shorthand)
- حاشیه‌ها (Borders)
- عرض حاشیه (Border Width)
- رنگ حاشیه (Border Color)
- طرفین حاشیه (Border Sides)
- حاشیه کوتاه (Border Shorthand)
- حاشیه‌های گرد (Rounded Borders)
- فاصله‌های بیرونی (Margins)
- فروپاشی حاشیه‌ها (Margin Collapse)
- پدینگ (Padding)
- ارتفاع/عرض (Height/Width)
- مدل جعبه‌ای (Box Model)
- خط‌چین (Outline)
- عرض خط‌چین (Outline Width)
- رنگ خط‌چین (Outline Color)
- شورت‌هند خط‌چین (Outline Shorthand)
- فاصله خط‌چین (Outline Offset)
- رنگ متن (Text Color)
- تراز متن (Text Alignment)
- تزئین متن (Text Decoration)
- تغییر شکل متن (Text Transformation)
- فاصله‌دهی متن (Text Spacing)
- سایه متن (Text Shadow)
- خانواده فونت (Font Family)
- فونت وب امن (Font Web Safe)
- فونت‌های جایگزین (Font Fallbacks)
- استایل فونت (Font Style)
- اندازه فونت (Font Size)
- فونت‌های گوگل (Font Google)
- جفت کردن فونت‌ها (Font Pairings)
- شورت‌هند فونت (Font Shorthand)
- آیکون‌ها (Icons)
- لینک‌ها (Links)
- لیست‌ها (Lists)
- حاشیه جداول (Table Borders)
- اندازه جداول (Table Size)
- تراز جداول (Table Alignment)
- استایل جداول (Table Style)
- جداول واکنش‌گرا (Table Responsive)
- نمایش (Display)
- حداکثر عرض (Max-width)
- موقعیت (Position)
- z-index (Z-index)
- سرریز (Overflow)
- شناور (Float)
- پاکسازی (Clear)
- بلوک خطی (Inline-block)
- تراز (Align)
- ترکیب‌کننده‌ها (Combinators)
- شبه‌کلاس (Pseudo-class)
- شبه‌عنصر (Pseudo-element)
- شفافیت (Opacity)
- نوار ناوبری (Navbar)
- نوار ناوبری عمودی (Vertical Navbar)
- نوار ناوبری افقی (Horizontal Navbar)
- منوهای بازشدنی (Dropdowns)
- گالری تصاویر (Image Gallery)
- تصاویر اسپریت (Image Sprites)
- انتخابگرهای صفتی (Attr Selectors)
- فرم‌ها (Forms)
- شمارنده‌ها (Counters)
- طرح‌بندی وب‌سایت (Website Layout)
- واحدها (Units)
- خاصیت (Specificity)
- !مهم (!important)
- توابع ریاضی (Math Functions)
CSS - پیشرفته (Advanced)
- گوشه‌های گرد (Rounded Corners)
- تصاویر حاشیه (Border Images)
- پس‌زمینه‌ها (Backgrounds)
- رنگ‌ها (Colors)
- کلیدواژه‌های رنگ (Color Keywords)
- گرادیان‌های خطی (Linear Gradients)
- گرادیان‌های شعاعی (Radial Gradients)
- گرادیان‌های مخروطی (Conic Gradients)
- افکت‌های سایه (Shadow Effects)
- سایه کادر (Box Shadow)
- افکت‌های متنی (Text Effects)
- فونت‌های وب (Web Fonts)
- تبدیلات دو بعدی (2D Transforms)
- تبدیلات سه بعدی (3D Transforms)
- انتقال‌ها (Transitions)
- انیمیشن‌ها (Animations)
- راهنماهای ابزار (Tooltips)
- استایل تصاویر (Style Images)
- بازتاب تصویر (Image Reflection)
- متناسب کردن شیء (object-fit)
- موقعیت‌یابی شیء (object-position)
- ماسک‌ها (Masking)
- دکمه‌ها (Buttons)
- صفحه‌بندی (Pagination)
- ستون‌های چندگانه (Multiple Columns)
- رابط کاربری (User Interface)
- تابع var() (The var() Function)
- بازنویسی متغیرها (Overriding Variables)
- متغیرها و جاوااسکریپت (Variables and JavaScript)
- متغیرها در مدیا کوئری‌ها (Variables in Media Queries)
- @property (@property)
- سایزبندی کادر (Box Sizing)
- مدیا کوئری‌ها (Media Queries)
- مثال‌های MQ (MQ Examples)
- فلکس‌باکس (Flexbox)
- کانتینر فلکس (Flex Container)
- آیتم‌های فلکس (Flex Items)
- فلکس‌باکس واکنش‌گرا (Flex Responsive)
CSS - واکنش‌گرا (Responsive)
- گوشه‌های گرد (Rounded Corners)
- مقدمه واکنش‌گرا (RWD Intro)
- ویوپورت واکنش‌گرا (RWD Viewport)
- نمای شبکه‌ای واکنش‌گرا (RWD Grid View)
- پرس‌وجوهای رسانه‌ای واکنش‌گرا (RWD Media Queries)
- تصاویر واکنش‌گرا (RWD Images)
- ویدیوهای واکنش‌گرا (RWD Videos)
- فریم‌ورک‌های واکنش‌گرا (RWD Frameworks)
- قالب‌های واکنش‌گرا (RWD Templates)
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام