Зертханалық жұмыс: CSS – қасиеттер

Мақсаты: HTML элементтерін стильдеу үшін негізгі CSS қасиеттерін қолдануды үйрену, олардың синтаксисін және мүмкіндіктерін меңгеру.

Бағалау критерийлері:

• Элементтерді стильдеу үшін негізгі CSS қасиеттерін қолданады.
• Қаріптерге, түстерге, ара қашықтықтарға, шекараларға және фондық суреттерге стиль береді.
• Дұрыс және функционалды веб-бет жасайды.

Жұмыс барысы:

1. Дайындық кезеңі

• Негізгі CSS қасиеттерімен танысыңыз:
  • Мәтін: color, font-size, font-weight, text-align, line-height.
  • Түс және фон: background-color, background-image, background-size.
  • Шекаралар мен дөңгелектеулер: border, border-radius.
  • Ара қашықтықтар: margin, padding.
  • Өлшемдер: width, height.
  • Көлеңкелер: box-shadow, text-shadow.
• Мәтіндік редактордың HTML және CSS-ке бейімделгеніне көз жеткізіңіз.

2. HTML құжатын жасау

• 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>Зертханалық жұмыс 22</h1>    </header>    <main>        <section class=»content»>            <p>Бұл CSS арқылы стильденетін мәтіннің мысалы.</p>            <button class=»action-btn»>Бас мені</button>        </section>    </main>    <footer>        <p>Автор: Студент</p>    </footer></body></html>

3. CSS файлын жасау

• css файлын жасап, HTML-ге қосыңыз.
• Бет элементтеріне стильдер қосыңыз:

1. Мәтін мен фон үшін негізгі стильдер:

body {    font-family: Arial, sans-serif;    background-color: #f0f0f0;    color: #333;    margin: 0;    padding: 0;} header {    background-color: #4CAF50;    color: white;    padding: 20px 0;    text-align: center;    font-size: 2rem;}

2. Бөлімдер мен мәтінге арналған стильдер:

.content {    padding: 20px;    margin: 20px auto;    max-width: 600px;    background-color: white;    border-radius: 10px;    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);} p {    font-size: 1.2rem;    line-height: 1.5;    text-align: justify;    color: #555;}

3. Батырмаларға арналған стильдер:

.action-btn {    display: inline-block;    background-color: #4CAF50;    color: white;    padding: 10px 20px;    border: none;    border-radius: 5px;    font-size: 1rem;    cursor: pointer;    text-decoration: none;} .action-btn:hover {    background-color: #45a049;    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);}

4. Төменгі колонтитул үшін стильдер:

footer {    text-align: center;    padding: 10px 0;    background-color: #333;    color: white;}

4. Тексеру және сынау

• Барлық файлдарды сақтап, HTML құжатын браузерде ашыңыз.
• Барлық қасиеттердің жұмысын тексеріңіз:
  • Мәтін мен фонның түсін өзгерту.
  • Көлеңке қолдану.
  • Бұрыштарды дөңгелектеу.
  • Батырмаға меңзерді апарғанда анимацияның орындалуы.

5. Есепті рәсімдеу

• Қосу керек:
  • Толық HTML және CSS коды.
  • Браузердегі нәтиженің скриншоттары.
  • Қолданылған қасиеттер мен олардың әсерінің сипаттамасы.

Мысал тапсырма:

• Заголовок, мәтіндік блок және батырмасы бар веб-бет жасаңыз.
• Келесі стильдерді қолданыңыз:
  1. Заголовок үшін мәтін мен фон түсі.
  2. Мәтінге көлеңке және бұрыштарды дөңгелектеу.
  3. Батырмаға меңзерді апарғанда анимация.

Кеңестер:

• CSS кодын валидатор арқылы тексеріңіз (W3C Validator).
• Кодты оқу жеңіл болу үшін ара қашықтықтар мен түсіндірме жазбаларды қолданыңыз.
• Қасиеттердің әсерін түсіну үшін әртүрлі мәндермен тәжірибе жасаңыз.

Күтілетін нәтиже:

• CSS арқылы стильденген мәтіні, фоны, батырмалары бар веб-бет.
• CSS қасиеттерінің синтаксисін және жұмыс істеу логикасын түсіну.