Для того чтобы красиво оформить страничку и создать интересный стиль, не обязательно полностью знать всю спецификацию CSS2, но основные команды знать нужно. Ниже приведены основные CSS-параметры и примеры их использования.
Параметры шрифта
Большинство параметров, относящиеся к шрифту, начинаются с префикса font-. Основные из них:
| Параметр | Возможные значения | Описание |
|---|
| font-size | 11pt, 16px, 2em, 200%, small | Высота шрифта |
| font-weight | bold, normal | Полужирное начертание шрифта |
| font-style | italic, normal | Наклонное начертание шрифта |
| font-family | Verdana, Times, Courier | Гарнитура шрифта |
| font-variant | normal, small-caps | Печатать текст маленькими заглавными |
| color | red, #c956c6, #699 | Цвет шрифта |
При указании гарнитуры шрифта необходимо учитывать их ограниченное количество, связанное с тем, что гарантированно на компьютере пользователя могут присутствовать всего несколько гарнитур. Все они приведены ниже.
| Тип шрифта | Доступные гарнитуры |
|---|
| Шрифты с засечками | "Times New Roman", Times, Georgia, serif |
| Шрифты без засечек | Arial, Verdana, Tahoma, Geneva, Helvetica, sans-serif |
| Моноширинные шрифты | "Courier New", Courier, monospace |
По той же причине web-мастер может указать в свойстве font-family сразу несколько шрифтов, перечисляя их через запятую:
h1 {
font-family: Verdana, Arial, Tahoma, sans-serif;
}
p {
font-family: "Times New Roman", Times, serif;
}Параметры абзаца
Основные параметры, относящиеся к абзацу, начинаются с префикса text-. Ниже приведен их список.
| Параметр | Возможные значения | Описание |
|---|
| text-align | left, right, center, justify | Выравнивание абзаца |
| text-decoration | none, underline, overline, line-through | Подчеркивание текста |
| text-indent | 10px, 2em, 20pt | Отступ красной строки |
| text-transform | uppercase, lowercase, capitalize, none | Трансформация текста |
| line-height | 16pt, 120%, 1.5em | Расстояние между строками |
Следующей конструкцией можно отменить подчеркивание ссылок в обычном состоянии и подчеркивать их только при наведении курсора мышки.
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}Параметры слоя
При использовании стилей для создания верстки сайта многие параметры относятся непосредственно к самому слою и определяют все необходимые отступы, границы и размеры блока. Эти параметры сведены в таблицу, расположенную ниже. Учтите, что блочным считается любой тег, который ведет себя, как блок. И, следовательно, все указанные параметры могут применяться не только к явно определенным при помощи тега <div> слоям, но и к заголовкам, абзацам, спискам и т.д.
| Параметр | Возможные значения | Описание |
|---|
| width | 100%, 760px | Ширина содержимого блока |
| height | 50%, 400px | Высота содержимого блока |
| margin | 10px, 5% | Внешний отступ от границы блока |
| padding | 5px, 25% | Внутренний отступ от границы блока |
| display | block, inline, none | Тип блока (блочный, строчный, выключенный) |
| float | left, right, none | Задает обтекание блока |
| clear | left, right, both, none | Отменяет обтекание блока |
Свойства границы блока определяются несколькими параметрами, начинающимися с префикса border-, и потому они приведены в отдельной таблице.
| Параметр | Возможные значения | Описание |
|---|
| border-width | 1px, 5mm, thin, 3% | Ширина границы |
| border-color | green, #cc3333 | Цвет границы |
| border-style | none, solid, dotted, dashed, double | Стиль границы |
Если несколько параметров относятся к одному семейству, то их можно объединить в виде одной стенографической команды. Два следующих правила абсолютно идентичны.
p {
border-width: 1px;
border-style: dotted;
border-color: #c0c0c0;
}
p.cite {
border: 1px #c0c0c0 dotted;
}Свойства padding, margin и border могут иметь один из четырех суффиксов, определяющих сторону блока, к которой относится параметр:
- top - верхняя граница или отступ
- right - правая граница или отступ
- bottom - нижняя граница или отступ
- left - левая граница или отступ
Если мы, к примеру, хотим определить внешние вертикальные отступы в 15px и нарисовать границу слева от блока, то соответствующее правило будет выглядеть следующим образом:
p {
margin-top: 15px;
margin-bottom: 15px;
border-left: 1px #000000 solid;
}В одной стенографической команде можно определить отступы и сразу со всех сторон:
h2 {
margin: 15px 2px 15px 25px;
}В этом случае перечисляемые через пробел значения следует отсчитывать по часовой стрелке, начиная сверху. Т.е. приведенное выше правило указывает, что необходимо установить отступ в 15px сверху, 2px справа, 15px снизу и 25px слева. Можно также указать только два значения:
h2 {
margin: 15px 0px;
}Это будет обозначать, что необходимо установить отступ в 15px сверху/снизу и отступ в 0px слева/справа. Если указано одно значение, то оно относится ко всем сторонам блока.
Все вышеприведенные рассуждения справедливы и для параметров border и padding.
