Зертханалық жұмыс: CSS – қасиеттер
Мақсаты: HTML элементтерін безендіру үшін әртүрлі CSS қасиеттерін қолдануды үйрену, соның ішінде қаріптер, түстер, өлшемдер, ара қашықтықтар және анимация.
Бағалау критерийлері:
- HTML-бетті безендіру үшін CSS қасиеттерін қолданады.
- Мәтіннің, фонның, блоктардың және басқару элементтерінің сыртқы түрін реттеу үшін қасиеттерді қолданады.
- Эстетикалық жағынан тартымды және функционалды дизайн жасайды.
Жұмыс барысы:
1. Дайындық кезеңі
- Негізгі CSS қасиеттерін қайталаңыз:
- Мәтін: color, font-size, text-align, font-family.
- Ара қашықтықтар: margin, padding.
- Өлшемдер: width, height.
- Шекаралар: border, border-radius.
- Көлеңкелер: box-shadow, text-shadow.
- CSS-ті жөндеуге арналған құралдармен танысыңыз (мысалы, Chrome DevTools).
2. HTML құжатын жасау
<!DOCTYPE html><html lang=»en»><head> <meta charset=»UTF-8″> <meta name=»viewport» content=»width=device-width, initial-scale=1.0″> <title>CSS — қасиеттер</title> <link rel=»stylesheet» href=»styles.css»></head><body> <header> <h1>CSS қасиеттерін қолдану</h1> </header> <main> <section> <p>Бұл абзац CSS-тің мәтін мен блоктарды стильдеудегі негізгі мүмкіндіктерін көрсетеді.</p> <button>Әрекет батырмасы</button> </section> </main> <footer> <p>© 2024 Зертханалық жұмыс 23</p> </footer></body></html>
3. CSS файлын жасау
- Мәтін мен фон үшін стильдер:
body { font-family: ‘Arial’, sans-serif; line-height: 1.6; background-color: #f0f0f0; color: #333; margin: 0; padding: 0;} h1 { text-align: center; color: #4CAF50; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);}
- Блоктарға арналған стильдер:
section { background-color: #fff; border: 1px solid #ddd; border-radius: 10px; padding: 20px; max-width: 600px; margin: 20px auto; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
- Батырмаларға арналған стильдер:
button { display: inline-block; background-color: #4CAF50; color: white; border: none; border-radius: 5px; padding: 10px 20px; font-size: 1rem; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease;} button:hover { background-color: #45a049; transform: scale(1.05);}
- Футерге арналған стильдер:
footer { background-color: #333; color: white; text-align: center; padding: 10px 0;}
4. Қосымша CSS қасиеттерін қосу
- Блоктар мен батырмаларды безендіру үшін box-shadow және border-radius қолданыңыз.
- Элементтерге анимация қосыңыз:
button:hover { background-color: #45a049; transform: translateY(-2px);}
5. Тексеру және сынау
- Барлық файлдарды сақтап, HTML құжатын браузерде ашыңыз.
- Стильдердің дұрыс көрініп тұрғанын тексеріңіз.
- Батырманың үстіне меңзерді апарып, анимация әсерін байқаңыз.
6. Есепті рәсімдеу
- Толық HTML және CSS кодын қосыңыз.
- Нәтиженің скриншоттарын салыңыз.
- Қолданылған CSS қасиеттерін сипаттаңыз.
Мысал тапсырма:
- Заголовогы, мәтіні және батырмасы бар бет жасаңыз.
- Келесі CSS қасиеттерін қолданыңыз:
- Мәтін мен фон түсі.
- Шекаралар мен дөңгелектеулер.
- Мәтін мен блоктарға көлеңке.
- Батырмаға меңзер апарғанда анимация.
Кеңестер:
- CSS кодын W3C Validator арқылы тексеріңіз.
- Ара қашықтықтар мен өлшемдердің бір-бірін басып тұрмағанына көз жеткізіңіз.
- Жылдам тексеру үшін DevTools қолданыңыз.
Күтілетін нәтиже:
- Әртүрлі CSS қасиеттері қолданылған тартымды веб-бет.
- CSS синтаксисі мен жұмыс істеу принциптерін түсіну.
