راهنمای مبتدی برای CSS: آزمون جامع تمرین - آخرین آپدیت

مقدمه ای بر CSS

• در این بخش درک شما از نحو CSS ، ساختار و نقشی که در توسعه وب ایفا می کند ، پوشش می دهد. شما روی ساختار اصلی CSS ، تفاوت بین CSS درون خطی ، داخلی و خارجی و نحوه تعامل CSS با HTML آزمایش می شود.

• موضوعات کلیدی:

  • CSS چیست؟

  • هدف CSS در توسعه وب.

  • CSS درون خطی ، داخلی و خارجی.

  • CSS نحو: انتخاب کنندگان ، خصوصیات و مقادیر.

  • CSS در مقابل HTML: نقش و تعامل.

انتخاب کنندگان اصلی CSS

• شما در مورد چگونگی درک انتخاب کنندگان CSS آزمایش می شوید. سوالات در انتخاب عناصر با استفاده از انتخاب کنندگان جهانی ، کلاس و شناسه و ترکیب انتخاب کنندگان برای هدف قرار دادن عناصر خاص متمرکز خواهند شد.

• موضوعات کلیدی:

  • انتخاب کنندگان جهانی ، عنصر ، کلاس و شناسه.

  • انتخاب کننده ویژگی ها.

  • انتخاب کنندگان گروه بندی و لانه سازی.

  • انتخاب کنندگان فرزندان و کودک.

CSS رنگ ها و زمینه ها

• این بخش توانایی شما در استفاده از خصوصیات رنگ و پس زمینه در CSS را آزمایش می کند. سؤالات نحوه استفاده از مقادیر مختلف رنگ (HEX ، RGB ، RGBA ، HSL) و نحوه ایجاد شیب و مدیریت تصاویر پس زمینه را پوشش می دهد.

• موضوعات کلیدی:

  • خصوصیات رنگی: HEX ، RGB ، RGBA ، HSL ، HSLA.

  • خصوصیات پس زمینه: رنگ پس زمینه ، تصویر پس زمینه ، تکرار پس زمینه ، اندازه پس زمینه.

  • ایجاد شیب های خطی و شعاعی.

  • کار با چندین زمینه.

مدل جعبه CSS

• درک مدل جعبه CSS برای قرار دادن عناصر در یک صفحه بسیار مهم است. در این بخش دانش شما در مورد بالشتک ، حاشیه ، مرز ، محتوا و نحوه تنظیم ابعاد با استفاده از اندازه جعبه ارزیابی می شود.

• موضوعات کلیدی:

  • محتوا ، بالشتک ، مرز و حاشیه.

  • اندازه جعبه و جعبه مرزی.

  • کنترل عنصر سرریز با سرریز: پنهان ، سرریز: پیمایش و سرریز: خودکار.

  • تنظیم عرض ، ارتفاع و تنظیم ابعاد جعبه.

یک ظاهر طراحی شده متن

• شما روی خصوصیات مختلف موجود در متن سبک آزمایش می شوید. این شامل خانواده های قلم ، اندازه ، وزن ، ارتفاع خط و جلوه های متن پیشرفته مانند سایه ها و فاصله ها است.

• موضوعات کلیدی:

  • فونت-خانواده ، اندازه فونت ، فونت وزن ، سبک فونت.

  • تراز متن ، دکوراسیون و تحول.

  • سایه متن ، فاصله حروف و فواصل کلمه.

  • متن-هند و دست زدن به فضای سفید.

تکنیک های طرح بندی CSS

• این بخش در اعماق تکنیک های مختلف طرح بندی مانند Flexbox و CSS Grid فرو می رود. شما در مورد نحوه ساخت طرح بندی با استفاده از این روش ها و نحوه موقعیت یابی عناصر با استفاده از خصوصیات صفحه نمایش و موقعیت یابی آزمایش خواهید شد.

• موضوعات کلیدی:

  • با استفاده از نمایشگر: بلوک ، خطی ، درون خط ، بلوک ، هیچ.

  • موقعیت با موقعیت: استاتیک ، نسبی ، مطلق ، ثابت ، چسبنده.

  • عناصر شناور و پاکسازی شناورها.

  • ایجاد طرح های پاسخگو با استفاده از Flexbox و CSS Grid.

  • درک جهت گیری فلکس ، توجیه کننده ، توجیهی ، مورد را در Flexbox.

  • تعریف سیستم های شبکه با ستون های شبکه ،-ردیف های شبکه ، شبکه های شبکه ای.

CSS شبه کلاس ها و عناصر شبه

