آموزش CSS

مقدمه Introduction

• اسناد یک ظاهر طراحی شده به طور مداوم Styling documents consistently

• آنچه باید بدانید What you should know

• ابزارها و نمونه پروژه ها Tools and sample projects

1. شروع کار 1. Getting Started

• HTML و CSS HTML and CSS

• ابزارهای برنامه نویس مرورگر Browser developer tools

• ارجاع CSS Referencing CSS

• نمای کلی پروژه و راه اندازی Project overview and setup

• بهینه سازی تصاویر و نمایشگرهای شبکیه Optimizing images and retina displays

• پروژه: مسیرهای نسبی Project: Relative paths

• مسیرهای مطلق Absolute paths

2. مفاهیم اصلی 2. Core Concepts

• مشخصات CSS و W3C CSS specifications and the W3C

• واژگان و اصطلاحات CSS CSS syntax and terminology

• مقادیر CSS و واحدها CSS values and units

• رنگ و مقادیر خاصیت The color and property values

• انتخابگرهای نوع و جهانی Type and universal selectors

• کلاس و شناسه انتخاب کننده ها Class and ID selectors

• تمرین انتخاب کلاس و شناسه Class and ID selector exercise

• انتخاب کننده های فرزندان Descendant selectors

• گروه بندی کننده ها Grouping selectors

• وراثت و ویژگی Inheritance and specificity

• آبشار و اهمیت The cascade and importance

• پروژه: اضافه کردن رنگ Project: Adding colors

• انتخاب کنندگان و پیوندهای شبه کلاس Pseudo-class selectors and links

• پروژه: پیوندهای یک ظاهر طراحی شده Project: Styling links

3. مدل جعبه 3. The Box Model

• معرفی مدل جعبه Introduction to the box model

• خط ، نمایش و نمایش Inline, block, and display

• ویژگی های مدل جعبه The box model properties

• جعبه دارای ویژگی و نحو استفاده است The box properties syntax and usage

• اشکال زدایی مدل جعبه Debugging the box model

• بالشتک ، حاشیه و مرز Padding, margin, and border

• حاشیه و چیدمان Margin and layouts

• پروژه: اضافه کردن بسته های محتوا Project: Adding content wrappers

• پروژه: حاشیه و بالشتک Project: Margin and padding

4- تایپوگرافی 4. Typography

• تایپوگرافی برای وب Typography for the web

• تغییر خانواده قلم Changing the font-family

• سبک قلم و سبک قلم Font-weight and font-style

• قلمهای وب با @ font-face Web fonts with @font-face

• قلمهای وب با فونت های Google Web fonts with Google Fonts

• پروژه: Google Fonts Project: Google Fonts

• خاصیت قلم The font-size property

• قلم کوتاه Font shorthand

• دکوراسیون متن ، تراز متن و ارتفاع خط Text-decoration, text-align, and line-height

• پروژه: سبک های تایپوگرافی Project: Typography styles

5. چیدمان: شناور و موقعیت 5. Layouts: Float and Position

• مقدمه شناور Introduction to float

• شناور و ویژگی های شفاف The float and clear properties

• ظرف شناور و فرو ریخته Float and collapsed container

• چیدمان و مدل جعبه Layouts and the box model

• پروژه: رفع float و box model Project: Float and box model fix

• موقعیت Position

• موقعیت و شاخص Z Position and z-index

6. طرح بندی: Flexbox و Grid 6. Layouts: Flexbox and Grid

• آشنایی با شبکه و Flexbox Introduction to Grid and Flexbox

• آشنایی با Flexbox Introduction to Flexbox

• Flexbox: جهت گیری و سفارش Flexbox: Orientation and ordering

• اندازه انعطاف پذیر Flexible sizing

• ورزش Flexbox Flexbox exercise

• Flexbox: تراز Flexbox: Alignment

• پروژه: تراز Flexbox Project: Flexbox alignment

• معرفی CSS Grid Introduction to CSS Grid

• شبکه صریح The explicit grid

• شبکه ضمنی The implicit grid

• ویژگی های قرار دادن شبکه Grid placement properties

• پروژه: ستونهای شبکه و بازرس شبکه Firefox Project: Grid columns and Firefox Grid Inspector

7. انتخاب های پیشرفته 7. Advanced Selectors

• آشنایی با انتخاب کنندگان پیشرفته Introduction to advanced selectors

• انتخابگرهای عقلانی: ترکیبی Relational selectors: Combinators

• پروژه: به روزرسانی ها با ترکیب دهنده ها Project: Updates with combinators

• انتخاب کننده های کلاس شبه: اول و آخر Pseudo-class selectors: First and last

• پروژه: انتخاب های پیشرفته Project: Advanced selectors

8- چیدمان های سیال و پاسخگو 8. Fluid and Responsive Layouts

• آشنایی با طراحی پاسخگو Introduction to responsive design

• پروژه: ایجاد طرح بندی سیال Project: Creating fluid layouts

• تصاویر پس زمینه انعطاف پذیر Flexible background images

• پروژه: تصویر پس زمینه انعطاف پذیر Project: Flexible background image

• معرفی سؤالات رسانه Introduction to media queries

• نمایش داده شد ، عرض ، و نقاط شکست رسانه Media queries, widths, and breakpoints

• طرح بندی پاسخگو را آزمایش کنید Testing responsive layouts

• پروژه: نمایش داده شد رسانه ها و طرح پاسخگو Project: Media queries and responsive layout

نتیجه Conclusion

• مراحل بعدی Next steps