Головна

Колір і фон.

 властивість  опис
 color  Визначає колір елемента.
 background  Властивості фону: [{Background-color}] [{background-image}] [{background-repeat}] [{background-attachment}] [{background-position}];
 background-color  фоновий колір сторінки або її елементи: {Колір} | transparent;зумовлене значення transparent задає "прозорий" фон.
 background-image  фоновий малюнок сторінки або її елемента. url ({Інтернет-адреса файлу малюнка}) | none; значення none відключає фонове зображення.
 background-attachment Fixed -Дозволяє "зафіксувати" фоновий малюнок, щоб він не прокручувався разом з вмістом сторінки. Застосовується для тега .
 background-repeat  Встановлює порядок повторення фонового малюнка на Web-сторінці або її елементі: repeat | no-repeat | repeat-x | repeat-y; Repeat - розмножує фонове зображення у всіх напрямках (за замовчуванням); repeat-x, repeat-y - розмножує зображення по горизонталі / вертикалі;
 background-position  Задає місцезнаходження фонового малюнка і замінює атрибути[{Background-position-x}] [{background-position-y}];
 background-position-x  Задає горизонтальну координату фонового малюнка. {X} | {X}% | left | center | right;
 background-position-y  Задає вертикальну координату фонового малюнка.{Y} | {Y}% | top | center | bottom;

Приклад color - вказує колір тексту елемента.

