Лабораторна робота № 6 Тема: Програмування графіки засобами css
Пример№1(вертикально)
<html>
<head>
<style type="text/css">
body
{
background-image: url(picture.jpg);
background-repeat: repeat-y}
</style>
</head>
<body>
В документе в качестве фона использовано повторяющееся изображение
</body>
</html>
Пример№2(горизонтально)
<html>
<head>
<style type="text/css">
body
{
background-image: url(picture.jpg);
background-repeat: repeat-x}
</style>
</head>
<body>
В документе в качестве фона использовано повторяющееся изображение
</body>
</html>
Пример №3
<html>
<head>
<style type="text/css">
body
{
background-image: url(picture.jpg);
background-image: url(picture.jpg) ;
background-repeat:no-repeat ;
background-attachment scroll
}
</style>
</head>
<body>
Определено фиксированное фоновое изображение<br>
</body>
</html>
Пример №4
<html>
<head>
<style type="text/css">
body{background-image: url(поночка.gif);
}
<li>Росписание Дашули</li>
ul {background-color: rgb(200,10,200)}
ol {background-color: #FF99FF}
li {background-color: transparent}
p {background-color: pink}
</style>
</head>
<body>
<ul><font color=#00FF00>
<li>Понедельник</li></font>
</ul>
<font color=#00FF00>
<li>маникюр</li>
<li> SPA-салон</li>
<li> пилатес</li>
<ul>
<li>Вторник</li>
</ul>
<li>масаж</li>
<li> шопинг</li>
<li>встреча с подругами </li>
<ul>
<li>Среда</li>
</ul>
<li>фитнес</li>
<li> масаж</li>
<ul>
<li>Четверг</li>
</ul>
<li>салон красоты</li>
<li> педикюр</li>
<li> басейн</li>
<ul>
<li>Пятница</li>
</ul>
<li>косметолог</li>
<li>аеробика</li>
<li>везажист</li>
</font>
</body>
</html>
Контрольні запитання:
-
Яке призначення CSS?
-
Як встановити рисунок в фоні документу так, щоб він був фіксованим
-
Якими параметрами здійснюється вирівнювання тексту?
-
Якими параметрами задаються параметри границь?
1.Специфікація CSS (Cascading Style Sheets) дозволяє залишитися в рамках декларативного характеру розмітки сторінки і цілком контролювати форму представлення елементів HTML-розмітки. Каскадні таблиці стилів призначені усунути протиріччя між точністю визначення розмірів картинок і додатків, з одного боку, і точністю визначення розмірів блоків тексту і його накреслення — з іншої.
2.За допомогою значення Fixed параметру 'background-attachment' .
3. Вирівнювання тексту здійснюється за допомогою Параметру 'text-align'.
4. Параметри границь задаються параметрами:
Параметр 'border' -дозволяє визначити всі властивості чотирьох сторін границь в одному об'явленні.
Параметр 'border-width'- визначає в одному обявленні товщину чотирьох сторін границь і може мати від одного до чотирьох значень.
Параметр 'border-style'- задає стиль чотирьох сторін границь. Дозволяє визначити від одного до чотирьох стилів.
Параметр 'border-bottom'- дозволяє визначити всі властивості нижньої сторони границь в одному об'явленні.
Параметр 'border-bottom-color'- задае колір нижньої границі елемента.
Параметр 'border-bottom-width'- задає товщину нижньої границі елементу
Параметр 'border-bottom-style'- задае стиль нижньої границі елементу
Параметр 'border-color'- задае колір чотирьох сторін границы
Параметр 'border-left'- дозволяє визначити всі властивості лівої сторони границь в одному об'явленні