Lab4 Kamran

Министерство Образования Азербайджанской Республики
Азербайджанский Технический Университет
ЛАБОРАТОРНАЯ РАБОТА №4
Создание HTML-документа с помощью CSS
Кафедра: Компьютерные технологии
Факультет: Информационные и Телекоммуникационные Технологии
Предмет: Веб-системы и технологии
Группа: 680R
Студент: Мехдиев Кямран
Педагог: Алиева Шахла
2023 г.
CSS (Cascading Style Sheets) — это язык стилей, который используется для
оформления HTML-документов. С помощью CSS мы можем определять
различные стили для элементов на странице, такие как цвет, размер, шрифт,
отступы и многое другое.
Чтобы создать HTML-документ с использованием CSS, мы сначала создаем

HTML-разметку, а затем добавляем стили CSS. Вот пример HTML-документа
с использованием CSS:
<!DOCTYPE html>
<html>
<head>
<title>Моя страница</title>
<style>
body {
background-color: #f2f2f2;
}
h1 {
color: #333333;
font-size: 24px;
margin-bottom: 20px;
}
p{
color: #666666;
font-size: 16px;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Добро пожаловать на мою страницу</h1>
<p>Это моя первая веб-страница, созданная с помощью HTML и CSS.</p>
<p>Я очень рад, что вы здесь.</p>
</body>
</html>
Здесь мы определяем стили для тегов body, h1 и p с помощью блока <style>
внутри тега <head>. Для определения стилей мы используем свойства CSS,
такие как background-color, color, font-size, line-height, margin-bottom и т. д.
Затем мы используем эти стили для оформления элементов на странице.

Например, мы задаем фоновый цвет для тега body, цвет и размер шрифта для
заголовка h1, а также цвет, размер шрифта и интервал между строками для
абзацев p.
В результате мы получаем веб-страницу с определенными стилями, которые

делают ее более привлекательной и удобной для чтения. Кроме того,
использование CSS позволяет нам изменять стили нашей страницы без
изменения ее HTML-разметки.
Кроме использования встроенных стилей в блоке <style> внутри тега <head>,

можно также создать отдельный файл CSS и подключить его к HTML-
документу. Это делается с помощью тега <link> внутри тега <head>.
Вот пример HTML-документа с использованием внешнего файла CSS:
<!DOCTYPE html>
<html>
<head>
<title>Моя страница</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Добро пожаловать на мою страницу</h1>
<p>Это моя первая веб-страница, созданная с помощью HTML и CSS.</p>
<p>Я очень рад, что вы здесь.</p>
</body>
</html>
Здесь мы подключаем файл CSS styles.css с помощью тега <link> с

атрибутами rel="stylesheet" и type="text/css". Путь к файлу CSS
указывается в атрибуте href.
Вот как может выглядеть файл CSS:
body {
background-color: #f2f2f2;
}
h1 {
color: #333333;
font-size: 24px;
}
p{
color: #666666;
font-size: 16px;
line-height: 1.5;
}
Здесь мы определяем те же стили для тегов body, h1 и p, как и в предыдущем

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

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

Lab4 Kamran

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Lab4 Kamran

Загружено:

Авторское право:

Доступные форматы

Министерство Образования Азербайджанской Республики

Азербайджанский Технический Университет

Создание HTML-документа с помощью CSS

Кафедра: Компьютерные технологии

Факультет: Информационные и Телекоммуникационные Технологии

Предмет: Веб-системы и технологии

Студент: Мехдиев Кямран

Педагог: Алиева Шахла

Чтобы создать HTML-документ с использованием CSS, мы сначала создаем

Затем мы используем эти стили для оформления элементов на странице.

В результате мы получаем веб-страницу с определенными стилями, которые

Кроме использования встроенных стилей в блоке <style> внутри тега <head>,

Здесь мы подключаем файл CSS styles.css с помощью тега <link> с

Вот как может выглядеть файл CSS:

Здесь мы определяем те же стили для тегов body, h1 и p, как и в предыдущем

Также, использование внешнего файла CSS позволяет нам легко изменять

Вам также может понравиться