Зертханалық жұмыс: Стильдерді қолдану. Синтаксис

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

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

• CSS қолдану арқылы HTML элементтеріне стильдер береді.
• CSS синтаксисін және стильдерді қосу әдістерін біледі.
• Бетті эстетикалық әрі құрылымды етіп безендіреді.

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

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

• CSS қосу тәсілдерімен танысыңыз:
  • Кірістірілген стильдер: элементтің style атрибутында.
  • Ішкі стильдер: <head> ішіндегі <style> ішінде.
  • Сыртқы стильдер: бөлек CSS файлында, <link> арқылы қосылады.
• Негізгі CSS-қасиеттерімен танысыңыз:
  • Түстер: color, background-color.
  • Қаріптер: font-size, font-family, font-weight.
  • Ара қашықтықтар: margin, padding.
  • Шекаралар: border, border-radius.
  • Теңестіру: text-align, vertical-align.

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>Стильдерді қолдану</title>    <link rel=»stylesheet» href=»styles.css»></head><body>    <h1>Бет тақырыбы</h1>    <p>Бұл стильдеудің мысалы үшін жазылған абзац.</p>    <div class=»container»>        <button>Батырма</button>    </div></body></html>

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

• HTML құжатыңыз орналасқан қалтада css файлын жасаңыз.
• Элементтерге стильдер қосыңыз:

1. Мәтінге арналған стильдер:

body {    font-family: Arial, sans-serif;    background-color: #f4f4f9;    color: #333;} h1 {    color: #4CAF50;    text-align: center;    font-size: 2.5rem;} p {    font-size: 1rem;    line-height: 1.6;    margin: 10px 20px;}

2. Контейнерлер мен батырмаларға арналған стильдер:

.container {    text-align: center;    margin-top: 20px;} button {    background-color: #4CAF50;    color: white;    border: none;    padding: 10px 20px;    font-size: 1rem;    cursor: pointer;    border-radius: 5px;} button:hover {    background-color: #45a049;}

3. Шекаралар мен көлеңкелер қосу:

.container {    border: 2px solid #ddd;    padding: 20px;    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);    max-width: 400px;    margin: auto;    background-color: #fff;}

4. Кірістірілген және ішкі стильдерді қолдану

• Кірістірілген стильдер (style атрибуты):

<p style=»color: blue; font-weight: bold;»>Бұл мәтін көк түспен ерекшеленген.</p>

• Ішкі стильдер (<style> ішінде):

<style>    p {        font-style: italic;        background-color: #e7e7e7;    }</style>

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

• Барлық файлдарды сақтап, HTML құжатын браузерде ашыңыз.
• Стильдердің көрінуін тексеріңіз.
• Батырманың үстіне меңзерді апарып, өзгерісін байқаңыз.

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

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

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

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

Кеңестер:

• CSS файлының дұрыс қосылғанына көз жеткізіңіз.
• Стиль беру үшін ерекше класстарды қолданыңыз.
• CSS кодын валидатор арқылы тексеріңіз.

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

• CSS қолданылған негізгі мазмұнды веб-бет.
• CSS синтаксисін және стильдерді қосу әдістерін түсіну.
• Браузерде дұрыс көрсетілетін эстетикалық құжат.