Небольшая обучалка по настройке дизайна блога с помощью CSS
Свои вопросы, замечания и предложения пишите в топике обсуждения блогов >>
Пример стиля из вашего блога: a {font-size:11px; color:#333333}
Этот стиль задает размер текста ссылок в 11 пикселей и цвет темно-серый. Если стилей много, то просто пишите их через точку с запятой ;
Обычно для текстов, ссылок и прочего указываются несколько стилей. Ниже вам привожу краткое описание самых востребованных. А вообще почитайте справочник по CSS >>
- Размер шрифта
Размер шрифта задается стилем font-size:
Пример: font-size:12px - это значит размер шрифта будет 12 пикселей. Самые распространеные размеры: 10px, 11px, 12px, 13px, 14px
- Цвет шрифта
Цвет шрифта задается стилем color:
Пример: color:#ff0000 - это значит цвет шрифта красный. Список самых распространенных цветов смотрите здесь >>
- Тип шрифта
Тип шрифта задается стилем font-family:
Пример: font-family:Tahoma - это значит будет использован шрифт Tahoma. Шрифтов существует огромное количество. Не используйте редкие шрифты, они у вас есть, а у гостя блога их может и не быть.
- Цвет ссылок
Цвет ссылок задается стилем a
Пример: a {color:#ff0000} - это значит цвет ссылок будет красным.
- Цвет ссылок при наведении на них мышкой
Цвет ссылок задается стилем a:hover
Пример: a:hover {color:#0000ff} - это значит цвет ссылок при наведении на них мышкой будет синим.
- Цвет фона
Цвет фона задается стилем background-color:
Пример: background-color:#ff0000 - это значит цвет фона красный. Ссылку на список цветов смотрите выше.
- Картинка фона
Картинка фона задается стилем background-image:url(http://адрес_картинки)
Пример: background-image:url(http://dl.hostingfailov.com/preview/2c51eff5b4.jpg)
Чтобы картинка не двигалась при прокрутке надо дописать параметр: background-attachment:fixed
Пример: background-image:url(http://s08.radikal.ru/i181/1007/92/15095cda05ca.jpg); background-attachment:fixed
Дополнительные параметры.
Чтобы картинка фона не дублировалась: background-repeat:no-repeat (другие параметры: repeat, repeat-x, repeat-y)
Чтобы картинку фона выровнять: background-position:center (другие параметры: top, bottom, left, center, right)
- Отступы внутри
Отступы внутри задаются стилем padding:
Пример: padding:10px - это значит в ячейке внутри отступы от краев будут 10px со всех сторон.
Дополнительные параметры. Чтобы настроить отступ для каждой стороны индивидуально, используйте стили:
padding-left, padding-top, padding-right, padding-bottom
- Отступы снаружи
Отступы снаружи задаются стилем margin:
Пример: margin:10px - это значит в отступы от краев объекта будут 10px со всех сторон.
Дополнительные параметры. Чтобы настроить отступ для каждой стороны индивидуально, используйте стили:
margin-left, margin-top, margin-right, margin-bottom