משתנים מקומיים

חלק מהיחידה פיתוח Frontend מעשי במסלול ה-HTML של Coddy. שיעור 4 מתוך 35.

ייתכן ששמת לב שאנחנו משתמשים לעיתים קרובות ב־:root כדי להצהיר על משתנים. הסיבה לכך היא ש־:root הוא גלובלי: משתנים שמוגדרים כאן חלים על כל דף ה־HTML (כפי שציינו קודם).

אבל לפעמים רוצים משתנים שמשפיעים רק על חלקים מסוימים בדף. לדוגמה, דמיינו שאתם בונים חנות מקוונת עם כרטיסי מוצר רבים. אפשר ליצור משתנים בתוך המחלקה .card כדי לעצב רק את הכרטיסים האלה בלי להשפיע על רכיבים אחרים.

.card {
  --card-color: orchid;
  background-color: var(--card-color);
}

כך המשתנה פועל רק בתוך רכיבי .card, ומעניק לך שליטה רבה יותר באזורים מסוימים.

אתגר

קל

נתון לך עמוד של חנות מקוונת ובו כמה כרטיסי מוצרים. המשימה שלך:

בתוך המחלקה .card, צור משתנה CSS מקומי בשם --card-accent וקבע את הערך שלו ל-coral.
השתמש במשתנה הזה כדי לקבוע את צבע הטקסט של הכותרת <h3> שבתוך הכרטיס.
השתמש באותו משתנה כצבע הרקע של ה-<button> שבכרטיס.

נסו בעצמכם

<html>
<head>
    <title>Local Variables</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">    <style>
      /* Global variable for body background */
      :root {
        --body-bg: #000f26;
        --font-family: "Playfair Display", serif;
      }
    
      body {
        background-color: var(--body-bg);
        font-family: var(--font-family);
        padding: 20px;
        display: flex;
        gap: 20px;
        justify-content: center;
      }
    
      /* Card styles */
      .card {
        --card-bg: white;
        background-color: var(--card-bg);
        border-radius: 10px;
        padding: 15px;
        width: 250px;
        text-align: center;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      }
    
      .card h3 {
        margin-top: 0;
      }
    
      .card p {
        font-size: 0.9rem;
        color: #333;
      }
    
      .card button {
        border: none;
        color: #000f26;
        padding: 8px 12px;
        border-radius: 5px;
        cursor: pointer;
        font-weight: bold;
        margin-top: 10px;
        width: 100%;
      }
    
    </style>
    </head>
    <body>
    
    <div class="card">
      <h3>Classic Sneakers</h3>
      <p>Comfortable and stylish sneakers for everyday wear.</p>
      <button>Buy Now</button>
    </div>
    
    <div class="card special">
      <h3>Luxury Watch</h3>
      <p>Elegant watch with a unique design for special occasions.</p>
      <button>Buy Now</button>
    </div>
    
    <div class="card">
      <h3>Leather Backpack</h3>
      <p>Durable, spacious backpack made from premium leather.</p>
      <button>Buy Now</button>
    </div>
    
    </body>
</html>