Зміна кольору символів </ title></p> <p></ Head></p> <p><Body></p> <p><P> <span style = "color: blue"> Перше </ sраn> слово в рядку - сині. </ Р></p> <p><P style = "color: rgb (49, 151, 116)"> <span style = "color: # fе0"> Жовте </ sраn> слово в рядку зеленого кольору. </ Р></p> <p></ Body></p> <p></ Html></p> <p>Приклад background-color - визначає колір фону елемента.</p> <p><Html></p> <p><Head></p> <p><Title> Зміна кольору фону </ title></p> <p><Style type = "text / css"></p> <p>. inverse {</p> <p>font-family: Verdana; / * Шрифт Verdana * /</p> <p>font-weight: bold; / * Жирне накреслення * /</p> <p>background-color: green; /* Зелений фон */</p> <p>color: white; / * Символи білого кольору * /</p> <p>}</p> <p></ Style></p> <p></ Head></p> <p><Body></p> <p><Div class = "inverse"> Білі букви на зеленому тлі </ div></p> <p></ Body></p> <p></ Html></p> <p>background - одночасно встановлює властивості background-color, background-image, background-repeat, background-attachment і background-position.</p> <p>приклад:</p> <p><Html></p> <p><Head></p> <p><Style type = "text / css"></p> <p>body {</p> <p>background:</p> <p>white / * Колір фону * /</p> <p>url (image.gif) / * Шлях до файлу з малюнком фону * /</p> <p>left top / * Положення в лівому верхньому кутку * /</p> <p>no-repeat / * Не повторювати малюнок * /</p> <p>fixed / * Зафіксувати фон * /</p> <p>}</p> <p></ Style>.</p> <p></ Head></p> <p><Body></p> <p>Використання стилів для додавання фонового малюнка на сторінку</p> <p></ Body></p> <p></ Html></p> <p>Подання документа у вигляді блоків</p> <p>У моделі форматування каскадних таблиць стилів елементи HTML представлені у вигляді блоків. Кожен блок складається з вкладених прямокутників, в самому внутрішньому з яких знаходиться вмісту елемента. Прямокутник вмісту оточує блок відступу (padding). Відступ задає інтервал між вмістом елемента і його кордоном. Наступним розташовується блок кордону (border). Самим зовнішнім прямокутником є ??блок поля (margin), який завжди прозорий. Поле визначає відстань до кордонів блоків навколишніх елементів. Всі зазначені прямокутники складають блок форматування, т. Е. Видиме в вікні браузера зображення елементу HTML.</p> <p>Для виділення блоків часто використовується тег <div> </ div>. Внутрішню частину блоку може визначати тег <span> </ span></p> <p> </p> <p>Відступи, поля, позиціонування</p> <table border=1> <tr> <td> властивість</td> <td> опис</td> </tr> <tr> <td> margin</td> <td> Задає поля між елементами сторінки. Може бути задано від одного до чотирьох значень. <i>{Margin-top} [{margin-right}] [{margin-bottom}] [{margin-left}]</i>; Якщо задано одне значення, воно застосовується до всіх чотирьох полях. Якщо задано два значення, перше відноситься до верхнього і нижнього поля, а друге - до лівого і правого. Якщо задано три значення, то перше застосовується до верхнього поля, друге - до лівого і правого, третє - до нижнього.</td> </tr> <tr> <td> margin-top</td> <td> Задає поле зверху як абсолютною величиною, так і відсотком від висоти батька: <i>auto | {Y} | {Y}%</i>;.</td> </tr> <tr> <td> margin-right</td> <td> Задає поле праворуч: <i>auto | {X} | {X}%</i>; </td> </tr> <tr> <td> margin-bottom</td> <td> Задає поле знизу: <i>auto | {Y} | {Y}%</i>; </td> </tr> <tr> <td> margin-left</td> <td> Задає поле зліва: <i>auto | {X} | {X}%</i>; </td> </tr> <tr> <td> padding</td> <td> Задає відступ між елементом сторінки і різними межами .: <i>{X} | {X}%</i>; </td> </tr> <tr> <td> padding-top</td> <td> Задає відступ до верхньої границі: <i>{Y} | {Y}%</i>; Значення за замовчуванням 0, для тега <td> 1.</td> </tr> <tr> <td> padding-right</td> <td> Задає відступ до правої межі: pading-right: <i>{X} | {X}%</i>; </td> </tr> <tr> <td> padding-bottom</td> <td> Задає відступ до нижньої межі: pading-bottom: <i>{Y} | {Y}%</i>; </td> </tr> <tr> <td> padding-left</td> <td> Задає відступ до лівої межі: pading-left: <i>{X} | {X}%</i>; </td> </tr> <tr> <td> width</td> <td> Задає ширину вільно позиціонованого елемента: <i>auto | {X} | {X}%</i>; </td> </tr> <tr> <td> height</td> <td> Задає висоту вільно позиціонованого елемента: <i>auto | {X} | {X}%</i>; </td> </tr> <tr> <td> position</td> <td> static - блок позиціонується відповідно до основним потоком форматування; relative - положення блоку обчислюється. absolute - положення блоку вказується за допомогою властивостей left, top, right і bottom, щодо контейнера даного елемента. fixed - положення блоку розраховується по алгоритму, що використовується для схеми absolute, але після позиціонування блок прив'язується або до області перегляду, або на сторінку</td> </tr> <tr> <td> top</td> <td> Задає вертикальну позицію верхньої межі вільно позиціонованого елемента щодо батька: <i>auto | {Y} | {Y}%</i>; </td> </tr> <tr> <td> bottom</td> <td> Задає вертикальну позицію нижньої межі вільно позиціонованого елемента щодо батька. bottom: <i>auto | {Y} | {Y}%</i>; </td> </tr> <tr> <td> left</td> <td> Задає горизонтальну позицію лівого краю вільно позиціонованого елемента щодо батька. left: <i>auto | {X} | {X}%</i>; </td> </tr> <tr> <td> right</td> <td> Задає горизонтальну позицію правої межі вільно позиціонованого елемента щодо батька. right: <i>auto | {X} | {X}%</i>; </td> </tr> <tr> <td> float</td> <td> Визначає обтікання елемента іншими зліва чи справа замість приміщення під ним. float: <i>none | left | right</i>; </td> </tr> <tr> <td> clear</td> <td> Встановлює, з якого боку елемента заборонено його обтікання іншими елементами. Якщо задано обтікання елемента за допомогою властивості float, то clear скасовує його дію для зазначених сторон.clear: <i>none | left | right | both | inherit</i> </td> </tr> <tr> <td> clip</td> <td> <i>rect (Y1, X1, Y2, X2) | auto | inherit</i> визначає прямокутник для позиціонованого елемента, в якому буде показано його вміст. Все, що не поміщається в цю область, буде обрізано. clip працює тільки для абсолютно позиціонуються елементів:</td> </tr> <tr> <td> display</td> <td> визначає, як елемент повинен бути показаний в документі:<i>block | inline | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-footer-group | table-header-group | table-row | table-row-group. </i>none - приховати блок, звільнивши місце; block - почати блок з нового рядка, закінчити переходом на новий рядок; inline - вважати блок цілком одним із символів текстового рядка; inline-block - на вигляд inline, а всередині - block; list-item - маркований елемент списку; run-in - починається як block, закінчується як inline; inline-table - таблиця з зовнішніми властивостями як inline; table - позиціонується в тексті як таблиця;</td> </tr> <tr> <td> max-height</td> <td> Встановлює максимальну висоту елемента: <i>значення | відсотки | none | inherit</i> </td> </tr> <tr> <td> max-width</td> <td> Встановлює максимальну ширину елемента: <i>значення | відсотки | none | inherit</i> </td> </tr> <tr> <td> min-height</td> <td> Задає мінімальну висоту елемента: <i>значення | відсотки | inherit</i> </td> </tr> <tr> <td> min-width</td> <td> Встановлює мінімальну ширину елемента: <i>значення | відсотки | inherit</i> </td> </tr> <tr> <td> overflow</td> <td> Управляє відображенням змісту блокового елемента, якщо воно виходить за область заданих розмірів:<i> auto | hidden | scroll | visible | inherit. </i>visible - відображається весь зміст елемента, навіть за межами встановленої висоти і ширини. hidden - відображається тільки область всередині елемента, інше буде приховано. scroll - додаються смуги прокрутки. auto - смуги прокручування додаються тільки при необхідності. inherit - успадковує значення батька.</td> </tr> <tr> <td> visibility</td> <td> Призначений для відображення або приховування елементу, включаючи рамку навколо нього і фон. При приховуванні елементу, місце, яке елемент займає, залишається за ним: <i>visible | hidden | collapse | inherit</i>visible - відображає елемент як видимий. hidden - елемент стає повністю прозорим, оскільки він продовжує брати участь у форматуванні сторінки. collapse - якщо це значення застосовується не до рядків або колонок таблиці, то результат його використання буде таким же, як hidden. У разі використання collapse для вмісту комірок таблиць, то вони реагують, немов до них було додано display: none. Іншими словами, задані рядки і колонки прибираються, а таблиця перебудовується за новою. inherit -наследует значення батька.</td> </tr> <tr> <td> z-index</td> <td> Будь-які позиційований елементи на веб-сторінці можуть накладатися один на одного в певному порядку, їх розміщенням по z-осі і управляє z-index. Це властивість працює тільки для елементів, у яких значення position задано як absolute, fixed або relative. значення: <i>число | auto | inherit. </i>Чим більше значення, тим вище знаходиться елемент в порівнянні з тими елементами, у яких воно менше.</td> </tr> </table> <p>Розглянемо деякі властивості. margin - визначає розміри всіх полів блоку.</p> <p>За замовчуванням значенням є 0. Приклад:</p> <p><Html></p> <p><Head></p> <p>h1 {margin: 10px}</p> <p><Style type = "text / css"></p> <p>p {</p> <p>margin-top: 0px / * Відступ зверху * /</p> <p>margin-bottom: 0px; / * Відступ знизу * /</p> <p>}</p> <p></ Style></p> <p></ Head></p> <p><Body></p> <p><P> Прибираємо інтервали у параграфа. </ P></p> <p></ Body></p> <p></ Html></p> <p>padding - задає відступи контенту до кордону блоку. Якщо значення властивості одне, то значення застосовується до всіх відступами блоку. У разі двох значень першим ставить верхній і нижній відступи, а друге - лівий і правий відступи. При вказівці чотирьох значень вони застосовуються до верхнього, правого, нижнього і лівого відступами. За замовчуванням для даного властивості є 0.</p> <p>приклад:</p> <p><Html></p> <p><Head></p> <p><Style type = "text / css"></p> <p>#img {</p> <p>padding: 10рх; / * Поля навколо зображення * /</p> <p>border: lpx solid black; / * Параметри рамки * /</p> <p>width: 100рх; / * Ширина * /</p> <p>float: left; / * Вирівнювання по лівому краю * /</p> <p>}</p> <p></ Style></p> <p></ Head></p> <p><Body></p> <p><Div></p> <p><Img src = "image.gif" id = "img"></p> <p>Використання стилів для створення підпису під малюнком</p> <p></ Body></p> <p></ Html></p> <p>приклад:</p> <p><Html></p> <p><Head></p> <p><Style type = "text / css"></p> <p>p {</p> <p>text-indent: 20px; / * Виступ першого рядка * /</p> <p>padding-left: 20px / * Відступ всього тексту ліворуч * /</p> <p>padding-right: 20px / * Відступ всього тексту ліворуч * /</p> <p>}</p> <p></ Style></p> <p></ Head></p> <p><Body></p> <p><P> Використання властивості padding-left і padding-right для створення відступів тексту зліва і справа. </ Р></p> <p></ Body></p> <p></ Html></p> <p>межі елементів</p> <table border=1> <tr> <td> властивість</td> <td> опис</td> </tr> <tr> <td> border</td> <td> Задає властивості кордонів елемента сторінки: [{border-color}] [{border-style}] [{border-width}]; Значення за замовчуванням <i>medium none</i>. </td> </tr> <tr> <td> border-color</td> <td> Задає колір: {<i>border-top-color</i>} [{<i>border-right-color</i>}] [{<i>border-bottom-color</i>}] [{<i>border-left-color</i>}]; Може бути задано від одного до чотирьох значень. Якщо задано одне значення, воно застосовується до всіх чотирьох кордонів. Якщо задано два значення, перше відноситься до верхньої і нижньої кордонів, а друге - до лівої і правої. Якщо задано три значення, то перше застосовується до верхньої межі, друге - до лівої і правої, третє - до нижньої.</td> </tr> <tr> <td> border-top-color</td> <td> Задає колір верхньої межі елемента сторінки: <i>{Колір}</i>; </td> </tr> <tr> <td> border-bottom-color</td> <td> Задає колір нижньої межі елемента сторінки: <i>{Колір}</i>; </td> </tr> <tr> <td> border-left-color</td> <td> Ззадает колір лівої межі елементу сторінки: <i>{Колір}</i>; </td> </tr> <tr> <td> border-right-color</td> <td> Задає колір правої межі елемента страніци.border-right-color: <i>{Колір}</i>; </td> </tr> <tr> <td> border-style</td> <td> Задає тип відразу всіх кордонів елемента сторінки. border-style: <i>none | dotted | dashed | solid | double | groove | ridge | inset | outset;</i>none - забороняє малювання кордону (за замовчуванням); dotted - малює точкову лінію; dashed - малює штриховую лінію; solid - малює суцільну лінію; double - малює подвійну суцільну лінію; groove - малює тривимірну вдавлену кордон; ridge - малює тривимірну опуклу кордон; inset - малює тривимірну "сходинку вгору"; outset - малює тривимірну "сходинку вниз".</td> </tr> <tr> <td> border-top-style</td> <td> Задає тип верхньої межі елемента сторінки: <i>none | dotted | dashed | solid | double | groove | ridge | inset | outset</i>; </td> </tr> <tr> <td> border-bottom-style</td> <td> Задає тип нижньої межі елемента сторінки: <i>none | dotted | dashed | solid | double | groove | ridge | inset | outset</i>; </td> </tr> <tr> <td> border-left-style</td> <td> Задає тип лівої межі елементу сторінки: <i>none | dotted | dashed | solid | double | groove | ridge | inset | outset</i>; </td> </tr> <tr> <td> border-right-style</td> <td> Задає тип правій межі елементу сторінки: <i>none | dotted | dashed | solid | double | groove | ridge | inset | outset</i>; </td> </tr> <tr> <td> border-width</td> <td> Задає товщину кордонів елемента сторінки: {<i>border-top-width</i>} [{<i>border-right-width</i>}] [{<i>border-bottom-width</i>}] [{<i>border-left-width</i>}]; Якщо задано одне значення, воно застосовується до всіх чотирьох кордонів. Якщо задані два значення, перше відноситься до верхньої і нижньої кордонів, а друге - до лівої і правої. Якщо задано три значення, перше застосовується до верхньої межі, друге - до лівої і правої, третє - до нижньої. Товщина може бути задана числом або визначеним значенням: <i>thin<u>, </u>medium<u>, </u>thick</i>. Значення за замовчуванням <i>medium</i>. </td> </tr> <tr> <td> border-top-width</td> <td> Задає товщину верхньої межі елемента страніци.border-top-width: <i>medium | thin | thick | {Товщина}</i>;</td> </tr> <tr> <td> border-bottom-width</td> <td> Задає товщину нижньої межі елемента страніци.border-bottom-width: <i>medium | thin | thick | {Товщина}</i>;</td> </tr> <tr> <td> border-left-width</td> <td> Задає товщину лівої межі елементу страніци.border-left-width: <i>medium | thin | thick | {Товщина}</i>; </td> </tr> <tr> <td> border-right-width</td> <td> Задає товщину правої межі елемента страніци.border-right-width: <i>medium | thin | thick | {Товщина}</i>; </td> </tr> <tr> <td> border-top</td> <td> Задає все властивості верхньої межі елемента сторінки за один прийом: [{<i>border-top-color</i>}] [{<i>border-top-style</i>}] [{<i>border-top-width</i>}];Значення за замовчуванням <i>medium none</i>. </td> </tr> <tr> <td> border-bottom</td> <td> Задає все властивості нижньої межі елемента сторінки: [{<i>border-bottom-color</i>}] [{<i>border-bottom-style</i>}] [{<i>border-bottom-width</i>}];</td> </tr> <tr> <td> border-left</td> <td> Задає все властивості лівої межі елементу: [{<i>border-left-color</i>}] [{<i>border-left-style</i>}] [{<i>border-left-width</i>}];</td> </tr> <tr> <td> border-right</td> <td> Задає все властивості правої межі: [{<i>border-right-color</i>}] [{<i>border-right-style</i>}] [{<i>border-right-width</i>}];</td> </tr> </table> <p>приклад:</p> <p>h1 {border-top-width: thin}</p> <p>h1 {border-width: 5px}</p> <p>border-top-color - вказує колір верхньої межі блоку.</p> <p>приклад:</p> <p>p {border-top-color: black}</p> <p>border-top-style - вказує стиль верхньої межі блоку.</p> <p>приклад:</p> <p>p {border-top-style: solid}</p> <p>border-style - визначає стилі всіх кордонів блоку. Якщо значення властивості одне, то значення застосовується до всіх кордонів блоку. У разі двох значень першим ставить стилі верхньої і нижньої межі, а друге - стилі лівої і правої меж. При вказівці чотирьох значень вони застосовуються до верхнього, правого, нижнього і лівого кордонів.</p> <p>приклад:</p> <p><Html></p> <p><Head></p> <p><Title> Використання стилів для скасування рамки зображень </ title></p> <p><Style type = "text / css"></p> <p>img {border: none}</p> <p></ Style></p> <p></ Head></p> <p><Body></p> <p><Img src = "image.gif"></p> <p></ Body></p> <p></ Html></p> <p>візуальне форматування</p> <p>Властивості правил візуального форматування дозволяють потрібним чином розташувати фрагменти Web-сторінки у вікні браузера.</p> <p>position - визначає спосіб позиціонування блоку на сторінці. Значеннями властивості position можуть бути:</p> <p>static - блок позиціонується відповідно до природного потоком відображення елементів. Це значення задається за замовчуванням.</p> <p>relative - визначає зсув блоку щодо його природного стану в потоці відображення елементів.</p> <p>absolute - видаляє блок з природного потоку відображення і розміщує блок на сторінці довільним чином.</p> <p>top - вказує зміщення верхнього краю блоку щодо верхнього краю батьківського елементу.</p> <p>bottom - задає зсув нижнього краю блоку щодо нижнього краю батьківського елементу.</p> <p>left - визначає зсув лівого краю блоку щодо лівого краю батьківського елементу.</p> <p>right - вказує зміщення правого краю блоку щодо правого краю батьківського елементу.</p> <p>приклад:</p> <p><Img src = "img.gif" style = "position: absolute; top: 30px;</p> <p>bottom: 30px; left: 30px; right: 30px; "></p> <p>float - змінює положення блоку. Значеннями властивості можуть бути: left - блок зміщується вліво, а його вміст відображається вздовж правого боку блоку; right - блок переміщається вправо, а його вміст виводиться вздовж лівого боку блоку; none - блок не зміщується.</p> <p>приклад:</p> <p><Html></p> <p><Head></p> <p><Title> Використання стилів для створення буквиці </ title></p> <p><Style type = "text / css"></p> <p>. letter {</p> <p>font-size: 150%; / * Розмір шрифту буквиці * /</p> <p>float: left; / * Вирівнювання по лівому краю * /</p> <p>color: green; / * Колір літери * /</p> <p>padding: Зрх / * Відступ між буквицей і текстом * /</p> <p>}</p> <p></ Style></p> <p></ Head></p> <p><Body></p> <p><Span class = "letter"> Б </ span> уквіца</p> <p></ Body></p> <p></ Html></p> <p>clear - вказує боку блоку, де плаваючі елементи не ставляться. За замовчуванням плаваючі елементи встановлюються на всіх сторонах. Значеннями властивості можуть бути:</p> <p>left - все плаваючі елементи на лівій стороні блоку будуть опущені вниз.</p> <p>right - все плаваючі елементи на правій стороні блоку будуть опущені вниз.</p> <p>none - плаваючі елементи встановлюються на всіх сторонах блоку.</p> <p>приклад:</p> <p>h1 {float: left}</p> <p>width - вказує ширину блоку вмісту елемента. За замовчуванням ширина блоку обчислюється браузером автоматично.</p> <p>приклад:</p> <p>p {width: 100px}</p> <p>height -визначає висоту блоку вмісту елемента. За замовчуванням висота блоку обчислюється браузером автоматично.</p> <p>приклад:</p> <p>p {height: 100px}</p> <p>візуальні ефекти</p> <p>Властивість overflow - керує поведінкою елемента в разі, коли його розміри не відповідають розмірам блоку відображення. Значеннями властивості overflow можуть бути:</p> <p>scroll - додає смуги прокрутки до блоку відображення; hidden - обрізає елемент відповідно до розмірів блоку; auto - додає смуги прокрутки до блоку відображення в разі, якщо розміри вмісту елемента перевершують розміри блоку відображення; visible - примушує елемент стиснутися або збільшитися, щоб повністю відобразитися в заданому блоці для малюнка або збільшує розміри блоку відображення в разі тексту. За замовчуванням елемент не обрезается, а стискається або збільшується, щоб повністю відобразитися в заданому блоці.</p> <p>приклад:</p> <p><Html></p> <p><Style type = "text / css"></p> <p>body {overflow: hidden}</p> <p></ Style></p> <p><Body></p> <p><P> Заборона смуги прокрутки на веб-сторінці </ p></p> <p></ Body></p> <p></ Html></p> <p>clip - обрізає видиме зображення елементу. За замовчуванням усічення не проводиться. Значеннями властивості clip можуть бути:</p> <p>кордони видимого прямокутного зображення елементу у вигляді rect (<top>, <right>, <bottom>, <left>), де параметри <top>, <right>, <bottom>, <left> визначають верхню, праву, нижню, ліву кордону видимого зображення.</p> <p>auto - усічення зображення елемента не проводиться.</p> <p>Властивість visibility - визначає, чи буде відображатися елемент у вікні браузера. Значеннями властивості можуть бути: visible - елемент буде відображатися; hidden - елементи не буде виводитися на екран.</p> <p>властивості списків</p> <table border=1> <tr> <td> властивість</td> <td> опис</td> </tr> <tr> <td> list-style</td> <td> Задає параметри маркера або номера позиції списку: <i>[{List-style-image}] [{list-style-position}] [{list-style-type}]</i>; Значення за замовчуванням <i>disk outside none</i>. </td> </tr> <tr> <td> list-style-type</td> <td> Задає тип маркера або номер позиції списку: <i>disc | circle | square | decimal | lower | roman | upper-roman | lower-alpha | upper-alpha | none</i>; disc - (за замовчуванням) суцільний гурток; circle - окружність; square - суцільний квадрат; decimal - нумерує арабськими цифрами; lower-roman - малими римськими; upper-roman - великими римськими; lower-alpha -Малий латинськими літерами; upper-alpha - великими латинськими; none - прибирає маркер або нумерацію.</td> </tr> <tr> <td> list-style-image</td> <td> Задає графічне зображення, що відображається в якості маркера позиції списку. Має пріоритет над атрибутом <i>list-style-type</i>.: <i>none | url ({Інтернет-адреса файлу зображення})</i>; Якщо задано зумовлене значення <i>none</i>, То стиль маркера береться з установок атрибута <i>list-style-type</i>, Якщо він заданий, або відображається маркер за замовчуванням. Якщо заданий інтернет-адреса файлу зображення, то воно відображається в якості маркера, перекриваючи установки атрибута <i>list-style-type</i>.</td> </tr> <tr> <td> list-style-position</td> <td> Задає місцезнаходження маркера позиції списку: в тексті позиції або поза: <i>outside | inside</i>; значення <i>outside</i> (За замовчуванням) задає відображення маркера позиції списку поза текстом позиції. значення <i>inside</i> змушує Web-браузер відобразити маркер позиції в її тексті як перший символ.</td> </tr> </table> <p>list-style-type - визначає вид маркера елемента списку, якщо не задано зображення в якості маркера, або воно не є.</p> <p>приклад:</p> <p>ol {list-style-type: lower-roman}</p> <p>list-style-image - визначає графічне зображення в якості маркера елемента списку.</p> <p>приклад:</p> <p><Html></p> <p><Head></p> <p><Style type = "text / css"></p> <p>a.outer {</p> <p>list-style-image: url (image.gif); / * Шлях до файлу з малюнком * /</p> <p>}</p> <p></ Style></p> <p></ Head></p> <p><Body></p> <p><Ol></p> <p><Li class = "outer"> C маркером </ li></p> <p><Li> Без маркера </ li></p> <p></ Ol></p> <p></ Body></p> <p></ Html></p> <p>list-style-position - визначає положення маркера в списку. За замовчуванням маркери знаходяться поза простором, відведеного під список</p> <p>приклад:</p> <p><Html></p> <p><Head></p> <p><Style type = "text / css"></p> <p>ul {list-style-position: outside}</p> <p></ Style></p> <p></ Head></p> <p><Body></p> <p><Ul></p> <p><1i> Зміна положення маркерів </ li></p> <p><1i> Маркери розміщуються за межами текстового блоку </ li></p> <p></ Ul></p> <p></ Body></p> <p></ Html></p> <p>list-style - вказує значення відразу трьох властивостей: list-style-type, list-style-image і list-style-position.</p> <p>властивості таблиць</p> <table border=1> <tr> <td> властивість</td> <td> опис</td> </tr> <tr> <td> border-collapse</td> <td> Задає, чи будуть кордону осередків і спільний кордон таблиці зливатися в одну чи ні: <i>separate | collapse</i>; separate - розділяє кордон таблиці і межі її осередків (за замовчуванням); collapse - об'єднує їх.</td> </tr> <tr> <td> border-spacing</td> <td> Задає відстань між кордонами осередків в таблиці: <i>значення1 [значення2</i>]. Одне значення встановлює одночасно відстань по вертикалі і горизонталі між кордонами осередків. Якщо значень два, то перше визначає горизонтальну відстань, а друге - вертикальне.</td> </tr> <tr> <td> caption-side</td> <td> Визначає положення заголовка таблиці, який задається за допомогою тега <caption> щодо самої таблиці<i>: Top | bottom</i>top - має заголовок по верхньому краю табліци.bottom - заголовок розташовується під табліцей.right - заголовок розміщується праворуч від таблиці. left - заголовок розміщується зліва від таблиці.</td> </tr> <tr> <td> empty-cells</td> <td> Задає відображення кордонів і фону комірки, якщо вона порожня. При одночасному додаванні до таблиці властивості border-collapse із значенням collapse, властивість empty-cells ігнорується. empty-cells: <i>show | hide. </i>show - відображає кордон навколо осередку і фон в ней.hide - межа і фон в порожніх осередках не відображається. Якщо все осередки в рядку порожні, то рядок ховається цілком.</td> </tr> <tr> <td> table-layout</td> <td> Визначає, як браузер повинен обчислювати ширину осередків таблиці, грунтуючись на її вміст: auto <i>| fixed | inherit</i>auto - браузер завантажує всю таблицю, аналізує її для визначення розмірів осередків і після цього отображает.fixed - ширина колонок визначається або за допомогою тега <col>, або обчислюється на основі першого рядка. При використанні цього значення, вміст, який не поміщається в комірку зазначеної ширини, буде «обрізане» або накладено поверх осередки. Для коректної роботи цього значення обов'язково повинна бути задана ширина таблиці. inherit - успадковує значення батька.</td> </tr> </table> <p>Псевдокласи</p> <p>Для управління кольором посилань за допомогою стилів пропонується використовувати псевдокласи. Псевдокласи застосовуються в CSS, щоб визначати стиль елемента при зміні його стану. На відміну від звичайного класу, дія псевдокласу поширюється не на весь текст, до якого застосовано даний стиль, а лише на його частину і в певному стані. Розглянемо ефект, при якому посилання підкреслюються лише при наведенні на них курсору:</p> <p>a {text-decoration: none; }</p> <p>a: hover {text-decoration: underline; }</p> <p>Верхній рядок - це перевизначення стандартного тега <a>, яке забороняє підкреслювати посилання, а нижня - це визначення стилю для псевдокласу hover, який описує стиль посилання в момент, коли курсор знаходиться над нею. Дія стилю поширюється на певний стан (користувач збирається клацнути по посиланню).</p> <p>Загальний синтаксис для посилань буде такою:</p> <p>А: псевдоклас {параметр: значення}</p> <table border=1> <tr> <td> псевдоклас</td> <td> опис</td> </tr> <tr> <td> : active</td> <td> Застосовується до активних гіперпосиланням, на яких знаходиться фокус введення користувача: active {Визначення стилю}; приклад: <i>a: active {color: lime;}</i> </td> </tr> <tr> <td> : First-child</td> <td> Застосовує стильове оформлення до першого дочірньому елементу елемент: first-child {...}</td> </tr> <tr> <td> : focus</td> <td> визначає стиль елемента, який отримує фокус. Наприклад, їм може бути текстове поле форми, елемент: focus {...}</td> </tr> <tr> <td> : hover</td> <td> Застосовується до гіперпосиланнями, над якими користувач поміщає курсор миші: hover {Визначення стилю}; Приклад:<i>a: hover {color: lime; text-decoration: none;} </i> </td> </tr> <tr> <td> : lang</td> <td> Визначає мову, який використовується в документі або його фрагменті. елемент: lang (<мова>) {...} Як мова можуть виступати наступні: ru - російська; en - англійська; de - німецький;</td> </tr> <tr> <td> : link</td> <td> Застосовується до не відвідування ще гіперпосиланням: link {Визначення стилю}; Приклад:<i>a: link {color: black;} </i> </td> </tr> <tr> <td> : visited</td> <td> Застосовується до вже відвіданих гіперпосиланням: visited {Визначення стилю}; приклад:<i>a: link {color: indigo;}</i> </td> </tr> </table> <p>приклад:</p> <p><Html></p> <p><Head></p> <p><Title> Псевдокласи для посилань </ title></p> <p><Style type = "text / css"></p> <p>a: link {color: lime}</p> <p>a: visited {color: indigo}</p> <p>a: hover {color: red}</p> <p>a: active {color: # fe0}</p> <p></ Style></p> <p></ Head></p> <p><Body></p> <p><a href=linkl.html> Посилання 1</a></p> <p><a href=link2.html> Посилання 2</a></p> <p><a href=link3.html> Посилання 3</a></p> <p></ Body></p> <p></ Html></p> <p>Припустимо, що для всіх посилань в заголовку на нашій сторінці визначено такий стиль:</p> <p><Style type = "text / css"><br> a.link {text-decoration: none; color: red; }<br> </ Style><br> </ Head></p> <p>Будь-який текст, який є гіперпосиланням, автоматично стає червоним і перестає бути підкресленим. Необхідно в кінці сторінки вказати копірайт, щоб копірайт також був посиланням але не акцентувати на цьому увагу. Визначати для цього додатковий клас недоцільно. Досить локально перевизначити колір посилання:</p> <p><a href="#"> <span style = "color: # 000000;"> Copyright (C) 1998-2001 Cherry-Design </ span></a></p> <p>Псевдостілі тексту</p> <p>Псевдостілі застосовуються до деяких елементів текстових абзаців, наприклад, до першої рядку абзацу або першій букві першого рядка.</p> <p>first-letter - застосовується до першої букви першого рядку абзацу:</p> <p>p: first-letter {font-size: 200%; font-weight: bold; }</p> <p>Розглянемо приклад:</p> <p><Html></p> <p><Head></p> <p><Style type = "text / css"></p> <p>p: first-letter {</p> <p>color: red;</p> <p>font-size: 12px</p> <p>}</p> <p></ Style></p> <p></ Head></p> <p><Body></p> <p><P> Використання псевдокласу first-lette. </ Р></p> <p></ Body></p> <p></ Html></p> <p>first-line - застосовується до першої рядку абзацу.</p> <p>{Завдання стилю абзацу}: first-line {Визначення стилю};</p> <p>приклад:</p> <p>p: first-line {text-decoration: underline;}</p> <p>Псевдоелементи</p> <table border=1> <tr> <td> властивість</td> <td> опис</td> </tr> <tr> <td> : after</td> <td> Псевдоелемент, який використовується для виведення бажаного контенту після елемента, до якого він додається. елемент: after {content: "текст"}</td> </tr> <tr> <td> : before</td> <td> Псевдоелемент: before застосовується для відображення бажаного контенту до елемента, до якого він додається. Працює спільно з властивістю <i>content</i>: Before {content: "текст"}</td> </tr> <tr> <td> : First-letter</td> <td> Застосовується до першої букви першого рядка абзацу. Може використовуватися для створення буквиц: first-letter {Визначення стилю}; Приклад: <i>st: first-letter {font-size: 16pt;}</i> </td> </tr> <tr> <td> : First-line</td> <td> Застосовується до першому рядку абзацу: first-line {Визначення стилю}; Приклад: <i>st: first-line {text-decoration: underline;}</i> </td> </tr> </table> <p>різні властивості</p> <table border=1> <tr> <td> властивість</td> <td> опис</td> </tr> <tr> <td> content</td> <td> дозволяє вставляти генерується зміст в текст веб-сторінки. Застосовується спільно з псевдоелементи after і before.content:<i> рядок | attr (параметр) | open-quote | close-quote | no-open-quote | no-close-quote | url | counter | normal | none | inherit;</i>Рядок<i> - </i>текст, який додається на веб-сторінку, рядок повинна братися в подвійні або одинарні лапки. attr (параметр) - повертає рядок, яка є значенням параметра тега зазначеного в дужках. наприклад<i>, Img: after {content: attr (href)}</i> додасть після зображення його адресу, т. е. значення параметра href. open-quote - вставляє відкриває лапки, close-quote - вставляє закриває лапки. url абсолютний або відносний адреса, що вставляється. Якщо вказаний файл браузер не може відобразити, то значення ігнорується. counter - виводить значення лічильника, заданого властивістю counter-reset. normal - задається як none для псевдоелементів before і after. inherit - успадковує значення батька.</td> </tr> <tr> <td> orphans</td> <td> Властивість orphans задає мінімальне число рядків тексту, яке залишається на попередній сторінці при друку документа. Це властивість працює в тому випадку, якщо весь текст розміщується на двох і більше друкованих страніцах.orphans: <i>число | inherit</i> </td> </tr> <tr> <td> page-break-after</td> <td> Додає розрив сторінки при друку документа після заданого елемента.page-break-after:<i> always | auto | avoid | left | right | inherit</i>always - завжди додає розрив сторінки після елемента.auto - вставляє розрив сторінки при необходімості.avoid - забороняє розрив сторінки після елемента.left - пропускає одну або дві сторінки після елемента, щоб наступна сторінка при друку була четной.right - пропускає одну або дві сторінки після елемента, щоб наступна сторінка при друку була нечетной.inherit - успадковує значення батька.</td> </tr> <tr> <td> page-break-before</td> <td> Додає розрив сторінки при друку документа перед заданим елементом.page-break-before:<i> always | auto | avoid | left | right | inherit</i>always - завжди додає розрив сторінки перед елементом.auto - вставляє розрив сторінки при необходімості.avoid - забороняє розрив сторінки перед елементом.left - пропускає одну або дві сторінки перед елементом, щоб наступна сторінка при друку була четной.right - пропускає одну або дві сторінки перед елементом, щоб наступна сторінка при друку була нечетной.inherit - успадковує значення батька.</td> </tr> <tr> <td> page-break-inside</td> <td> Дозволяє або забороняє розрив сторінки всередині елемента при друку:<i> auto | avoid | inherit</i>auto - вставляє розрив сторінки, avoid - забороняє розрив сторінки всередині елемента, inherit - успадковує значення батька.</td> </tr> <tr> <td> windows</td> <td> задає мінімальне число рядків тексту, яке розташовується на наступній сторінці при друку документа. widows:<i> число | inherit</i> </td> </tr> </table> <table border=1> <tr> <td> scrollbar-arrow-color</td> <td> Задає колір стрілок на кнопках смуги прокруткі.scrollbar-arrow-color:<i>{Колір};</i> </td> </tr> <tr> <td> scrollbar-base-color</td> <td> Задає колір бігунка і кнопок-стрілок смуги прокруткі.scrollbar-base-color: {<i>колір</i>};</td> </tr> <tr> <td> scrollbar-highlight-color</td> <td> Задає колір "освітленій" частини бігунка і кнопок прокрутки смуги прокрутки (колір лівих і верхніх їх граней) .scrollbar-highlight-color: {<i>колір</i>};</td> </tr> <tr> <td> scrollbar-shadow-color</td> <td> Задає колір "неосвітленій" частини бігунка і кнопок прокрутки смуги прокрутки (колір правих і нижніх їх граней).</td> </tr> <tr> <td> scrollbar-track-color</td> <td> Задає колір робочої частини смуги прокрутки, т. Е. Тієї її частини, по якій переміщається бігунок. scrollbar-track-color: {<i>колір</i>};</td> </tr> </table> <p>курсор</p> <p>Визначає форму курсора миші, яку він приймає при наведенні на елемент.</p> <p>cursor: <i>auto | crosshair | default | hand | move | text | wait | help</i>;</p> <p>auto-вказує браузеру самому визначати потрібну форму курсора;</p> <p>crosshair - хрестоподібний курсор; default - курсор за замовчуванням, стрілка;</p> <p>hand - "вказує перст"; move - стрілка, що вказує "на всі чотири сторони";</p> <p>text - текстової курсор; wait - "пісочний годинник", курсор очікування; help - стрілка зі знаком. приклад:</p> <p><Html></p> <p><Head></p> <p><Title> Курсор для різних областей веб-сторінки </ title></p> <p><Style type = "text / css"></p> <p>.cross {cursor: crosshair}</p> <p>. hand {cursor: hand}</p> <p></ Style></p> <p></ Head></p> <p><Body></p> <p><Div class = "cross"> курсор набуде вигляду перехрестя. </ Div></p> <p><a href="ref.htm" class=" hand "> Посилання</a></p> <p></ Body></p> <p></ Html></p> <p>CSS. приклади</p> <p>1. двоколонковому макет сайту на HTML і css</p> <p><Html></p> <p><Head></p> <p><Style></p> <p>#top {margin-top: 0px;</p> <p>height: 100px;</p> <p>margin-left: 0px;</p> <p>/ * Width: 900px; * /</p> <p>border: 1px; / * Товщина кордону * /</p> <p>border-style: solid;} / * обведення кордону * /</p> <p># Left-side {</p> <p>float: left; / * Дозволено обтікання елементами зліва * /</p> <p>width: 200px; / * Ширина * /</p> <p>height: 400px;</p> <p>border: 1px;</p> <p>border-style: solid;</p> <p>}</p> <p>#center {</p> <p>margin-left: 200px; / * Поле зліва * /</p> <p>height: 400px;</p> <p>border: 1px;</p> <p>border-style: solid;</p> <p>}</p> <p>#footer {</p> <p>clear: both; / * Заборонено обтікання * /</p> <p>border: 1px;</p> <p>border-style: solid;</p> <p>}</p> <p>#content {}</p> <p>p {font-size: 25px;</p> <p>text-align: center;</p> <p>color: red}</p> <p>a: visited {color: # 000000; text-decoration: none}</p> <p>a: link {color: # 000000; text-decoration: none}</p> <p>a: hover {color: # dd4444; text-decoration: none}</p> <p></ Style></p> <p></ Head></p> <p><Body></p> <p><Div id = "top"></p> <p><P> TOP </ p></p> <p></ Div></p> <p><Div id = "content"></p> <p><Div id = "left-side"> <p> Left-side </ p> </ div></p> <p><Div id = "center"> <p> Center </ p> </ div></p> <p></ Div></p> <p><Div id = "footer"> <p> Footer </ p></p> <p></ Div></p> <p></ Body></p> <p></ Html></p> <p>2. трехколоночной макет сайту</p> <p><Html></p> <p><Head></p> <p><Style></p> <p># Left-side {</p> <p>float: left;</p> <p>width: 200px;</p> <p>}</p> <p>#wrapper {</p> <p>margin-left: 200px;</p> <p>background-color: yellow;</p> <p>}</p> <p># Right-side {</p> <p>float: right;</p> <p>width: 200px;</p> <p>}</p> <p>#top {margin-left: 0px;</p> <p>margin-top: 0px;</p> <p>hight: 150px;}</p> <p>#center {}</p> <p>#footer {clear: both;}</p> <p></ Style></p> <p></ Head></p> <p><Body></p> <p><Div id = "top"> top</p> <p></ Div></p> <p><Div id = "content"></p> <p><Div id = "left-side"> left-side </ div></p> <p><Div id = "wrapper"></p> <p><Div id = "right-side"> right-side </ div></p> <p><Div id = "center"> center </ div></p> <p></ Div></p> <p></ Div></p> <p><Div id = "footer"> footer</p> <p></ Div></p> <p></ Body></p> <p></ Html></p> <p>2. Блокова верстка сайтів</p> <p>При блокової верстці кожен елемент сторінки - картинка, абзац, таблиця, список, форма, меню подається як вмісту блоку. Блок має вміст, який поміщається в рамку, відступи і поля. Блоки можна розташувати на одній лінії, проте по-замовчуванню блоки розташовуються один під іншим.</p> <p>Розглянемо основні елементи HTML і CSS, використовувані для блокової верстки.</p> <p>Будь-який документ повинен на самому початку містити елемент <i>DOCTYPE</i>. Визначимо строгі правила <i>Strict 1.0.</i> При цьому застарілі елементи не використовуються, все теги, які не мають закриває пари, повинні закінчуватися пробілом зі слешем /> перед закриває кутовий дужкою.</p> <p><! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p> <p><Head></p> <p><Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251" /></p> <p><Meta http-equiv = "Content-Language" content = "en" /></p> <p><Meta name = "description" content = "Сайт про конференцію" /></p> <p><Meta name = "keywords" content = "конференція, освіту, веб, суспільство, комп'ютери, моделювання." /></p> <p><Title> WebConf 09 </ title></p> <p><Link rel = "stylesheet" type = "text / css" href = "css / style1.css" /></p> <p></ Head></p> <p><! - -Перший Мета-тег показує на кодування сайту у вигляді кирилиці windows-1251. Другий мета-тег - це короткий опис сайту. Саме цей рядок першої здасться в результатах пошуку пошукових серверів. У третьому мета-тегу ключові слова для пошукових систем. Останній рядок - це посилання на лист стилів CSS, який створимо нижче. -></p> <p><Body></p> <p><Div id = "main"></p> <p><Div class = "header"></p> <p><Div class = "headcontent"></p> <p><Div class = "w1"> </ div></p> <p><a href="/" id="logo"> <img src = "img / logo.gif" alt = "WEB CONF 09" /></a></p> <p><Div></p> <p><Img src = "img / webconf09.gif" alt = "WEB CONF 09" /></p> <p></ Div></p> <p></ Div></p> <p></ Div></p> <p><! -</p> <p><Div id = "container"></p> <p><Div id = "header"> </ div> -></p> <p><Div id = "nav"></p> <p><Ul></p> <p><Li> Головна </ li></p> <p><Li> <a href="#"> Про нас</a> </ li></p> <p><Li> <a href="#"> Про секціях</a> </ li></p> <p><Li> <a href="#"> Тези</a> </ li></p> <p><Li> <a href="#"> Оплата</a> </ li></p> <p><Li> <a href="#"> Контакт</a> </ li></p> <p></ Ul> </ div></p> <p><Div id = "text"></p> <p><Img class = "img1" src = "pig1.jpg" alt = "малюнок" /></p> <p><H2> <span> Детальна інформація </ span> </ h2></p> <p><P> Білоруський державний університет (БДУ) та Інститут математики Національної Академії наук Білорусі організують міжнародну наукову конференцію: <a href=""> «X Білоруська математична конференція»</a>, 3-7 листопада 2008 року в місті Мінську ( Білорусь). Дні приїзду та від'їзду - 2 і 8 листопада 2008р На пленарних засіданнях конференції будуть заслухані лекції запрошених доповідачів тривалістю 60 хв. </ P></p> <p><P> Тривалість пленарних доповідей на секціях - 40 хв., Секційних доповідей - 20 хв., Коротких повідомлень - 10 хв. </ P></p> <p><Div id = "members"></p> <p><H2> Список учасників: </ H2></p> <p><Ol></p> <p></ Ol></p> <p><Ol></p> <p></ Ol> </ div></p> <p><Img class = "line" src = "line.gif" alt = "" /></p> <p></ Div></p> <p><Div id = "news"></p> <p><H3> Самі распоследній новини: </ h3></p> <p><Ul></p> <p><Li> Новини. Малацци! </ Li></p> <p><Li> Новини. Злий сильно. </ Li></p> <p><Li> Танці намічаються до самого ранку. буде весело. </ li></p> <p></ Ul></p> <p></ Div></p> <p><Div class = "clearfloat"> </ div></p> <p><Div id = "footer"></p> <p><P> Головна | <a href="#"> Про нас</a> |</a> | <a href="#"> Подружіццо</a> </ p></p> <p><P> © PIG.RU, 2007 | All right reserved. |</p> <p><a href="http://validator.w3.org/check?uri=http://www.dizweb.ru/pig/index.html">XHTML</a> |</p> <p><a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.dizweb.ru/pig/style.css"> CSS</a> | | e-mail: <a href="mailto:piggs@pig.ru"> piggs@pig.ru</a> </ p></p> <p></ Div> </ div> </ body> </ html></p> <p>Збережемо документ в файлі index.html. Контрольний аркуш завжди є головною.</p> <p>Відкриваємо новий документ style.css в блокноті або редакторі</p> <p>* {Margin: 0; padding: 0; border: 0; }</p> <p>body {</p> <p>padding: 2% 0 0;</p> <p>background: #fff; color: # 333;</p> <p>font-family: "Comic Sans MS", Verdana, Arial, Helvetica, sans-serif; }</p> <p>#container {width: 760px; margin: 0 auto; border: 1px solid # 999; }</p> <p>#header {</p> <p>background: url (header.jpg); width: 760px;</p> <p>height: 158px; }</p> <p>#nav {</p> <p>background: url (navbg.jpg) repeat-x; color: # f00;</p> <p>font-size: 120%; font-weight: bold;</p> <p>line-height: 1.8em; text-align: center; }</p> <p>#nav ul {list-style-type: none; }</p> <p>#nav li {display: inline; margin: 0 8px; }</p> <p>#nav li a {color: # 0c0; }</p> <p>#nav li a: hover {color: # f00; }</p> <p>a {text-decoration: none; }</p> <p>#text {</p> <p>width: 545px; font-size: 0.8em; color: # 333; margin: 10px auto;</p> <p>float: left;</p> <p>}</p> <p>#text p {</p> <p>text-align: justify; text-indent: 1.5em; margin: 0; padding: 0 15px; }</p> <p>#text a {</p> <p>color: # 396; }</p> <p>#text a: hover {</p> <p>color: # f36;</p> <p>border-bottom: 1px dotted # f36; }</p> <p>.img1 {width: 200px;</p> <p>height: 287px; margin: 0 0 0 15px; float: right; }</p> <p>.img2 {</p> <p>width: 200px; height: 200px;</p> <p>margin: 10px 10px 0 15px;</p> <p>float: left;</p> <p>}</p> <p>.venzel {width: 300px; height: 23px;</p> <p>margin: 10px 10px 0 15px;</p> <p>float: left;</p> <p>}</p> <p>#members {</p> <p>width: 300px;</p> <p>height: 190px; float: right;</p> <p>}</p> <p>#members h2 {</p> <p>color: # f60; font-size: 120%;</p> <p>font-weight: bold; text-align: center;</p> <p>}</p> <p>#members ol {</p> <p>color: # 999; font-size: 120%;</p> <p>margin: 10px;</p> <p>float: left;</p> <p>}</p> <p>#members li {margin: 0 5px; }</p> <p>#members li a {color: # 0c0;}</p> <p>#members li a: hover {color: # f00;}</p> <p>.line {width: 304px; height: 13px; float: right;}</p> <p>#news {background: #ffc; width: 185px; color: # 665; margin: 10px 5px; float: right;}</p> <p>#news h3 {color: # f60; font-size: 120%; font-weight: bold; text-align: center; }</p> <p>#news ul {list-style: url (marker.jpg) inside; }</p> <p>#news li {font-size: 75%; padding: 5px 10px;}</p> <p>#footer {</p> <p>background: # 665;</p> <p>color: #fff; font-size: 70%;</p> <p>padding: 5px; clear: both;</p> <p>}</p> <p>#footer a {</p> <p>color: # ff0;</p> <p>}</p> <p>#footer a: hover {</p> <p>color: # f00;</p> <p>}</p> <p>#footer p {padding: 2px; text-align: center; }</p> <p>.clearfloat {clear: both; }</p> <p>У першому правилі зірочка означає всю сторінку разом. Браузери застосовують дані з нею правила до всієї сторінці. У правилі ми вказали: Відступи - 0, Поля - 0, Рамка - 0. Значення вказуються або в процентах, або в пікселах. Якщо стоїть нуль, то одиницю виміру не потрібно вказувати.</p> <p>Наступним правилом ми задали для тіла сторінки: поля - зверху 2%, з боків по нулях, знизу теж нуль. У будь-якого прямокутника є 4 сторони, значення відступів для них задаються за годинниковою стрілкою, починаючи зверху, потім праве, низ і ліве. Так як з боків має бути однакова відстань від краю екрану, то і значень за все три - 2% 0 0. Середня цифра в цьому записі нуль означає, що вона однакова для правої, і для лівої сторони.</p> <p>У наступному правилі з'явилося слово container з гратами (#). Дана решітка і означає унікальність атрибута. Тобто тег div з даними атрибутом буде використаний тільки один раз на сторінці.</p> <p>Навіщо взагалі потрібен контейнер? А потім, щоб помістити нашу сторінку в центр екрану монітора. Для цього ми вказали у контейнера відступи: зверху і знизу нуль, а з боків auto. при будь-якому розмірі екрану наш сайт завжди буде строго по центру. Ширина сторінки при цьому дорівнює 760 пікселям.</p> <p>А тепер збережемо наш лист стилів в ту ж саму папочку, де лежить Головна сторінка і картинки. Зберігаємо таким же чином, як і раніше, тільки в імені додаємо розширення .css - style.css</p> <p>Відкриваємо його і слідом за правилом для шапки запишемо правило для блоку навігації:</p> <p>#nav {background: url (nav-bg.jpg) repeat-x; color: # f00;</p> <p>font-size: 120%; font-wight: bold; line-height: 1.8em; text-align: center; }</p> <p>#nav ul {list-style-type: none; }</p> <p>#navli {display: inline; margin: 0 8px; }</p> <p>#nav li a {color: # 0c0; }</p> <p>#nav li a: hover {color: # f00; }</p> <p>Панель навігації буде у нас одна - відразу під шапкою, горизонтальна (в підвалі зробимо просте дублювання звичайними посиланнями). Для її реалізації ми скористаємося таким елементом як маркований список.</p> <p>Даний список в HTML позначається тегом ul. Елементи списку (рядки) позначаються тегом li.</p> <p>Тепер повернемося до нашого листу стилів. Блок навігації ми обізвали атрибутом nav. Спочатку зазначимо загальні налаштування для нього: бекграунд - це картинка з ім'ям nav-bg.jpg розміром 8х35 пікселів. Це звичайний такий "стовпчик" з градієнтом від білого до сірого зверху вниз. Щоб розтягнути його по всій смузі навігації, ми вказали в значенні слово repeat-x, що означає "повторити по осі х", тобто по горизонталі (про це вже йшлося в трохи вище).</p> <p>пропишемо ще пару правил для посилань.</p> <p>#nav li a {color: # 0c0; }</p> <p>#nav li a: hover {color: # f00; }</p> <p>У першому ми позначили колір посилання в спокійному стані, а в другому - в активному, тобто при наведенні миші.</p> <p>Ну а тепер слідом додамо ось таке правило:</p> <p>a {text-decoration: none;}</p> <p>Це загальне для всіх посилань правило. Воно вказує, що всі посилання на сторінці за замовчуванням не використовують підкреслення. А там, де потрібно, ми це правило змінимо.</p> <p>Отже, продовжимо верстати нашу Головну сторінку. Слідом за шапкою додамо блок навігації. Знаходимо в коді наступне місце:</p> <p><Div id = "header"></p> <p></ Div></p> <p>і відразу ж за ним запишемо наступне:</p> <p><Div id = "nav"> <ul></p> <p><І> Головна </ І></p> <p><Li> <a href=" #"> Про нас ^ ХЛ ^</p> <p><Li> <a href=" #"> Про летючості</a> </ li></p> <p><Li> <a href=" #"> Про фортуни <Л1> </ І> <li> <a href=" #"> Свинки-герої</a> </ li> <li> <a href = " # "> Подружіццо</a> </ li></p> <p></ Ul> </ div></p> <p>Як бачимо - все просто: наші розділи оформлені як пункти списку, і кожен пункт, крім першого, є посиланням. В даному випадку замість адреси неіснуючих сторінок ми просто вставили решітку (#), яка завжди повертає нас на поточну сторінку.</p> <p>Ну а тепер пора вже, нарешті, наповнити нашу сторінку контентом. корисна площа сторінки розділена на дві функціональні області:</p> <p>1. Основний текст (з картинками та ін.)</p> <p>2. Блок новин.</p> <p>Зазвичай, таку верстку називають двоколонковому. <sup></sup></p> <p>У першому правилі ми вказали, що ширина у області тексту буде дорівнює 545 пікселям. Розмір шрифту 0.8em (в даному правилі нуль можна не писати, .8em - позначає те ж саме). З відступами зрозуміло - верх і низ по 10 пікселів, з боків на автоматі. А ось останній рядок якраз і задає місце розташування нашого блоку тексту ні де попало, а з лівого боку. Слово float перекладається як "обтікання '". Але тут є одна фішка. Читаємо: "обтікання - зліва". Але ж це сам текст знаходиться зліва! А обтікає його все інше справа. У цьому є якась плутанина. Щоб не заблукати, просто запам'ятайте: left - сам об'єкт зліва, а тече все правіше. І навпаки, right - об'єкт праворуч, а тече все лівіше.</p> <p>Для чого це потрібно? Скопіювавши наведені вище правила в свій лист стилів і зберігшись, подивіться, що вийшло - текст вирівнявся по лівому краю сторінки, залишивши праворуч порожнє місце. У цей порожнє місце ми потім і вставимо блок новин, присвоївши йому в листі стилів значення right для атрибута float.</p> <p>У наступному правилі ми для абзаців нашого тексту задали вирівнювання по всій виділеної площі. Слово justify якраз це і означає. Якщо цього не вказати, то за замовчуванням весь текст вирівняється по лівому краю.</p> <p>Далі. Слово indent означає не що інше як звичайну "новий рядок". Розмір її також вказано в півтора розміру шрифту.</p> <p>Ну і, нарешті, ссилочку. Для неактивній задали колір салатовий, а для активної червоний, та ще й з підкресленням точкової (dotted) смужкою в 1 піксель товщиною.</p> <p>А тепер давайте зазначимо правила для наших картинок.</p> <p>У блоці тексту ми розмістимо список нових учасників не маркованих, а нумерованим списком. Задається такий список тегом ol.</p> <p>Далі у нас йдуть підряд аж цілих два нумерованих списку. Навіщо два? На макеті ми розмістили нових учасників в дві колонки з вертикальною нумерацією в кожній. Можна було б, звичайно, занести всіх в один загальний список, зробити ширину одного осередку рівно наполовину відведеного під список місця, і тоді осередки автоматом переносилися б на нову сходинку. Але тоді нумерація виглядала б так:</p> <p>1 2</p> <p>3 4</p> <p>5 6</p> <p>Тому ми не стали мудрувати, а зробили просто два списки поспіль. Але! Кожному в листі стилів задали обтікання зліва. Про це трохи пізніше. Відразу після списків ми поклали картинку хвилястою лінії.</p> <p>Ну, а тепер відкриємо наш лист стилів і запишемо ще шматочок красивих правил.</p> <p>#members {width: 300px; height: 190px; float: right;}</p> <p>#members h2 {color: # f60; font-size: 120%; font-weight: bold; text-align: center;}</p> <p>#members ol {color: # 999; font-size: 120%; margin: 10px; float: left;}</p> <p>#members li {margin: 0 5px;}</p> <p>#members li a {color: # 0c0;}</p> <p>#members li a: hover {color: # f00;}</p> <p>.line {width: 304px; height: 13px; float: right;}</p> <p>Для початку ми поставили всьому блоку розмір. Причому цього разу не тільки ширину, але і висоту. Для чого це потрібно? Якщо, наприклад, в нашому списку було б трохи менше народу, то картинка хвилястою лінії "тиснула" б список знизу, а нам треба, щоб вона була майже під зріз картинки з летять поросям зліва. Тому ми поставили жорсткий розмір як по ширині, так і по висоті. І обтікання справа. Ну, це вже зрозуміло - список повинен бути правіше зазначеного малюнка.</p> <p>Далі задали правило для заголовка другого рівня. Для самого нумерованого списку з тегом ol ми вказали обтікання зліва. Тобто обидва наших списку (пам'ятаємо, що в коді сторінки їх два поспіль) будуть йти не в стовпчик, а один біля іншого поряд обидва-два.</p> <p>Всі імена в списку оформлені у вигляді посилань. Для них ми задали тільки кольору, без всяких підкреслення. Але чомусь на сторінці вони все одно підкреслюються при наведенні мишки, та ще точкової лінією! Ось тут якраз і спрацював так званий каскад - список-то лежить в зоні дії атрибута text і тому просто перейняв від нього частину правил.</p> <p>У самому низу ми додали "очищення обтікання" - clearfloat (для неї також в листі стилів пропишемо свої правила, а саме очистку з обох сторін). Для чого це? Взагалі наша верстка є "плаваючою". Он скільки у нас вже обтічних елементів. При цьому різні браузери по-різному відтворюють таку верстку (про те, що IE по-своєму "бачить" поля і відступи вже й не кажу). В Opera і Firefox можна було б обійтися і без очищення і відразу нижче писати код футера. Але в IE в такому випадку з'являються дивні посмикування фону у футера при наведенні на посилання мишки. Браузер немов хоче підстрибнути і заповнити всі порожні місця які є. Тому ми просто додамо цю строчку і не станемо морочитися.</p> <p>А тепер відкриваємо наш лист стилів і допишемо наступний код:</p> <p>#news {background: #ffc; width: 185px; color: # 665; margin: 10px 5px; float: right; }</p> <p>#news h3 {color: # f60; font-size: 120%; font-weight: bold; text-align: center; }</p> <p>#news ul {list-style: url (marker.jpg) inside; }</p> <p>#news li {font-size: 75%; padding: 5px 10px; }</p> <p>Тут ми для початку поміняли фон для блоку новин, щоб візуально відокремити колонку від основного вмісту. Потім поставили ширину блоку, колір для шрифту і обтікання справа. З заголовком вийшло хитро. Якщо повернутися трохи назад, то можна помітити, що у заголовка 2-го рівня (у списку учасників), також поставлено розмір шрифту в 120%.</p> <p>Взагалі за замовчуванням браузери самі визначають розміри для заголовків залежно від їх рангу. Тобто за логікою речей, заголовок 3-го рівня повинен бути дрібніше 2-го. А у нас навпаки! Це сталося через те, що заголовок списку учаснег знаходиться в блоці основного тексту, для якого ми задали розмір всього шрифту в 0.8em.</p> <p>Наступним правилом ми задали для списку стиль маркерів. За замовчуванням будь-який браузер відображає маркери у вигляді чорних гуртків. Але можна поставити й інше відображення - кіл, квадратів, без маркерів, або взагалі свій власноруч намальований маркер. Якраз так ми і вчинили. Намалювали Симпатишная зелену галку з розмірами 14х17 пікселів і вказали в стилі посилання на неї - url (marker.jpg). Слідом приписали слово inside. Що це означає? Маркери по-замовчуванням не входять в сам блок тексту. Коли ми задаємо поля для тексту, то маркери не слухаються і вилазять за краї. Тому ми примусово вказали їм бути inside, тобто всередині колонки з текстом.</p> <p>Нам залишилося тільки оформити "підвал" (footer<strong>),</strong></p> <p>Тут у нас слово «Головна» не є посиланням (про це ми вже говорили), а слідом йдуть звичайні посилання на інші розділи сайту. Всього в футере два абзаци. У першому посилання на розділи, а в другому якраз і є всякі авторські права, посилання на "мило" і ще дві цікаві ссилочку. Ось вони вже якраз для форсу бандитського! Це посилання на валідатори - контори, які перевіряють вашу сторінку на відповідність стандартам. Посилання влаштовані так, що натискаючи на них, ви відразу даєте команду цим самим валідатор перевірити ваші сторінки (які вже лежать в мережі звичайно ж). І тут же отримуєте відповідь.</p> <p>. Тепер допишемо в листі стилів залишився код:</p> <p>#footer {background: # 665; color: #fff; font-size: 70%; padding: 5px; clear: both; }</p> <p>#footer a {color: # ff0; }</p> <p>#footer a: hover {color: # f00; }</p> <p>#footer p {padding: 2px; text-align: center; }</p> <p>.clearfloat {clear: both; }</p> <p>Тут ми задали фон сіро-зеленого кольору, колір тексту - білий. А от нижня строчка в першому правилі (clear: both;) означає, що з обох сторін підвалу не повинно бути нічого. Тобто він у нас займає всю ширину нижньої частини контейнера.</p> <p>Саме останнє правило якраз служить для блоку очищення, заданого атрибутом clearfloat, про який ми говорили, верстаючи блок новин.</p> <p>Зберігаємося, дивимося. Все начебто добре, але якось незатишно (особливо на білому тлі екрана). Додамо-ка ми всією сторінці тонку світло-сіру рамку! Відкриємо лист стилів, знайдемо ось це місце:</p> <p>#container {width: 760px; margin: 0 auto;</p> <p><sup>}</sup></p> <p>І додамо наступний рядок: border: 1px solid # 999;</p> <p>Має вийти наступне:</p> <p>#container {width: 760px; margin: 0 auto; border: 1px solid # 999;</p> <p><sup>}</sup></p> <p>верстка є "плаваючою". Грубо кажучи - елементи на сторінці розташовуються як би в потоці, займаючи вільні місця. Тому ми і обмежили частина простору контейнером як коробкою, в яку поклали по черзі всі елементи.</p> <p><strong>Деякі підказки по синтаксису CSS:</strong></p> <p>1. Властивості шрифтів.</p> <p>font-family: verdana, arial, sans-serif; / * Запропоновано сімейство шрифтів, з якого браузер вибере щось схоже і близьке. * /</p> <p>font-style: italic; / * Може бути як normal, italic або oblique - похилий * /</p> <p>font- weight: bold; / * normal, або жирний (bold), number - жіоность * /</p> <p>font-size: 120%; / * розмір шрифту. Вказується або у відсотках, * /</p> <p>font-size: 1.2em; / * або в відносних величинах em, * /</p> <p>font-size: 14px; / * Або в пікселях px. * /</p> <p>color: number - колір шрифту</p> <p>background-color: number - колір підкладки</p> <p>background: url - текстурная підкладка</p> <p>2. Властивості тексту.</p> <p>Основні параметри абзацу</p> <p>text-align: [left | right | center | justify] - вирівнювання тексту</p> <p>text-indent: number - відступ абзацу в% або в пікселях.</p> <p>line-height: number - висота рядка. Корисна для вировніванія разнокалиберного шрифту.</p> <p>letter-spacing: number - трекінг</p> <p>padding-left: number - відступ від тексту зліва</p> <p>padding-right: number - відступ від тексту справа</p> <p>padding-top: number - відступ від тексту зверху</p> <p>padding-bottom: number - відступ від тексту знизу</p> <p>margin-left: number - відступ від кордону ліворуч</p> <p>margin-right: number - відступ від кордону справа</p> <p>margin-top: number - відступ від кордону зверху</p> <p>margin-bottom: number - відступ від кордону знизу</p> <p>3. Властивості кольору і фону.</p> <p>color - задає колір шрифту. Здається шістнадцяткові числом або пойменованої константою: color: #fff;</p> <p>background - фон. якщо<br><br><div class=pagination><a href="/4/4-4/4-44332.html" class=prev rel=prev>Попередня</a>   <a href="/4/4-4/4-44326.html"> 77</a>   <a href="/4/4-4/4-44327.html"> 78</a>   <a href="/4/4-4/4-44328.html"> 79</a>   <a href="/4/4-4/4-44329.html"> 80</a>   <a href="/4/4-4/4-44330.html"> 81</a>   <a href="/4/4-4/4-44331.html"> 82</a>   <a href="/4/4-4/4-44332.html"> 83</a>   <span>84</span>   <a href="/4/4-4/4-44334.html"> 85</a>   <a href="/4/4-4/4-44335.html"> 86</a>   <a href="/4/4-4/4-44336.html"> 87</a>   <a href="/4/4-4/4-44337.html"> 88</a>   <a href="/4/4-4/4-44338.html"> 89</a>   <a href="/4/4-4/4-44339.html"> 90</a>   <a href="/4/4-4/4-44340.html"> 91</a>   <a href="/4/4-4/4-44341.html"> 92</a>   <a href="/4/4-4/4-44334.html" class=next rel=next>Наступна</a></div> <!--трафмаг_1--> <hr><p align=center> <a href="/4/4-4/4-44322.html"> SET CUSTOM VALIDITY</a> | <a href="/4/4-4/4-44323.html"> Email Inputs</a> | <a href="/4/4-4/4-44324.html"> Placeholders</a> | <a href="/4/4-4/4-44325.html"> Виправте значення замовного атрибута</a> | <a href="/4/4-4/4-44326.html"> Крок 1: Розмітка</a> | <a href="/4/4-4/4-44327.html"> Крок 2: CSS</a> | <a href="/4/4-4/4-44328.html"> Крок 3: JavaScript</a> | <a href="/4/4-4/4-44329.html"> Завдання для виконання</a> | <a href="/4/4-4/4-44330.html"> Каскадні таблиці стилів CSS</a> | <a href="/4/4-4/4-44331.html"> Властивість шрифтів font дозволяє задати одну або кілька характеристик шрифту: font-family | font-style | font-variant | font-weight | font-size</a> |</p> </div> <center>© um.co.ua - учбові матеріали та реферати</center> <!--клікандер--> </body> </html>