WEB-8lab-boiko
.docСтудент Бойко Євгеній група 410-і
Лабораторна робота № 8
Тема: Оформлення веб-сторінки за допомогою таблиці стилів.
Мета: навчитися створювати таблиці стилів, знати способи підключення та збереження шаблонів CSS, вміти позиціонувати блоки, створювати ефекти тіні для тексту.
Хід роботи
Завдання 1
Mystyle.css
Код :
h1 {
font-family: Georgia, Serif;
/* утсанавливаем шрифт */
font-style: italic;
/* утсанавливаем стиль шрифта курсив */
color: #2c2d7a;
/* утсанавливаем цвет шрифта */
font-size: 24pt;
/* утсанавливаем размер шрифта */
text-align: center;
/* делаем текст по центру*/
text-transform: capitalize;
}/* Делаем 1 букву каждого слова большой */
.text {
font-family: Mistral;/* утсанавливаем шрифт */
text-indent: 25px;/* утсанавливаем величину отступа первой строки */
letter-spacing: 2px;/* утсанавливаем растояние между буквами */
word-spacing: 7px;/* утсанавливаем интервал между словами */
text-align: justify;
}/* текст по всей ширине */
.nazva {
font-family: Lobster;/* утсанавливаем шрифт */
font-style: italic;/* утсанавливаем стиль шрифта курсив */
font-size: 24px;/* утсанавливаем размер текста */
font-weight: bold;/* делаем текст жирним <b> */
color: #0a9b5a;/* цвет шрифта */
}
#list {
color: #1e2b0f;
/* утсанавливаем цвет текста */
text-decoration: underline;
}/* Подчеркуем текст*/
Завдання 2
pryklad1
Скріншот:
Код :
<html>
<head>
<meta charset="UTF-8">
<title>Boiko 1task</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>Оформлення тектсу за допомогою стилів</h1>
<hr>
<div class="text">
<span class="nazva">Українські Карпати</span> - це ціла скринька незвіданих можливостей та прекрасних локацій, які по-новому змушують нас дивитись на Україну. Природні багатства гір, шумні водоспади, старовинні палаци та замки на скелях – все це потрібно побачити на власні очі хоча б раз у житті. Ми склали для вас перелік найбільш цікавих місць у Карпатах, які варто відвідати уже цього літа.
</div>
<div>
<ul id="list">
<li>Озеро Синевир</li>
<li>Замок Паланок</li>
<li>Невицький замок</li>
<li>Водоспад Гук</li>
<li>Кам'янецький водоспад</li>
<li>Водоспад Шипіт</li>
</ul>
</div>
</body>
</html>
Завдання 3
Pryklad2
Скріншот:
Код :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Boiko task2</title>
<style>
h1 {
font-family: Georgia, Serif;/* утсанавливаем шрифт */
font-style: italic;/* утсанавливаем стиль шрифта курсив */
color: #2c2d7a; /* утсанавливаем цвет шрифта */
font-size: 24pt; /* утсанавливаем размер шрифта */
text-align: center; /* делаем текст по центру*/
text-transform: capitalize;/* Делаем 1 букву каждого слова большой */
}
.style1 {
font-size: 38pt;/* утсанавливаем размер текста */
color: white;/* цвет текста */
background-color: #efc353;/*устанавливаем фон*/
text-align: right;/* выравниваем текст справа */
}
.style2 {
font-size: 22pt;/* утсанавливаем размер текста */
color: magenta;/* цвет текста */
text-transform: uppercase;/* Все слова начинаются с большой буквыв */
background-color: #d6e067;/*устанавливаем фон*/
}
</style>
</head>
<body>
<h1>Підключення внутрішньої таблиці стилів</h1>
<hr>
<p class="style1">До цього абзацу застосовано стиль style1</p>
<p class="style2">До цього абзацу застосовано стиль style2</p>
</body>
</html>
Завдання 4
Pryklad3
Скріншот:
Код :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Boiko task 3</title>
<style>
body {
color: black;/* утсанавливаем цвет текста */
font-size: 16px;/* утсанавливаем размер текста */
font-family: Arial; /* утсанавливаем шрифт */
}
.тінь {
color: #DBDBDB;/* утсанавливаем цвет текста */
text-align: center;/* делаем текст по центру*/
margin-top: 30px;/*Величину верхнего отступа*/
font-size: 80px;/* утсанавливаем размер шрифта */
line-height: 270px;/*Устанавливаеv межстрочный интервал*/
font-family: Times;/* утсанавливаем шрифт */
}
.основа {
color: red;/* утсанавливаем цвет текста */
margin-top: -230px;/*Величину верхнего отступа*/
font-size: 70px;/* утсанавливаем размер шрифта */
line-height: 250px;/*Устанавливаеv межстрочный интервал*/
font-family: Times;/* утсанавливаем шрифт */
}
.шар1 {
color: black;/* утсанавливаем цвет текста */
margin-top: -100px;/*Величину верхнего отступа*/
font-size: 50px;/* утсанавливаем размер шрифта */
line-height: 65px;/*Устанавливаеv межстрочный интервал*/
font-family: Arial;/* утсанавливаем шрифт */
}
.шар2 {
color: green;/* утсанавливаем цвет текста */
margin-top: 30px;/*Величину верхнего отступа*/
font-size: 35px;/* утсанавливаем размер шрифта */
line-height: 45px;/*Устанавливаеv межстрочный интервал*/
font-family: Arial;/* утсанавливаем шрифт */
}
</style>
</head>
<body>
Приклад викорстання каскадних стилів
<center>
<div class="тінь">Текст із тінню</div>
<div class="основа">Текст із тінню</div>
<div class="шар1">Приклад тексту із тінню</div>
<div class="шар2">Це приклад використання каскадних стилів</div>
</center>
</body>
</html>
Висновок : на лабораторній роботі я навчився працювати з таблицями стилів.
КОНТРОЛЬНІ ПИТАННЯ
Що таке каскадна таблиця стилів?
Каскадні таблиці стилів - CSS(Cascading Style Sheets) - мова, яку використовують для опису вигляду (кольори, шрифти, розташування блоків та інші аспекти) веб-сторінок. Це спрощує процес створення сторінок і поліпшує їх дизайн.
Які є способи застосування каскадних таблиць стилів?
Зовнішній файл, тег style, атрибут style.
Як застосовуються таблиці стилів з використанням класів?
Для того щоб певним елементам надати одиданкові стиль потрібно в їх атрибут class вказати назву класса, стилі для якого повинні бути прописані в css коді.
Як застосовуються таблиці стилів з використанням ідентифікаторів?
Так само, як і для классів, але на сторінці у кожного елементу, в якого є ідентифікатор повинен бути свій унікальний ідентифікатор, вони не повинні повторюватися.
Назвіть властивості каскадних таблиць стилів для тексту.
word-spacing, letter-spacing, всі властивості з приставками text- та font-, та інші
Які ви знаєте властивості для фону сторінки?
Background, background-color, background-img, background-size, background-position, background-repeat…
Що таке абсолютне позиціонування?
Елемент з абсолютним позиціонуванням займає положення, певне значеннями властивостей Bottom, Left, Right, Top, Які задають його зміщення відносно кордонів батька.
Яке позиціонування називається відносним?
Елемент зміщується щодо свого становища на величини, задані значеннями властивостей Bottom, Left, Right, Top. Це не впливає на розташування елементів в нормальному потоці, наступних за ним, як ніби він не зміщувався.
Яка властивість вказує на тип позиціонування?
position
Яка дія властивості visibility?
Вказує як буде відображатися елемент