Краткий справочник по параметрам CSS2

Для того чтобы красиво оформить страничку и создать интересный стиль, не обязательно полностью знать всю спецификацию 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 могут иметь один из четырех суффиксов, определяющих сторону блока, к которой относится параметр:

Если мы, к примеру, хотим определить внешние вертикальные отступы в 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.

Параметры фона

Фон может быть указан как для всего блока, так и в качестве подложки к любому тегу, необязательно к блочному. Основные параметры, относящиеся к фону, приведены ниже.

Параметр Возможные значения Описание
background-color #c0c0c0 Цвет фона
background-image url("background.gif") Использовать в качестве фона изображение
background-position top left, bottom right Позиционирование фонового изображения относительно блока
background-repeat no-repeat, repeat, repeat-x, repeat-y Способ размножения изображения на плоскости

Точно так же, как и в случае с границами, можно указывать все свойства в одной стенографической команде. Следующее правило предписывает установить для блока белый фон и использовать картинку с именем bluesky.jpg, которую необходимо выровнять относительно правого верхнего угла, но не нужно размножать.

 #header {
     width: 600px;
     height: 150px;
     background: #ffffff url("bluesky.jpg") top right no-repeat;
 }

Здесь важно отметить, что URL изображения, указываемый в качестве параметра функции url(), отсчитывается относительно стилевого файла, а не относительно странички, к которой подсоединен стиль.

Для фоновой картинки можно указать не просто выравнивание, но и точные отступы от края. В этом случае первым указывается отступ по горизонтали, а вторым отступ по вертикали.

 #header {
     width: 600px;
     height: 150px;
     background: #ffffff url("bluesky.jpg") 50px 100px no-repeat;
 }

Параметры списка

Список обладает некоторыми специфическими параметрами, определяющими его внешний вид. Они перечислены ниже.

Параметр Возможные значения Описание
list-style-type none, disc, circle, square, decimal,... Способ нумерации элементов списка
list-style-image url("bullet.gif") Использовать небольшое изображение в качестве маркера
list-style-position inside, outside Способ выравнивания маркеров относительно элементов списка

Следующей командой можно убрать маркер перед элементами списка:

 li {
     list-style-type: none;
 }

Смотри также