Codelab: מרכוז ב-CSS

ה-Codelab הזה מאפשר לך לשתף ולהציג את הדרך המועדפת עליך להתרכז שירות CSS.

בפוסט שפרסמתי בבלוג Centering in CSS מוסבר על 5 הדרכים האהובות עליי להתמקד ב-CSS. או לצפות בסרטון הזה!

הגדרה

  1. לוחצים על רמיקס לעריכה כדי לערוך את הפרויקט.
  2. פתיחה של app/index.html
  3. ב-line 23, מחליפים את /* your centering CSS here /* בשירות ה-CSS
  4. (אופציונלי) נותנים שם לטכניקת מרכוז ומחליפים את הטקסט שב<h1>

סגנונות

  1. יצירת קובץ חדש בתיקייה app/css/
  2. יוצרים בורר כדי להחזיק את הפתרון למרכז, למשל .turbo-center או [floaty-mcfloat]
  3. בתוך הסלקטור החדש, כתבו את שיטת המרכוז (אל תהססו לחפש). לצד השני בapp/css/ כדוגמאות)
  4. (אופציונלי) אפשר לכתוב כמה 'סגנונות תמיכה' כך שנוכל לראות אילו ילדים צריכים כדי לתמוך במרכז
  5. יש לפתוח את app/css/index.css ולייבא את הקובץ החדש בחלק התחתון

לקשור הכול

  1. פתיחה חוזרת של app/index.html
  2. מאתרים את <article> ומעניקים לו את הבורר המותאם אישית שיצרתם בשלב 2 של בקטע הקודם.
  3. שלחו לי ציוץ על התקלה שלכם ואני אציג אותו הפוסט בבלוג!