- •2.2.3. Вынесение таблицы стилей в отдельный файл
- •2.2.4. Приоритет применения стилей
- •2.6.2. Внутренние отступы
- •2.7. Рамки
- •2.7.1. Стиль линии рамки
- •2.14. Позиционирование элемента. Размещаем элемент в произвольном месте окна Web-браузера
- •2.15. Управление отображением элемента. Скрываем и отображаем абзацы
2.6.2. Внутренние отступы
TD { padding-left: 0 }
TD { padding-right: 50 }
TD { padding-top: 15mm }
TD { padding-bottom: 20 }
TD { padding: 15mm 50 20 0 }
2.7. Рамки
2.7.1. Стиль линии рамки
Листинг 2.6. Тип рамки
<HTML>
<HEAD>
<TITLE>Тип рамки</TITLE>
<STYLE>
TABLE { border-left-style: dashed; border-right-style: dotted;
border-top-style: solid; border-bottom-style: groove }
TD { border-left-style: none; border-right-style: none;
border-top-style: none; border-bottom-style: none; text-align: center }
CAPTION { border-top-style: solid }
P { border-left-style: dotted; border-right-style: dotted;
border-top-style: dotted; border-bottom-style: dotted }
</STYLE>
</HEAD>
<BODY>
<TABLE align="center" width="200">
<CAPTION>Заголовок таблицы<CAPTION>
<TR>
<TD>1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TD>
</TR>
</TABLE>
<P>Текст в рамке</P>
</BODY>
</HTML>
2.7.2. Толщина линии рамки
TABLE { border-left-width: 5; border-right-width: 5; border-top-width: 0; border-bottom-width: 10 }
TABLE { border-left-width: medium; border-right-width: medium;
border-top-width: thin; border-bottom-width: thick }
2.7.3. Цвет линии рамки
TABLE { border-left-color: red; border-right-color: #000080; border-top-color: green; border-bottom-color: black }
2.8. Фон элемента
2.8.1. Цвет фона
BODY { background-color: green }
TD { background-color: silver }
TD { background-color: transparent }
2.8.2. Фоновый рисунок
BODY { background-image: url(foto1.gif) }
BODY { background-image: none }
2.8.3. Повторяемость фонового рисунка
BODY { background-image: url(foto1.gif); background-repeat: repeat }
BODY { background-image: url(foto1.gif); background-repeat: repeat-x }
BODY { background-image: url(foto1.gif); background-repeat: repeat-y }
BODY { background-image: url(foto1.gif); background-repeat: no-repeat }
2.8.4. Прокрутка фонового рисунка
BODY { background-image: url(foto1.gif); background-repeat: no-repeat; background-attachment: scroll }
BODY { background-image: url(foto1.gif); background-repeat: no-repeat; background-attachment: fixed }
2.8.5. Положение фонового рисунка
BODY { background-image: url(foto1.gif); background-repeat: no-repeat; background-attachment: fixed; background-position: 50% 50% }
2.9. Списки
2.9.1. Вид маркера списка
UL { list-style-type: disk }
UL { list-style-type: circle }
UL { list-style-type: square }
OL { list-style-type: decimal }
OL { list-style-type: lower-roman }
OL { list-style-type: upper-roman }
OL { list-style-type: lower-alpha }
OL { list-style-type: upper-alpha }
OL { list-style-type: none }
2.9.2. Изображение в качестве маркера списка
OL { list-style-image: url(foto1.gif) }
2.9.3. Компактное отображение списка
OL { list-style-position: outside }
OL { list-style-position: inside }
2.10. Изменяем вид курсора
A { cursor: auto }
A { cursor: crosshair }
A { cursor: default }
A { cursor: hand }
A { cursor: move }
A { cursor: n-resize }
A { cursor: text }
A { cursor: wait }
A { cursor: help }
2.11. Раскрашиваем полосы прокруток в окне Web-браузера
BODY { scrollbar-base-color: green }
BODY { scrollbar-face-color: red }
BODY { scrollbar-arrow-color: white }
BODY { scrollbar-track-color: red }
BODY { scrollbar-3dlight-color: red }
BODY { scrollbar-highlight-color: red }
BODY { scrollbar-shadow-color: red }
BODY { scrollbar-darkshadow-color: red }
2.12. Псевдостили гиперссылок. Отображаем ссылки разными цветами
<BODY link="#000000" vlink="#000080" alink="#FF0000">
A:link { color: #000000 }
A:visited { color: #000080 }
A:active { color: #FF0000 }
A:link { color: red; text-decoration: underline }
A:visited { color: blue; text-decoration: underline }
A:active { color: green; text-decoration: none }
A:hover { color: lime; text-decoration: none }
A.link1:link { color: black; text-decoration: none }
A.link1:visited { color: blue; text-decoration: none }
A.link1:active { color: red; text-decoration: underline }
A.link1:hover { color: red; text-decoration: underline }
Листинг 2.7. Псевдостили гиперссылок
<HTML>
<HEAD>
<TITLE>Псевдостили гиперссылок</TITLE>
<STYLE>
A:link { color: red; text-decoration: underline }
A:visited { color: blue; text-decoration: underline }
A:active { color: green; text-decoration: none }
A:hover { color: lime; text-decoration: none }
A.link1:link { color: black; text-decoration: none }
A.link1:visited { color: blue; text-decoration: none }
A.link1:active { color: red; text-decoration: underline }
A.link1:hover { color: red; text-decoration: underline }
</STYLE>
</HEAD>
<BODY>
<A href="doc1.html">Ссылка1</A><BR>
<A href="doc2.html" class="link1">Ссылка2</A>
</BODY>
</HTML>
2.13. Тэги <DIV> и <SPAN>. Группируем элементы страницы
Листинг 2.8. Тэги <DIV> и <SPAN>
<HTML>
<HEAD>
<TITLE>Пример использования стилей</TITLE>
<STYLE>
.text1 { font-size: 12pt; color: red; font-family: "Arial" }
.text2 { font-size: 12pt; color: green; font-family: "Arial" }
</STYLE>
</HEAD>
<BODY>
<DIV class="text1">
<P>Абзац 1</P>
<P>Абзац 2</P>
</DIV>
<SPAN class="text2">
<P>Абзац 3</P>
<P>Абзац 4</P>
</SPAN>
</BODY>
</HTML>
<DIV align="center">Элемент с выравниванием по центру</DIV>
<DIV align="left">Элемент с выравниванием по левому краю</DIV>
<DIV align="right">Элемент с выравниванием по правому краю</DIV>