שלב 2: הוסף כותרת

לאחר מכן, הכנס כותרת על ידי שימוש בכל '

' ל '

'תגים. לדוגמה, '

' מוסיף כותרת.

שלב 3: הוסף נתונים לרשימה

על מנת להכניס את הנתונים בצורה של רשימה, השתמש ב-' <זה> 'תג:

---

---

< div מעמד = 'חיית מחמד' >

< h1 > רשימה של חיות מחמד < / h1 >

< זֶה > תַרְנְגוֹלֶת < / זֶה >

< זֶה > ברווז < / זֶה >

< זֶה > כֶּלֶב < / זֶה >

< זֶה > חתול < / זֶה >

< זֶה > ארנב < / זֶה >

< / div >

הפלט של הקוד שהוזכר לעיל הוא כדלקמן:

כעת, התקדם לעבר סעיף ה-CSS לעיצוב הרשימה.

שלב 4: סגנון '.pet-animal' אלמנט

גש ל'

' אלמנט בעזרת הכיתה שהוקצתה ' .חיית מחמד ' והחל את המאפיינים הרשומים:

.חיית מחמד {

גבול : 2 פיקסלים מְנוּקָד rgb ( 230 , חֲמֵשׁ עֶשׂרֵה , חֲמֵשׁ עֶשׂרֵה ) ;

שולים : 50 פיקסלים ;

צבע רקע : rgb ( 252 , 239 , 169 ) ;

}

כאן:

• ' גבול 'מאפיין משמש לציון הגבול סביב האלמנט.
• ' שולים ' מגדיר את החלל סביב גבול האלמנט.
• ' צבע רקע ” מקצה צבע בצד האחורי של האלמנט.

התמונה שהתקבלה מציגה את הפלט של הקוד לעיל:

שלב 5: רשימת סגנון נוסף 'li'

כעת, גש לרשימה של ' div 'מיכל בעל מחלקה' חיית מחמד ' באמצעות ' .pet-animal > li ' והחל את המאפיינים המוזכרים להלן:

.חיית מחמד > זֶה {

רְאוּת : מוּסתָר ;

אֲטִימוּת : 0.2 ;

מַעֲבָר : רְאוּת 0s , אֲטִימוּת 0.5 שניות ליניארי ;

}

כאן:

• ה ' רְאוּת ' CSS משמש כדי להגדיר את הנראות של האלמנט מבלי לשנות את הפריסה של מסמך, כגון מוסתר או גלוי.
• ' אֲטִימוּת ” מציין את השקיפות של אלמנט.
• ' מַעֲבָר ' מאפשר למשתמשים לשנות ערכי נכס בצורה חלקה לאורך זמן נתון:

שלב 6: החל 'רחף' Pseudo Class

כעת, החל את ' לְרַחֵף 'נכס ברשימה:

.חיית מחמד : לְרַחֵף > זֶה {

רְאוּת : גלוי ;

אֲטִימוּת : אחד ;

}

ה ' :לְרַחֵף ” CSS הוא מחלקה פסאודו שמבצעת שינויים בזמן הריצה כאשר מעבירים את מצביע העכבר מעל האלמנט. הפוך רשימה לגלויה באמצעות ' רְאוּת ' והגדר את השקיפות באמצעות ' אֲטִימוּת ' מאפייני CSS לרשימה על ריחוף:

ניתן לראות שהחלנו בהצלחה את המעבר על ' לְהַצִיג ' תכונה.

סיכום

לא ניתן להחיל את מעבר ה-CSS ישירות על ' לְהַצִיג ' תכונה. עם זאת, ניתן ליישם אותו בדרך חלופית. לשם כך, הוסף את תג הרשימה במסמך ה-HTML, גש לרשימה לפי שם התג והחל ' מַעֲבָר ', ' אֲטִימוּת ', ו' רְאוּת ' מאפייני CSS ברשימה. לאחר מכן, השתמש ב' : לרחף ' פסאודו-קלאס והגדר את ערך הנראות כ' גלוי '. פוסט זה הסביר כיצד המעבר מוחל על מאפיין התצוגה של CSS.