Лабораторная работа: Применение стилей. Синтаксис

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

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

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

Ход работы:

1. Подготовительный этап

• Изучите способы подключения CSS:
  • Встроенные стили: внутри атрибута style элемента.
  • Внутренние стили: внутри <style> в <head> документа.
  • Внешние стили: в отдельном CSS-файле, подключаемом через <link>.
• Ознакомьтесь с базовыми CSS-свойствами:
  • Цвета: color, background-color.
  • Шрифты: font-size, font-family, font-weight.
  • Отступы: margin, padding.
  • Границы: border, border-radius.
  • Выравнивание: text-align, vertical-align.

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>Применение стилей</title>

<link rel=»stylesheet» href=»styles.css»>

</head>

<body>

<h1>Заголовок страницы</h1>

<p>Это абзац с текстом для примера стилизации.</p>

<div class=»container»>

<button>Кнопка</button>

</div>

</body>

</html>

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

• Создайте файл styles.css в той же папке, где находится ваш HTML-документ.
• Добавьте стили для элементов:

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-файл корректно подключен к HTML-документу.
• Используйте уникальные классы для стилизации, чтобы избежать конфликтов.
• Проверьте корректность кода через валидатор CSS.

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

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