Лучшая система размещения статей
 Добавить в избранное |  Сделать стартовой 
Поиск По Сайту
Навигация
     Главная
     Форум
     Новости
     Обзор новостей
     Гостевая
     Статьи
     Файлы
     Магазин
     Пользователи
     Контакты
     О Проекте
     Карта Сайта
Вход
Логин:

Пароль:


Запомнить меня
Вам нужно Авторизоваться.
Забыли Пароль?
Регистрация
Атестат
Подписка на новости: Подписаться

Основные CSS классы

Автор: Александр Ковальский
E-Mail: webing@kmstudio.com.ua
Источник: kmstudio.ru
Добавлено: 2005-06-30 21:11:05

Документация
Основные CSS классы

Таблицы:

Эти классы используются для генерации таблиц и форм, что позволяет придать им неплохой вид. Они являются аналогами в CMS XOOPS
При создании тем, желательно хоть какойто стандарт

.outer - граница таблицы
th - заголовки таблицы
.head - верхние ячейки таблиц
.even/.odd - ячейки таблиц (контраст)
.foot - нижние ячейки таблиц

Пример:

CSS
/* Определение стандартных настроек */
table {width: 100%; margin: 0; padding: 0; font-size: small}
table td {padding: 0; border-width: 0; vertical-align: top; font-family: Verdana, Arial, Helvetica, sans-serif;}

th {background-color: #2F5376; color: #FFFFFF; padding : 2px; vertical-align : middle; font-family: Verdana, Arial, Helvetica, sans-serif;}
.outer {border: 1px solid silver;}
.head {background-color: #c2cdd6; padding: 5px; font-weight: bold;}
.even {background-color: #dee3e7; padding: 5px;}
.odd {background-color: #E9E9E9; padding: 5px;}
.foot {background-color: #c2cdd6; padding: 5px; font-weight: bold;}
.blockTitle {padding:4px; color:#FFFFFF; background:#003366; font-weight:bold;}
.blockContent {background-color: #FFFFFF;}

/* Некоторые броузеры понимают, только если назначить класс непосредственно тэгам */
tr.head td {background-color: #c2cdd6; padding: 5px; font-weight: bold;}
tr.even td {background-color: #dee3e7; padding: 5px;}
tr.odd td {background-color: #E9E9E9; padding: 5px;}
tr.foot td {background-color: #c2cdd6; padding: 5px; font-weight: bold;}


HTML 1
<table class="outer"><br>
<
tr><th>th</th></tr><br>
<
tr><td class="head">.head</td></tr><br>
<
tr><td class="even">.even</td></tr><br>
<
tr><td class="odd">.odd</td></tr><br>
<
tr><td class="even">.even</td></tr><br>
<
tr><td class="odd">.odd</td></tr><br>
<
tr><td class="foot">.foot</td></tr><br>
</
table>


Pезультат


HTML 2
<table class="outer"><br>
<
tr><th colspan="2">th</th></tr><br>
<
tr><td class="head">.head</td><td class="even">.even</td></tr><br>
<
tr><td class="head">.head</td><td class="odd">.odd</td></tr><br>
<
tr><td class="head">.head</td><td class="even">.even</td></tr><br>
<
tr><td class="head">.head</td><td class="odd">.odd</td></tr><br>
</
table>


Pезультат


HTML 3
<div class="blockTitle">blockTitle</div>
<
div class="blockContent">blockContent</div>

Pезультат

blockTitle
blockContent

***************

Элементы:
.item Рамка вокруг новости .item {border: 1px solid #cccccc;}
.itemHead Цвет фона заголовка .itemHead {padding: 3px; background-color: #2F5376; color: #FFFFFF;}
.itemInfo Цвет фона информации о новости (когда опубликова, кем и т.д.) .itemInfo {text-align: right; padding: 3px; background-color: #efefef;}
.itemTitle Цвет ссылки на раздел и заголовок новости .itemTitle a {font-size: 130%; font-weight: bold; font-variant: small-caps; color: #ffffff; background-color: transparent;}
.itemPoster Текст "опубликовано" .itemPoster {font-size: 90%; font-style:italic;}
.itemPostDate Текст даты и времени .itemPostDate {font-size: 90%; font-style:italic;}
.itemStats Цвет текста "прочтено Х раз" .itemStats {font-size: 90%; font-style:italic;}
.itemBody Поле текста новости и картинки .itemBody {padding-left: 5px;}
.itemText Текст новости .itemText {margin-top: 5px; margin-bottom: 5px; line-height: 1.5em;}
.itemText:first-letter  Первая буква новости .itemText:first-letter {font-size: 133%; font-weight: bold;}
.itemFoot Нижний колонтитул новости (читать далее и т.д.) .itemFoot {text-align: right; padding: 3px; background-color: #efefef;}
.itemAdminLink Нижний колонтитул новости (ссылки на администрирование новости) .itemAdminLink {font-size: 90%;}
.itemPermaLink Нижний колонтитул новости (Х байт) .itemPermaLink {font-size: 90%;}
 


Комментарии:

.comTitle
.comText
.comUserStat
.comUserStatCaption
.comUserStatus
.comUserRank
.comUserRankText
.comUserRankImg
.comUserName
.comUserImg
.comDate
.comDateCaption

***************

Сообщения:

div.errorMsg
div.confirmMsg
div.resultMsg

Да и ещё информация, может кто не знает:
<th>...</th> это тоже самое что и <td><center><b>...</b></center></td>

Отличные цифровые фотоаппараты для семейных торжеств.

Понравилась статья? Поделись с друзьями!
Facebook Опубликовать в LiveJournal Tweet This


Оглавление   |  ?? ????

Оглавление        Вернуться к Статье

Скачай CMS сейчас!
Текущая версия системы управления сайтом WebCodePortalSystem:
v.7.1.00
Скачать CMS v.7.1.00
Обновление с версии 6.2.01

Сайт разработчика:
Новые бета версии

На Сайте
Гостей: 16
Пользователей: 0


10 новых статей
Наши Партнеры


Copyright WebCode-Command © 2003-2012
Работает под управлением WebCodePortalSystem v. 6.2.01
Rambler's Top100