Часть 3. Разбор CSS.
Зачем нужен Текст CSS?
CSS это таблицы стилей которые отвечают за "макияж" - цвета фона, текста, заголовков, ссылок, размер шрифта и все такое прочее.
В файле style.css располагаются описания различных стилей используемых на страницах сайта. Большинство из них имеют стандартные, общие для всех тем названия. Самы простой и эффективный способ разобраться с тем какой стиль за что отвечает, это открыьт страничку сайта в браузере и посмотреть в ее исходный HTML-код. Оттуда и можно заключить следующее (содрано с php-fusion.co.uk):
(...)
}
- определяет общий вид темы (шрифт по умолчанию, размер, отступы и т.д.)
(...)
}
a:hover {
(...)
}
a.side {
(...)
}
a:hover.side {
(...)
}
a.white {
(...)
}
a:hover.white {
(...)
}
- от этих стилей зависит облик и поведение ссылок на Вашем сайте
(...)
}
hr.side-hr {
(...)
}
- устанавливает размеры и цвет линй выводимых тэгом by <hr>
(...)
}
- фон, шрифт, окантовка кнопок.
(...)
}
- внешний вид полей ввода (пароля, например)
(...)
}
.side-border-left {
(...)
}
.side-border-right {
(...)
}
- здесь задаем отступы от границ (в пикселах) от верха, низа, левой и правой границ
(...)
}
.tbl {
(...)
}
.tbl1 {
(...)
}
.tbl2 {
(...)
}
- тут определяется облик таблиц сайта, какие, например, используются на страницах форума
(...)
}
- внешний вид процитированного (на форуме) текста
(...)
}
- это часть относится к голосованиям
(...)
}
- внешний вид в котором будут представлени ники авторов комментариев
(...)
}
.shoutbox {
(...)
}
.shoutboxdate {
(...)
}
- определяет шрифт, цвета ников и даты в мини-чате
(...)
}
.small2 {
(...)
}
- облик текста отмеченного, как small или small2
(...)
}
.gallery img {
(...)
}
.gallery:hover img {
(...)
}
img.activegallery {
(...)
}
- определеяет цвета рамок, и границы фотоальбома.
Вот основные используемые стили. В принципе тема может использовать и свои собсвенные, которые в этом случае слудет добавить в тот же файл style.css.
© Алексей "martini" Мартяшев. При использовании данных материалов ссылка на php-fusion.int.ru обязательна.
1) Классы для таблицы(table) и td - TableBody
2) OneLine и TwoLine разные для tr и для hr
Пример:
tr.OneLine { BACKGROUND-COLOR: #ffffee; }
tr.TwoLine { BACKGROUND-COLOR: #ffffff; } hr.OneLine { color: #F1DB48; } hr.TwoLine { color: #F9FD58; }
table.TableBody { border: 1px solid #D2C130; } td.TableBody { border-bottom: 1px solid #F1DB48; border-left: 1px solid #FFFD88; border-right: 1px solid #F1DB48; border-top: 1px solid #FFFD88; padding-left:5px; padding-right:5px; padding-bottom: 2px; padding-top: 2px; }
более подробно в мануале по CSS Скачать тут
