Лабораторна робота №14
Удосконалення веб-сторінки за допомогою CSS|
Мета: за допомогою таблиці стилів навчитися додавати на веб-сторінку фонове зображення та визначати прозорість, змінювати маркер списків та створювати горизонтальне меню, визначати розмір, рамку, прозорість та обтікання для зображень.
-
CSS| зображення - фон визначається за допомогою зображення.
Розглянемо такий приклад:
|
<head|> <title>Зображення - фон в CSS</title> </head> <body| style="background-image:url|(../images/primer-img.jpg) "> <p>Будь-який| довільний текст.</p> </body> </html> |
Результат :
-
CSS| атрибути, що визначають прозорість фону.
Приклад 2
|
<head|> <title>Напівпрозорий елемент</title> <Style| type="text/css"> div|.page {width:450px|; height:300px|; background:url|(../images/beetle.jpg) repeat|; border:2px| solid| #555555|} div|.block {width:260px|; height:140px|; margin-top:79px|; margin-left:94px|; background-color:#ffffff|; border:1px| solid| #333333|; /* Internet| Explorer| */ filter:alpha|(opacity=50|); /* CSS3| standard| */ opacity:0.5} div|.block p {margin:47px| 0 0 10px|; font-weight:bold|; color:#000000|} </style> </head> <body|> <div| class="page"|> <Div| class="block"|> <p>Прозрачный| фон для блоку.</p> </div> </div> </body> |
Результат:
CSS| прозорість фону була задана для Internet| Explorer| і для інших браузерів|.
-
CSS| атрибути і значення, що визначають положення фону
Зображення як фон web-сторінки|:
|
<head|> <title>Пример</title> <style| type="text/css"> body| { background-image:url|(smile.png) } </style> </head> <body|> <p>Текст| чорного кольору (за умовчанням) </p> </body> |
background-image:url|(../images/cvetok.png) визначає зображення-фон.
За умовчанням зображення-фон розповсюджується по горизонталі (repeat-x) і по вертикалі (repeat-y), заповнюючи собою весь простір, що видно з результату прикладу. |
Атрибути і значення
-
margin| – визначає зовнішні відступи.
-
margin:0| auto| – визначає центрування блоку по горизонталі.
-
padding| – визначає поля усередині блоку.
-
border| – визначає властивості меж.
-
width| – визначає ширину в пікселях або у відсотках.
-
height| – визначає висоту.
-
color| – визначає колір тексту.
-
CSS| атрибути і значення, що визначають нерухомий фон
Приклад того, як зафіксувати фонове зображення в потрібному місці:
|
<head|> <title>Пример</title> <style| type="text/css"> body| { background-color:BlanchedAlmond|; } .fon_scroll { margin:0| auto|; width:700px|; height:800px|; padding:30px|; background-color:#ffffff|; background-image:url|(../images/7.jpg); background-repeat:no-repeat|; background-attachment:fixed|; background-position:40px| 40px|; } </style> </head> <body|> <div| class="fon_scroll"|> <P>Текст| документа</p> <p>Текст| документа</p> <P>Текст| документа</p> <p>Текст| документа</p> </div> </body> |
За умовчанням фонове зображення прокручується разом з іншими елементами сторінки.
-
background-attachment:fixed| фіксує фонове зображення в заданій позиції.
-
background-position|: задає точні координати фону по горизонталі і по вертикалі.
Результат:
-
CSS| атрибути і значення, що визначають властивості списків
|
<title>Пример| горизонтального CSS| списка</title> <style| type="text/css"> * {font-family|: Arial|, Helvetica|, sans-serif|} #nav_menu| {padding|: 0; width|: 762px|; margin|: 0 auto|} #nav_menu| ul| {list-style|: none|; margin|: 0; padding|: 0} #nav_menu| li| {display|: inline|} #nav_menu| а { float|: left|; width|: 125px|; height|: 30px|; background-color|: #cc0033|; border-left|: 2px| solid| #ffffff|; text-decoration|: none|; text-align|: center|; padding|: 0; padding-top|: 10px|; font-size|: 18px|; color|: #ffffff| } #nav_menu| a:hover| {background-color|: #990033; color: Tomato} </style> </head> <body> <div id="nav_menu"> <ul> <li><a href="#">Sony</a></li> <Li><a href="#">Asus</a></li> <li><a href="#">Dell</a></li> <Li><a href="#">Toshiba</a></li> <li><a href="#">Acer</a></li> <Li><a href="#">Lenovo</a></li> </ul> </div> |
Атрибути і значення
-
Селектор * – визначає всі елементи документа. В даному випадку встановлений шрифт.
-
padding:0| – відміняє внутрішні поля.
-
margin:0| auto| – визначає центрування блоку.
-
list-style:none| – визначає відсутність маркерів списку.
-
margin:0| – відміняє зовнішні поля блоку
-
display:inline| – визначає горизонтальне положення об'єктів.
-
border-left|: – визначає властивості лівої межі.
-
padding-top|: – визначає розмір верхнього внутрішнього поля.
-
text-decoration:none| – відміняє підкреслення тексту.
-
float:left| – визначає обтікання зліва (докладніше в одному з наступних уроків).
-
a:link|, a:active|, a:visited| замінені селектором а, тобто всі три псевдоелементи мають однакові властивості.
Ширина блоку підрахована так: 762 = 125 * 6 + 2 * 6, де 125 * 6 > довжина 6-ти посилань, 2 * 6 > загальна ширина атрибуту border-left|.
-
CSS| атрибути і значення, що визначають списки із зображенням
6.1. Представимо зображення як елемент списку:
|
<head|> <title>Изображение| в роле| маркера списка</title> <style| type="text/css"> .list_img li| { list-style|: none|; line-height|: 170%; padding-left|: 25px|; background|: url|(../images/pencil2.png) no-repeat| left| 50% } </style> </head> <body|> <ul| class="list_img"|> <li>Sony</li> <li>Asus</li> <li>Dell</li> <li>Toshiba</li> <li>Acer</li> <li>Lenovo</li> </ul> </body> |
line-height:170%| визначає відстань між строчками по вертикалі.
-
Визначуваний css| маркер списку у вигляді зображення
CSS| списки, у яких замість маркерів, – зображення, можна створювати так:
|
< |
head|>
<style|
type="text/css">
ul|.list_img
{list-style|:
url|(smile1|.jpg)
outside|;
line-height|:
170%}
</style>
</head>
<body|>
<ul| class="list_img"|>
<li>Sony</li>
<li>Asus</li>
<li>Dell</li>
<li>Toshiba</li>
<li>Acer</li>
<li>Lenovo</li>
</ul>
</body>
CSS|: Властивості списків
-
list-style| — визначає властивості маркера або номера позиції списку:
-
list-style|: list-style-image| | list-style-position| | list-style-type|
-
list-style-image| — замість маркера елементу списку відображається малюнок:
-
list-style-image|: url|(xxx|.jpg)
-
list-style-position| — визначає позицію маркера:
-
list-style-position|: outside| | inside| > значення outside| (за умовчанням) відображає маркер елементу списку на деякій відстані від рядка; inside| – відображає маркер елементу списку як перший символ рядка.
-
list-style-type| — визначає тип маркера або номер позиції списку:
-
list-style-type|: disc| | circle| | square| | decimal| | lower-roman| | upper-roman| | lower-alpha| | upper-alpha| | none|
-
list-style-type|: disc| > відображає закрашений кружок (значення за умовчанням);
-
list-style-type|: circle| > коло;
-
list-style-type|: square| > закрашений квадрат;
-
list-style-type|: decimal| > маркерами є арабські цифри;
-
list-style-type|: lower-roman| > маленькі римські цифри;
-
list-style-type|: upper-roman| > великі римські цифри;
-
list-style-type|: lower-alpha| > маленькі латинські букви;
-
list-style-type|: upper-alpha| > великі латинські букви;
-
list-style-type|: none| > маркер відсутній.
-
CSS атрибути, що визначають прозоре зображення
7.1. CSS| дає можливість регулювати прозорість зображення:
|
<img| src=|"../images/mustang.jpg" width="250|" height="153|" alt="|" hspace="47|" /> <img| src=|"../images/mustang.jpg" width="250|" height="153|" alt=""style="opacity:0.25; filter:alpha(opacity=25|)" /> |
Результат:
Атрибути і значення
-
opacity:0.25 – визначає прозорість зображення. Значення: від 0 до 1.
-
filter:alpha|(opacity=25|) – параметр для Internet| Explorer|. Значення: від 0 до 100.
-
hspace="|" – визначає додаткові відступи від зображення по горизонталі.
-
alt="|" – визначає альтернативний текст. Потрібно прописувати навіть порожній атрибут.