• این بخش دانش شما را در مورد کلاسهای شبه و عناصر شبه آزمایش می کند ، که به شما امکان می دهد سبک ها را بر اساس حالت یا موقعیت آنها در سند ، و همچنین به صورت پویا محتوای قبل یا بعد از عناصر اضافه کنید.

• موضوعات کلیدی:

  • شبه کلاس :: hover ،: focus ،: nth-child () ،: کودک اول ،: آخرین کودک و غیره.

  • عناصر شبه ::: قبل ،: بعد از ، :: حرف اول ، :: خط اول.

انتقال و انیمیشن های CSS

• انتقال و انیمیشن های CSS برای افزودن تعامل و جذابیت بصری به صفحات وب شما مهم است. در این بخش ، شما در مورد نحوه ایجاد انتقال صاف بین حالتها و استفاده از کلید های کلید برای انیمیشن ها آزمایش می شوید.

• موضوعات کلیدی:

  • درک انتقال CSS: انتقال-سرمایه گذاری ، مدت زمان انتقال ، عملکرد انتقال ، انتقال ، تاخیر.

  • ایجاد انیمیشن های CSS با استفاده از KeyFrames.

  • تعریف خصوصیات انیمیشن: نام انیمیشن ، مدت زمان انیمیشن ، عملکرد انیمیشن ،-تایم ، انیمیشن-ایجاد-شمارش.

طراحی پاسخگو و نمایش داده شد

• در این بخش توانایی شما در طراحی وب سایت هایی که با استفاده از نمایش داده های رسانه ای تنظیم می شوند ، ارزیابی می کند. شما در نقاط شکست ، چیدمان سیال و استراتژی های طراحی اول موبایل آزمایش خواهید شد.

• موضوعات کلیدی:

  • با استفاده از نمایش داده های رسانه ای برای عرض صفحه نمایش.

  • طراحی طرح های سیال با واحدهای نسبی مانند ٪ ، VW ، VH ، Em.

  • روش اول موبایل و استفاده از سبک های مبتنی بر عرض دستگاه.

  • نقاط شکست برای دستگاه های موبایل ، تبلت و دسک تاپ.

چارچوب ها و پیش پردازنده های CSS

• در این بخش ، در چارچوب های CSS (به عنوان مثال ، بوت استرپ ، Tailwind CSS) و پیش پردازنده های CSS مانند SASS و کمتر ارزیابی خواهید شد.

• موضوعات کلیدی:

  • مقدمه ای بر چارچوب های محبوب CSS.

  • با استفاده از bootstrap یا tailwind css برای توسعه سریع.

  • مزایای پیش پردازنده های CSS مانند SASS و کمتر.

  • با استفاده از ویژگی های SASS/کمتر مانند متغیرها ، لانه سازی و مخلوط کردن.

بهترین روشها

• در این بخش درک شما از بهترین شیوه ها برای نوشتن CSS تمیز ، حفظ و کارآمد آزمایش می شود. این موضوع بر موضوعات متداول مانند ویژگی ، افزونگی و بهینه سازی CSS برای عملکرد متمرکز خواهد شد.

• موضوعات کلیدی:

  • نوشتن CSS ماژولار و قابل استفاده مجدد.

  • درک ویژگی CSS و نحوه مدیریت آن.

  • با استفاده از متغیرهای CSS برای مدیریت مقادیر مرتبط با موضوع.

  • بهینه سازی CSS برای عملکرد (به عنوان مثال ، به حداقل رساندن افزونگی).

CSS پیشرفته (اختیاری برای مبتدیان)

• در این بخش پیشرفته ، شما بر روی تکنیک های پیچیده تر CSS مانند متغیرهای CSS ، مسیر کلیپ برای ایجاد اشکال سفارشی و طرح بندی پیشرفته Flexbox/Grid آزمایش می شوید.

• موضوعات کلیدی:

  • طرح بندی Advanced Flexbox و شبکه.

  • متغیرهای CSS برای مدیریت موضوع.

  • ایجاد اشکال سفارشی با استفاده از مسیر کلیپ.

  • اجرای انیمیشن های پیشرفته.

نمونه ها و پروژه های عملی

• این آزمون یک مؤلفه عملی را ارائه می دهد ، جایی که شما مهارت های خود را برای ساخت پروژه های CSS در دنیای واقعی اعمال می کنید. اینها می تواند شامل موارد زیر باشد:

  • طراحی یک طرح صفحه وب پاسخگو.

  • ساختن یک نوار ناوبری پاسخگو.

  • ایجاد یک کارت انعطاف پذیر با Flexbox.

  • اضافه کردن جلوه های شناور و انیمیشن های ساده.

  • توسعه یک صفحه فرود کاملاً پاسخگو.