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

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

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

• Использует основные свойства 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-документа

• Создайте файл 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>Лабораторная работа 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-файла

• Создайте файл styles.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. Стили для кнопок:

css

Копировать код

.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-кода через валидатор CSS (W3C Validator).
• Используйте отступы и комментарии для улучшения читаемости кода.
• Экспериментируйте с разными значениями свойств, чтобы понять их эффект.

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

• Веб-страница с текстом, фоном, кнопками и элементами, стилизованными с помощью CSS.
• Понимание синтаксиса и работы основных CSS-свойств.