Приложение B. Cведения о CSS
Гиперссылки
Установка стилей гиперссылок
Чтобы управлять отображением гиперссылок на вашей странице, установите параметры тэга <A>, такие как color, font-weight и text-decoration.
| Пример | |
|---|---|
a { color:#993300;font-weight:bold;
text-decoration:none;} |
Гиперссылки не подчёркнуты и отображаются полужирным, темно-красным шрифтом |
Селекторы псевдоэлементов a:link, a:visited, a:active и a:hover
Используя селекторы псевдоэлементов гиперссылок, вы можете устанавливать различные параметры гиперссылок. Установите параметры a:hover, чтобы создать эффект ролловера, когда посетитель проводит мышкой по гиперссылке.
| Пример | |
|---|---|
a : link {color:darkslateblue;}
a : visited {color:steelblue;}
a : active {color:hotpink;}
a : hover {color:tomato;} |
Гиперссылка меняет цвет, если она была использована или если посетитель проводит по ней мышью |
Поля, заполнение и границы
Исходя из блочной модели CSS, каждый элемент блока – таблицы, ячейки, параграфы и рисунки – имеют поля, заполнение и границы, которыми вы можете управлять. Функции полей работают не во всех броузерах; в Netscape 4 лучше вообще не использовать параметры полей.
Функции полей
Поля представляют собой пространство вокруг границ объекта. Они прозрачны, поэтому их цвет соответствует цвету заднего фона объекта. Для большинства объектов поля по умолчанию равны нулю; впрочем, текстовые элементы, такие как параграфы и заголовки, имеют по умолчанию поля сверху и снизу.
Смежные поля
Когда элементы, имеющие поля, следуют один за другим вертикально, пространство между ними не является суммой их верхнего и нижнего полей; оно сливается в большее из двух полей. Инструментами side-by-side поля добавляются для создания большего пространства. Вы можете указать отрицательную величину поля; таким образом, вы уменьшите пространство, занимаемое полями.
margin-top, margin-right, margin-bottom, margin-left и margin
Установите расстояние между объектом (или его границей) и смежным объектом или краем окна или ячейки. Используйте margin, чтобы установить сразу все четыре поля.
| Пример | |
|---|---|
body {margin:0;} |
Страница находится в верхнем левом углу окна броузера |
.quote {
margin-left:.25in;
margin-right:.25in;} |
Абзацы класса quote отступают на четверть дюйма от краев окна |
h1,h2,h3 {margin-bottom:6px;}
p {
margin-top:6px;
margin-bottom:6px;}
ul , ol {
margin-top:8px;
margin-bottom:18px;}
li {
margin-top:0px;
margin-bottom:4px;} |
Страница разбита более равномерно: заголовки и абзацы ближе друг к другу, пункты списка разделены небольшими отступами |
img {float:right;margin-left:10px;} |
Рисунки выровнены справа; текст огибает их слева, но он отделен от них как минимум десятью пикселами |
padding
Устанавливает расстояние между абзацем или другим элементом и его границей
border-width
Может быть thin, medium, thick, или exact width. (Установка этих параметров не обеспечит границу, пока вы не установите border-style.)
border-style
Отображает границу вокруг любого блочного элемента, вроде параграфа, рисунка, или таблицы. Бывает solid, double, ridge, groove, dashed, dotted, outset, inset, или none.
border-color
Устанавливает цвет границы.
border
Устанавливает сразу все три предыдущих параметра.
| Пример | |
|---|---|
.bigframe {border:4mm ridge gold;} |
Элементы класса bigframe имеют широкую, золотистую границу |
h1 {border:2px solid;padding:4px;} |
Каждый заголовок заключен в рамку |
table {border:2 solid gray;}
td,th {border:1 dashed gray;} |
Отображает тонкие границы вокруг таблицы и ячеек; удобно для тестирования таблиц |
Списки
list-style-type
Маркеры могут быть square, circle или disc. Номера могут быть decimal, lower-roman, upper-roman, lower-alpha или upper-alpha. Если нет ни того, ни другого, установите none.
list-style-image
Устанавливает рисунок в качестве маркера
| Пример | |
|---|---|
ul { list-style-image:
url(images/bullet.gif);} |
Маркированный список использует рисунок bullet.gif в качестве маркера |
list-style-position
Определяет положение маркера в списке: inside (в составе абзаца) или outside (выдвинутый влево от абзаца).