Лабораторная работа: CSS — свойства

Цель:
Научиться использовать различные CSS-свойства для оформления HTML-элементов, включая шрифты, цвета, размеры, отступы и анимацию.

Критерии оценивания:

• Использует CSS-свойства для оформления HTML-страницы.
• Применяет свойства для управления внешним видом текста, фона, блоков и элементов управления.
• Создает эстетически приятный и функциональный дизайн.

Ход работы:

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-документа

• Создайте файл index.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>&copy; 2024 Лабораторная работа 23</p>

</footer>

</body>

</html>

3. Создание CSS-файла

• Создайте файл styles.css и подключите его к HTML.
• Добавьте стили для элементов страницы:

1. Стили для текста и фона:

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);

}

2. Стили для блоков:

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);

}

3. Стили для кнопок:

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);

}

4. Стили для нижнего колонтитула:

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-свойств.

Пример задания:

1. Создайте страницу с заголовком, текстом и кнопкой.
2. Примените следующие CSS-свойства:
   • Цвет текста и фона.
   • Границы и закругления.
   • Тени для текста и блоков.
   • Анимация при наведении на кнопку.

Советы:

• Проверяйте корректность CSS-кода с помощью W3C Validator.
• Убедитесь, что отступы и размеры элементов не перекрываются.
• Используйте DevTools для быстрой отладки стилей.

Ожидаемый результат:

• Эстетично оформленная веб-страница, демонстрирующая использование различных CSS-свойств.
• Понимание синтаксиса CSS и принципов его работы.