Темирова Назгул лаба №2

Министерство образования и науки Кыргызской Республики
Кыргызский государственный технический университет

им. И. Раззакова
Институт информационных технологий
Кафедра «Программное обеспечение компьютерных систем»
Направление: 710400 «Программная инженерия»

Дисциплина: «Web-программирование (Java)»
Отчет
По лабораторной работе № 2
Тема: «Язык описания внешнего вида документа CSS»
Выполнил: студент группы

ПИ(б)-4-22 Темирова Назгул
Проверила: Сарыпбекова Ж.Р.
Бишкек – 2023
Лабораторная работа №2.
Язык описания внешнего вида документа CSS
Цель работы: Изучить способы подключения стилей CSS к сайту. Изучить возможность
верстки веб-страницы с помощью тегов HTML5 и CSS.
Задание № 2.
Самостоятельное задание Измените свою Web-страницу, рассказывающие о вас из
лабораторной работы №1, применив к ней css. Вы должны все атрибуты тегов HTML
оформить ввиде тегов css и записать в отдельный внешний файл и подключить его в свой
HTML-файл.
HTML code:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
<meta name="Keywords" content="html, css">
<meta http-equiv="PRAGMA" content="NO-CACHE">
<link href="1.css" rel="stylesheet" type="text/css">
<title>Nazgul</title>
</head>
<body>
<header>
<h1>Темирова Назгул Бекназарович</h1>
</header>
<main>
<section id="about">
<h2>О себе</h2>
<p>Я родилась в 2004 году в селе Охна,который нахожиться в Баткене.С
детства жила только с мамой.Люблю животных,особенно кошек</p>
</section>
<section id="education">
<h2>Образование</h2>
<p>До 7- класса я училась в гиназии под им Б.Айтматов, потом
перевеллась в школу под им.Саид Баюми там и закончила школу. В данное
время учусь в КГТУ имени И. Раззакова в ИИТ, 1-курс, группа ПИ-4-22</p>
</section>
<section id="family">
<h2>О семье</h2>
<ul>
<li>Нас в семье 2,старший брат и я.</li>
<li>Темиров Бекназар,работал в комбинате,умер в 2006 году.</li>
<li>Мать-Кулбекова Шарафат Абдибаповна,была пенсионеркой,умерла
в 2021 году от коронавируса.</li>
</ul>
</section>
<section id="photos">
<h2>Фотографии</h2>
<img src="C:\Users\Lenovo\Pictures\Saved Pictures\mom and brother.jpeg"
alt="С мамой">
<img src="C:\Users\Lenovo\Pictures\my bestie.jpeg" alt="С друзьми">
</section>
<br>
</main>
</body>
</html>
CSS code:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #0077c9;
color: yellow;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}
header h1 {
margin: 0;
}
main {
padding: 20px;
}
main h2 {
margin-top: 0;
}
main img {
width: 27%;
margin: 0 0 0 3.5%;
background: #f0f0f0;
border-radius: 5px;
margin-bottom: 20px;
}
main img:first-child {
margin-left: 0;
}
html {
background-color: silver;
}
Задание № 3. Блочная верстка с использованием CSS

<!DOCTYPE html>
<html>
<head>
<title>Лабораторнаяработа №2 </title>
<style>
body {
background: #f5f5f5;
color: #000000;
font-family: Arial, Times New Roman;
font-size: 16px;
}
header {
background: #9932CC;
color: white;
height: 100px;
width: 100%;
}
nav {
background: #FA8072;
color: black;
width: 100%;
height: 50px;
}
aside {
background: #1E90FF;
color: yellow;
float: left;
width: 10%;
height: 400px;
}
#content {
background: gray;
float: left;
width: 90%;
}
#clear {
clear:both;
}
footer {
background: #7B68EE;
color: white;
height: 80px;
width: 100%;
}
div {
background: #00FA9A;
color: white;
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<header>
Шапка сайта
</header>
<nav>
Меню навигации горизонтальное
</nav>
<aside>
Левый сайдбар
</aside>
<div>
Основная часть
</div>
<footer>
Подвал
</footer>
</body>
</html>
Задание № 4. Самостоятельное задание Вам необходимо

сверстать предложенный макет страницы используя HTML5 и
CSS. Стили необходимо присоединить с помощью внешнего
файла style.css. Его необходимо разместить в той же папке что и
ваш HTMl файл.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="5">
<title>CSS лаба </title>
<link rel=stylesheet href="1.css">
</head>
<body>
<header>
Шапка сайта
</header>
<nav></nav>
<aside>
Левый сайдбар
</aside>
<aside2>
Правый сайдбар
</aside2>
<footer>
Подвал1
</footer>
<footer2>
Подвал2
</footer2>
</body>
</html>
CSS:
header{
width: 100%;
height: 100px;
font-size: 40px;
color: beige;
background-color: #F4A460;
text-align: center;
line-height: 2.5;
}
aside{
width: 200px;
height: 410px;
font-size: 40px;
color: beige;
background-color: rgb(255, 136, 0);
text-align: center;
float: left;
writing-mode:vertical-rl;
}
nav{
background-color: #00FF7F;
height: 400px;
width: 836px;
display: inline-block;
padding-bottom: 10px;
}
aside2{
width: 250px;
height: 410px;
font-size: 40px;
color: beige;
background-color: rgb(255, 136, 0);
text-align: center;
float: right;
writing-mode: vertical-lr;
}
footer{
display: inline-block;
width: 50%;
height: 100px;
font-size: 40px;
color: beige;
background-color: #1E90FF;
text-align: center;
line-height: 2.5;
margin-top: -4px;
}
footer2{
width: 50%;
height: 100px;
font-size: 40px;
color: beige;
background-color: #FF1493;
text-align: center;
line-height: 2.5;
float: right;
margin-top: -4px;
}
Ответить на контрольные вопросы
1. Если к одному тегу написаны стили всеми тремя способами, то в каком порядке и с
каким приоритетом они будут применяться?
Стили с идентификаторами будут выполняться первыми, затем стили с классами,
последним будет стиль с тегом.
2. Какой из способов является наиболее оптимальным для изменения конкретного

элемента на одной конкретной странице HTML?
Подключение стилей с использованием атрибута тега style. Он позволяет добавить стили
CSS к данному тегу.
3. Какой из способов следует использовать при разработке и создании большого проекта?

Подключение внешнего файла со стилями CSS.
4. В чем недостатки каждого из способов подключения стилей?

Подключение стилей с использованием тега <style></style>.
Данный способ немного увеличивает весь страницы и соответственно увеличивает время
загрузки.
Подключение внешнего файла со стилями CSS.
Данный способ не рекомендуется использовать везде и постоянно, так как он убивает
напрочь суть универсальности стилей.

Темирова Назгул лаба №2

Загружено:

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

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

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

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

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

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

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

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

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

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

Темирова Назгул лаба №2

Загружено:

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

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

Министерство образования и науки Кыргызской Республики

Кыргызский государственный технический университет

Направление: 710400 «Программная инженерия»

Выполнил: студент группы

Язык описания внешнего вида документа CSS

Задание № 3. Блочная верстка с использованием CSS

Задание № 4. Самостоятельное задание Вам необходимо

2. Какой из способов является наиболее оптимальным для изменения конкретного

3. Какой из способов следует использовать при разработке и создании большого проекта?

4. В чем недостатки каждого из способов подключения стилей?

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