Міністерство освіти і науки України Національний університет «Львівська політехніка» / Звіт до лабораторної роботи № 1 з дисципліни: «ВЕБ-програмування» «Дослідження каскадних стилів CSS. Частина 1» Львів 2021 Мета: Набуття навичок створенні і застосуванні каскадних стилів CSS. Базові властивості. Теоретичні відомості Першим кроком буде під'єднання локальних файлів до хостингу. Налаштування FTP клієнта та іншого. /Рис.1 Створений хостинг Наступним кроком буде встановлення FTP-клієнту, у моєму випадку FiliZilla. Під'єднати локальні файли до самого хостингу. / Рис.2 Налаштований FTP-клієнт Надалі для редагування усіх файлів у даних лабораторних роботах я буду використовувати середовище IDE WebStorm. Створив папки sem7 та lr1. У теці lr1 створив файл lr1.html. Та наповнив його кодом з методичких матеріалів / Рис.3 Код lr1.html / Рис.4 Відкритий файл lr1.html у веб браузері Надалі добавляв стилі, лінії та контейнери. / Рис.6 Більш наповнена сторінка Виконання власного завдання. Описання деяких стилів на моїй сторінці. / Рис.7 Виконання індивідуального завдання Після чого сторінку необхідно перемістити на хостинг за допомогою FTP-клієнту. / Рис.8 Переміщений файл сторінки на сервер Текст сторінки: <html> <head> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=utf-8"> </head> <body> <style> h1 { color: red; background: #f0f0f0; font-style: italic; /*oblique*/ font-weight: normal; /*bold normal*/ font-variant: small-caps; /*normal*/ font-size: 10pt; font-height: 10.2em; font-family: monospace; /*sans-serif serif fantasy*/ font-size: 10pt; } p{ background: silver; padding: 0pt; /* 10 ex */ margin-left: 100pt; margin-right: 500pt; margin-top: 20pt; margin-bottom: 24pt; /* margin: 2px 500pt 1pt 24pt; */ font-size: 10pt; } #d1 { margin: 5%; /* Відступи навколо цього елементу */ background: #fd0; /* Колір фону */ padding: 10px; /* Поля навколо тексту */ } #d2 { border-width: 20px; /* Ширина рамки */ border-color: #666; /* Колір рамки */ border-style: ridge; /* Параметри рамки solid dashed dotted double groove ridge inset outset*/ padding: 10px; /* Поля навколо текста */ margin: 20px; /* Відступи навколо */ text-align: left; /* Розташування тексту center left right justify */ text-indent: 2em; /* Відступ першого рядку в абзаці */ text-decoration: underline; }/*Управл. властивостями тексту blink linethrough ov*/ #d3 { font-style: normal; /* normal italic oblique */ font-variant: small-caps; font-family: cursive; /* serif sans-serif monospace fantasy cursive */ font-size: 10px; /* 140% em px pt */ font-weight: normal; /* normal bold */ } </style> <html> <p>Сто років мучених надій,</p> <p>і сподівань, і вір, і крові</p> <p>синів, що за любов тавровані,</p> <p>сто серць, як сто палахкотінь.</p> <hr> <div id='d1'> <hr> <div id='d2'> Слідкуйте за новим цікавим вмістом в Інтернеті. </div> <div id='d3'> <h1>Деякі властивості стилів: </h1> <p>border-width: 20px; /* Ширина рамки */</p> <p> border-color: #666; /* Колір рамки */</p> <p> border-style: ridge; /* Параметри рамки solid dashed dotted double*/</p> <p> groove ridge inset outset*/</p> <p> padding: 10px; /* Поля навколо текста */</p> <p> margin: 20px; /* Відступи навколо */</p> <p> text-align: left; /* Розташування тексту center left right justify */</p> <p> text-indent: 2em; /* Відступ першого рядку в абзаці */</p> <p> text-decoration: underline; /*Управл. властивостями тексту blink linethrough overline underline none */ </p> </div> </div> </body> Висновок: На лабораторній роботі набув навичок створення і застосування каскадних стилів CSS. Та вивчив їх базові властивості.